In this exercise, you will build a responsive page. You will use grid and flex, transitions, and a small amount of JavaScript.
If this is a test, be sure to check what each section is worth.
Demo Movie
Here is a Loom video describing the layout and page behaviour.
Starter Content: Font Awesome Icons
First, please download the starter content.
There is a folder of screenshots in the downloaded content. They show the layout from largest to smallest size.
Image number one shows the menu expanded. This is not in response to the screen width: it’s in response to the INFO button having been clicked. My apologies if that’s confusing.
The starter content contains the site title heading and two nav menus, with the icons and text supplied.
You will need to create the rest of the content in the document.
Content (10 marks)
Set all text in the document to the System UI font stack. Choose appropriate font-weights.
The document has 15 articles. Each article has:
- a random feature webp image from picsum.photos. It must be greyscale—without using CSS: in other words, it must download as a greyscale webp file.
- a headline with seven words of unique lorem ipsum
- two paragraphs, each with twenty-six words of unique lorem ipsum
- an info section.
This area is initially hidden, but slides up on the article image from below (on all the articles) when the INFO button is clicked. The info section has the following:
– a translucent background color
– an icon of a camera,
– a random name
– a random date (short form)
– a company name, random (use BBC, CBC, Reuters, and The Associated Press, UK Ministry of Defense
[The Text Power Tools Extension will help here. Use the command Generate Random Items from User Input ]
In the site-heading, the type size scales with the browser width. At all times, it wraps onto at least two balanced lines. Investigate the use of the text-wrap property to achieve this.
Layout
Phone View (20 marks)
The site title and links are centered. The links are arranged left to right. The articles stack in a single column.
Make everything look as close as possible to this screenshot.
Tablet and Larger Views (20 marks)
Two Big Hints For The Medium, Large, and Extra-Large Layouts
- you can do transitions between column widths in grid
- the overflow property is your friend.
- The menus appear on the left and the right.
The text of each link is not visible. Do not use inaccessible techniques like display:none. Think about the hints I gave earlier. - With every 300px of screen width, another column is added
- However, the maximum number of columns never goes beyond four.
- At medium size, every fifth article gets twice as wide and twice as tall
Please see the screenshots and the Loom video.
Behaviour
Hover Conditions (20 marks)
This applies to the tablet and desktop sizes only.
Initially, the text of each link is not visible. It must remain accessible, however, so you cannot use display:none here.
When the user mouses over a link, the text in all menu items on that side appears: the rest of the content slides over, with a transition.
See the video for this behavior.
I gave you two hints earlier in this exercise. They will be very useful here.