Path

Below you will find all of our topics organized into a path for beginners.

If you’re just starting out, you can start from the beginning. If you have some experience already, you can skip the topics you already know.

Text Editors 1

Important: Choose one of the sections below to start with. We recommend going through the Visual Studio Code section because it’s the more popular text editor. If you have any problems with Visual Studio Code, try the Atom section. If you’d like, you can go through both sections.

Visual Studio Code

Visual Studio Code is an application that lets you write code.

Atom

Atom is an application that lets you write code.

Web

HTML

HTML is used to create content for web pages.

<p>Hello world.</p>

Markdown

Markdown is a language used to create READMEs and create content in static site generators.

# Hello World

CSS

CSS is used to style web pages.

p {
  color: red;
}

JavaScript

JavaScript is used to add interactivity to a web page.

console.log("Hello world!");

Website Testing

Learn how to use browser developer tools to test and debug your websites.

Bootstrap

Bootstrap is a CSS library that contains pre-built CSS classes and components you can use to create great looking web pages with responsive layouts.

<a class="btn btn-primary" href="#" role="button">Link</a>

Text Editors 2

VS Code Tips (Optional)

Learn how to be more productive in VS Code and how to customize it.

Atom Tips (Optional)

Learn how to be more productive in Atom and how to customize it.

Command Line

Terminal

The terminal lets you control your computer using text commands.

ls

Git

Git is a version control system that lets you back up your coding projects and work on multiple versions of your project.

git commit -m "Hello world"

npm install package-name

Homebrew

Homebrew is a package manager for macOS.

brew install formula-name

More Web Tools

Less

Less is a CSS preprocessor that lets you create more reusable CSS code.

@main-color: red;

p {
  color: @main-color;
}

Sass

Sass is a CSS preprocessor that lets you create more reusable CSS code.

$main-color: red;

p {
  color: $main-color;
}

Jekyll

Jekyll is a static site generator that lets you build static websites faster by creating reusable HTML layouts and template parts.

---
layout: default
title: Hello World
---