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.

All Levels 4.5(33,481 Ratings) 156,437 Students enrolled
Created by Jonas Schmedtmann Last updated 12/2019 English English
What will i learn?

Curriculum for this course
80 Lectures 11:51:39
Course introduction
1 Lectures 00:05:47
  • Let's Start This Amazing Journey! 00:05:47
  • READ BEFORE YOU START! 00:01:59 My Resources Page (Former E-Book) 00:00:21
  • Our main tool: Brackets text editor 00:03:20
  • What is HTML? 00:02:12
  • The structure of an HTML document 00:05:23
  • Starting to fill the structure 00:07:57
  • Images and attributes 00:04:37
  • One more thing: links 00:04:54
  • HTML Quiz 10 questions
  • Download the Code 00:00:33
  • Getting started with CSS 00:04:03
  • Starting to make our webpage pretty: text 00:09:53
  • Colors 00:05:31
  • Classes and ID's 00:05:39
  • The CSS box model 00:07:32
  • Building a simple layout 00:18:58
  • Polishing our blog post 00:09:39
  • Relative vs. Absolute 00:04:35
  • Getting started with the Chrome Developer Tools 00:06:23
  • CSS Quiz 10 questions
  • Introduction to web design 00:03:47
  • Beautiful typography 00:08:54
  • Using colors like a pro 00:06:45
  • Working with images 00:04:54
  • Working with icons 00:03:29
  • Spacing and layout 00:03:42
  • Introduction to user experience 00:02:50
  • Getting inspired: the secret ingredient for stunning web design 00:02:25
  • Web design quiz: test your knowledge! 10 questions
  • The meaning of colors in web design 00:00:58 Wrapping up what we've learned in this section 00:00:39 The ultimate cheatsheet: all web design guidelines in one place 00:01:02
  • The 7 real-world steps to a fully functional website 00:06:13
  • Starting to put the 7 steps into action 00:06:00
  • First development steps 00:14:40
  • Setting up the fluid grid for responsive web design 00:10:04
  • Building the header - Part 1 00:16:08
  • Building the header - Part 2 00:21:59
  • Building the header - Part 3 00:20:09
  • Building the features section - Part 1 00:15:07
  • Building the features section - Part 2 00:17:56
  • Building the favorite meals section - Part 1 00:12:22
  • Building the favorite meals section - Part 2 00:11:35
  • Building the how-it-works section - Part 1 00:09:09
  • Building the how-it-works section - Part 2 00:17:27
  • Building the cities section - Part 1 00:12:43
  • Building the cities section - Part 2 00:16:17
  • Building the customer testimonials section - Part 1 00:06:06
  • Building the customer testimonials section - Part 2 00:15:29
  • Building the sign-up section - Part 1 00:09:53
  • Building the sign-up section - Part 2 00:18:57
  • Building the contact form form - Part 1 00:16:33
  • Building the contact form form - Part 2 00:09:25
  • Building the footer - Part 1 00:06:42
  • Building the footer - Part 2 00:18:20
  • Download the Code 00:01:05 Download the 7 steps here 00:02:19 Omnifood Project FAQs — READ BEFORE YOU START! 00:10:48
  • Making the webpage responsive - Part 1 00:19:47
  • Making the webpage responsive - Part 2 00:21:45
  • A note about web browsers 00:12:42
  • Introduction to jQuery 00:09:51
  • Building a “sticky” navigation - Part 1 00:12:53
  • Building a “sticky” navigation - Part 2 00:10:53
  • Scrolling to elements 00:10:10
  • Adding animations on scroll 00:14:39
  • Making the navigation responsive 00:20:15
  • Download the Code 00:00:30
  • Final touch: creating a favicon 00:05:11
  • Performance optimization: site speed 00:12:12
  • Basic search engine optimization (SEO) 00:08:23
  • Let’s launch our webpage! 00:09:19
  • Google Analytics 00:05:47
  • You made it! Congratulations! 00:03:33
  • My Special Gift for You: Never Stop Learning! 00:01:14
  • What’s New in CSS: A Quick Intro to Flexbox, Part 1 00:31:40
  • What’s New in CSS: A Quick Intro to Flexbox, Part 2 00:22:11
  • Using PHP to make our form work 00:23:30
  • Super effective ways to improve your website’s conversion 00:04:35
Requirements
  • No coding or design experience necessary
  • Any computer will do — Windows, OSX or Linux
  • You don’t need to buy any software — we will use the best free web development editor in the world
+ View more
Description

*** 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!

