Introduction to HTML and CSS

For the first day of CPNT 260, we will be covering some of the basics of HTML and CSS

Housekeeping

  • Marks returned for CPNT 201 Achievements 1 and 2
  • CPNT 260 Assignment Overview
    • Achievements: 10 x 3%
    • Assignments: 4 x 10%
    • Final Project: 30%
  • Assignment 1: Text Column
    • Weight: 10%
    • Due: Friday January 19th @ 11:59pm

1. Git Review

We’ll do a quick review of Git and introduce you to the VS Code Git panel.

Activity: Draw Toast but with Git

In groups of 3 or 4, draw out the steps needed to push changes to a GitHub repo.

2. Structure of a website

Slides: What structure should a website have?

Materials

3. Hello Vanilla

A simple one page website. Although this one is broken!

Materials

4. Introduction to HTTP

Slides: Introduction to HTTP

5. The Triad

Slides: The Browser Triad

Materials

6. Better Search Phrases

Slides: Better Search Phrases

Today's Achievement

Pair Coding!

Materials

Instructions

Download or clone Hello Vanilla into your workspace.

  1. Identify asset files in the root directory that should be in dedicated folders:
    • CSS files should be in a css directory;
    • Javascript files should be in a js directory;
    • Images (jpg, png, svg, etc) should be in an images directory.
  2. For each of the files you identified, create a dedicated directory in the project root.
  3. Move each identified file into the appropriate directory.
  4. Ensure the names of all files and directories conform to accepted naming conventions.
  5. Fix any links to these files that may have broken when you moved the files. The project should operate just as it did before you moved the files.

More Challenges!

In today’s daily achievement dropbox, submit the following:

  • Download your github repo by selecting the Download ZIP option in github and upload to Brightspace.
  • Include the following as a comment in your Brightspace submission:
    • link to GH repo
    • If you get to the Medium difficulty level of the challenge, include the link to GH Pages site

Lesson Prep

Videos

Mozilla Developer Network

This is the official textbook for this course (as well as CPNT 262). These two Guides will get you started with HTML and CSS but you are encourage to check out more of their content as needed:

Optional: Free Online Courses

There are a lot of courses available online but these are recommended for beginners:

  • Mimo
    • This site has many courses for different languages but their Web Development stream comes highly recommended by past students.
  • Free Code Camp
    • This is probably one of the most well known online course.