Skip to content

Instantly share code, notes, and snippets.

@mhkeller
Last active July 19, 2024 14:33
Show Gist options
  • Save mhkeller/7ea2aa424f625d3e7e8dee484dcd24e4 to your computer and use it in GitHub Desktop.
Save mhkeller/7ea2aa424f625d3e7e8dee484dcd24e4 to your computer and use it in GitHub Desktop.
HTML, CSS and JavaScript tutorials

HTML, CSS and JavaScript tutorials

Here's a collection of guidebooks and tutorials that give the basics of HTML, CSS and JavaScript – three languages that form the basis for the modern web. The Mozilla links are documents that you can read through. The CodeCademy and other sites are interactive tutorials to get used to writing code.

For future projects, install Visual Studio Code, which is a handy text editor, useful for more than just web development (you can take interview notes in it, for example).

I think the fastest way to get up and running is to write using the Svelte REPL, which is an online interface for writing HTML, CSS and JavaScript. You can use it as a playground for quick experiments and following along with some of the tutorials.

HTML - Creating elements and text (the structure of a page)

Pay particular attention to list elements such as <ul> and <li> tags, which stand for "unordered list" and "list item," respectively.

CSS – Styling elements and controlling layout

We'll be using a lot of classes and IDs so make sure to note how those are used and the differing syntax for each:

  • Classes are written in HTML like <div class="my-fun-class"></div> and are referenced from CSS with a . before the name like this .my-fun-class.
  • IDs show up in HTML like <div id="my-fun-id"></div> and are referenced from CSS with a # before the name like this .my-fun-id.

JavaScript – Manipulating the page, extracting information, organizing data

We won't be using much JavaScript but it's good to understand the basics of variables. Pay particular attention to query selections like document.querySelector, document.querySelectorAll and document.getElementById and how to extract text with .textContent and .getAttribute(). Also pay attention to lists and their associated methods of .map and .filter, which will be very important.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment