Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Meditation Personal Transformation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development 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.
Bestseller
Rating: 4.6 out of 54.6 (50,179 ratings)
219,322 students
Created by Jonas Schmedtmann
Last updated 10/2020
English
English, French [Auto], 
30-Day Money-Back Guarantee

What you'll 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
Curated for the Udemy for Business collection

Course content

10 sections • 77 lectures • 12h 14m total length

  • Preview05:47
  • READ BEFORE YOU START!
    01:54
  • My Resources Page (Former E-Book)
    00:27

  • Download the Code
    00:31
  • Our main tool: Brackets text editor
    03:20
  • Preview02:12
  • Preview05:23
  • Starting to fill the structure
    07:57
  • Images and attributes
    04:37
  • One more thing: links
    04:54
  • HTML Quiz
    10 questions

  • Preview04:03
  • Starting to make our webpage pretty: text
    Preview09: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

  • Preview03:47
  • Preview08:54
  • Using colors like a pro
    06:45
  • The meaning of colors in web design
    01:09
  • 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
    00:46
  • The ultimate cheatsheet: all web design guidelines in one place
    01:39
  • Web design quiz: test your knowledge!
    10 questions

  • Download the Code
    00:57
  • Preview06:13
  • Download the 7 steps here
    03:00
  • Omnifood Project FAQs — READ BEFORE YOU START!
    10:28
  • Preview06:00
  • Preview14:40
  • Setting up the fluid grid for responsive web design
    Preview10:04
  • Preview16:08
  • Preview21:59
  • Preview20:09
  • Preview15:07
  • Preview17: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

  • Making the webpage responsive - Part 1
    19:47
  • Making the webpage responsive - Part 2
    21:45
  • A note about web browsers
    12:42

  • Download the Code
    00:28
  • 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

  • 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

  • You made it! Congratulations!
    03:33
  • My Other Courses + Updates
    00:58

  • What’s New in CSS: A Quick Intro to Flexbox, Part 1
    31:40
  • What’s New in CSS: A Quick Intro to Flexbox, Part 2
    22:11
  • Using PHP to make our form work
    23:30
  • Super effective ways to improve your website’s conversion
    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

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!

Who this course is for:

  • 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

Featured review

Natalia Banz
Natalia Banz
26 courses
5 reviews
Rating: 5.0 out of 58 months ago
Good one! Slowly, but surely explained everything. Not too long, chapters made to the point. All what is needed is said. Already had some experience with HTML5 and CSS, but decided to go for another course just to maybe see some new things, or get more explanations. No regret, i've built Omnifood with Jonas and again, rebuilt it alone, with Grid&Sass. Had lots of fun, and gain lots of knowledge. Thanks and see you in next one.

Instructor

Jonas Schmedtmann
Web Developer, Designer, and Teacher
Jonas Schmedtmann
  • 4.7 Instructor Rating
  • 212,305 Reviews
  • 998,583 Students
  • 5 Courses

Hi, I'm Jonas! I have been identified as one of Udemy's Top Instructors and all my premium courses have recently earned the best-selling status for outstanding performance and student satisfaction.

I'm a full-stack web developer and designer with a passion for building beautiful things from scratch. I've been building websites and apps 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 all I knew. And that passion brought me to Udemy in 2015, where my students love the fact 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 advanced HTML and CSS?

Looking for a complete JavaScript course that takes you from beginner to advanced developer?

Or maybe you want to build modern and fast back-end applications with Node.js?

Then don't waste your time with random tutorials or incomplete videos. All my courses are easy-to-follow, all-in-one packages that will take your skills to the next level.

These courses are exactly the courses I wish I had when I was first getting into web development!

So see for yourself, enroll in one of my courses (or all of them :D) and join my 500,000+ happy students today.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.