First, please download the starter files you will need.
Once you’ve unpacked the files, you will see that are two folders of images whose names show the orientation of the images inside them:
- unsplash-2020-landscape
- unsplash-2020-portrait
Next please download the screenshots.
In this exercise, you will make a front-page of a magazine-style website. There are four main areas to the page:
- header
- headlines
- arts
- footer
You will create all the HTML and CSS. You can write the HTML in any way that helps you style the content.
The HTML must be semantic, of course.
In styling the page, pay close attention to alignments, typography and layout. Consult the downloaded screenshots.
Content Creation
As noted above, you will create the content. Use Visual Studio Code’s Emmet functionality as much as possible.
To create random text in Emmet, user LoremNumber, where number = the number of words you want). For example: lorem32 will create 32 random words.
You have two approaches to the content generation:
Your articles can have exactly the same content: you could copy a single article for each section. If you choose this approach, you will have two unique article forms (one for the headlines section, one for the arts section). Each form would be repeated within its section.
But you will get additional marks if all your content is unique. If you choose this approach, all your articles will have unique random text and unique images.
If this difference doesn’t seem clear: one of the downloaded screenshots shows the layout but with the duplicated rather than unique content: pretendco-large-duplicated-articles.png
Regardless of the content generation approach you take, the layouts will remain the same.
Typography
The fonts come from Google:
- all serif type will be Cormorant Garamond
- all sans-serif type will be Fira Sans.
You decide what weights to download.
Section One: Header
The header has the following elements:
- a site name: pretendmag
- a site description: art, culture, politics
- five random links (your link words can differ from the ones in the screenshots). The links will be testing links that don’t go anywhere.
- a font awesome icon for search (you do not have to make a search form: just make the icon appear in the location and with the alignment indicated in the screenshots)
- take care to make all header content align with page content as in the screenshots you downloaded
The header will look like this at phone size:
But it will then look like this at all other sizes (the type size doesn’t have to change, unless you need it to).
Consult the bigger screenshots to see how the header items align with the other content in the page.
Section Two: Headlines Story Area
In the headlines story area, create a section-heading: headlines.
Then create 12 articles. Each article must have:
- a three-word title
- a feature image from the landscape folder
- two 14-word paragraphs
- one 7-word paragraph
Consult the screenshots for the various responsive states.
Section Three: Arts
In the arts story area, create a section-heading: arts.
Then create six articles. Each article must have:
- a two-word title
- a feature image from the portrait folder
- two 20-word paragraphs
Consult the screenshots for the various responsive states.
Section Four: Footer
The footer will look like this at all sizes:
About the Responsive States
The main characteristics of each of the screenshots you downloaded are as follows:
Small:
- header: two columns
- content: single column
- footer: single column (this remains the same for all sizes)
Medium:
- header: three columns (this remains the same for this size and bigger)
- headlines: three columns (including section title)
- arts: four columns (including section title)
Large
- headlines: five columns (including section title)
- arts: seven columns (including section title)
NOTE: in the medium and larger sizes, the column that holds the section title (headlines, arts) is always 200px wide.
Marks (if this is a test)
| Content Generation (same correct content in each article), max | 4 |
| Content Generation (different correct content in each article), max | 6 |
| Alignments | 4 |
| Responsive States | 6 |
| Typography | 4 |
| Maximum Total | 20 |
If this is Langara on campus test, please hand in the work into studentshare after first renaming your site folder to Exam-YourFirstAndLastName.
If this is a test for a Langara course delivered online (or if you’re on a laptop in a lab),
- rename the site folder Exam-YourFirstAndLastName
- compress the folder as a zip archive
- use myfiles.langara.ca to hand in the zip file into our course Hand-In Materials folder. That folder is in studentshare/semester/our-course
- if you’re having trouble with myfiles, try a browser other than Google Chrome.
- if you need to hand it in more than once, add -v2 to the zip file name