For this exercise, please first download these files.
Once you unzip the files, you will see that there is a begin-here.html file, a screenshots folder, and a folder of images.
In the begin.html file, there are a number of tables that have been marked up already. Some images are also already in the HTML.
You will need to add more markup throughout the document, including in the sections for which I have given you markup.
Make the markup semantic, of course.
Behaviour of the Page
I have made a movie that is available here (revised January 2024).
It describes how the page will behave at the various responsive sizes.
Grid Resources
If any of the grid alignments are confusing, a good source of information is the CSS Tricks Complete Guide to Grid.
The links below also cover grid and subgrid in detail. For this exercise, the align- properties are definitely important.
- CSS Grid Properties
- CSS Auto-Fit & Auto-Fill Demonstration
- CSS Subgrid Essentials
- CSS Subgrid Demonstration: Friends of Subgrid Layout
The Screenshots
There are three responsive states shown in the main screenshots: phone, medium, and large.
Note: if we have not yet covered transitions or using JavaScript events to make changes to element classLists, you do not need to make the menu button treatment.
Instead, just make the menu look like it does in the Small screenshot.
Limitations of the Screenshots
Social Icons
The social icons in the menu were chosen a number of years ago, when this exercise was devised. The last I looked, the Trip Advisor icon had appeared to have disappeared from Font Awesome.
If this is still the case, replace that icon with that of another social media company of your choice.
Typography
The fonts used are from Google: spectral for all text, except spectral sc (small-caps) for headings. You choose appropriate weights.
The Header Area
The text of the word EATERY is an SVG graphic. For semantics, there is also the actual text there: the name of the restaurant. Hide that text while keeping it accessible. Put the image and the text inside a single H1.
Make the links go to their respective sections of the page when clicked (ie clicking LUNCH will take the user to the LUNCH menu).
The Meal Time Sections
Each meal time section (breakfast, lunch, dinner) has three tables (entrees, side dishes, drinks). These are included in the HTML already already.
Note: you can freely modify any of the HTML I have supplied.
Each section also needs to have a background image. There is an image named for each section.
At the medium and large screen sizes, the background images will exhibit the parallax effect: as each section scrolls, it will reveal more of the background image. The box will move, but the image will not. The background image will no longer appear on screen when its associated box is no longer on the screen.
Make sure that this parallax effect is not happening at the phone size.
You will need to research a couple things to do this part:
- the various background properties
- table properties
The Staff Area
After the food menus, the staff area should be easy to do.
Consult the screenshots and video.
The Blog Area
For the blog area, you will need to generate the HTML.
Here you will need to insert:
- the section title (“Blog”)
- six articles, each with:
– a random image from https://picsum.photos
– a title of six words of lorem ipsum
– a paragraph with 17 words of lorem ipsum
Once you have inserted that content, change the number of words in the first title to three.
Then change the number of words in the last title to two.
(This will look slightly different than the screenshots, but that’s OK.)
You will need to utilize subgrid here (and in the Staff area) in order to keep the heading alignments working as demonstrated in the description video.
The FOOTER Menu
In the footer you will need to put another menu, with four links. This menu will show up only at phone size. The first three links will take the user to the associated meal time section (breakfast, lunch, dinner).
The fourth link will be to call the restaurant (604-555-1212). Tapping the link on a phone must dial the number..
You will need to create this html.
Consult the screenshots to see what this menu will look like.
When Done
Rename the project folder lastname-firstname-eatery and then zip the folder up and hand it into BrightSpace.