Back To The Course

Course introduction

  • Intro: Let's Start

What is HTML?

  • The structure of an HTML document
  • Starting to fill the structure
  • Images and attributes
  • One more thing: links

Formatting with CSS

  • Getting started with CSS
  • Starting to make our webpage pretty: text
  • Colors
  • Classes and ID's
  • The CSS box model
  • Building a simple layout
  • Polishing our blog post
  • Relative vs. Absolute
  • Getting started with the Chrome Developer Tools

Web design basics

  • Introduction to web design
  • Beautiful typography
  • Using colors like a pro
  • The meaning of colors in web design
  • Working with images
  • Working with icons
  • Spacing and layout
  • Introduction to user experience
  • Getting inspired: the secret ingredient for stunning web design
  • Wrapping up what we've learned in this section
  • The ultimate cheatsheet: all web design guidelines in one place

The killer website project

  • The 7 real-world steps to a fully functional website
  • First development steps
  • Setting up the fluid grid for responsive web design
  • Building the header – Part 1
  • Building the header – Part 2
  • Building the header – Part 3
  • Building the features section – Part 1
  • Building the features section – Part 2
  • Building the favorite meals section – Part 1
  • Building the favorite meals section – Part 2
  • Building the how-it-works section – Part 1
  • Building the how-it-works section – Part 2
  • Building the cities section – Part 1
  • Building the cities section – Part 2
  • Building the customer testimonials section – Part 1
  • Building the customer testimonials section – Part 2
  • Building the sign-up section – Part 1
  • Building the sign-up section – Part 2
  • Building the contact form form – Part 1
  • Building the contact form form – Part 2
  • Building the footer – Part 1
  • Building the footer – Part 2

Responsive web design with media queries

  • Making the webpage responsive – Part 1
  • Making the webpage responsive – Part 2
  • A note about web browsers

Let's add some cool effects

  • Introduction to jQuery
  • Building a “sticky” navigation – Part 1
  • Building a “sticky” navigation – Part 2
  • Scrolling to elements
  • Adding animations on scroll
  • Making the navigation responsive

Optimizing and launching our website

  • Final touch: creating a favicon
  • Performance optimization: site speed
  • Basic search engine optimization (SEO)
  • Let’s launch our webpage!
  • Google Analytics

Starting to fill the structure

Please register for Master HTML5 dan CSS3 to view this lesson.