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.7 (2,691 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
19,219 students enrolled
$195
Take This Course
  • Lectures 76
  • Contents Video: 11.5 hours
    Other: 22 mins
  • Skill Level All Levels
  • Languages English, captions
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2015 English Closed captions available

Course Description

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

*** Completely up-to-date for August 2016 ***

"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 any device?

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 I 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 counts. 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 which focuses on both coding and designing, hand-in-hand.

Reason #3: You walk a way 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 (I bet you want to click the "Take this course" button after that :)

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 web 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 probably 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.

• 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.

• Access to a very active community where I will personally answer all your questions.

• Free access to my e-book "Best Resources for Web Design and Development with HTML5 & CSS3" (students love it, and there are even free updates).

...

Sounds great? Then start learning today by clicking the “Take this course" button right now, and join me in the only HTML5 and CSS3 training that you will ever need!

What are the 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

What am I going to get from this course?

  • 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
  • Access to a very active community where I will personally answer all your questions
  • Get my e-book "Best Resources for Web Design and Development with HTML5 & CSS3" for free

What is the target audience?

  • Complete beginners who want to learn how to build a professional, beautiful and responsive website
  • Students with some knowledge about HTML and CSS, but who struggle to put together a great website
  • Designers who want to expand their skill set into HTML5 and CSS3

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Course introduction
Let's start this amazing journey
Preview
05:47
READ BEFORE YOU START!
Article
E-book Resources 2.0
Article
First things first: download your free e-book here
11 pages
Section 2: Dive into HTML
Where to find the HTML and CSS code for this project
Article
Our main tool: Brackets text editor
03:20
What is HTML?
Preview
02:12
The structure of an HTML document
Preview
05:23
Starting to fill the structure
07:57
Images and attributes
04:37
One more thing: links
04:54
HTML Quiz
10 questions
Section 3: Formatting with CSS
Getting started with CSS
Preview
04:03
Starting to make our webpage pretty: text
Preview
09:53
Colors
05:31
Classes and ID's
05:39
The CSS box model
07:32
Building a simple layout
18:58
Polishing our blog post
09:39
Relative vs. Absolute
04:35
Getting started with the Chrome Developer Tools
06:23
CSS Quiz
10 questions
Section 4: Web design basics
Introduction to web design
Preview
03:47
Beautiful typography
Preview
08:54
Using colors like a pro
06:45
The meaning of colors in web design
Article
Working with images
04:54
Working with icons
03:29
Spacing and layout
03:42
Introduction to user experience
02:50
Getting inspired: the secret ingredient for stunning web design
02:25
Wrapping up what we've learned in this section
Article
The ultimate cheatsheet: all web design guidelines in one place
Article
Web design quiz: test your knowledge!
10 questions
Section 5: The killer website project
Instructions for the killer website project
Article
The 7 real-world steps to a fully functional website
Preview
06:13
Download the 7 steps here
Article
Starting to put the 7 steps into action
Preview
06:00
First development steps
Preview
14:40
Setting up the fluid grid for responsive web design
Preview
10:04
Building the header - Part 1
Preview
16:08
Building the header - Part 2
Preview
21:59
Building the header - Part 3
Preview
20:09
Building the features section - Part 1
Preview
15:07
Building the features section - Part 2
Preview
17:56
Building the favorite meals section - Part 1
12:22
Building the favorite meals section - Part 2
11:35
Building the how-it-works section - Part 1
09:09
Building the how-it-works section - Part 2
17:27
Building the cities section - Part 1
12:43
Building the cities section - Part 2
16:17
Building the customer testimonials section - Part 1
06:06
Building the customer testimonials section - Part 2
15:29
Building the sign-up section - Part 1
09:53
Building the sign-up section - Part 2
18:57
Building the contact form form - Part 1
16:33
Building the contact form form - Part 2
09:25
Building the footer - Part 1
06:42
Building the footer - Part 2
18:20
Section 6: Responsive web design with media queries
Making the webpage responsive - Part 1
19:47
Making the webpage responsive - Part 2
21:45
A note about web browsers
12:42
Section 7: Let's add some cool effects
Where to find the jQuery code for the killer website project
Article
Introduction to jQuery
09:51
Building a “sticky” navigation - Part 1
12:53
Building a “sticky” navigation - Part 2
10:53
Scrolling to elements
10:10
Adding animations on scroll
14:39
Making the navigation responsive
20:15
Section 8: Optimizing and launching our website
Final touch: creating a favicon
05:11
Performance optimization: site speed
12:12
Basic search engine optimization (SEO)
08:23
Let’s launch our webpage!
09:19
Google Analytics
05:47
Section 9: Conclusion
You made it! Congratulations!
03:33
Section 10: BONUS lectures
Super effective ways to improve your website’s conversion
04:35
Adding a map to the Omnifood website
19:18
Using PHP to make our form work
23:31
Be the first to know about new course launches!
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Jonas Schmedtmann, Bestselling Instructor, Web Designer and Developer

Hi, I'm Jonas! I have been identified as one of Udemy's Top Instructors and my best-selling course has recently made it to the TOP 3 of the best Web Development courses.

I'm a web designer and developer with a great passion for building beautiful new things from scratch. I've been building websites since 2007 and also have a Master's degree in Engineering.

It was in college where I first discovered my passion for teaching and helping others by sharing my knowledge. And that passion brought me to Udemy, where my students really appreciate that I take the time to explain important concepts in a way that everyone can easily understand.

Do you want to learn how to build awesome websites with HTML5 and CSS3?

Want to know how to make your websites look beautiful and professional?

Are you looking for a comprehensive course that takes your career to the next level?

Then enrol in my courses today and join 70,000+ happy students. If I had to describe my web design and development course in one sentence, I would say “This is exactly the course I wish I had when I first started building websites".

If you don't want to go through all the books and thousands of online articles and tutorials like I did, then enrol in my course today! I will be very happy to share my knowledge with you, and help you with everything I can along the way. Because happy students make me happy too.

Ready to start learning?
Take This Course