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: If you have any problems with VS Code, you can try the Atom section at the bottom of this page. If you’d like, you can go through both sections.

VS Code

VS Code 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;
}

Web Snippets

This section contains tutorials on more complex HTML and CSS topics.

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">Hello world</a>

Website Testing

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

JavaScript

JavaScript is used to add interactivity to a web page.

console.log("Hello world!");

Text Editors 2

VS Code Tips

Learn how to be more productive in VS Code 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"

GitHub

GitHub is a website that lets you back up your coding projects and collaborate with other developers.

GitHub Desktop

GitHub Desktop is an application that lets you work with local and remote repositories using a GUI.

npm

npm is a package manager for the JavaScript ecosystem.

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;
}

Miscellaneous

Below is a collection of optional courses available on Simple Dev. They are not part of the core Path.

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
---