Build Responsive Real-World Websites with HTML and CSS

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
Udemy Link	Buy

• 1. Lets Start This Amazing Journey! 00:05:47
• 2. READ BEFORE YOU START! .html

  PLEASE READ THIS LECTURE CAREFULLY BEFORE YOU START THE ACTUAL COURSE. THANK YOU!

  
  

  How to ask for help?

  I hope you're excited about the Omnifood project! Now, as you go through the course, you might have a question about a specific topic, or get stuck and need help.

  When that happens, you can get help in the official course Q&A section!

  
  

  👉 To use the official course Q&A, please follow the following steps:

  1. Start by spending some time trying to solve the problem on your own. This is very important for your learning process!

  2. To find errors, compare your code with the downloadable code for each section.

  3. Check if your question has already been asked before in the relevant lecture.

  4. If you can’t solve the problem, you will get help in the Q&A!

  5. If you have a small piece of code, please post it to the Q&A along with the question. For longer code, please post it to a new codepen (http://codepen.io/pen/), hit save, copy your link and share it in the Q&A.

  6. Explain your problem very specifically: that makes answering easier.

  We will try to help you as soon as possible, or also a fellow student might help you. Many students actually find that helping others helps themselves getting better and better at coding.

  
  

  Follow me around

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

  👉 I also have a YouTube channel, but I haven't found time to be active there. You can still subscribe, as I might start posting videos in the future 😉

  
  

  The CodingHeroes Chatroom

  If you like to chat with other students in real-time, help each other out or just hang out with like-minded people, I have quite an active chatroom for all students of all my courses. You can join using this invite: https://discord.gg/0ocsLcmnIZqxMSYD.

  
  

  Have Fun With the Course!

  I have built this course for you, and I want you to be as successful as possible with it!

  Here is how:

  • Watch all the lectures in the course, as they follow a logical structure, from the first to the last lecture.

  • Follow everything I do in the videos, step-by-step.

  • Take notes of important concepts or code parts, it will become very valuable later!

  • Watch the lectures in HD to see everything that I do.

  And most importantly: don't give up, even when things start to look more difficult. At the end of the course, you will get the full picture and be proud of the projects you have built!

  
  

  The Early Review Prompt

  

  Udemy will ask you to review the course very early, after about 8% of the course.

  In my opinion, the early review prompt is not fair for instructors, because right in the beginning of the course you have not actually learned anything.

  So instead of giving a rating/review right at the beginning, I'd appreciate if you could wait to give the course an honest review until you have actually learned something.

  Thank you, I really appreciate it! 😁✌️

• 3. My Resources Page (Former E-Book) .html

  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

  
  

  And now, have a ton of fun with the course! 😁

• 1. Download the Code .html

  Course Material for Section 2 and 3

  The HTML and CSS code for the project we will be developing throughout Sections 3 and 4 (HTML and CSS) can be downloaded from the resources of this lecture.

  Alternatively, you can use the following download link:

  +++ Blog Post Project Download
  

  
  

  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!

• 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

• 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

• 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

  Picking a color for a website means more then picking your favorite color and turning it into a design. It means picking the right color in order to get the desired response from your audience. Color really makes a difference. This happens because there are psychological effects behind each color.

  • Red is a great color to use when power, passion, strength and excitement want to be transmitted. Brighter tones are more energetic and darker shades are more powerful and elegant.
  • Orange draws attention without being as overpowering as red. It means cheerfulness and creativity. Orange can be associated with friendliness, confidence, and courage.
  • Yellow is energetic and gives the feeling of happiness and liveliness. Also, it associates with curiosity, intelligence, brightness, etc.
  • Green is the color of harmony, nature, life and health. Also, it is often associated with money. In design, green can have a balancing and harmonizing effect.
  • Blue means patience, peace, trustworthiness, and stability. It is one of the most beloved colors, especially by men. It is associated with professionalism, trust and honor. That's actually why the biggest social networks use blue.
  • Purple is traditionally associated with power, nobility and wealth. In your design, purple can give a sense of wisdom, royalty, nobility, luxury, and mystery.
  • Pink expresses romance, passivity, care, peace, affection, etc.
  • Brown is the color of relaxation and confidence. Brown means earthiness, nature, durability, comfort, and reliability.
• 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

  Let's quickly summarize the main content of the web design section:

  • Most of your content will be text, so beautiful typography is a key element to a good looking website.
  • Images are getting more and more important in webdesign, so choosing great images and putting text on them is an essential part of your work.
  • Icons are also a good way of setting a friendly tone for your website, but use them carefully.
  • The adequate use of whitespace makes a website look professionally designed, so use it a lot, but in the correct way.
  • Build a layout by defining the visual hierarchy of your content. Whitespace is also important for this.
  • Your website should be designed in a way that ensures that both the user and the owner of the website achieve their goals. This is the user experience.
  • It is very important that you get inspired by studying well-designed websites from other designers.
• 11. The ultimate cheatsheet all web design guidelines in one place .html

  This cheat sheet is intended to serve as a quick reference for you.

  It contains all the guidelines I showed you in this web design section.

  It is very important that you have all of the guidelines in mind at the same time when you're making your designs.

  
  

  Beautiful Typography

  1. Use a font-size between 15 and 25 pixels for body text

  2. Use (really) big font sizes for headlines

  3. Use a line spacing between 120 and 150% of the font size

  4. 45 to 90 characters per line

  5. Use good fonts

  6. Chose a font which reflects the look and feel you want for your website

  7. Use only one font

  
  

  Using Colors Like a Pro

  1. Use only one base color

  2. Use a tool if you want to use more colors

  3. Use color to draw attention

  4. Never use black in your design

  5. Choose colors wisely

  
  

  Working with Images

  1. Put text directly on the image

  2. Overlay the image

  3. Put your text in a box

  4. Blur the image

  5. The floor fade

  
  

  Working with icons

  1. Use icons to list features/steps

  2. Use icons for actions and links

  3. Icons should be recognizable

  4. Label your icons

  5. Icons should not take a center stage

  6. Use icon fonts whenever possible

  
  

  Spacing and layout

  1. Put whitespace between your elements

  2. Put whitespace between your groups of elements

  3. Put whitespace between you website's sections

  4. Define where you want your audience to look first

  5. Establish a flow that corresponds to your content's message

  6. Use whitespace to build that flow

• 1. Download the Code .html

  Course Material for Section 5 and 6

  For this project, please use an updated version of Google Chrome for website testing.Â

  
  

  First of all, here is a link the website we are going to build. I hope you like it as much as I do :)

  +++ Final Omnifood Project (After Bonus Lectures)
  

  
  

  Please download the content for our website project (images and text files) from the resources of this lecture. You can also download the material here:

  +++ Omnifood Project Contents

  
  

  Please download the fluid grid for responsive web design (more on that later) from the resources of this lecture. You can also download the CSS file from here:

  +++ Fluid Grid Download

  
  

  The HTML and CSS code for the Killer Website Project we will be developing throughout Sections 5 and 6 can be downloaded from the resources of this lecture. You can also find the code here:

  +++ Omnifood Project Code After Section 5 and 6

  
  

  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!

• 2. The 7 real-world steps to a fully functional website 00:06:13
• 3. Download the 7 steps here .html

  1. Define your project

  • Start off by defining the goal of your project. This can be showing your portfolio to the world, selling an e-book, building a blog, etc.
  • Also define your audience. Ask yourself: which is the typical user that will visit my website?
  • This is important, because you should always design with your goal and audience in mind.
  
  

  2. Plan out everything

  • Once your project is defined, plan your content carefully. This includes text, images, videos, icons, etc.
  • Remember what I told you about visual hierarchy. It plays an important role when you start thinking about what you want on your website and what you don't. Defining the content before actually starting the design is called the content-first approach. It means that you should design for the content, instead of designing a webpage and then filling it with some stuff.
  • Define the navigation.
  • Define the site structure. You can draw a sitemap in this step if we're talking about a bigger project.
  
  

  3. Sketch your ideas before you design

  • Now it's time to get inspired and think about your design.
  • Then, get the ideas out of your head. And with that I mean that you should sketch your ideas before you start designing. It will help you explore ideas and create a concept of what you want to build. Using pencil and paper is a great way of quickly retaining your valuable ideas.
  • Make as many sketches as you want, but don't spend too much time perfecting anything. Once you have an initial idea, you can concentrate on the details when designing in HTML and CSS.
  • I advise you to never, ever start designing without having an idea of what you want to build. Getting inspiration is very important in this phase, and I already told you how to do that!
  
  

  4. Design and develop your website

  • After sketching, start to design your website using all the guidelines and tips you've learned in the web design section.
  • You'll do that using HTML and CSS, which is called designing in the browser. Designing in the browser is basically designing and developing at the same time.
  • There are more and more designers leaving traditional design programs such as Photoshop and start designing in the browser. The biggest reason for this is that you can't design responsive websites in photoshop. It also saves you tons of time.
  • In this phase, you'll use your sketches, content and planning decisions you've made in steps 1, 2 and 3.
  
  

  5. It's not done yet: optimization

  • Before you can actually launch your beautiful masterpiece for the world to see it, we have to optimize its performance in terms of site speed.
  • You also need to do some basic search engine optimization (SEO) for search engines such as google.
  
  

  6. Launch the masterpiece

  • Your optimized website is now finally ready to launch.
  • All you need for launching is a webserver that will host your website and deliver it to the world.
  
  

  7. Site maintenance

  • The launch of your website is not the end of the story.
  • Now it's time to monitor your users' behavior and make some changes to your website if necessary.
  • You should also update your content regularly in order to show your users that your website is alive! For instance, a blog can be a great way of doing that.