+ View more
Other related courses
02:38:43
3.8 42 $149.99 Free
08:53:47
3.8 32 Free
01:31:27
Updated Wed, 20-Nov-2019
4.1 18 $149.99 Free
01:45:50
4.1 13 $94.99 Free
04:45:08
4.1 15 Free
01:04:45
4.1 11 Free
03:48:48
4.4 6 $19.99 Free
05:25:07
4.4 15 Free
01:10:37
4.1 6 Free
03:52:13
Updated Mon, 02-Sep-2019
4.1 11 $99.99 Free
04:28:09
4.3 5 $19.99 Free
06:19:49
4.4 5 Free
01:52:35
4 15 $74.99 Free
01:39:41
3.7 11 $79.99 Free
02:09:40
4.2 12 Free
01:01:33
4.2 7 $199.99 Free
51:12:35
4.2 6 $199.99 Free
02:23:35
Updated Tue, 09-Jul-2019
3.7 8 $99.99 Free
01:13:12
4.3 17 $139.99 Free
01:31:26
4.3 15 $139.99 Free
00:58:35
4.1 12 $94.99 Free
12:15:26
4.6 11 $99.99 Free
03:15:34
4.2 11 $199.99 Free
01:15:31
4.2 3 Free
00:44:15
4.5 5 $199.99 Free
03:36:22
4.7 0 Free
16:47:11
3.6 1 Free
03:09:33
Updated Sun, 03-Sep-2017
3.8 10 Free
02:07:36
3.9 0 Free
04:37:27
3.8 1 Free
02:14:18
Updated Fri, 23-Mar-2018
3.7 5 Free
02:23:03
4.3 1 Free
06:22:46
Updated Wed, 23-Mar-2016
4.1 1 Free
04:17:53
4.4 3 Free
00:57:12
3.4 3 Free
02:13:31
4.1 5 Free
12:52:08
3.5 3 Free
01:00:01
Updated Sat, 21-Dec-2019
2.3 3 Free
04:32:16
3.7 0 Free
03:41:40
4.3 1 Free
04:23:54
3.8 0 Free
02:12:25
4.3 0 Free
01:03:10
Updated Fri, 06-Dec-2019
3.9 2 Free
03:33:25
4.1 1 Free
02:43:49
4.4 0 Free
02:00:25
4.5 0 Free
01:10:58
3.8 6 Free
02:55:06
4.2 3 Free
00:36:19
Updated Tue, 28-Mar-2017
3.5 1 Free
02:18:52
4.1 10 Free
00:31:06
Updated Mon, 13-Nov-2017
3.6 5 Free
00:50:23
4 2 Free
02:27:52
Updated Wed, 07-Aug-2019
4.2 4 Free
00:50:19
3.7 4 $129.99 Free
01:49:58
3.9 5 $139.99 Free
01:17:39
Updated Thu, 26-Dec-2019
0 3 Free
03:42:56
4 8 $199.99 Free
02:01:15
Updated Mon, 23-Dec-2019
3.9 1 $199.99 Free
01:40:29
Updated Mon, 23-Dec-2019
3.7 4 $199.99 Free
02:15:39
Updated Mon, 23-Dec-2019
3.1 6 $19.99 Free
02:18:14
4.2 3 $129.99 Free
01:31:32
Updated Mon, 23-Dec-2019
3.8 1 $19.99 Free
01:24:32
Updated Mon, 23-Dec-2019
3.8 1 $19.99 Free
01:30:20
Updated Mon, 23-Dec-2019
3.5 2 $19.99 Free
01:19:56
Updated Mon, 23-Dec-2019
3.5 4 $19.99 Free
00:59:13
Updated Mon, 23-Dec-2019
3.2 4 $19.99 Free
01:01:52
Updated Mon, 23-Dec-2019
3.4 5 $19.99 Free
01:53:25
Updated Mon, 23-Dec-2019
3.4 5 $19.99 Free
02:17:41
Updated Mon, 23-Dec-2019
3.5 5 $19.99 Free
00:47:39
Updated Mon, 23-Dec-2019
3.7 4 $19.99 Free
00:41:25
Updated Mon, 23-Dec-2019
3.5 4 $19.99 Free
01:00:48
Updated Mon, 23-Dec-2019
3.4 4 $19.99 Free
00:33:47
Updated Mon, 23-Dec-2019
3.6 2 $19.99 Free
01:09:52
Updated Mon, 23-Dec-2019
3.4 6 $199.99 Free
00:40:16
Updated Mon, 23-Dec-2019
3.2 6 $199.99 Free
00:49:55
Updated Mon, 23-Dec-2019
3.6 2 $199.99 Free
02:34:03
4 2 Free
24:16:36
4.2 30 $199.99 Free
00:37:00
3.6 1 $99.99 Free
07:52:29
0 12 $114.99 Free
05:38:23
Updated Sat, 17-Aug-2019
4.3 1 $34.99 Free
01:20:14
Updated Tue, 14-May-2013
4 0 Free
05:57:07
3.7 7 $159.99 Free
05:26:39
0 14 $39.99 Free
00:37:17
3.9 4 $99.99 Free
06:23:22
2.5 12 Free
08:33:58
3.9 10 $19.99 Free
27:55:46
4.5 3 $199.99 Free
47:29:47
Updated Tue, 31-Dec-2019
4.6 55 $179.99 Free
03:32:49
Updated Sat, 28-Sep-2019
4.6 16 $49.99 Free
14:59:04
4.7 3 $199.99 Free
13:30:15
Updated Thu, 26-Dec-2019
4.5 22 $149.99 Free
28:04:40
4.7 38 $199.99 Free
10:22:00
4.6 11 $119.99 Free
14:51:23
4.2 76 $194.99 Free
46:24:20
Updated Thu, 12-Dec-2019
4.6 62 $199.99 Free
05:30:27
4 8 $159.99 Free
04:17:37
4 1 Free
03:59:09
4.7 1 Free
03:41:47
3 8 Free
04:00:56
4.1 2 $149.99 Free
03:35:47
4.2 3 $199.99 Free
22:12:56
4 6 $199.99 Free
08:03:16
4.3 1 Free
10:51:38
3.3 3 $199.99 Free
14:41:03
4.2 0 Free
04:35:13
3.8 2 Free
39:30:00
4 3 Free
04:32:42
3.8 1 Free
05:32:51
4.4 1 Free
06:43:19
Updated Sun, 04-Aug-2019
4.1 2 Free
03:20:40
4.2 4 Free
05:51:57
Updated Sat, 16-Nov-2019
4.1 9 Free
18:45:45
Updated Tue, 24-Sep-2019
4.6 1 Free
04:47:30
4.1 11 Free
02:39:55
3.7 13 Free
13:17:19
3.8 8 $124.99 Free
01:18:41
Updated Mon, 23-Dec-2019
0 6 $19.99 Free
14:40:08
4.1 5 Free
01:18:30
Updated Sun, 12-Jan-2020
0 4 Free
03:09:37
3.9 5 Free
08:12:53
4.7 3 $39.99 Free
21:42:23
Updated Sun, 08-Dec-2019
4.6 9 $174.99 Free
02:18:00
4.3 5 $129.99 Free
14:34:08
4.6 9 $149.99 Free
17:04:39
Updated Thu, 26-Dec-2019
4.5 9 $109.99 Free
23:53:13
4.5 6 $94.99 Free
11:00:44
4.5 8 $149.99 Free
12:36:12
4.6 13 $149.99 Free
05:49:54
Updated Sun, 03-Nov-2019
4.6 8 $109.99 Free
10:11:39
4 5 $49.99 Free
02:52:39
Updated Fri, 10-Jan-2020
3 4 Free
01:06:37
Updated Sun, 19-Jan-2020
4.1 6 $19.99 Free
00:55:55
4.9 0 Free
01:57:08
4.3 7 $199.99 Free
05:05:38
Updated Sun, 10-Aug-2014
4 0 Free
00:58:40
Updated Wed, 20-Nov-2019
4.2 4 Free
06:20:09
4.2 2 Free
29:24:58
4.1 6 Free
01:19:25
3.2 4 Free
00:45:46
Updated Wed, 06-Nov-2019
2 2 $19.99 Free
09:10:22
4.4 5 Free
01:20:24
4 4 Free
03:51:23
3.8 0 Free
00:40:21
Updated Thu, 22-Aug-2019
3.2 2 Free
02:07:04
Updated Tue, 14-Aug-2018
0 4 Free
02:19:58
Updated Sun, 02-Jun-2019
3.2 2 Free
01:51:26
Updated Mon, 13-Jan-2020
0 9 $99.99 Free
03:04:46
Updated Wed, 22-Jan-2020
4.3 3 Free
01:57:15
Updated Fri, 29-Sep-2017
4.3 2 Free
08:16:39
4.3 5 $174.99 Free
06:41:57
4.1 4 $174.99 Free
07:58:41
4.4 1 $194.99 Free
01:08:54
4 1 Free
01:25:26
4 1 Free
00:31:50
Updated Tue, 07-Jan-2020
3.8 1 Free
02:21:42
0 0 $179.99 Free
02:51:06
3.5 1 Free
02:26:30
Updated Sat, 25-Jan-2020
3.6 2 $99.99 Free
00:36:04
3.4 0 Free
03:10:29
4 2 Free
42:10:51
4.7 6 $199.99 Free
01:55:44
4.3 4 $99.99 Free
01:15:58
3.3 6 $199.99 Free
05:50:21
4.4 15 Free
04:00:57
3.9 2 $199.99 Free
27:49:26
4.5 48 $199.99 Free
07:33:47
4.1 3 $19.99 Free
06:20:15
Updated Thu, 04-Oct-2018
3.8 2 $99.99 Free
02:21:45
4.2 2 $199.99 Free
14:28:07
3.9 2 $199.99 Free
02:41:06
4.2 2 $104.99 Free
02:05:43
Updated Sun, 29-Oct-2017
3.7 4 Free
02:34:40
Updated Tue, 05-Dec-2017
4 3 Free
35:24:16
4.5 48 $189.99 Free
About the instructor
  • 89 Students
  • 4 Courses
+ View more
Web Developer, Designer, and Teacher
Student feedback
4.5
Average rating
  • 1%
  • 2%
  • 12%
  • 57%
  • 125%
Comments
Free $199.99
Includes:
  • 11:51:39 On demand videos
  • 80 Lessons
  • Full lifetime access
  • Access on mobile and tv