3 Pemimpin Dr, #06-04 (07), Singapore 576147
+65 8839 6772

Build Responsive Real World Websites with HTML5 and CSS3

Build Responsive Real World Websites with HTML5 and CSS3

Online Self-Paced

Play Video

The easiest way to learn modern web design, HTML5 and CSS3 step-by-step from scratch. Design AND code a huge project.

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

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.

“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!”

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

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.

  • 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 “Sign Up Now” button, and let’s start this fantastic journey together!

  • 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

This course includes:

12 hours on-demand video

Access on mobile and TV

11 articles

SkillsFuture Credit eligible *

8 downloadable resources

Certificate of completion

Full lifetime access

* More than 7hr of learning time required

Course content

  • Let's Start This Amazing Journey!
  • My Resources Page (Former E-Book)

  • 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
  • HTML Quiz

  • Getting started with CSS
  • Starting to make our webpage pretty: text
  • Colors
  • 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

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

  • 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

  • Making the webpage responsive - Part 1
  • Making the webpage responsive - Part 2
  • A note about web browsers

  • 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

  • Final touch: creating a favicon
  • Performance optimization: site speed
  • Basic search engine optimization (SEO)
  • Let’s launch our webpage!
  • Google Analytics

Certificate of Completion

When you complete a paid Udemy course, you will receive a certificate of completion, which you can share with your friends, relatives, co-workers and potential employers. Certificates of completion help demonstrate your accomplishments, but please note Udemy is not an accredited institution, and as a result, the certificates cannot be used for formal accreditation.

Please note: free courses and courses that only include practice tests do not offer a certificate of completion.

What you'll learn

Student feedback

Client Logo
Gavin Lief

Very Informative and learnt a lot, overwhelming at times if new to this but Jonas does a good job to make this course as easy as possible to follow. Thanks!

Client Logo
Sudhir Kumar

Sure, I stated to believe, at this stage, coding is possible for me and I am enjoying it for I am learning for the course is interesting.

Client Logo
Leoni Lubbinge

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.

Client Logo
Ibrahim Yousif Ibrahim

It was good, and the instructor is incredible in explaining but the course is limited and I need to search for more courses to learn how build my website.

Client Logo
Alonso Davila

This course is awesome, it has all the basics of HTML & CSS along with some tips and tricks. I really love the final result of the project. It is a course that is worth 100% the money invested!

Who this course is for:

Transform your life through Udemy

Join millions of learners from around the world already learning on Udemy! Learn online at your own pace from highly rated instructors on any device. Learn at home, the office, waiting in line, or on the go.

Start today with a special discount and download to your phone. Lifetime access over 130,000 courses, courses in 60+ languages and expert instructors. 30-Day Money-back guarantee.

Related courses by other education partners

The Complete Web Design Course

In the 21st century, web design is one of the most influential aspects of your online presence. HTML 5, and CSS 3 are the primary foundations of the […]

Apache Spark and Scala Certification Training

Designed to meet the industry benchmarks, Edureka’s Apache Spark and Scala certification is curated by top industry experts […]

The Web Developer Bootcamp 2020

COMPLETELY REDONE – The only course you need to learn web development – HTML, CSS, JS, Node, and More! There are a lot […]