WDD 131: Dynamic Web Fundamentals

Layout Review

Overview

This learning activity is a review of layout principles in HTML and CSS. The focus is on reviewing prerequisite knowledge on core HTML and CSS layout design and development. Reviewing and practicing the workflow of writing code in VS Code, testing, committing, and pushing your work to your GitHub repository is critical to your success in the course.

Task

Create the following layout with placeholder content.

HTML and CSS Layout Review Screenshot
HTML and CSS Layout Review Screenshot
Associated Course Learning Outcome

Develop responsive web pages that follow best practices and use valid HTML and CSS.

Prepare

Activity Instructions

File and Folder Setup

Example Screenshot of File and Folder Setup in VS Code
Screenshot of File Structure
  1. In VS Code, add a new sub-folder named "week01" within your wdd131 local repository folder.
  2. Add a file named "basic-layout.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 "layout.css" and place it in styles folder.

HTML

  1. In the basic-layout.html file, use semantic HTML to support the given layout.

    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. Ensure that your navigation container element is contained within the header element.
  3. Include the placeholder content, e.g., "Header Content", etc.
  4. Link the external CSS file.
  5. Always use appropriate title content. In this assignment, include your name and WDD 131.

CSS

  1. Use CSS Grid on the body of the document to support the given layout.

    Typically you should avoid using Grid on the <body> element because of it would be harder to override styles for specific sections and because of maintainability with more complex layouts. If you need to use Grid on the <body> element, consider using a separate container element for the body and then applying Grid to that container. This activity's website has a straightforward structure with clearly defined sections and using Grid on the <body> is an efficient choice.

  2. Use CSS Flex on the navigation menu.
  3. The color schema and font family choices are yours to make.

Test Page

  1. Check your work by loading your page into your browser using Live Server through VS Code.
  2. Validate your HTML and CSS.
  3. Use DevTools Lighthouse for a deeper dive into your page's performance, accessibility, and adherence to best practices.

Check Your Understanding

  1. Commit and push your work to your GitHub Pages repository.
  2. After waiting for a few minutes for the server to update, check the render of the page in a browser.
    What is the URL to your page? 
    https://yourgithubusername.github.io/wdd131/week01/basic-layout.html
    Does it look like the example screenshot above?
  3. Audit the basic HTML and CSS of your page using this page audit tool.
  4. Make corrections as needed, test, and then commit and push/upload your changes.