Build Responsive Real World Websites with HTML5 and CSS3

37h 28m 39s
English
Paid
November 6, 2024
The easiest way to learn modern web design, HTML5 and CSS3 step-by-step from scratch. Design AND code a huge project.


More

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.

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

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

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

Watch Online Build Responsive Real World Websites with HTML5 and CSS3

Join premium to watch
Go to premium
# Title Duration
1 Course Structure and Projects 05:35
2 A High-Level Overview of Web Development 11:02
3 Setting Up Our Code Editor 08:53
4 Your Very First Webpage! 09:57
5 Downloading Course Material 04:22
6 Watch Before You Start! 05:45
7 Section Intro 00:41
8 Introduction to HTML 04:19
9 HTML Document Structure 11:47
10 Text Elements 16:21
11 More Text Elements: Lists 11:00
12 Images and Attributes 12:46
13 Hyperlinks 14:50
14 Structuring our Page 10:57
15 A Note on Semantic HTML 06:29
16 Installing Additional VS Code Extensions 07:15
17 CHALLENGE #1 11:51
18 CHALLENGE #2 17:13
19 Section Intro 00:57
20 Introduction to CSS 04:08
21 Inline, Internal and External CSS 12:13
22 Styling Text 15:33
23 Combining Selectors 09:13
24 Class and ID Selectors 15:24
25 Working With Colors 24:08
26 Pseudo-classes 10:01
27 Styling Hyperlinks 09:44
28 Using Chrome DevTools 08:05
29 CSS Theory #1: Conflicts Between Selectors 17:24
30 CSS Theory #2: Inheritance and the Universal Selector 14:37
31 CHALLENGE #1 17:42
32 CSS Theory #3: The CSS Box Model 08:06
33 Using Margins and Paddings 22:08
34 Adding Dimensions 08:04
35 Centering our Page 07:57
36 CHALLENGE #2 11:00
37 CSS Theory #4: Types of Boxes 22:20
38 CSS Theory #5: Absolute Positioning 16:05
39 Pseudo-elements 16:53
40 Developer Skill #1: Googling and Reading Documentation 12:16
41 Developer Skill #2: Debugging and Asking Questions 22:17
42 CHALLENGE #3 19:38
43 Section Intro 01:19
44 The 3 Ways of Building Layouts 05:19
45 Using Floats 17:23
46 Clearing Floats 07:23
47 Building a Simple Float Layout 08:47
48 box-sizing: border-box 11:13
49 CHALLENGE #1 20:16
50 Introduction to Flexbox 09:44
51 A Flexbox Overview 07:36
52 Spacing and Aligning Flex Items 10:52
53 The flex Property 11:35
54 Adding Flexbox to Our Project 19:58
55 Building a Simple Flexbox Layout 12:16
56 CHALLENGE #2 14:14
57 Introduction to CSS Grid 10:59
58 A CSS Grid Overview 09:41
59 Sizing Grid Columns and Rows 13:55
60 Placing and Spanning Grid Items 13:01
61 Aligning Grid Items and Tracks 13:47
62 Building a Simple CSS Grid Layout 15:47
63 CHALLENGE #3 07:48
64 Section Intro 02:19
65 Project Overview 06:14
66 Overview of Web Design and Website Personalities 12:37
67 Web Design Rules #1: Typography 16:18
68 Implementing Typography 23:24
69 Web Design Rules #2: Colors 13:41
70 Implementing Colors 18:13
71 Web Design Rules #3: Images and Illustrations 14:58
72 Web Design Rules #4: Icons 13:00
73 Implementing Icons 21:34
74 Web Design Rules #5: Shadows 13:05
75 Implementing Shadows 12:09
76 Web Design Rules #6: Border-radius 04:55
77 Implementing Border-radius 06:41
78 Web Design Rules #7: Whitespace 13:11
79 Web Design Rules #8: Visual Hierarchy 22:59
80 Implementing Whitespace and Visual Hierarchy 15:44
81 Web Design Rules #9: User Experience (UX) 20:38
82 The Website-Personalities-Framework 31:00
83 The Missing Piece: Steal Like An Artist! 10:27
84 Section Intro 01:01
85 Web Design Rules #10 - Part 1: Elements and Components 27:49
86 Building an Accordion Component - Part 1 25:32
87 Building an Accordion Component - Part 2 19:25
88 Building a Carousel Component - Part 1 21:26
89 Building a Carousel Component - Part 2 29:43
90 Building a Table Component - Part 1 10:05
91 Building a Table Component - Part 2 13:17
92 CHALLENGE #1: Building a Pagination Component 24:20
93 Web Design Rules #10 - Part 2: Layout Patterns 21:53
94 Building a Hero Section - Part 1 22:12
95 Building a Hero Section - Part 2 21:22
96 Building a Web Application Layout - Part 1 15:13
97 Building a Web Application Layout - Part 2 15:57
98 Section Intro 01:03
99 The 7 Steps to a Great Website 20:31
100 Defining and Planning the Project (Steps 1 and 2) 24:37
101 Sketching Initial Layout Ideas (Step 3) 07:37
102 First Design and Development Steps (Step 4) 15:22
103 Responsive Design Principles 08:38
104 How rem and max-width Work 16:07
105 Building the Hero - Part 1 16:13
106 Building the Hero - Part 2 29:28
107 Building the Hero - Part 3 23:58
108 Building the Header 15:16
109 Building the Navigation 15:56
110 Setting Up a Reusable Grid 21:24
111 Building the How-It-Works Section - Part 1 29:17
112 Building the How-It-Works Section - Part 2 35:13
113 Building the Featured-In Section 19:46
114 Building the Meals Section - Part 1 26:36
115 Building the Meals Section - Part 2 21:02
116 Building the Meals Section - Part 3 29:43
117 Building the Testimonials Section - Part 1 18:16
118 Building the Testimonials Section - Part 2 24:39
119 Building the Pricing Section - Part 1 24:01
120 Building the Pricing Section - Part 2 25:59
121 Building the Features Part 19:07
122 Building the Call-To-Action Section - Part 1 26:13
123 Building the Call-To-Action Section - Part 2 24:46
124 Building the Call-To-Action Section - Part 3 29:10
125 Building the Footer - Part 1 19:17
126 Building the Footer - Part 2 27:59
127 Section Intro 00:48
128 How Media Queries Work 14:24
129 How to Select Breakpoints 04:48
130 Responding to Small Laptops 15:34
131 Responding to Landscape Tablets 19:26
132 Responding to Tablets 25:25
133 Building the Mobile Navigation 37:59
134 Responding to Smaller Tablets 18:57
135 Responding to Phones 26:43
136 Section Intro 00:51
137 A Short Introduction to JavaScript 18:49
138 Making the Mobile Navigation Work 08:33
139 Implementing Smooth Scrolling 29:25
140 Implementing a Sticky Navigation Bar 28:03
141 Browser Support and Fixing Flexbox Gap in Safari 19:07
142 Testing Performance With Lighthouse 08:46
143 Adding Favicon and Meta Description 12:25
144 Image Optimizations 18:27
145 Deployment to Netlify 08:21
146 Making the Form Work With Netlify Forms 07:50
147 Where to Go from Here 04:33

Similar courses to Build Responsive Real World Websites with HTML5 and CSS3

Namaste Frontend System Design

Namaste Frontend System DesignAkshay Saini (NamasteDev.com)

Duration 72 hours 31 minutes 50 seconds
Build Modern Websites with Astro!

Build Modern Websites with Astro!James Q Quick

Duration 7 hours 28 minutes 32 seconds
Clean Code: Writing Code for Humans

Clean Code: Writing Code for Humans pluralsight

Duration 3 hours 10 minutes 36 seconds