WDD 131: Dynamic Web Fundamentals

Layout Review

Overview

This learning activity is a review of HTML and CSS layout principles, focusing on core layout design and development. Mastering the workflow process - 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 subfolder named "week01" within your wdd131 local repository folder.
  2. Add a file named "basic-layout.html" to the week01 folder.
  3. Add a new subfolder within the week01 folder named "styles".
  4. Create a supporting, external CSS file named "layout.css" and place it in the 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 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, so 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/Five 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.

    "DevTools" is an abbreviation for "Developer Tools." It refers to a set of tools or utilities provided by web browsers to help developers debug, profile, and analyze web pages during the development process. The tools are typically accessed by pressing the F12 function key or selecting the menu option for the browser's developer tools.
    – What are browser developer tools? – MDN Web Docs

Check Your Understanding

  1. Commit and push your work to your GitHub Pages repository.
  2. Wait a few minutes for the server to update, then check the render of your page in a browser.
    What is the GitHub Pages enabled URL to your page? 
    https://yourgithubusername.github.io/wdd131/week01/basic-layout.html
    Does it look like the example screenshot above? If not, make corrections and push your changes.
  3. Test/audit the basic HTML and CSS of your page using this page audit ✔ tool.
  4. Continue to make corrections and adjustments as needed and remember to commit and push your changes.