Week 1 - Intro to HTML

Wednesday Agenda

• Github review
• Project intro

Recommended Schedule

Monday

• Course Intro
• Tool Setup
• Start HTML Basics

Tuesday

• Continue HTML Basics
• Clone the assignment repository and test it out

Thursday

• HTML Tables
• HTML Validation
• Do Week Quiz 1 in Canvas

Course Intro

See the welcome video in Canvas. Complete the class policies quiz.

Tools

VSCode

Install Visual Studio Code and recommended Extensions following. See Links for details

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

Git

Install git - see Links for details and extra resources.

This video explains how we will use git for core tasks. If you didn't just see it in CS260, check it out now:

If you completed the git crash course in CS162 and/or CS260, you should be good to go. Otherwise, make sure to work through parts 0-3.

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.

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:

• MDN Introduction to HTML This is a series of pages covering the basics.
• MDN Images in HTML Don't worry about Responsive Images for now.

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:

• MDN HTML Tables

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.

• Local HTML Validator for Chrome/Firefox

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

• Nu HTML Validator

Assignment

Your assignment instructions are available through Canvas.

The assignment code you will submit via Github. If you are unfamiliar with this from CS260, work through part 4 of the git crash course.

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 committing/pushing your changes.

This video demonstrates what the process will look like:

Then, 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.)