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 Lesson
Next Topic

60. Download the Code

Build Responsive Real World Websites with HTML5 and CSS3 Section 7: Let’s add some cool effects 60. Download the Code
Lesson Progress
0% Complete

Download the Code

Course Material for Section 7

The HTML, CSS and jQuery code that will be added to the project throughout this section can be downloaded from the resources of this lecture.

+++ Omnifood Project Code After Section 7

If you have a problem or question in a certain lecture, please revise it and compare it with the downloadable project before you post a new discussion. If that doesn’t help please post the problem in the Q&A of that lecture.

Please include a detailed description of the problem, as well as your code. Paste your relevant code to a CodePen and share the link in the Q&A.

Thank you, and have fun with this section!Resources for this lecture

Previous Lesson
Back to Lesson
Next Topic