Build Responsive Real World Websites with HTML5 and CSS3

Section 1: Course introduction
3 Topics
1. Let’s Start This Amazing Journey!
2. READ BEFORE YOU START!
3. My Resources Page (Former E-Book)
Section 2: Dive into HTML
8 Topics
4. Download the Code
5. Our main tool: Brackets text editor
6. What is HTML?
7. The structure of an HTML document
8. Starting to fill the structure
9. Images and attributes
10. One more thing: links
Quiz 1: HTML Quiz
Section 3: Formatting with CSS
10 Topics
11. Getting started with CSS
12. Starting to make our webpage pretty: text
13. Colors
14. Classes and ID’s
15. The CSS box model
16. Building a simple layout
17. Polishing our blog post
18. Relative vs. Absolute
19. Getting started with the Chrome Developer Tools
Quiz 2: CSS Quiz
Section 4: Web design basics
12 Topics
20. Introduction to web design
21. Beautiful typography
22. Using colors like a pro
23. The meaning of colors in web design
24. Working with images
25. Working with icons
26. Spacing and layout
27. Introduction to user experience
28. Getting inspired: the secret ingredient for stunning web design
29. Wrapping up what we’ve learned in this section
30. The ultimate cheatsheet: all web design guidelines in one place
Quiz 3: Web design quiz: test your knowledge!
Section 5: The killer website project
26 Topics
31. Download the Code
32. The 7 real-world steps to a fully functional website
33. Download the 7 steps here
34. Omnifood Project FAQs — READ BEFORE YOU START!
35. Starting to put the 7 steps into action
36. First development steps
37. Setting up the fluid grid for responsive web design
38. Building the header – Part 1
39. Building the header – Part 2
40. Building the header – Part 3
41. Building the features section – Part 1
42. Building the features section – Part 2
43. Building the favorite meals section – Part 1
44. Building the favorite meals section – Part 2
45. Building the how-it-works section – Part 1
46. Building the how-it-works section – Part 2
47. Building the cities section – Part 1
48. Building the cities section – Part 2
49. Building the customer testimonials section – Part 1
50. Building the customer testimonials section – Part 2
1 of 2
Section 6: Responsive web design with media queries
3 Topics
57. Making the webpage responsive – Part 1
58. Making the webpage responsive – Part 2
59. A note about web browsers
Section 7: Let’s add some cool effects
7 Topics
60. Download the Code
61. Introduction to jQuery
62. Building a “sticky” navigation – Part 1
63. Building a “sticky” navigation – Part 2
64. Scrolling to elements
65. Adding animations on scroll
66. Making the navigation responsive
Section 8: Optimizing and launching our website
5 Topics
67. Final touch: creating a favicon
68. Performance optimization: site speed
69. Basic search engine optimization (SEO)
70. Let’s launch our webpage!
71. Google Analytics
Section 9: Conclusion
2 Topics
72. You made it! Congratulations!
73. My Other Courses + Updates
Previous Topic
Next Lesson

3. My Resources Page (Former E-Book)

Build Responsive Real World Websites with HTML5 and CSS3 Section 1: Course introduction 3. My Resources Page (Former E-Book)
Lesson Progress
0% Complete

My Resources Page (Former E-Book)

This course used to come with an e-book fully packed of resources to design and build beautiful websites.

????The e-book was getting outdated, and so I decided to transform the e-book into a free webpage that I can easily update as I find new great resources!  This is 10x better than the e-book! Here is the link:

???? Jonas’ resources page

???? If you want to get updates on new courses or other stuff, just follow me on twitter @jonasschmedtman

???? We have a very friendly student community on Discord, where you can learn together with many like-minded people. Join by clicking here!

And now, have a ton of fun with the course! ????✌️

Previous Topic
Back to Lesson
Next Lesson