Web Development Fundamentals

Now that you have a solid foundation, let's learn some web fundamentals so that you can start building awesome websites!

Requirements

HTML5
1. Understanding the evolution of HTML5 and what’s new in HTML5
2. Jade - An HTML templating language
CSS3
1. Understanding the evolution of CSS3 and what’s new in CSS3
2. Sass - A CSS preprocessor with many advantages over vanilla CSS

Start by learning the basics of HTML5 and CSS3 so that you can become familiar with building and styling static websites. Static here means that the site is not interactive and there are no "moving parts". Once you learn JavaScript from the resources in the next chapter, you'll be able to start building interactive sites and web applications!

HTML5 and CSS3 Basics

HTML5 and CSS3 are the tools used to build modern websites. Start with these introductory guided lessons to help you familiarize yourself with with front-end web design and development.

Learn to Code HTML and CSS: Learn to Code HTML & CSS is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development.
Codecademy - HTML and CSS: Learn how to create websites by structuring and styling your pages with HTML and CSS.
Learn CSS Layout: This site teaches the CSS fundamentals that are used in any website's layout.
CSS-Tricks: Arguably one of the best sites out there for learning CSS basics and advanced features. If you have a question about CSS, try googling the question with "CSS tricks" in the query to bring up any articles they might have. The comments are often useful for edge cases or learning slight nuances between different browsers and browser versions. They provide an CSS Alamanac with a full list of CSS selectors and properties. This will help you make your websites shine!

Jade - An HTML Templating Language

Jade is a templating language with a focus on getting websites built fast! It is an elegant templating language focused on enabling quick HTML coding. No more XML situps and percent prefixes for tags. It is HTML templating how it should be. It allows you to turn HTML code from this

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      if (foo) {
         bar(1 + 5)
      }
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.
      </p>
    </div>
  </body>
</html>

into this

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
         bar(1 + 5)
      }
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      p.
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.

Using indented syntax, the nesting of your elements is clear and it will be compiled into standard HTML. The ability to use the inheritance, includes, and mixin features of Jade allows you to build extensive websites quickly and easily.

I recommend going through the Learn Jade - Tour to get a grasp for the powerful features that this templating language offers. Below are more resources if you want to get deeper into Jade.

Jade - Template Engine: See the official language reference.
gulp-jade: For use in your gulp projects. This node module allows you to compile your Jade into standard HTML within your build folder.
Brett Hayes on CodePen: Check out the small example projects that use Jade and Sass on Brett Hayes' CodePen. Brett is an awesomely talented front-end developer at GoGuardian!

Sass - CSS with Superpowers

Sass is a CSS extension language. It extends the language features provided by vanilla CSS. You are able to use these features to make CSS better and easier to write. It is then compiled into regular CSS when you build your projects.

Not everyone uses CSS preprocessors, but here are some articles explaining what they are and why they are valuable.

Ten Reasons You Should Be Using a CSS Preprocessor
Sass vs. LESS: There are multiple CSS preprocessors you can choose from. CSS-Tricks offers this comparison of two of the most popular ones. At GoGuardian, we use Sass version 3 which has the .scss file extension.
What's the Difference Between Sass and SCSS: These are two different syntax styles, but at GoGuardian we use SCSS.
GoGuardian CSS / Sass Styleguide: A mostly reasonable approach to CSS and Sass.
MindBEMding – getting your head ’round BEM syntax: A helpful article on understanding BEM syntax.

Here are some guided tutorials that you can use to learn Sass.

Scaffolding, grid system, and Mixin libraries to get you started:

Grid System: At GoGuardian, we use Bourbon Neat in some of our projects for our grid system which allows us to lay out our pages in a very ordered way.
Scaffolding: Bitters - Predefined Styles for Bourbon: This library allows you to scaffold styles, variables, and structure in your project. You can use this as a base template for the styling of your website and override any aspect you want with your own custom styles. This will help you get up and running with a large project.
Mixins: Bourbon - A Light Weight Sass Toolset: A library which gives you access to tons of predefined mixins to use in your projects for instance mixins that contain up-to-date vendor prefixes for support in modern browsers.