Week 1 - Intro to HTML

Wednesday Agenda

  • Project intro
  • Meet and greet

Monday


Tuesday


Thursday

  • HTML Tables
  • HTML Validation
  • Do Week Quiz 1 in Canvas : tip quizzes are open book and untimed. It is not expected that you will know all the answers without looking things up. Instead, think of them as a checklist of things you should be familiar with (and where to find details about them). Test things out if you need to. Just don't search for the answers directly. Asking AI (or a search engine's AI summary) for the answer is a great way to go through motions without learning anything.

Course Intro

See the welcome video in Canvas. Complete the class policies quiz and the github username survey in Canvas.

Tools

VSCode

Install Visual Studio Code and recommended Extensions. See the instructions in the Tools page in Canvas.

Watch this video for important tips about working with HTML in your browser and VS Code:


Git

Install Git and set up your identity. See the instructions in the Tools page in Canvas.

That page also has links to resources for learning more about Git and some GUI options if you don't want to use the command line and/or VSCode's built in Git tools. Start with the basic instructions below, and explore those other resources as time and interest allow.


Code Samples

The code samples for this class are in the cs290 GitHub repository

Clone it so that you have easy access to the code.

Assignment

Your assignment instructions are available through Canvas. This video explains/reviews some terminology and concepts behind git and GitHub that you will need to understand to work with the assignment repositories:

This video demonstrates the practical process of cloning a repository, making changes, and pushing those changes back to GitHub:


The video demonstrates making manual commits. You should be using the Chemeketa Worklog extension (gitdoc) to automatically generate your commits as you work. You will however have to handle pushing your commits.

Early in the week you should:

  1. Create an assignment repository using the link provided in the assignment.
  2. Clone the repository.
  3. Add a file to the repository and test out pushing your changes. Add a tag to one of your commits and test pushing that as well. (Call it a0 or something like that.)

Then, you can go back later to chip away at the assignment itself. You should be ready to start it as soon as you get through the HTML Basics section of the week. (Though you will need the rest of the information from this week to finish it.)

HTML Basics

Start by watching this introduction to HTML:

Then tackle these two videos:



Basics Resources

Skim through these for more in-depth information. You do not have to memorize every detail, but you should be familiar with their contents and use them as a resource to look up anything that you are unsure of:


HTML Tables

Start by watching this introduction to HTML:


Tables Resources

Skim through these for more in-depth information. You do not have to memorize every detail, but you should be familiar with their contents and use them as a resource to look up anything that you are unsure of:


HTML Validation

Most web browsers are less picky about HTML syntax than a C++ compiler is about the code it reads. An invalid HTML document will often still render reasonably well. However, invalid documents often will exhibit inconsistent appearance and behavior across different browsers. So it is important to make sure HTML files are valid.

There are many tools available for HTML validation. VSCode will give you many warnings as you edit files. However, there are some issues it may not catch. To make SURE your pages are valid HTML, you should use one or both of the following.

This plugin for Chrome or Firefox adds an HTML Validator tab to the developer toolbar that can be used to automatically run an HTML validator.

This website allows you to upload text, or a file, or to specify a URL to check: