Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Build Responsive Real World Websites with HTML5 and CSS3
Course introduction
Let's start this amazing journey (4:02)
READ THIS BEFORE YOU START!
First things first: download your free e-book here
E-Book Resources 2.0
Follow Jonas around!
Web design basics
Beautiful typography (8:54)
Using colors like a pro (6:45)
The meaning of colors in web design
Working with images (4:54)
Working with icons (3:29)
Spacing and layout (3:42)
Introduction to user experience (2:50)
Getting inspired: the secret ingredient for stunning web design (2:25)
Wrapping up what we've learned in this section
The ultimate cheatsheet: all web design guidelines in one place
Dive into HTML
Our main tool: Brackets text editor (3:20)
Where to find the HTML and CSS code for this mini-project
What is HTML? (2:12)
The structure of an HTML document (5:23)
Starting to fill the structure (7:57)
Images and attributes (4:38)
One more thing: links (4:54)
Formatting with CSS
Getting started with CSS (4:03)
Starting to make our webpage pretty: text (9:53)
Colors (5:31)
Classes and ID's (5:39)
The CSS box model (7:33)
Building a simple layout (18:58)
Polishing our blog post (9:39)
Relative vs. Absolute (4:35)
Getting started with the Chrome Developer Tools (6:23)
The killer website project
Some INSTRUCTIONS for the killer website project
The 7 real-world steps to a fully functional website (6:13)
Download the 7 steps here
Starting to put the 7 steps into action (6:00)
First development steps (14:40)
Setting up the fluid grid for responsive web design (10:04)
Building the header - Part 1 (16:08)
Building the header - Part 2 (21:59)
Building the header - Part 3 (20:10)
Building the features section - Part 1 (15:07)
Building the features section - Part 2 (17:56)
Building the favorite meals section - Part 1 (12:22)
Building the favorite meals section - Part 2 (11:35)
Building the how-it-works section - Part 1 (9:10)
Building the how-it-works section - Part 2 (17:27)
Building the cities section - Part 1 (12:43)
Building the cities section - Part 2 (16:17)
Building the customer testimonials section - Part 1 (6:06)
Building the customer testimonials section - Part 2 (15:30)
Building the sign-up section - Part 1 (9:53)
Building the sign-up section - Part 2 (18:58)
Building the contact form form - Part 1 (16:33)
Building the contact form form - Part 2 (9:25)
Building the footer - Part 1 (6:42)
Building the footer - Part 2 (18:20)
Responsive web design with media queries
Making the webpage responsive - Part 1 (19:47)
Making the webpage responsive - Part 2 (21:45)
A note about web browsers (12:42)
Let's add some cool effects
Where to find the jQuery code for the killer website project
Introduction to jQuery (9:51)
Building a “sticky” navigation - Part 1 (12:53)
Building a “sticky” navigation - Part 2 (10:53)
Scrolling to elements (10:10)
Adding animations on scroll (14:39)
Making the navigation responsive (20:15)
Optimizing and launching our website
Final touch: creating a favicon (5:11)
Performance optimization: site speed (12:12)
Basic search engine optimization (SEO) (8:23)
Let’s launch our webpage! (9:19)
Google Analytics (5:47)
Conclusion
What to do now?
You made it! Congratulations! (3:33)
BONUS lectures
Adding a map to the Omnifood website (19:18)
Using PHP to make our form work (23:31)
Super effective ways to improve your website’s conversion (4:35)
The meaning of colors in web design
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock