Web Development


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.

4.55 (48939 reviews)



12 hours


Oct 2020

Last Update
Regular Price

What you will learn

Real-world skills to build real-world websites: professional, beautiful and truly responsive websites

A huge project that will teach you everything you need to know to get started with HTML5 and CSS3

The proven 7 real-world steps from complete scratch to a fully functional and optimized website

Simple-to-use web design guidelines and tips to make your website stand out from the crowd

Learn super cool jQuery effects like animations, scroll effects and "sticky" navigation

Downloadable lectures, code and design assets for the entire project

Get helpful support in the course Q&A

Get my e-book "Best Resources for Web Design and Development with HTML5 & CSS3" for free


*** The #1 HTML5 and CSS3 course in the official Udemy rankings! ***

"Having gone through other related courses on other platforms, I can say this course is the most practical and readily applicable course on web design and development I have taken." — Bernie Pacis

Are you looking for the best way to learn how to build beautiful websites with HTML5 and CSS3? That even look great on your phone?

Have you taken other HTML and CSS courses, but still wonder how to code a real-world website, not just some basic examples?

If your answer is a big YES... Then this is exactly the course you are looking for!

So why is this course so unique and popular?

Reason #1: The course is completely project-based

Together we hand-code a beautiful and responsive landing page for a fictional company that I made up just for the course. Step-by-step, you will learn more and more HTML5 and CSS3 features, from beginner to advanced. These are the latest web technologies, used by every website in the world. And we even added some jQuery to the mix.

This huge project will teach you all the real-world skills to build real-world HTML5 and CSS3 websites. This will allow you to build any website you can imagine... From complete scratch.

Reason #2: You will not just learn how to code

Coding is great, but it's not everything! That's why we will go through the entire process of building and launching our website project. This includes designing, coding, planning, writing clean and organized code, website optimization, best practices, and so much more.

Designing is really, really important. Have you seen all these beautiful and modern websites lately? Great! Because I will show you how it's done. And not just in theory, but also in practice. This is the only course on the market that focuses on both coding and designing, together.

Reason #3: You walk away with a ready-to-launch website

By the end of the course, you will have a complete, ready-to-launch website that looks great on any computer, tablet, and smartphone. Of course you get the entire code and all the images and graphical assets that I designed especially for the course as a free download.

Please check out the promo video to see the final website!

Reason #4: I make HTML5 and CSS3 easy and fun

With the right guidance, HTML5, CSS3, and responsive web design are really easy to learn and use in the real world. With a bunch of random tutorials and YouTube videos? Not so much. That's why I structured this training around a cool and complete project that's fun to code.

Reviews: don't just take my word for it

"Most up-to-date design/developer course on Udemy!" +++ "Learnt more in my week of doing this course than in an entire year of studying" +++  "I have been doing website development for more than twenty years and I still learned from this course" +++ "I'm sure that I will be able to build even very complex websites now" +++ "Very detailed - shows you the how and why it works" +++ "I have learned so freaking much! I love the emphasis he puts on design" +++ "Jonas your support and help is second to none" +++ “The instructor is clear, knowledgeable, and very responsive to questions" +++ "Money well spent. The final project looks stunning and the resources Jonas gives are like gold" +++ "Newbie to Pro all in one course!" +++ "This has been the best course I have EVER purchased on Udemy" +++ "I had a great time learning" +++ "This course deserve 100 stars! Thank you Jonas!"

So here is exactly what we cover in this training:

• Easy-to-follow and hands-on web development with HTML5, CSS3 and some jQuery.

• The proven 7 real-world steps from complete scratch to a fully functional and optimized website.

• Simple-to-use web design guidelines and tips to make your website stand out from the crowd.

• How to get and use images, fonts and icons to make your website shine — all for free.

• Responsive web design: learn how to create websites that work beautifully on all screen sizes.

• How to use jQuery for super cool effects like animations, scroll effects and "sticky" navigation.

• How to optimize your website for good speed performance and for search engines (SEO).

• How to launch your website for the world to see it.

Let's now find out if this course is for you. It's a perfect fit if...

Student #1: You are a complete beginner with no idea on how to build a website.

Student #2: You already know some HTML and CSS from some tutorials or videos, but struggle to put together a good-looking, complete website.

Student #3: You are a designer and want to expand your skills into HTML5 and CSS3, because all your designer colleagues are learning how to code (they are smart).

Basically, if you are a master of HTML5 and CSS3, if you build the most beautiful websites in the world, then DON'T take the course. Everyone else: you should take the course, today.

Now it's your turn to decide. This is what you get:

• Lifetime access to my HD quality videos. No monthly subscription. Learn at your own pace, whenever you want.

• English captions for students with hearing impairment.

• All lectures are downloadable to make your learning experience even better.

• Downloadable code and design assets for the entire project. You can keep this code as a starting point for your own projects.

• Free helpful support in the course Q&A when you have questions or get stuck.

Sounds great? Then just click the “Take this course" button, and let's start this fantastic journey together!


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
Build Responsive Real World Websites with HTML5 and CSS3


Course introduction

Let's Start This Amazing Journey!


My Resources Page (Former E-Book)

Dive into HTML

Download the Code

Our main tool: Brackets text editor

What is HTML?

The structure of an HTML document

Starting to fill the structure

Images and attributes

One more thing: links


Formatting with CSS

Getting started with CSS

Starting to make our webpage pretty: text


Classes and ID's

The CSS box model

Building a simple layout

Polishing our blog post

Relative vs. Absolute

Getting started with the Chrome Developer Tools

CSS Quiz

Web design basics

Introduction to web design

Beautiful typography

Using colors like a pro

The meaning of colors in web design

Working with images

Working with icons

Spacing and layout

Introduction to user experience