• 4. Omnifood Project FAQs READ BEFORE YOU START! .html

  Frequently Asked Questions — Omnifood Project

  There are some questions that students keep asking me in the course Q&A. So I decided to address some of them in this document.
  

  Please read this list of questions carefully before you move on with the course. If you have one of these questions while you're building the project, you can come back here and read the answer.

  1. My code is broken and I can’t move forward in the course. What should I do?
  2. Brackets: Live preview not working. What to do?
  3. Brackets: Quick edit not working. What to do?
  4. Brackets: What are those weird JSLint warnings?
  5. How does the vertical centering in the header work?
  6. My icons are not working. What can I do?
  7. The background image looks different in the course, it doesn’t move. Why?
  8. My background images looks different on iOS devices than in the course. Why?
  9. Autoprefixer is not working. What should I do?
  10. My website is not loading correctly on a server. What’s wrong?
  11. The responsive navigation disappears after resizing the window. Why is that?
  12. There are some other problems going on with the navigation. How can I fix these?
  13. My jQuery code is not working at all. What can I do?
  14. The map is not working. What can I do?
  15. Where is the code for the bonus lectures?
  16. When do you use px and when do you use %? I’m confused by this.
  17. What’s the difference between relative and absolute positioning?
  18. What’s the main difference between classes and IDs?
  19. Why did you use the figure and ul elements for the meals section instead of just using plain img elements?
  20. What’s the difference between the body selector and the universal selector (*)?
  21. Why does the order in which we place the scripts matter?
  22. How and why does the clearfix hack work?
  23. Can I build an app/shopping cart/store with this course?
  24. What’s the difference between Bootstrap and the grid system used in the course?
  25. What’s your opinion about Wordpress, Wix, etc?

  
  

  And here go all the answers

  1. My code is broken and I can’t move forward in the course. What should I do?
  

  Don’t panic, this is completely normal :)

  Start by spending some time trying to solve the problem on your own. This is very important for your learning process! To find errors, you can compare your code with the downloadable code for each section.

  If you really can’t solve the problem on your own, please post your code to a new codepen (http://codepen.io/pen/), hit save, copy your link and start a new post in the Q&A.

  Please explain your problem in a very specific way: that will guarantee you get a good answer! You can even post a screenshot of the problem (not the code!).

  
  

  2. Brackets: Live preview not working. What to do?

  It's very difficult for me to find out what's wrong with Brackets on your computer. Sometimes it's enough to just restart Brackets or the Chrome window.

  If that doesn't help, please try the official Brackets troubleshoot guide on github:

  https://github.com/adobe/brackets/wiki/Troubleshooting#livedev

  You can also just ignore Live Preview and open the index.html file directly.

  
  

  3. Brackets: Quick edit not working. What to do?

  I have actually stopped using the quick edit functionality long ago, because it never really works as expected, so don't worry about it. You don't need to use quick edit at all. Just add the code to your CSS stylesheet wherever you see fit.

  
  

  4. Brackets: What are those weird JSLint warnings?

  These errors that Brackets shows you are because it expects pure JavaScript code, and not jQuery code, as we are using here. In other words, Brackets thinks we have errors in our JavaScript code, because it doesn't seem to understand that we're using the jQuery framework.

  
  

  5. How does the vertical centering in the header work?

  Please see the following answer about this question here:

  https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/learn/v4/questions/851800

  
  

  6. My icons are not working. What can I do?

  Sometimes using the icons on the local computer doesn't work very reliably. Please use the following icons instead:

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css"> Â
  

  
  

  7. The background image looks different in the course, it doesn’t move. Why?

  I show you how to do that effect later in the course, it appeared in one video by mistake because I produced one after all the other videos.

  But here's how you get that effect with the background image:

  background-attachment: fixed; Â
  

  
  

  8. My background images looks different on iOS devices than in the course. Why?
  

  The reason why it doesn't work is that the property:

  background-attachment: fixed; Â
  

  doesn't work on iOS devices. What we can do in this situation is to target iOS devices using media queries, and apply the following rule:

  background-attachment: scroll; Â
  

  Please take a look at this resource: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

  Alternatively, you could just ignore background-attachment: fixed;Â altogether for smaller screen widths. That should be easier.

  
  

  9. Autoprefixer is not working. What should I do?

  You can try to highlight individual sections and prefix only those sections one by one, sometimes that works.
  

  Also, it only works if you have no bugs in your CSS code at all. You can check if you have some here:

  https://jigsaw.w3.org/css-validator/

  
  

  10. My website is not loading correctly on a server. What’s wrong?

  This problem is most likely related with lowercase and uppercase filenames. On Windows or macOS it doesn't matter if you use lowercase and uppercase in filenames. However, on the server, which is typically Linux, it does matter.

  For example, if your file is called style.css and you include it in your HTML as Style.css, it won’t work on the server. So please make sure that you include all your files with the exact correct filename.

  
  

  11. The responsive navigation disappears after resizing the window. Why is that?

  This is actually a small bug in my code. There is a post in the Q&A that shows you how to solve that issue:

  https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/learn/v4/questions/821648

  
  

  12. There are some other problems going on with the navigation. How can I fix these?

  I already did that for you! I coded up a new version of the responsive navigation, it fixes all the issues there with the existing one.

  Please replace all the navigation-related CSS code in your 767px media query by the one in this fiddle:

  https://jsfiddle.net/d83ykzku/1/

  Please also replace the jQuery code for the navigation with the one you can find in the link above. You can of course change the colors and style :)

  
  

  13. My jQuery code is not working at all. What can I do?

  Has the jQuery worked before? Are you sure you included the script.js file correctly, as well as the jQuery library? Are you using the correct class names in both HTML and jQuery code?

  If your answer is YES, then post a question like I explained before.

  
  

  14. The map is not working. What can I do?

  Please take a look at this post in the Q&A where I solve one of the possible problems with this:

  https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/learn/v4/questions/1589266

  https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/learn/v4/questions/1967866

  
  

  15. Where is the code for the bonus lectures?

  Map lecture: https://jsfiddle.net/uo3uxo1f/

  PHP contact form lecture: https://jsfiddle.net/mf0ydjfq/

  
  

  16. When do you use px and when do you use %? I’m confused by this.

  Okay, that is a very good question. So, we use px and % in different situations. We use percentages more for "layout" elements, which means elements that define the layout and that we want to change according to the screen width. Also, percentages are most useful for defining horizontal distances between elements, such as widthsÂ or margin-leftÂ or margin-rightÂ , not vertical distances, because responsive web design works with screen widths (horizontal). In other words, everything that we want to change based on the screen width when the screen becomes smaller, should be defined in %.

  Also, font-sizes are always defined in %, except for the base font-sizeÂ defined for the body element, so that we can easily change font-sizes for smaller screen sizes. More about that later in Section 6.

  We use px to define some margins and paddings, and sometimes to define smaller distances and distances that doesn't need to change when the screen changes. For the paddings, please note that we can only use px here thanks to box-sizing: border-box;Â , which ensures that the box width (defined in %) always stays the same no matter how much padding we add inside of it.

  
  

  17. What’s the difference between relative and absolute positioning?

  Relative positioning simply positions the elements relative to the other elements on the webpage. Elements just appear on the website in the order they are defined in the HTML document. You can use margins to relatively position elements, i.e. to create space between elements.

  In absolute positioning, we can use the topÂ , bottomÂ , leftÂ and rightÂ properties to perfectly position an element inside its relatively positioned parent, wherever we want. This gives us a lot of control, which is extremely useful, and you will see examples of this throughout the course. We need to explicitly say that the parent has position: relative, otherwise the browser would not know where to position the absolute element.

  
  

  18. What’s the main difference between classes and IDs?

  The main difference is that you can use classes as many times as you want on each website, but IDs only once.

  This can be a problem. Imagine that you use an ID for something you think you will only use once, but later you decide you want to reuse that style. Then you'd have to go back and change from ID to class, and you’d also have to update your CSS. That's why you should only use classes and no IDs. I agree that this may not be the case with this exact project, but it will help you in the future.

  The important issue here is code maintenance. It's easier to maintain code which has just classes and not a mixture of classes and IDs. That's why I have chosen to never use IDs and recommend students to do the same. Â

  19. Why did you use the figure and ul elements for the meals section instead of just using plain img elements? (This logic applies to all questions of this type)

  Please understand that in this course I had to mix a real website with teaching things to students. That's why in some circumstances, like having the figures just with an image and no caption, I do things just to show you new elements or stuff like that. That's why I used the figure element. This gives you a foundation so that you can now go ahead and add a <figcaption>Â Â to it.

  As of the unordered list, this is just to make it more semantic. These images are, in fact, like a list of meals with an image, right? And if we feel like it's a list, then we should express that with HTML, even if it doesn't look any different in the final website. That's called semantic HTML, and it’s important to use it.

  
  

  20. What’s the difference between the body selector and the universal selector (*)?

  The universal selector simply selects each and every element on the webpage and applies the styles to all of them, unless we apply a different style somewhere else.

  The body and html are different. We apply styles to the body/html elements that will be inherited by other elements. These are most commonly styles related to text, like the font-family, font-size or font-weight properties, because these properties get inherited by other elements. This means that once we define them on a parent element, all of the child elements will also get these properties automatically. And that's why we define these right on the html and body elements, because they are the parent elements of all the other elements.

  
  

  21. Why does the order in which we place the scripts matter?

  Our own script.js file should always be the last one. That's because of the dependencies we have in our code. For example, with jQuery, we use it in our script.js file., so it's a dependency. And we need to load that dependency before we can use it, of course. And that's why the jQuery should be loaded first. And the same of course applied to other external scripts.

  
  

  22. How and why does the clearfix hack work?

  The .clearfix class has the pseudo-element :afterÂ because we want to properties, especially clear: bothÂ (which does the real work of clearing the floats) to happen at the end of the element (after) on which we use the clearfix class. As for the other properties, there is no real explanation, this is just a "hack", which means that it solves the problem in a strange way. This (or in a slightly different version) is how everybody uses the clearfix.

  
  

  23. Can I build an app/shopping cart/store with this course?

  So this course only covers HTML and CSS, which are front-end technologies, or client-based technologies, meaning that these run in the user's browser. You use them to build the user interface that the user sees and interacts with.

  Now, a shopping cart is somewhat different, because it involves some functionality, some logic, that needs to be programmed. We can't do that with HTML and CSS. This is called back-end development, and it usually involves a server and database, and you need some more advanced coding skills for it.

  You can learn some more on this blog post I wrote some time ago:

  http://codingheroes.io/blog/

  
  24. What’s the difference between Bootstrap and the grid system used in the course?

  The difference between Bootstrap and this small Grid System is that Bootstrap is an entire framework including thousands of lines of HTML, CSS and JavaScript, which you can use for quickly building a website using pre-defined building blocks. It also includes a sophisticated grid system. Now, the Grid System we use in this course is just a small CSS file which defines the rows and columns of our small fluid grid. If you look at the code, you'll see it's so simple that you could even hand-code it yourself :)
  

  I thinks it's important to learn Bootstrap as well, because it's most likely the most popular framework in the world, but it's equally important to first fully understand the fundamentals of HTML, CSS and responsive web design without any framework.

  
  

  25. What’s your opinion about Wordpress, Wix, etc?

  In my opinion, before you start creating websites using one of these tools, you should know how the underlying technologies of web development work, and that's HTML, CSS and also JavaScript (not so much covered in this course, but in a future course).

  First, knowing the fundamental building blocks of the web allows you to create 100% custom websites without any themes or constraints. You are not bound to a template or theme that someone else designed. Creativity is the only limit when you really know what you're doing, and that is very empowering.

  Second, I think it's far more professional to actually know how stuff works under the surface, then just make a website for a client using some Wordpress theme or wix template.

  And third, HTML, CSS and JavaScript are used to build web applications, so if you want to do that, you obviously will have to know them really well.

