Build Responsive Real-World Websites with HTML and CSS

  • Course provided by Udemy
  • Study type: Online
  • Starts: Anytime
  • Price: See latest price on Udemy
Udemy

Course Description

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

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

Instructor

Web Developer, Designer, and Teacher
  • 4.7 Instructor Rating
  • 237,170 Reviews
  • 1,106,833 Students
  • 5 Courses

Hi, I'm Jonas! I have been identified as one of Udemy's Top Instructors and all my premium courses have earned the best-selling status for outstanding performance and student satisfaction.

I'm a full-stack web developer and designer with a passion for building beautiful things from scratch. I've been building websites and apps since 2010 and also have a Master's degree in Engineering.

I discovered my passion for teaching and helping others by sharing all I knew when I was in college, and that passion brought me to Udemy in 2015.

Here, in all my courses, what students love the most is that I take the time to explain every concept in a way that everyone can easily understand.

So, do you want to learn how to build awesome websites with modern HTML and CSS?

Looking for a complete JavaScript course that takes you from zero to an advanced developer?

Or maybe you want to build modern and fast back-end applications with Node.js?

Then don't waste your time with random tutorials or incomplete youtube videos. All my courses are easy-to-follow, all-in-one packages that will take your skills to the next level.

These courses are exactly the courses I wish I had when I was first getting into web development!

So see for yourself, enroll in one of my courses (or all of them :D) and join 1,000,000+ happy students today.