Getting inspired: the secret ingredient for stunning web design

Wrapping up what we've learned in this section

The ultimate cheatsheet: all web design guidelines in one place

Web design quiz: test your knowledge!

The killer website project

Download the Code

The 7 real-world steps to a fully functional website

Download the 7 steps here

Omnifood Project FAQs — READ BEFORE YOU START!

Starting to put the 7 steps into action

First development steps

Setting up the fluid grid for responsive web design

Building the header - Part 1

Building the header - Part 2

Building the header - Part 3

Building the features section - Part 1

Building the features section - Part 2

Building the favorite meals section - Part 1

Building the favorite meals section - Part 2

Building the how-it-works section - Part 1

Building the how-it-works section - Part 2

Building the cities section - Part 1

Building the cities section - Part 2

Building the customer testimonials section - Part 1

Building the customer testimonials section - Part 2

Building the sign-up section - Part 1

Building the sign-up section - Part 2

Building the contact form form - Part 1

Building the contact form form - Part 2

Building the footer - Part 1

Building the footer - Part 2

Responsive web design with media queries

Making the webpage responsive - Part 1

Making the webpage responsive - Part 2

A note about web browsers

Let's add some cool effects

Download the Code

Introduction to jQuery

Building a “sticky” navigation - Part 1

Building a “sticky” navigation - Part 2

Scrolling to elements

Adding animations on scroll

Making the navigation responsive

Optimizing and launching our website

Final touch: creating a favicon

Performance optimization: site speed

Basic search engine optimization (SEO)

Let’s launch our webpage!

Google Analytics


You made it! Congratulations!

My Special Gift for You: Never Stop Learning!

BONUS lectures

What’s New in CSS: A Quick Intro to Flexbox, Part 1

What’s New in CSS: A Quick Intro to Flexbox, Part 2

Using PHP to make our form work

Super effective ways to improve your website’s conversion


Itamar9 October 2020

This is one of the best HTML5 and CSS3 course on the Internet. Jonas is an amazing instructor- He explains all the topics really well together with excellent presentations. You get to learn valuable knowledge about web development and web design. You'll learn all the theory stuff and then put them into practice on ONE BIG project. After finishing this course, you will understand the process of building a website- from idea/sketch to production.

Debbie9 October 2020

taking this course has make me learn faster about simple html and css basic things. I would say the person teaching doesn't explain deeply some things but you still can ask him those in the forum. for me is a great curse where you can start learning from the beginning. I like it, not gonna lie hahahaha its so easy to follow the indications and actually learn something useful.

Mohamed9 October 2020

Mr Jonas is a good instructor aside i already did his advances css before but then i still decided to both this while i was purchase other courses. But in truly speaking the Q & A respond is limit less but i still recommend this course to a beginner or even you are coding css little bit it will still good to discover more.

Asuka6 October 2020

The course and lecture was very informative and well structured perfect for beginners! My only wish was there should have been a section for github so we can learn how to upload there.

Leoni6 October 2020

Excellent instructor, easy to follow and good at explaining everything. Taught me a lot which is helping me at work and with my side project.

Dave27 February 2020

So far very impressed, nice momentum, learned a lot of tips and tricks. Although I have uysed CSS3 a lot, this course is still great to help me refresh after about 18 months not doing any web coding.

Mehria27 February 2020

Thank you very much Jonas! I have learned much more throughout the project completion. I do recommend this course for other students as well.

Brian26 February 2020

Very thorough walk through and I came out being able to see the bigger picture of front end web design

Jeteral26 February 2020

If you actually follow this course step by step, you will have SEVERAL AH HAH Moments! After following templates and seeing the css code and just making it work the best way I could, I am feeling confident now within this third section that I can tackle this with a certain amount of confidence just by examine the back end more. Looking forward to pushing forward in the course!

Michael26 February 2020

the videos are super quiet, I might rate higher once I get into the meat of the course. Right now I can't see how these lessons will play out by the end. So far I've recapped info I already knew and learn a couple things I either forgot or didn't know. Either way thank you.

Alexis25 February 2020

I wish Udemy wouldn't promote outdated content as much or force the teachers to update their classes. It's very frustrating to finish a course and then realize a lot of what you just learned is outdated. This is more a "code along" class where you are just following the teacher during 1 big project, without much explanation. There are 0 exercises/thinking for yourself part which in my opinion is a big problem if you actually want to learn and memorize. The teacher often speeds through his coding, which will force you to pause the videos multiple times. The project that you are coding along is very nice looking and really shows a lot of what you can do with HTML and CSS when you are knowledgeable. But sadly I don't think that you will have memorized much of that knowledge by just following this class.

Divyanshu25 February 2020

I think the course is very basic for intermediate learners who had a little knowledge, Maybe the future sections must cover some good resources.

Prasad24 February 2020

Fantastic course! I could not complete it, though. I really wonder at his passion for the subject and love his method of teaching. Thanks Jonas for the resources you provided to make a great web site. Hoping that someday I will be able to complete the course and make best use of it. Thanks a ton!

Aakro23 February 2020

The instructor understands what a beginner would know and proceeds with better clarity and takes time to brief the smallest details too.

Steve22 February 2020

the good part: This course provides so much to learn and really practical way to build every section that is often used in lots of sites. A lot of explanation of basic css code and jQuery part are the tools lifting the design to next level. not-so-good parts like: Some sections like ionicons,which are used for many times in this course, are a bit out of date as it's on version 5 now but some alternative ways to using it can be found on the Internet. But it doesn't really affect much in overall experience and progress. Overall, it's a good course for learning basic concepts and practical usage of CSS as a way of foundation building.


Expired7/19/201995% OFF


Udemy ID


Course created date


Course Indexed date
Course Submitted by

Android PlayStore
Apple Appstore