HW Summer 2022

Web Design

Setup

Resources

Topics

HTML

HTML is a foundational language for the web. It provides the content and structure of web pages.

1: Some history, intro to HTML

Download slides: Keynote, PDF

2: More on HTML, semantic HTML

Download slides: Keynote, PDF

3: Forms

Download slides: Keynote, PDF

CSS

CSS is a styling language for the web. It allows us to style our web pages and keep content and style separate.

1: Intro

Download slides: Keynote, PDF

2: Selectors, Box Model, Positioning

Download slides: Keynote, PDF

3: Layout

Download slides: Keynote, PDF

4: Animation

Download slides: Keynote, PDF

Additional: Responsive Design

  • Using relative units
  • Using media queries

Download slides: Keynote, PDF

Additional: Advanced CSS

  • The transform property
  • Pseudo-classes
  • Pseudo-elements
  • Advanced selectors
  • Custom properties
  • Math and the calc, min, max, and clamp functions

Download slides: Keynote, PDF

JavaScript

JavaScript is a scripting language that is supported by all modern web browsers. It allows us to add interactive functionality to our web pages.

1: Intro to JavaScript and the Document Object Model (DOM)

Download slides: Keynote, PDF

2: Creating DOM Elements

Download slides: Keynote, PDF

Hosting

Static Hosting with GitHub Pages

GitHub provides free static site hosting with GitHub Pages. To get started, create a GitHub account (if you don't already have one). Then create a new public repository for your project and upload your files. Here is the full documentation for creating a GitHub Pages site.

Note that there are other ways to do static hosting for free or a small fee. I recommend GitHub pages because of its simplicity and because git and GitHub are good to be familiar with in general.

Domain Names

GitHub pages will host your site at username.github.io. If you want a custom domain name for your site you'll have to buy one through another site. Here I recommend Google Domains due to its integration with other Google products (e.g. setting up custom emails with GMail). Most domains only cost a small yearly fee ($12 for .com domains). Here is the documentation for adding a custom domain to a GitHub Pages site.

After the Course

More topics to explore after the course.