Expected Outcomes

  1. 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) Show more Show less Curated for the Udemy Business collection Course content 21 sections • 226 lectures • 49h 43m total length Expand all sections Welcome and First Steps 8 lectures • 49min Course Structure and Projects Preview 05:34 Read Before You Start! 00:52 Migration Guide to v2 02:15 A High-Level Overview of Web Development 11:01 Setting Up Our Code Editor 08:52 Your Very First Webpage! 09:55 Downloading Course Material 04:21 Watch Before You Start! 05:44 HTML Fundamentals 12 lectures • 2hr 5min Section Intro 00:40 Introduction to HTML Preview 04:18 HTML Document Structure Preview 11:46 Text Elements 16:20 More Text Elements: Lists 10:59 Images and Attributes 12:45 Hyperlinks 14:49 Structuring our Page 10:56 A Note on Semantic HTML 06:27 Installing Additional VS Code Extensions 07:14 CHALLENGE #1 11:50 CHALLENGE #2 17:11 CSS Fundamentals 24 lectures • 5hr 25min Section Intro 00:56 Introduction to CSS Preview 04:06 Inline, Internal and External CSS 12:12 Styling Text Preview 15:31 Combining Selectors 09:12 Class and ID Selectors 15:23 Working With Colors 24:07 Pseudo-classes 10:00 Styling Hyperlinks 09:43 Using Chrome DevTools 08:04 CSS Theory #1: Conflicts Between Selectors 17:23 CSS Theory #2: Inheritance and the Universal Selector 14:36 CHALLENGE #1 17:40 CSS Theory #3: The CSS Box Model 08:05 Using Margins and Paddings 22:07 Adding Dimensions 08:03 Centering our Page 07:56 CHALLENGE #2 10:59 CSS Theory #4: Types of Boxes 22:19 CSS Theory #5: Absolute Positioning 16:04 Pseudo-elements 16:51 Developer Skill #1: Googling and Reading Documentation 12:15 Developer Skill #2: Debugging and Asking Questions 22:16 CHALLENGE #3 19:37 Layouts: Floats, Flexbox, and CSS Grid Fundamentals 21 lectures • 4hr 2min Section Intro 01:18 The 3 Ways of Building Layouts 05:18 Using Floats 17:22 Clearing Floats 07:22 Building a Simple Float Layout 08:46 box-sizing: border-box 11:12 CHALLENGE #1 20:14 Introduction to Flexbox Preview 09:43 A Flexbox Overview 07:35 Spacing and Aligning Flex Items 10:51 The flex Property 11:34 Adding Flexbox to Our Project 19:57 Building a Simple Flexbox Layout 12:15 CHALLENGE #2 14:13 Introduction to CSS Grid Preview 10:57 A CSS Grid Overview 09:39 Sizing Grid Columns and Rows 13:54 Placing and Spanning Grid Items 13:00 Aligning Grid Items and Tracks 13:46 Building a Simple CSS Grid Layout 15:46 CHALLENGE #3 07:47 Web Design Rules and Framework 20 lectures • 4hr 53min Section Intro 02:18 Project Overview 06:13 Overview of Web Design and Website Personalities 12:36 Web Design Rules #1: Typography Preview 16:17 Implementing Typography 23:23 Web Design Rules #2: Colors 13:40 Implementing Colors 18:12 Web Design Rules #3: Images and Illustrations 14:57 Web Design Rules #4: Icons 12:59 Implementing Icons 21:33 Web Design Rules #5: Shadows 13:04 Implementing Shadows 12:08 Web Design Rules #6: Border-radius 04:54 Implementing Border-radius 06:40 Web Design Rules #7: Whitespace 13:10 Web Design Rules #8: Visual Hierarchy 22:58 Implementing Whitespace and Visual Hierarchy 15:43 Web Design Rules #9: User Experience (UX) 20:37 The Website-Personalities-Framework 30:59 The Missing Piece: Steal Like An Artist! 10:26 Components and Layout Patterns 14 lectures • 4hr 29min Section Intro 01:00 Web Design Rules #10 - Part 1: Elements and Components 27:48 Building an Accordion Component - Part 1 25:30 Building an Accordion Component - Part 2 19:24 Building a Carousel Component - Part 1 Preview 21:25 Building a Carousel Component - Part 2 Preview 29:41 Building a Table Component - Part 1 10:04 Building a Table Component - Part 2 13:16 CHALLENGE #1: Building a Pagination Component 24:19 Web Design Rules #10 - Part 2: Layout Patterns 21:52 Building a Hero Section - Part 1 22:11 Building a Hero Section - Part 2 21:21 Building a Web Application Layout - Part 1 15:12 Building a Web Application Layout - Part 2 15:56 Omnifood Project – Setup and Desktop Version 29 lectures • 10hr 17min Section Intro 01:02 The 7 Steps to a Great Website 20:29 Defining and Planning the Project (Steps 1 and 2) 24:36 Sketching Initial Layout Ideas (Step 3) 07:36 First Design and Development Steps (Step 4) 15:21 Responsive Design Principles 08:37 How rem and max-width Work 16:06 Building the Hero - Part 1 Preview 16:12 Building the Hero - Part 2 Preview 29:26 Building the Hero - Part 3 Preview 23:57 Building the Header 15:15 Building the Navigation 15:55 Setting Up a Reusable Grid 21:23 Building the How-It-Works Section - Part 1 29:16 Building the How-It-Works Section - Part 2 35:12 Building the Featured-In Section 19:45 Building the Meals Section - Part 1 26:35 Building the Meals Section - Part 2 21:01 Building the Meals Section - Part 3 29:42 Building the Testimonials Section - Part 1 18:14 Building the Testimonials Section - Part 2 24:38 Building the Pricing Section - Part 1 24:00 Building the Pricing Section - Part 2 25:57 Building the Features Part 19:06 Building the Call-To-Action Section - Part 1 26:12 Building the Call-To-Action Section - Part 2 24:45 Building the Call-To-Action Section - Part 3 29:09 Building the Footer - Part 1 19:15 Building the Footer - Part 2 27:58 Omnifood Project – Responsive Web Design 9 lectures • 2hr 44min Section Intro 00:47 How Media Queries Work 14:23 How to Select Breakpoints 04:47 Responding to Small Laptops 15:33 Responding to Landscape Tablets 19:24 Responding to Tablets 25:24 Building the Mobile Navigation 37:58 Responding to Smaller Tablets 18:56 Responding to Phones 26:42 Omnifood Project – Effects, Optimizations and Deployment 11 lectures • 2hr 40min Section Intro 00:50 A Short Introduction to JavaScript 18:48 Making the Mobile Navigation Work 08:32 Implementing Smooth Scrolling 29:24 Implementing a Sticky Navigation Bar 28:02 Browser Support and Fixing Flexbox Gap in Safari 19:06 Testing Performance With Lighthouse 08:45 Adding Favicon and Meta Description 12:24 Image Optimizations 18:26 Deployment to Netlify 08:20 Making the Form Work With Netlify Forms 07:49 The End! 1 lecture • 5min Where to Go from Here 04:32 11 more sections Requirements No 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 Description *** 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! 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 Show more Show less Featured review Natalia Banz 28 courses 5 reviews Rating: 5.0 out of 5 a year ago Good one! Slowly, but surely explained everything. Not too long, chapters made to the point. All what is needed is said. Already had some experience with HTML5 and CSS, but decided to go for another course just to maybe see some new things, or get more explanations. No regret, i've built Omnifood with Jonas and again, rebuilt it alone, with Grid&Sass. Had lots of fun, and gain lots of knowledge. Thanks and see you in next one. Show more Show less Instructor Jonas Schmedtmann Web Developer, Designer, and Teacher 4.7 Instructor Rating 237,170 Reviews 1,106,833 Students 5 Courses Hi, I'm Jonas! I have been identified as one of Udemy's Top Instructors and all my premium courses have earned the best-selling status for outstanding performance and student satisfaction. I'm a full-stack web developer and designer with a passion for building beautiful things from scratch. I've been building websites and apps since 2010 and also have a Master's degree in Engineering. I discovered my passion for teaching and helping others by sharing all I knew when I was in college, and that passion brought me to Udemy in 2015. Here, in all my courses, what students love the most is that I take the time to explain every concept in a way that everyone can easily understand. So, do you want to learn how to build awesome websites with modern HTML and CSS? Looking for a complete JavaScript course that takes you from zero to an advanced developer? Or maybe you want to build modern and fast back-end applications with Node.js? Then don't waste your time with random tutorials or incomplete youtube videos. All my courses are easy-to-follow, all-in-one packages that will take your skills to the next level. These courses are exactly the courses I wish I had when I was first getting into web development! So see for yourself, enroll in one of my courses (or all of them :D) and join 1,000,000+ happy students today. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6776e8af18ec542d',m:'ae04b2c7e0d925b7ad8e90f5e9ff3252099f79c0-1627735370-1800-ARU0Tvh9lGAqneI391zjPR5Wu83iI++7cn6aG9NPYLjAHq6ra4OZM/pznhwcsu48O7UVpRhLfSTwNG2TQExMUtxRAidHTyxmHpjmXfLfoGfZVPjAzc+ikBd0NVuWOyqMN6u9rAugU2eDtIiwB/rMXHXDIFeT/zfitejVnhsJHAHA3R8Udc2U5lEBQCmZH227L+lxYXF1CgPYXGyDHJPKxvo=',s:[0xf0afac30e9,0xeda111d492],}})();
  2. 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) Show more Show less Curated for the Udemy Business collection Course content 21 sections • 226 lectures • 49h 43m total length Expand all sections Welcome and First Steps 8 lectures • 49min Course Structure and Projects Preview 05:34 Read Before You Start! 00:52 Migration Guide to v2 02:15 A High-Level Overview of Web Development 11:01 Setting Up Our Code Editor 08:52 Your Very First Webpage! 09:55 Downloading Course Material 04:21 Watch Before You Start! 05:44 HTML Fundamentals 12 lectures • 2hr 5min Section Intro 00:40 Introduction to HTML Preview 04:18 HTML Document Structure Preview 11:46 Text Elements 16:20 More Text Elements: Lists 10:59 Images and Attributes 12:45 Hyperlinks 14:49 Structuring our Page 10:56 A Note on Semantic HTML 06:27 Installing Additional VS Code Extensions 07:14 CHALLENGE #1 11:50 CHALLENGE #2 17:11 CSS Fundamentals 24 lectures • 5hr 25min Section Intro 00:56 Introduction to CSS Preview 04:06 Inline, Internal and External CSS 12:12 Styling Text Preview 15:31 Combining Selectors 09:12 Class and ID Selectors 15:23 Working With Colors 24:07 Pseudo-classes 10:00 Styling Hyperlinks 09:43 Using Chrome DevTools 08:04 CSS Theory #1: Conflicts Between Selectors 17:23 CSS Theory #2: Inheritance and the Universal Selector 14:36 CHALLENGE #1 17:40 CSS Theory #3: The CSS Box Model 08:05 Using Margins and Paddings 22:07 Adding Dimensions 08:03 Centering our Page 07:56 CHALLENGE #2 10:59 CSS Theory #4: Types of Boxes 22:19 CSS Theory #5: Absolute Positioning 16:04 Pseudo-elements 16:51 Developer Skill #1: Googling and Reading Documentation 12:15 Developer Skill #2: Debugging and Asking Questions 22:16 CHALLENGE #3 19:37 Layouts: Floats, Flexbox, and CSS Grid Fundamentals 21 lectures • 4hr 2min Section Intro 01:18 The 3 Ways of Building Layouts 05:18 Using Floats 17:22 Clearing Floats 07:22 Building a Simple Float Layout 08:46 box-sizing: border-box 11:12 CHALLENGE #1 20:14 Introduction to Flexbox Preview 09:43 A Flexbox Overview 07:35 Spacing and Aligning Flex Items 10:51 The flex Property 11:34 Adding Flexbox to Our Project 19:57 Building a Simple Flexbox Layout 12:15 CHALLENGE #2 14:13 Introduction to CSS Grid Preview 10:57 A CSS Grid Overview 09:39 Sizing Grid Columns and Rows 13:54 Placing and Spanning Grid Items 13:00 Aligning Grid Items and Tracks 13:46 Building a Simple CSS Grid Layout 15:46 CHALLENGE #3 07:47 Web Design Rules and Framework 20 lectures • 4hr 53min Section Intro 02:18 Project Overview 06:13 Overview of Web Design and Website Personalities 12:36 Web Design Rules #1: Typography Preview 16:17 Implementing Typography 23:23 Web Design Rules #2: Colors 13:40 Implementing Colors 18:12 Web Design Rules #3: Images and Illustrations 14:57 Web Design Rules #4: Icons 12:59 Implementing Icons 21:33 Web Design Rules #5: Shadows 13:04 Implementing Shadows 12:08 Web Design Rules #6: Border-radius 04:54 Implementing Border-radius 06:40 Web Design Rules #7: Whitespace 13:10 Web Design Rules #8: Visual Hierarchy 22:58 Implementing Whitespace and Visual Hierarchy 15:43 Web Design Rules #9: User Experience (UX) 20:37 The Website-Personalities-Framework 30:59 The Missing Piece: Steal Like An Artist! 10:26 Components and Layout Patterns 14 lectures • 4hr 29min Section Intro 01:00 Web Design Rules #10 - Part 1: Elements and Components 27:48 Building an Accordion Component - Part 1 25:30 Building an Accordion Component - Part 2 19:24 Building a Carousel Component - Part 1 Preview 21:25 Building a Carousel Component - Part 2 Preview 29:41 Building a Table Component - Part 1 10:04 Building a Table Component - Part 2 13:16 CHALLENGE #1: Building a Pagination Component 24:19 Web Design Rules #10 - Part 2: Layout Patterns 21:52 Building a Hero Section - Part 1 22:11 Building a Hero Section - Part 2 21:21 Building a Web Application Layout - Part 1 15:12 Building a Web Application Layout - Part 2 15:56 Omnifood Project – Setup and Desktop Version 29 lectures • 10hr 17min Section Intro 01:02 The 7 Steps to a Great Website 20:29 Defining and Planning the Project (Steps 1 and 2) 24:36 Sketching Initial Layout Ideas (Step 3) 07:36 First Design and Development Steps (Step 4) 15:21 Responsive Design Principles 08:37 How rem and max-width Work 16:06 Building the Hero - Part 1 Preview 16:12 Building the Hero - Part 2 Preview 29:26 Building the Hero - Part 3 Preview 23:57 Building the Header 15:15 Building the Navigation 15:55 Setting Up a Reusable Grid 21:23 Building the How-It-Works Section - Part 1 29:16 Building the How-It-Works Section - Part 2 35:12 Building the Featured-In Section 19:45 Building the Meals Section - Part 1 26:35 Building the Meals Section - Part 2 21:01 Building the Meals Section - Part 3 29:42 Building the Testimonials Section - Part 1 18:14 Building the Testimonials Section - Part 2 24:38 Building the Pricing Section - Part 1 24:00 Building the Pricing Section - Part 2 25:57 Building the Features Part 19:06 Building the Call-To-Action Section - Part 1 26:12 Building the Call-To-Action Section - Part 2 24:45 Building the Call-To-Action Section - Part 3 29:09 Building the Footer - Part 1 19:15 Building the Footer - Part 2 27:58 Omnifood Project – Responsive Web Design 9 lectures • 2hr 44min Section Intro 00:47 How Media Queries Work 14:23 How to Select Breakpoints 04:47 Responding to Small Laptops 15:33 Responding to Landscape Tablets 19:24 Responding to Tablets 25:24 Building the Mobile Navigation 37:58 Responding to Smaller Tablets 18:56 Responding to Phones 26:42 Omnifood Project – Effects, Optimizations and Deployment 11 lectures • 2hr 40min Section Intro 00:50 A Short Introduction to JavaScript 18:48 Making the Mobile Navigation Work 08:32 Implementing Smooth Scrolling 29:24 Implementing a Sticky Navigation Bar 28:02 Browser Support and Fixing Flexbox Gap in Safari 19:06 Testing Performance With Lighthouse 08:45 Adding Favicon and Meta Description 12:24 Image Optimizations 18:26 Deployment to Netlify 08:20 Making the Form Work With Netlify Forms 07:49 The End! 1 lecture • 5min Where to Go from Here 04:32 11 more sections Requirements No 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 Description *** 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! 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 Show more Show less Featured review Natalia Banz 28 courses 5 reviews Rating: 5.0 out of 5 a year ago Good one! Slowly, but surely explained everything. Not too long, chapters made to the point. All what is needed is said. Already had some experience with HTML5 and CSS, but decided to go for another course just to maybe see some new things, or get more explanations. No regret, i've built Omnifood with Jonas and again, rebuilt it alone, with Grid&Sass. Had lots of fun, and gain lots of knowledge. Thanks and see you in next one. Show more Show less Instructor Jonas Schmedtmann Web Developer, Designer, and Teacher 4.7 Instructor Rating 237,170 Reviews 1,106,833 Students 5 Courses Hi, I'm Jonas! I have been identified as one of Udemy's Top Instructors and all my premium courses have earned the best-selling status for outstanding performance and student satisfaction. I'm a full-stack web developer and designer with a passion for building beautiful things from scratch. I've been building websites and apps since 2010 and also have a Master's degree in Engineering. I discovered my passion for teaching and helping others by sharing all I knew when I was in college, and that passion brought me to Udemy in 2015. Here, in all my courses, what students love the most is that I take the time to explain every concept in a way that everyone can easily understand. So, do you want to learn how to build awesome websites with modern HTML and CSS? Looking for a complete JavaScript course that takes you from zero to an advanced developer? Or maybe you want to build modern and fast back-end applications with Node.js? Then don't waste your time with random tutorials or incomplete youtube videos. All my courses are easy-to-follow, all-in-one packages that will take your skills to the next level. These courses are exactly the courses I wish I had when I was first getting into web development! So see for yourself, enroll in one of my courses (or all of them :D) and join 1,000,000+ happy students today. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6776e8af18ec542d',m:'ae04b2c7e0d925b7ad8e90f5e9ff3252099f79c0-1627735370-1800-ARU0Tvh9lGAqneI391zjPR5Wu83iI++7cn6aG9NPYLjAHq6ra4OZM/pznhwcsu48O7UVpRhLfSTwNG2TQExMUtxRAidHTyxmHpjmXfLfoGfZVPjAzc+ikBd0NVuWOyqMN6u9rAugU2eDtIiwB/rMXHXDIFeT/zfitejVnhsJHAHA3R8Udc2U5lEBQCmZH227L+lxYXF1CgPYXGyDHJPKxvo=',s:[0xf0afac30e9,0xeda111d492],}})();
  3. 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) Show more Show less Curated for the Udemy Business collection Course content 21 sections • 226 lectures • 49h 43m total length Expand all sections Welcome and First Steps 8 lectures • 49min Course Structure and Projects Preview 05:34 Read Before You Start! 00:52 Migration Guide to v2 02:15 A High-Level Overview of Web Development 11:01 Setting Up Our Code Editor 08:52 Your Very First Webpage! 09:55 Downloading Course Material 04:21 Watch Before You Start! 05:44 HTML Fundamentals 12 lectures • 2hr 5min Section Intro 00:40 Introduction to HTML Preview 04:18 HTML Document Structure Preview 11:46 Text Elements 16:20 More Text Elements: Lists 10:59 Images and Attributes 12:45 Hyperlinks 14:49 Structuring our Page 10:56 A Note on Semantic HTML 06:27 Installing Additional VS Code Extensions 07:14 CHALLENGE #1 11:50 CHALLENGE #2 17:11 CSS Fundamentals 24 lectures • 5hr 25min Section Intro 00:56 Introduction to CSS Preview 04:06 Inline, Internal and External CSS 12:12 Styling Text Preview 15:31 Combining Selectors 09:12 Class and ID Selectors 15:23 Working With Colors 24:07 Pseudo-classes 10:00 Styling Hyperlinks 09:43 Using Chrome DevTools 08:04 CSS Theory #1: Conflicts Between Selectors 17:23 CSS Theory #2: Inheritance and the Universal Selector 14:36 CHALLENGE #1 17:40 CSS Theory #3: The CSS Box Model 08:05 Using Margins and Paddings 22:07 Adding Dimensions 08:03 Centering our Page 07:56 CHALLENGE #2 10:59 CSS Theory #4: Types of Boxes 22:19 CSS Theory #5: Absolute Positioning 16:04 Pseudo-elements 16:51 Developer Skill #1: Googling and Reading Documentation 12:15 Developer Skill #2: Debugging and Asking Questions 22:16 CHALLENGE #3 19:37 Layouts: Floats, Flexbox, and CSS Grid Fundamentals 21 lectures • 4hr 2min Section Intro 01:18 The 3 Ways of Building Layouts 05:18 Using Floats 17:22 Clearing Floats 07:22 Building a Simple Float Layout 08:46 box-sizing: border-box 11:12 CHALLENGE #1 20:14 Introduction to Flexbox Preview 09:43 A Flexbox Overview 07:35 Spacing and Aligning Flex Items 10:51 The flex Property 11:34 Adding Flexbox to Our Project 19:57 Building a Simple Flexbox Layout 12:15 CHALLENGE #2 14:13 Introduction to CSS Grid Preview 10:57 A CSS Grid Overview 09:39 Sizing Grid Columns and Rows 13:54 Placing and Spanning Grid Items 13:00 Aligning Grid Items and Tracks 13:46 Building a Simple CSS Grid Layout 15:46 CHALLENGE #3 07:47 Web Design Rules and Framework 20 lectures • 4hr 53min Section Intro 02:18 Project Overview 06:13 Overview of Web Design and Website Personalities 12:36 Web Design Rules #1: Typography Preview 16:17 Implementing Typography 23:23 Web Design Rules #2: Colors 13:40 Implementing Colors 18:12 Web Design Rules #3: Images and Illustrations 14:57 Web Design Rules #4: Icons 12:59 Implementing Icons 21:33 Web Design Rules #5: Shadows 13:04 Implementing Shadows 12:08 Web Design Rules #6: Border-radius 04:54 Implementing Border-radius 06:40 Web Design Rules #7: Whitespace 13:10 Web Design Rules #8: Visual Hierarchy 22:58 Implementing Whitespace and Visual Hierarchy 15:43 Web Design Rules #9: User Experience (UX) 20:37 The Website-Personalities-Framework 30:59 The Missing Piece: Steal Like An Artist! 10:26 Components and Layout Patterns 14 lectures • 4hr 29min Section Intro 01:00 Web Design Rules #10 - Part 1: Elements and Components 27:48 Building an Accordion Component - Part 1 25:30 Building an Accordion Component - Part 2 19:24 Building a Carousel Component - Part 1 Preview 21:25 Building a Carousel Component - Part 2 Preview 29:41 Building a Table Component - Part 1 10:04 Building a Table Component - Part 2 13:16 CHALLENGE #1: Building a Pagination Component 24:19 Web Design Rules #10 - Part 2: Layout Patterns 21:52 Building a Hero Section - Part 1 22:11 Building a Hero Section - Part 2 21:21 Building a Web Application Layout - Part 1 15:12 Building a Web Application Layout - Part 2 15:56 Omnifood Project – Setup and Desktop Version 29 lectures • 10hr 17min Section Intro 01:02 The 7 Steps to a Great Website 20:29 Defining and Planning the Project (Steps 1 and 2) 24:36 Sketching Initial Layout Ideas (Step 3) 07:36 First Design and Development Steps (Step 4) 15:21 Responsive Design Principles 08:37 How rem and max-width Work 16:06 Building the Hero - Part 1 Preview 16:12 Building the Hero - Part 2 Preview 29:26 Building the Hero - Part 3 Preview 23:57 Building the Header 15:15 Building the Navigation 15:55 Setting Up a Reusable Grid 21:23 Building the How-It-Works Section - Part 1 29:16 Building the How-It-Works Section - Part 2 35:12 Building the Featured-In Section 19:45 Building the Meals Section - Part 1 26:35 Building the Meals Section - Part 2 21:01 Building the Meals Section - Part 3 29:42 Building the Testimonials Section - Part 1 18:14 Building the Testimonials Section - Part 2 24:38 Building the Pricing Section - Part 1 24:00 Building the Pricing Section - Part 2 25:57 Building the Features Part 19:06 Building the Call-To-Action Section - Part 1 26:12 Building the Call-To-Action Section - Part 2 24:45 Building the Call-To-Action Section - Part 3 29:09 Building the Footer - Part 1 19:15 Building the Footer - Part 2 27:58 Omnifood Project – Responsive Web Design 9 lectures • 2hr 44min Section Intro 00:47 How Media Queries Work 14:23 How to Select Breakpoints 04:47 Responding to Small Laptops 15:33 Responding to Landscape Tablets 19:24 Responding to Tablets 25:24 Building the Mobile Navigation 37:58 Responding to Smaller Tablets 18:56 Responding to Phones 26:42 Omnifood Project – Effects, Optimizations and Deployment 11 lectures • 2hr 40min Section Intro 00:50 A Short Introduction to JavaScript 18:48 Making the Mobile Navigation Work 08:32 Implementing Smooth Scrolling 29:24 Implementing a Sticky Navigation Bar 28:02 Browser Support and Fixing Flexbox Gap in Safari 19:06 Testing Performance With Lighthouse 08:45 Adding Favicon and Meta Description 12:24 Image Optimizations 18:26 Deployment to Netlify 08:20 Making the Form Work With Netlify Forms 07:49 The End! 1 lecture • 5min Where to Go from Here 04:32 11 more sections Requirements No 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 Description *** 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! 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 Show more Show less Featured review Natalia Banz 28 courses 5 reviews Rating: 5.0 out of 5 a year ago Good one! Slowly, but surely explained everything. Not too long, chapters made to the point. All what is needed is said. Already had some experience with HTML5 and CSS, but decided to go for another course just to maybe see some new things, or get more explanations. No regret, i've built Omnifood with Jonas and again, rebuilt it alone, with Grid&Sass. Had lots of fun, and gain lots of knowledge. Thanks and see you in next one. Show more Show less Instructor Jonas Schmedtmann Web Developer, Designer, and Teacher 4.7 Instructor Rating 237,170 Reviews 1,106,833 Students 5 Courses Hi, I'm Jonas! I have been identified as one of Udemy's Top Instructors and all my premium courses have earned the best-selling status for outstanding performance and student satisfaction. I'm a full-stack web developer and designer with a passion for building beautiful things from scratch. I've been building websites and apps since 2010 and also have a Master's degree in Engineering. I discovered my passion for teaching and helping others by sharing all I knew when I was in college, and that passion brought me to Udemy in 2015. Here, in all my courses, what students love the most is that I take the time to explain every concept in a way that everyone can easily understand. So, do you want to learn how to build awesome websites with modern HTML and CSS? Looking for a complete JavaScript course that takes you from zero to an advanced developer? Or maybe you want to build modern and fast back-end applications with Node.js? Then don't waste your time with random tutorials or incomplete youtube videos. All my courses are easy-to-follow, all-in-one packages that will take your skills to the next level. These courses are exactly the courses I wish I had when I was first getting into web development! So see for yourself, enroll in one of my courses (or all of them :D) and join 1,000,000+ happy students today. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6776e8af18ec542d',m:'ae04b2c7e0d925b7ad8e90f5e9ff3252099f79c0-1627735370-1800-ARU0Tvh9lGAqneI391zjPR5Wu83iI++7cn6aG9NPYLjAHq6ra4OZM/pznhwcsu48O7UVpRhLfSTwNG2TQExMUtxRAidHTyxmHpjmXfLfoGfZVPjAzc+ikBd0NVuWOyqMN6u9rAugU2eDtIiwB/rMXHXDIFeT/zfitejVnhsJHAHA3R8Udc2U5lEBQCmZH227L+lxYXF1CgPYXGyDHJPKxvo=',s:[0xf0afac30e9,0xeda111d492],}})();
  4. 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) Show more Show less Curated for the Udemy Business collection Course content 21 sections • 226 lectures • 49h 43m total length Expand all sections Welcome and First Steps 8 lectures • 49min Course Structure and Projects Preview 05:34 Read Before You Start! 00:52 Migration Guide to v2 02:15 A High-Level Overview of Web Development 11:01 Setting Up Our Code Editor 08:52 Your Very First Webpage! 09:55 Downloading Course Material 04:21 Watch Before You Start! 05:44 HTML Fundamentals 12 lectures • 2hr 5min Section Intro 00:40 Introduction to HTML Preview 04:18 HTML Document Structure Preview 11:46 Text Elements 16:20 More Text Elements: Lists 10:59 Images and Attributes 12:45 Hyperlinks 14:49 Structuring our Page 10:56 A Note on Semantic HTML 06:27 Installing Additional VS Code Extensions 07:14 CHALLENGE #1 11:50 CHALLENGE #2 17:11 CSS Fundamentals 24 lectures • 5hr 25min Section Intro 00:56 Introduction to CSS Preview 04:06 Inline, Internal and External CSS 12:12 Styling Text Preview 15:31 Combining Selectors 09:12 Class and ID Selectors 15:23 Working With Colors 24:07 Pseudo-classes 10:00 Styling Hyperlinks 09:43 Using Chrome DevTools 08:04 CSS Theory #1: Conflicts Between Selectors 17:23 CSS Theory #2: Inheritance and the Universal Selector 14:36 CHALLENGE #1 17:40 CSS Theory #3: The CSS Box Model 08:05 Using Margins and Paddings 22:07 Adding Dimensions 08:03 Centering our Page 07:56 CHALLENGE #2 10:59 CSS Theory #4: Types of Boxes 22:19 CSS Theory #5: Absolute Positioning 16:04 Pseudo-elements 16:51 Developer Skill #1: Googling and Reading Documentation 12:15 Developer Skill #2: Debugging and Asking Questions 22:16 CHALLENGE #3 19:37 Layouts: Floats, Flexbox, and CSS Grid Fundamentals 21 lectures • 4hr 2min Section Intro 01:18 The 3 Ways of Building Layouts 05:18 Using Floats 17:22 Clearing Floats 07:22 Building a Simple Float Layout 08:46 box-sizing: border-box 11:12 CHALLENGE #1 20:14 Introduction to Flexbox Preview 09:43 A Flexbox Overview 07:35 Spacing and Aligning Flex Items 10:51 The flex Property 11:34 Adding Flexbox to Our Project 19:57 Building a Simple Flexbox Layout 12:15 CHALLENGE #2 14:13 Introduction to CSS Grid Preview 10:57 A CSS Grid Overview 09:39 Sizing Grid Columns and Rows 13:54 Placing and Spanning Grid Items 13:00 Aligning Grid Items and Tracks 13:46 Building a Simple CSS Grid Layout 15:46 CHALLENGE #3 07:47 Web Design Rules and Framework 20 lectures • 4hr 53min Section Intro 02:18 Project Overview 06:13 Overview of Web Design and Website Personalities 12:36 Web Design Rules #1: Typography Preview 16:17 Implementing Typography 23:23 Web Design Rules #2: Colors 13:40 Implementing Colors 18:12 Web Design Rules #3: Images and Illustrations 14:57 Web Design Rules #4: Icons 12:59 Implementing Icons 21:33 Web Design Rules #5: Shadows 13:04 Implementing Shadows 12:08 Web Design Rules #6: Border-radius 04:54 Implementing Border-radius 06:40 Web Design Rules #7: Whitespace 13:10 Web Design Rules #8: Visual Hierarchy 22:58 Implementing Whitespace and Visual Hierarchy 15:43 Web Design Rules #9: User Experience (UX) 20:37 The Website-Personalities-Framework 30:59 The Missing Piece: Steal Like An Artist! 10:26 Components and Layout Patterns 14 lectures • 4hr 29min Section Intro 01:00 Web Design Rules #10 - Part 1: Elements and Components 27:48 Building an Accordion Component - Part 1 25:30 Building an Accordion Component - Part 2 19:24 Building a Carousel Component - Part 1 Preview 21:25 Building a Carousel Component - Part 2 Preview 29:41 Building a Table Component - Part 1 10:04 Building a Table Component - Part 2 13:16 CHALLENGE #1: Building a Pagination Component 24:19 Web Design Rules #10 - Part 2: Layout Patterns 21:52 Building a Hero Section - Part 1 22:11 Building a Hero Section - Part 2 21:21 Building a Web Application Layout - Part 1 15:12 Building a Web Application Layout - Part 2 15:56 Omnifood Project – Setup and Desktop Version 29 lectures • 10hr 17min Section Intro 01:02 The 7 Steps to a Great Website 20:29 Defining and Planning the Project (Steps 1 and 2) 24:36 Sketching Initial Layout Ideas (Step 3) 07:36 First Design and Development Steps (Step 4) 15:21 Responsive Design Principles 08:37 How rem and max-width Work 16:06 Building the Hero - Part 1 Preview 16:12 Building the Hero - Part 2 Preview 29:26 Building the Hero - Part 3 Preview 23:57 Building the Header 15:15 Building the Navigation 15:55 Setting Up a Reusable Grid 21:23 Building the How-It-Works Section - Part 1 29:16 Building the How-It-Works Section - Part 2 35:12 Building the Featured-In Section 19:45 Building the Meals Section - Part 1 26:35 Building the Meals Section - Part 2 21:01 Building the Meals Section - Part 3 29:42 Building the Testimonials Section - Part 1 18:14 Building the Testimonials Section - Part 2 24:38 Building the Pricing Section - Part 1 24:00 Building the Pricing Section - Part 2 25:57 Building the Features Part 19:06 Building the Call-To-Action Section - Part 1 26:12 Building the Call-To-Action Section - Part 2 24:45 Building the Call-To-Action Section - Part 3 29:09 Building the Footer - Part 1 19:15 Building the Footer - Part 2 27:58 Omnifood Project – Responsive Web Design 9 lectures • 2hr 44min Section Intro 00:47 How Media Queries Work 14:23 How to Select Breakpoints 04:47 Responding to Small Laptops 15:33 Responding to Landscape Tablets 19:24 Responding to Tablets 25:24 Building the Mobile Navigation 37:58 Responding to Smaller Tablets 18:56 Responding to Phones 26:42 Omnifood Project – Effects, Optimizations and Deployment 11 lectures • 2hr 40min Section Intro 00:50 A Short Introduction to JavaScript 18:48 Making the Mobile Navigation Work 08:32 Implementing Smooth Scrolling 29:24 Implementing a Sticky Navigation Bar 28:02 Browser Support and Fixing Flexbox Gap in Safari 19:06 Testing Performance With Lighthouse 08:45 Adding Favicon and Meta Description 12:24 Image Optimizations 18:26 Deployment to Netlify 08:20 Making the Form Work With Netlify Forms 07:49 The End! 1 lecture • 5min Where to Go from Here 04:32 11 more sections Requirements No 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 Description *** 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 instr