Build Responsive Real World Websites with HTML5 and CSS3
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
- 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
| # | 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
Framer Motion RecipesBuild UI
B-Sides, Bonuses and OdditiesCarl (Creative Coding Club)
Advanced FrontEndsGary Simon
Developing LLM App Frontends with Streamlitzerotomastery.io
