WDD 230: Web Frontend Development I

CSS Layout Review

Overview

This learning activity is a review of layout principles in HTML and CSS. The focus is on a CSS Grid layout.

Prepare

Activity Instructions

File and Folder Setup

Example Screenshot of File and Folder Setup in VS Code
Figure 1: VS Code Screenshot - Setup
  1. In VS Code, add a new sub-folder named "week01" within your wdd230 local repository folder.
  2. Add a file named "holygrail.html" to the week01 folder.
  3. Add a new sub-folder within the week01 folder named "styles".
  4. Create a supporting, external CSS file named "holygrail.css" and place it in styles folder.

HTML

  1. In the holygrail.html file, build out the HTML with a standard structure.
    Consider using an Emmet shortcut in VS Code by typing html5 or just an ! and then hit the tab key on a blank screen in the HTML document. This action will build a core HTML structure.
  2. Properly link the CSS file in the head of the HTML document.
  3. Copy the HTML from the given ⚙️CodePen and place it inside the opening and closing body tags of your HTML document.

CSS

  1. Copy the given CSS from the ⚙️CodePen into the CSS file.
  2. Using CSS, change the layout provided to add nav element after the header. It should span the given layout like the header.
  3. Delete the left sidebar section.
  4. Refactor the grid to accommodate the the new sections in the layout.
Screenshot of Holy Grail Layout Alteration showing nav and one aside.
Figure 2: Example Solution Screenshot
Example Solution

⚙️CodePen

Testing

Submission

Application to this class

Please do not apply CSS grid to the body tag of your assignments for this class. We will use CSS grid to layout different sub sections of the main tag so you can demonstrate your design prowess. 😊