Build Responsive Real World Websites with HTML5 and CSS3

37h 28m 39s
English
Paid

Course description

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


Read more about the course

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 147 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Build Responsive Real World Websites with HTML5 and CSS3

0:00
/
#1: Course Structure and Projects

All Course Lessons (147)

#Lesson TitleDurationAccess
1
Course Structure and Projects Demo
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

Unlock unlimited learning

Get instant access to all 146 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

SolidJS: The Complete Guide

SolidJS: The Complete Guide

Sources: Sinan Polat
This book is the result of two years of meticulous work. SolidJS may seem simple at first glance, but its internal structure includes complex...
Web Performance Fundamentals

Web Performance Fundamentals

Sources: Nadia Makarevich
"The Fundamentals of Web Performance" focuses on the key aspects of improving the speed and responsiveness of web applications in the context of React...
Animations on the web

Animations on the web

Sources: Emil Kowalski
Learn how to craft animations that make people feel something. It's for those that like my style of animations and/or anyone aspiring to improve their skills. T
2 hours 23 minutes 59 seconds