Front End

Build a basic website

Start learning with

Google

Overview

The basics of building a working website, zero experience required. Learn all the tools you need to build a basic static website and put it on the Internet, the way that professional developers do. You'll not only get the technical knowledge you need, but the concepts and best practices that real engineers use. Perfect for people who want to test the waters with development in any role.

Who curated this track

Jon Chan
  • Founder of Bento
  • Developer at Stack Overflow
  • Self-taught developer
HTML and CSS
 
Codecademy - HTML and CSS

(www.codecademy.com)

Learn using interactive lessons on the web about the languages of HTML and CSS. Go through the whole course.

7H

 
Code Guide by @mdo

(mdo.github.io)

There are a number of style guides you can find on the Internet. Here's one that's easy to follow by the co-creator of Bootstrap.

15M

 
Dash - HTML5 and CSS3

(dash.generalassemb.ly)

Learn about the modern elements of HTML and CSS and see how it comes together in projects. Complete the first three projects.

2H

Workflow
 
Writing HTML and CSS on Your Computer

(generalassembly.wistia.com)

Go beyond Codecademy and Dash and write HTML and CSS on your computer. Watch the first 11 minutes of this short video.

11M

 
Sublime Text

(code.tutsplus.com)

Sublime Text is one of the most popular text editors for writing code by professional developers. Learn how to use it with this video series. Go through everything up to the second 'Getting Started' section.

40M

Important Concepts
 
Semantic HTML

(www.w3schools.com)

Here's a list of the tags that you will need as you write HTML for your webpages. Read this through.

15M

Shell
 
Shell

(linuxcommand.org)

The shell is the most direct way to interact with your computer. It's an essential tool in any developer's kit. Pick up the basic commands you use in the command line with this tutorial.

1H

Git and GitHub
 
Try Git

(try.github.io)

Version control is a really important part of any professional developer's toolkit. It helps with saving your work, collaboration, and managing changes. Go through this entire interactive tutorial.

15M

 
GitHub

(www.youtube.com)

GitHub is a place for you to share and collaborate with others on your code. It's one of the best ways to manage your work, and a great way to get involved in the development community. Watch this video tutorial and follow along.

20M

 
GitHub Pages

(pages.github.com)

GitHub has a feature to make your webpage accessible on the Internet. Let's put your hard work somewhere for everyone to see, even if you don't think it's ready. Read this tutorial on how.

1H

What you should learn next

Front End Continued

Take your front end skills to the next level with critical skills and pick up your first real programming language: JavaScript. Learn how to make your website interactive, look good on any device, and best practices around development. The next natural step after front end basics and the perfect track for designers.