• 5. Starting to put the 7 steps into action 00:06:00
• 6. First development steps 00:14:40
• 7. Setting up the fluid grid for responsive web design 00:10:04
• 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 200:17:56
• 13. Building the favorite meals section - Part 100:12:22
• 14. Building the favorite meals section - Part 2 00:11:35
• 15. Building the how-it-works section - Part 100: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

• 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

• 1. Download the Code .html

  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!

• 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

• 1. Final touch creating a favicon00: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

• 1. You made it! Congratulations! 00:03:33
• 2. My Special Gift for You Never Stop Learning! .html

  Once Again, Congratulations on Finishing the Course!

  Now you might be wondering: "What's next?". And I have the perfect answer for that: learning JavaScript. And here are my 5 reasons why:

  Reason #1: JavaScript brings websites and web apps to live
  

  Reason #2: JavaScript can be used on the back-end as well
  

  Reason #3: JavaScript is fast to get started with
  

  Reason #4: JavaScript developers are in high demand and highly paid
  

  Reason #5: JavaScript is the future of the internet
  

  If that sounds good to you, then I have great news!

  I recently launched my new course: "The Complete JavaScript Course", and today I'm offering it to you for as little as $10 (that's 95% off the regular $195 I charge regular students).

  Please take a look at the promo video and then enrol in the course, it will make you a better and more job-ready web developer — Guaranteed! So here is your special discount:

  +++ Take The Complete JavaScript Course Now for Only $10!
  

  ...

  Now, I will be creating even more courses in the future! I hope you like to hear that :)

  So, do you wish to receive updates on my future courses, as well as exclusive discounts as soon as they launch?

  Then join my VIP students and subscribe to my email list by clicking the link below:

  +++ Subscribe to Jonas' VIP Email List +++

  ...

  Enjoyed the course? If so, please consider leaving a review.

  I would really appreciate that! It's quick and easy and it's so helpful for me and for other students who are deciding if this is a good course for them as well.

  Thank you very much for your help and for being an amazing student of this course, it was nice having you!

  Jonas

• 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
• 4. Super effective ways to improve your websites conversion 00:04:35