WDD 131: Dynamic Web Fundamentals

HTML and CSS 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. In addition, 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.

Prepare

• Watch: The holy grail layout segment (7:45-10:03) of 10 Modern Layouts - Google Chrome Developers. (~2.5m)

  This CodePen provides an opportunity for you to work with the layout demonstrated in the video.

• Review: This CodePen gives an example of using CSS Flex in a navigation menu.

Activity Instructions

File and Folder Setup

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.
2. Use CSS Flex to support the navigation menu.
3. The color schema and font family choices are yours.

Test Page

Remember that you can check your work using Live Server through VS Code locally. The Live Server extension allows you to open the page locally in your browser.

Check Your Understanding

• Commit and push your work to your GitHub Pages repository.

  Demonstration Video: ► Working with GitHub and VS Code

• After waiting for a few minutes for the server to update, check the render of the page in a browser. Does it look like the example screenshot above?

  Example URL: https://yourgithubusername.github.io/wdd131/week01/basic-layout.html

• Audit the basic HTML and CSS of your page using this Page Audit Tool.
• Make corrections as needed, test, and then commit and push/upload your changes.