Checkpoint

HTMLCSSFile ManagementVS CodeFontsHTML ValidatorCheckpoint
0% completed

Introduction

It’s time to take what you’ve learned from Module 1 and apply it to your Course Assignment.

Process

Intro to HTML

  1. Open/create your index.html file in VS Code.
  2. You can use the Emmet abbreviation ! or doc to quickly create a simple HTML template.
  3. Look over your prototype and mentally divide up the home page. Which parts of the prototype is the header? Which is the main? Are there sections on the page?
  4. Add the HTML elements to the page making sure to use good semantics.
  5. Add a favicon

File Management

  1. Create the other html files for your project.
  2. Use the ! Emmet abbreviation to create a simple template in each HTML file.
  3. Link the pages together.

Intro to CSS

  1. Create a css folder in your VS Code
  2. Create a stylesheet and add it to your css folder
  3. Link to the stylesheet from your home page
  4. Start with something simple like adding colors to the page. Don’t worry about layout, that will come later. For example, if your header has a background color add it now, if text has a specific color add it now.

Fonts

  1. Determine whether your fonts are web-safe or not.
  2. If they are web-safe you can apply the fonts to the text they’re meant to style.
  3. If they aren’t web-safe you’ll need to use @font-face to load them to the browser. Whether you write the @font-face rule yourself will depend on where the font is from. If you’re using a service like Google Fonts then you’ll get a stylesheet you can load to the page, but if you just have a font file then you’ll need to write the @font-face rule yourself in the CSS file.
  4. Once you’ve applied your fonts, test if they work by viewing the site on different devices.

Questions to ask yourself about the CA so far

  • Is my HTML semantic?
  • Is my code easy to read?
  • Have I maintained a neat folder structure?
  • Are the links between pages working?
  • Is my CSS working correctly?
  • Is my CSS following DRY principles?
  • Are my fonts working properly?

To help answer these questions, you can use:

Activities

Activity 1

💻 WATCH

This tutorial video on using Emmet for your HTML (55s)

Activity 2

📖 READ

This article explaining error messages for the W3C Markup Validator (1m)

Outcomes for this module

You should now be able to say:

  • “I write neat, semantic and bug-free HTML”
  • “I can add basic styling to my website including colors and fonts”