Web Dev Basics

We'll show you how to build HTML web pages and how to build them well. Every road through the internet leads to HTML.

Here's an outline of the basics:

  1. Tools
    1. Inspector
    2. Chrome Extension
  2. Styling
    1. Layout
    2. Typography
  3. Scripts
  4. Using GitHub Pages
  5. This Site on GitHub

Tools

The tools you need for basic web development, besides a text editor, are built right into your browser.

Inspector

Open the inspector (Ctrl + Shift + I or F12 or Right Click > Inspect Element) and you will learn.

Browser Extension

The web developer extension has many useful tools in it.

Styling

Styling is done in CSS.

Layout

Layout in HTML is usually straightforward.

Typography

Make the letters legible.

Scripts

Scripts. You don't want a lot of them.

Good JS library selection criteria.

The list below can be reordered. This functionality was done with the SortableJS library, which builds on top of the native HTML Drag and Drop API.

Using GitHub Pages

Using Github Pages is simple.

  1. Create a repository called your_github_username.github.io
  2. Add a HTML file called index.html
  3. In the repository's Settings > Pages, select the Main branch and save.

This Site on GitHub

This site's code is available on GitHub.