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.

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