Build Responsive Real-World Websites with HTML and CSS
Learn modern HTML5, CSS3 and web design by building a stunning website for your portfolio! Includes flexbox and CSS Grid
Learn modern HTML5, CSS3 and web design by building a stunning website for your portfolio! Includes flexbox and CSS Grid
*** The #1 bestselling HTML and CSS course on Udemy! ***
*** Completely re-built from scratch in July 2021 (35+ hours video) ***
"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
Open a new browser tab, type in www.omnifood.dev, and take a look around. I will wait here...
...
Amazing, right? What if you knew exactly how to design and build a website like that, completely from scratch? How amazing would that be?
Well, I'm here to teach you HTML, CSS, and web design, all by building the stunning website that you just saw, step-by-step.
So, after finishing this course, you will know exactly how to build a beautiful, professional, and ready-to-launch website just like Omnifood, by following a 7-step process. And it will even look great on any computer, tablet, and smartphone.
But what if you want to build a completely different website? Well, no problem! I designed the course curriculum with exactly this goal: to enable you to design and build any website that you can think of, not just copy the course project.
So, in order to become a confident and independent developer, capable of building your own websites in the future, you will learn:
The fundamentals of modern and semantic HTML, CSS, and building layouts in a small separate project, which will prepare you for the main course project (www.omnifood.dev). This includes modern flexbox and CSS Grid!
How to design beautiful websites, by learning a web design framework I created just for this course. It consists of easy-to-use guidelines for design aspects like typography, colors, images, spacing, and more (this is like a small standalone course!).
How to use well-established website components and layout patterns in order to come up with professional-looking designs
How to make any website work on any mobile device, no matter the design and layout (responsive design)
How to use the 7 steps of building a professional website in practice: planning, sketching, designing, building, testing, optimizing, and launching
How to find and use free design assets such as images, fonts, and icons
Important developer skills such as reading documentation, fixing code errors on your own, and using professional web development tools
Does this sound like fun? Then join me and 200,000+ other developers and start building websites today!
Or are you not sold yet and need to know more? No problem, just keep reading...
[01] Why should you learn HTML and CSS in the first place?
Building websites allows you to do fun and creative work, from anywhere in the world, and it even pays well. Web development is one of the most future-proof and highest-paying industries in the world. And HTML and CSS is the entry point to this world!
But you already know all this, that's why you want to learn HTML and CSS too. Well, you came to the right place!
This is the best and most complete course for starting your web development journey that you will find on Udemy. It's an all-in-one package that takes you from knowing nothing about HTML and CSS, to building beautiful websites using tools and technologies that professional web developers use every single day.
[02] Why is this course so unique and popular?
Reason #1: The course is completely project-based
Simple demos are boring, and therefore you're gonna learn everything by building actual projects! In the final project (www.omnifood.dev), together we hand-code a beautiful and responsive landing page for a fictional company that I made up just for the course.
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 7-step process of building and launching our website project.
So the huge Omnifood project will teach you real-world skills to build real-world HTML and CSS websites: how to plan projects and page layouts, how to implement designs using HTML and CSS techniques, how to write clean and organized code, how to optimize websites for good speed performance, and many more.
On top of that, this course has a huge focus on beautiful design. In fact, this is the only course on the market that focuses on both coding and designing, together.
Reason #3: I'm the right teacher for you
With the right guidance and a well-structured curriculum, building websites can be quite easy and fun to learn. With a bunch of random tutorials and YouTube videos? Not so much. And that's where I come in.
My name is Jonas, I'm an experienced web developer and designer, and one of Udemy's top instructors. I have been teaching this bestselling course since 2015 to over 200,000 developers, always listening to feedback and understanding exactly how students actually learn.
Using that feedback, I recently rebuilt this course from scratch and designed the ideal course curriculum for every type of student. It's a unique blend of projects, deep explanations, theory lectures, and challenges. I'm sure you're gonna love it!
[03] Why is this course so long?
Reason #1: I take time to explain every single concept that I teach, so that you actually learn, and not just copy code from the screen (this is a course, not a tutorial)
Reason #2: I go into topics that other HTML and CSS courses shy away from: professional web design, component and layout patterns, some CSS theory, website planning in theory and practice, and developer skills. I believe you need all of this to be successful!
Reason #3: There is a lot of repetition, so that you actually assimilate and practice what you learn. Practice is the single most important ingredient to learning, and therefore I provide plenty of opportunities for you to sharpen your skills
[04] Here is what's also included in the package:
Up-to-date HD-quality videos, that are easy to search and reference (great for Udemy Business students)
Professional English captions (not the auto-generated ones)
Downloadable design assets + starter code and final code for each section
Downloadable slides for 20+ theory videos (not boring, I promise!)
Access to countless free design and development resources that I curated over many years
Free support in the course Q&A
10+ coding challenges to practice your new skills (solutions included)
[05] This course is for you if...
... you are a complete beginner with no idea of how to build a website.
... you already know a bit of HTML and CSS from some tutorials or videos, but struggle to put together a good-looking, complete website.
... you are a designer and want to expand your skills into HTML and CSS, because all your designer friends are learning how to code (they are smart!).
Basically, if you are an HTML and CSS master, and build the most beautiful websites in the world, then DON'T take the course. Everyone else: you should take the course, today.
So, does all of this sound great? Then join me and 200,000+ other developers and start your web development journey today!
FAQ area empty
Section Intro
40Introduction to HTML
258 Xem trướcHTML Document Structure
706Text Elements
979More Text Elements: Lists
659Images and Attributes
765Hyperlinks
889Structuring our Page
656 Xem trướcA Note on Semantic HTML
387Installing Additional VS Code Extensions
434CHALLENGE #1
710CHALLENGE #2
1031Section Intro
56Introduction to CSS
246Inline, Internal and External CSS
732Styling Text
931Combining Selectors
552Class and ID Selectors
923Working With Colors
1447Pseudo-classes
600Styling Hyperlinks
583Using Chrome DevTools
484CSS Theory #1: Conflicts Between Selectors
1043CSS Theory #2: Inheritance and the Universal Selector
876CHALLENGE #1
1060CSS Theory #3: The CSS Box Model
485Using Margins and Paddings
1327Adding Dimensions
483Centering our Page
476CHALLENGE #2
659CSS Theory #4: Types of Boxes
1339CSS Theory #5: Absolute Positioning
964Pseudo-elements
1011Developer Skill #1: Googling and Reading Documentation
735Developer Skill #2: Debugging and Asking Questions
1336CHALLENGE #3
1177Section Intro
78The 3 Ways of Building Layouts
318Using Floats
1042Clearing Floats
442Building a Simple Float Layout
526Box-sizing: border-box
672CHALLENGE #1
1214Introduction to Flexbox
583A Flexbox Overview
455Spacing and Aligning Flex Items
651The flex Property
694Adding Flexbox to Our Project
1197Building a Simple Flexbox Layout
735CHALLENGE #2
853Introduction to CSS Grid
657A CSS Grid Overview
579Sizing Grid Columns and Rows
834Placing and Spanning Grid Items
780Aligning Grid Items and Tracks
826Building a Simple CSS Grid Layout
946CHALLENGE #3
467Section Intro
138Project Overview
373Overview of Web Design and Website Personalities
756Web Design Rules #1: Typography
977Implementing Typography
1403Web Design Rules #2: Colors
820Implementing Colors
1092Web Design Rules #3: Images and Illustrations
897Web Design Rules #4: Icons
779Implementing Icons
1293Web Design Rules #5: Shadows
784Implementing Shadows
728Web Design Rules #6: Border-radius
294Implementing Border-radius
400Web Design Rules #7: Whitespace
790Web Design Rules #8: Visual Hierarchy
1378Implementing Whitespace and Visual Hierarchy
943Web Design Rules #9: User Experience (UX)
1237The Website-Personalities-Framework
1859The Missing Piece: Steal Like An Artist!
626Section Intro
60Web Design Rules #10 - Part 1: Elements and Components
1668Building an Accordion Component - Part 1
1530Building an Accordion Component - Part 2
1164Building a Carousel Component - Part 1
1285Building a Carousel Component - Part 2
1781Building a Table Component - Part 1
604Building a Table Component - Part 2
796CHALLENGE #1: Building a Pagination Component
1459Web Design Rules #10 - Part 2: Layout Patterns
1312Building a Hero Section - Part 1
1331Building a Hero Section - Part 2
1281Building a Web Application Layout - Part 1
912Building a Web Application Layout - Part 2
956Section Intro
62The 7 Steps to a Great Website
1229Defining and Planning the Project (Steps 1 and 2)
1476Sketching Initial Layout Ideas (Step 3)
456First Design and Development Steps (Step 4)
921Responsive Design Principles
517How rem and max-width Work
966Building the Hero - Part 1
971Building the Hero - Part 2
1766Building the Hero - Part 3
1437Building the Header
915Building the Navigation
955Setting Up a Reusable Grid
1283Building the How-It-Works Section - Part 1
1756Building the How-It-Works Section - Part 2
2112Building the Featured-In Section
1185Building the Meals Section - Part 1
1595Building the Meals Section - Part 2
1261Building the Meals Section - Part 3
1782Building the Testimonials Section - Part 1
1094Building the Testimonials Section - Part 2
1478Building the Pricing Section - Part 1
1440Building the Pricing Section - Part 2
1557Building the Features Part
1146Building the Call-To-Action Section - Part 1
1572Building the Call-To-Action Section - Part 2
1485Building the Call-To-Action Section - Part 3
1749Building the Footer - Part 1
1155Building the Footer - Part 2
1678Section Intro
50A Short Introduction to JavaScript
1128Making the Mobile Navigation Work
512Implementing Smooth Scrolling
1764Implementing a Sticky Navigation Bar
1682Browser Support and Fixing Flexbox Gap in Safari
1146Testing Performance With Lighthouse
525Adding Favicon and Meta Description
744Image Optimizations
1106Deployment to Netlify
500Making the Form Work With Netlify Forms
469No coding or design experience necessary
Any computer works — Windows, macOS or Linux
You don’t need to buy any software — we will use the best free code editor in the world
Become a modern and confident HTML and CSS developer, no prior knowledge needed!
Design and build a stunning real-world project for your portfolio from scratch
Modern, semantic and accessible HTML5
Modern CSS (previous CSS3), including flexbox and CSS Grid for layout
Important CSS concepts such as the box model, positioning schemes, inheritance, solving selector conflicts, etc.
A web design framework with easy-to-use rules and guidelines to design eye-catching websites
How to plan, sketch, design, build, test, and optimize a professional website
How to make websites work on every possible mobile device (responsive design)
How to use common components and layout patterns for professional website design and development
Developer skills such as reading documentation, debugging, and using professional tools
How to find and use free design assets such as images, fonts, and icons
Practice your skills with 10+ challenges (solutions included)
0 Student
3 Courses
0 Review