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 simplified the suggested javascript so that the only function remaining altered the look of the top menu items when active; I removed several “fancy” features from the HTML (menu item rating, search), and I removed some sections and added others – for instance, a presentation of the restaurant owners.

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.

vertical align

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:

  • #section
    • .container
      • .box
        • .image
        • .content

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”.

Menu grid and item bottom padding


The prototype was coded as a one-pager while I expanded it to include two subpages, both laid out from scratch by me. The prototype can be seen in the below screenshot, along with a temporary version of my n.Eat assignment as well as the final result.