Screen-based design 3 M3
Brief: You will be creating a web page that serves as an online menu for a small restaurant. The web page will be coded from scratch using HTML and CSS (no website builders may be used).
Semantic coding and the CSS grid system
The website should be coded from scratch as plain HTML/CSS. I have worked with web design for nearly 20 years, but for the last five or so years, I’ve mainly used WordPress. I’ve not worked with SASS, flexbox, or CSS grid – my most recent efforts in hand-coding were Bootstrap based. I decided to use a tutorial as a starting point, then modified the coding from that tutorial to better fit my assignment. This included changing the font, changing the colours, and of course, rearranging the layout.
I set all menu items’ containing divs to adjust so that their heights were equal, no matter the amount of text in each item’s description. To create a more visually pleasing look, I then bottom-aligned the order button and the item price. To achieve this, I absolute-positioned the order button/price at the bottom and added a specific bottom padding for the item’s containing div – enough to hold the order button, as seen in this screenshot.
The main HTML structure for the front page consists of the following items:
- a header with the global navigation menu
- a “hero” section with the main selling point
- a section with more selling points; why choose us
- a section with the menu groups displayed (lunch bowls, small plates, large plates, sides, desserts)
- a section introducing the owners
- a footer section shared by all pages, with contact information etc
Note: For this assignment, I’ve used the HTML element “section” to set different content apart. For the header and footer sections, I could have used the HTML elements “header” and “footer”, which are supported by all modern browsers.
More on the CSS grid system
I learned how to use the CSS grid system to display a different number of columns for each section, depending on the total amount. For the menu subpage, I varied between four or three columns for desktop view, which I felt balanced well even though the rows would have different grids. My grid is constructed like this:
Note: Inside each content div there’s text, which is also set up semantically using h and p tags.
My biggest takeaway from this assignment has been the insight into the CSS grid system – an excellent and powerful tool, and something quite different from the table-based layouts we used to code “back in the day”.