Build Responsive Real World Websites with HTML5 and CSS3
Build Responsive Real World Websites with HTML5 and CSS3

The easiest way to learn modern web design, HTML5 and CSS3 step-by-step from scratch. Design AND code a huge project.
Created by Jonas Schmedtmann
Language English

Build Responsive Real World Websites with HTML5 and CSS3

Build Responsive Real World Websites with HTML5 and CSS3
Build Responsive Real World Websites with HTML5 and CSS3

The easiest way to learn modern web design, HTML5 and CSS3 step-by-step from scratch. Design AND code a huge project.
Created by Jonas Schmedtmann
Language English
1. Course introduction
  • 1. Lets Start This Amazing Journey! 00:05:47
  • 2. READ BEFORE YOU START! .html
  • 3. My Resources Page (Former E-Book) .html
2. Dive into HTML
  • 1. Download the Code .html
  • 1.1 blog post .zip
  • 2. Our main tool Brackets text editor 00:03:20
  • 3. What is HTML 00:02:12
  • 4. The structure of an HTML document 00:05:23
  • 5. Starting to fill the structure 00:07:57
  • 6. Images and attributes 00:04:37
  • 7. One more thing links 00:04:54
  • 8. HTML Quiz .html
3. Formatting with CSS
  • 1. Getting started with CSS 00:04:03
  • 2. Starting to make our webpage pretty text 00:09:53
  • 3. Colors 00:05:31
  • 4. Classes and IDs 00:05:39
  • 5. The CSS box model 00:07:32
  • 6. Building a simple layout 00:18:58
  • 7. Polishing our blog post 00:09:39
  • 8. Relative vs. Absolute 00:04:35
  • 9. Getting started with the Chrome Developer Tools 00:06:23
  • 10. CSS Quiz .html
4. Web design basics
  • 1. Introduction to web design 00:03:47
  • 2. Beautiful typography 00:08:54
  • 3. Using colors like a pro 00:06:45
  • 4. The meaning of colors in web design .html
  • 5. Working with images 00:04:54
  • 6. Working with icons 00:03:29
  • 7. Spacing and layout 00:03:42
  • 8. Introduction to user experience 00:02:50
  • 9. Getting inspired the secret ingredient for stunning web design 00:02:25
  • 10. Wrapping up what weve learned in this section .html
  • 11. The ultimate cheatsheet all web design guidelines in one place .html
  • 12. Web design quiz test your knowledge! .html
5. The killer website project
  • 1. Download the Code .html
  • 1.1 Omnifood Contents .zip
  • 1.2 grid .css
  • 1.3 Omnifood - After Section 6 .zip
  • 2. The 7 real-world steps to a fully functional website 00:06:13
  • 3. Download the 7 steps here .html
  • 4. Omnifood Project FAQs READ BEFORE YOU START! .html
  • 5. Starting to put the 7 steps into action 00:06:00
  • 5.1 OmnifoodContents .zip
  • 6. First development steps 00:14:40
  • 7. Setting up the fluid grid for responsive web design 00:10:04
  • 7.1 Grid .css
  • 8. Building the header - Part 1 00:16:08
  • 9. Building the header - Part 2 00:21:59
  • 10. Building the header - Part 3 00:20:09
  • 11. Building the features section - Part 1 00:15:07
  • 12. Building the features section - Part 2 00:17:56
  • 13. Building the favorite meals section - Part 1 00:12:22
  • 14. Building the favorite meals section - Part 2 00:11:35
  • 15. Building the how-it-works section - Part 1 00:09:09
  • 16. Building the how-it-works section - Part 2 00:17:27
  • 17. Building the cities section - Part 1 00:12:43
  • 18. Building the cities section - Part 2 00:16:17
  • 19. Building the customer testimonials section - Part 1 00:06:06
  • 20. Building the customer testimonials section - Part 2 00:15:29
  • 21. Building the sign-up section - Part 1 00:09:53
  • 22. Building the sign-up section - Part 2 00:18:57
  • 23. Building the contact form form - Part 1 00:16:33
  • 24. Building the contact form form - Part 2 00:09:25
  • 25. Building the footer - Part 1 00:06:42
  • 26. Building the footer - Part 2 00:18:20
6. Responsive web design with media queries
  • 1. Making the webpage responsive - Part 1 00:19:47
  • 2. Making the webpage responsive - Part 2 00:21:45
  • 3. A note about web browsers 00:12:42
7. Lets add some cool effects
  • 1. Download the Code .html
  • 1.1 Omnifood-After-Section-7 .zip
  • 2. Introduction to jQuery 00:09:51
  • 3. Building a sticky navigation - Part 1 00:12:53
  • 4. Building a sticky navigation - Part 2 00:10:53
  • 5. Scrolling to elements 00:10:10
  • 6. Adding animations on scroll 00:14:39
  • 7. Making the navigation responsive 00:20:15
8. Optimizing and launching our website
  • 1. Final touch creating a favicon 00:05:11
  • 2. Performance optimization site speed 00:12:12
  • 3. Basic search engine optimization (SEO) 00:08:23
  • 4. Lets launch our webpage! 00:09:19
  • 5. Google Analytics 00:05:47
9. Conclusion
  • 1. You made it! Congratulations! 00:03:33
  • 2. My Special Gift for You Never Stop Learning! .html
10. BONUS lectures
  • 1. Whats New in CSS A Quick Intro to Flexbox Part 1 00:31:40
  • 1.1 Final Project on Codepen .html
  • 2. Whats New in CSS A Quick Intro to Flexbox Part 2 00:22:11
  • 3. Using PHP to make our form work 00:23:30
  • 3.1 mailer-new.php .zip
  • 4. Super effective ways to improve your websites conversion 00:04:35