We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

Build Responsive Real-World Websites with HTML and CSS

Jonas Schmedtmann

The #1 bestselling HTML and CSS course on Udemy.

Completely re-built from scratch in July 2021 (35+ hours video)

Read more

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

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 semanticomnifood.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.

Enroll now

What's inside

Learning objectives

  • 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

Syllabus

Welcome and First Steps
Course Structure and Projects
Read Before You Start!
A High-Level Overview of Web Development
Read more
Setting Up Our Code Editor
Your Very First Webpage!
Downloading Course Material
Watch Before You Start!
HTML Fundamentals
Section Intro
Introduction to HTML
HTML Document Structure
Text Elements
More Text Elements: Lists
Images and Attributes
Hyperlinks
Structuring our Page
A Note on Semantic HTML
Installing Additional VS Code Extensions
CHALLENGE #1
CHALLENGE #2
CSS Fundamentals
Introduction to CSS
Inline, Internal and External CSS
Styling Text
Combining Selectors
Class and ID Selectors
Working With Colors
Pseudo-classes
Styling Hyperlinks
Using Chrome DevTools
CSS Theory #1: Conflicts Between Selectors
CSS Theory #2: Inheritance and the Universal Selector
CSS Theory #3: The CSS Box Model
Using Margins and Paddings
Adding Dimensions
Centering our Page
CSS Theory #4: Types of Boxes
CSS Theory #5: Absolute Positioning
Pseudo-elements
Developer Skill #1: Googling and Reading Documentation
Developer Skill #2: Debugging and Asking Questions
CHALLENGE #3
Layouts: Floats, Flexbox, and CSS Grid Fundamentals
The 3 Ways of Building Layouts
Using Floats
Clearing Floats
Building a Simple Float Layout
box-sizing: border-box
Introduction to Flexbox
A Flexbox Overview
Spacing and Aligning Flex Items
The flex Property
Adding Flexbox to Our Project
Building a Simple Flexbox Layout
Introduction to CSS Grid
A CSS Grid Overview
Sizing Grid Columns and Rows
Placing and Spanning Grid Items
Aligning Grid Items and Tracks
Building a Simple CSS Grid Layout
Web Design Rules and Framework
Project Overview
Overview of Web Design and Website Personalities
Web Design Rules #1: Typography
Implementing Typography
Web Design Rules #2: Colors
Implementing Colors
Web Design Rules #3: Images and Illustrations
Web Design Rules #4: Icons
Implementing Icons
Web Design Rules #5: Shadows
Implementing Shadows
Web Design Rules #6: Border-radius
Implementing Border-radius
Web Design Rules #7: Whitespace
Web Design Rules #8: Visual Hierarchy
Implementing Whitespace and Visual Hierarchy
Web Design Rules #9: User Experience (UX)
The Website-Personalities-Framework
The Missing Piece: Steal Like An Artist!
Components and Layout Patterns
Web Design Rules #10 - Part 1: Elements and Components
Building an Accordion Component - Part 1
Building an Accordion Component - Part 2
Building a Carousel Component - Part 1
Building a Carousel Component - Part 2
Building a Table Component - Part 1
Building a Table Component - Part 2
CHALLENGE #1: Building a Pagination Component
Web Design Rules #10 - Part 2: Layout Patterns

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Taught by Jonas Schmedtmann, who is recognized for their work in web development and design
Teaches modern HTML5, CSS, and flexbox, which are industry standards
Provides a solid foundation for beginners in HTML and CSS
Develops professional website design and development skills
Offers a comprehensive study of web design and development
Taught with clear, easy-to-understand videos and examples

Save this course

Save Build Responsive Real-World Websites with HTML and CSS to your list so you can find it easily later:
Save

Reviews summary

Website development with html and css

According to students, this course will help you learn HTML and CSS in order to build websites. They described course content as easy to follow and engaging.
The instructor is helpful.
"Thanking this great instructor."
This course is good for beginners.
"This is Amy ever first online class that I have stayed put through..."
"taking me from fear stage and gradually crossing into more confident stage in front end design."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Build Responsive Real-World Websites with HTML and CSS with these activities:
Review Project Management Fundamentals
Project management fundamentals are essential for planning and executing web development projects.
Browse courses on Project Management
Show steps
  • Review the course syllabus
  • Identify the key skills and concepts that you need to review
  • Create a study plan and set aside time to review the fundamentals
  • Focus on understanding the concepts rather than just memorizing facts
Practice Coding HTML and CSS
Coding is a core skill in web development and it's important to get as much practice as possible.
Browse courses on HTML
Show steps
  • Find online HTML and CSS coding exercises
  • Work through the exercises and focus on building your skills
  • Don't be afraid to experiment and try different approaches
Attend a Web Development Workshop
Workshops provide an opportunity to learn from experienced professionals and network with other learners.
Browse courses on Web Development
Show steps
  • Find a web development workshop that is relevant to your interests and learning goals
  • Register for the workshop and pay the fee
  • Attend the workshop and actively participate in the activities
  • Follow up with the instructors and other attendees after the workshop
One other activity
Expand to see all activities and additional details
Show all four activities
Design and Build a Simple Website
Building a simple website is a great way to apply your HTML and CSS skills and learn about the web development process.
Browse courses on Web Design
Show steps
  • Plan the layout and content of your website
  • Code the HTML and CSS for your website
  • Test your website and make sure it works properly
  • Deploy your website to the internet

Career center

Learners who complete Build Responsive Real-World Websites with HTML and CSS will develop knowledge and skills that may be useful to these careers:
Front-End Web Developer
Front-End Web Developers are responsible for the design and implementation of the front-end of websites and web applications. This course will provide you with the skills and knowledge necessary to become a successful Front-End Web Developer. You will learn how to use HTML and CSS to create beautiful and responsive websites that work on all devices. You will also learn about the latest web design trends and best practices.
Web Designer
Web Designers are responsible for the overall look and feel of websites and web applications. This course will provide you with the skills and knowledge necessary to become a successful Web Designer. You will learn about the principles of web design, including typography, color theory, and layout. You will also learn how to use HTML and CSS to create beautiful and responsive websites.
User Experience (UX) Designer
UX Designers are responsible for the user experience of websites and web applications. This course will provide you with the skills and knowledge necessary to become a successful UX Designer. You will learn about the principles of UX design, including user research, prototyping, and testing. You will also learn how to use HTML and CSS to create websites and web applications that are easy to use and enjoyable to interact with.
UI Developer
UI Developers are responsible for the development of the user interface of websites and web applications. This course will provide you with the skills and knowledge necessary to become a successful UI Developer. You will learn how to use HTML and CSS to create beautiful and responsive user interfaces that work on all devices.
Web Developer
Web Developers are responsible for the development of websites and web applications. This course will provide you with the skills and knowledge necessary to become a successful Web Developer. You will learn how to use HTML, CSS, and JavaScript to create websites and web applications that are both functional and beautiful.
Software Engineer
Software Engineers are responsible for the design, development, and maintenance of software systems. This course may be useful for Software Engineers who want to learn more about web development.
Computer Programmer
Computer Programmers are responsible for the development and maintenance of computer programs. This course may be useful for Computer Programmers who want to learn more about web development.
Database Administrator
Database Administrators are responsible for the design, development, and maintenance of database systems. This course may be useful for Database Administrators who want to learn more about web development.
Web Application Developer
Web Application Developers are responsible for the development of web applications. This course may be useful for Web Application Developers who want to learn more about web development.
Network Administrator
Network Administrators are responsible for the design, development, and maintenance of computer networks. This course may be useful for Network Administrators who want to learn more about web development.
Information Security Analyst
Information Security Analysts are responsible for the protection of computer systems and data from unauthorized access. This course may be useful for Information Security Analysts who want to learn more about web development.
Game Developer
Game Developers are responsible for the development of video games. This course may be useful for Game Developers who want to learn more about web development.
Systems Analyst
Systems Analysts are responsible for the analysis and design of computer systems. This course may be useful for Systems Analysts who want to learn more about web development.
Mobile Application Developer
Mobile Application Developers are responsible for the development of mobile applications. This course may be useful for Mobile Application Developers who want to learn more about web development.
Computer Systems Analyst
Computer Systems Analysts are responsible for the analysis and design of computer systems. This course may be useful for Computer Systems Analysts who want to learn more about web development.

Reading list

We've selected 18 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Build Responsive Real-World Websites with HTML and CSS.
Comprehensive guide to CSS, covering everything from the basics to more advanced topics such as CSS Grid and Flexbox. It great resource for both beginners and experienced developers who want to learn more about CSS.
Save
Great resource for beginners who want to learn HTML and CSS. It covers the basics of HTML and CSS, as well as more advanced topics such as responsive design and CSS Grid.
Provides a comprehensive overview of web design. It good choice for beginners who want to learn how to design websites from scratch.
Provides a practical guide to web usability. It good choice for developers who want to learn how to design websites that are easy to use and navigate.
Provides a comprehensive overview of user experience design. It good choice for developers who want to learn how to design websites that are both usable and enjoyable to use.
Provides a comprehensive overview of responsive web design. It good choice for developers who want to learn how to design websites that work well on all devices.
Provides a comprehensive overview of CSS. It good choice for developers who want to learn how to use CSS to build websites that are both stylish and functional.
Provides a comprehensive overview of HTML5 and CSS3. It good choice for developers who want to learn how to use these technologies to build modern websites.
Provides a practical guide to web design. It good choice for developers who want to learn how to design websites that are both beautiful and functional.
Provides a comprehensive overview of HTML and CSS, covering the basics of web design and development. It good choice for beginners who want to learn how to build websites from scratch.
Comprehensive reference guide to HTML and CSS. It good choice for developers who want to have a quick reference to the HTML and CSS specifications.
Provides a comprehensive overview of web design best practices. It good choice for developers who want to learn how to design websites that are accessible, usable, and maintainable.
Great resource for beginners who want to learn how to create modern websites. It covers the basics of HTML and CSS, as well as more advanced topics such as responsive design and CSS Grid.
Great resource for experienced developers who want to learn more about CSS. It covers advanced topics such as CSS Grid, Flexbox, and CSS animations.
Comprehensive guide to CSS3, covering everything from the basics to more advanced topics such as CSS Grid and Flexbox. It great resource for both beginners and experienced developers who want to learn more about CSS3.
Collection of recipes for common CSS problems. It great resource for beginners and experienced developers alike who want to learn how to solve common CSS problems.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Build Responsive Real-World Websites with HTML and CSS.
Web Design Responsive Website Template from Scratch HTML...
Most relevant
WordPress Development For Beginners
Most relevant
Build Websites from Scratch with HTML & CSS
Most relevant
Web Design Creating websites from scratch
Most relevant
E-Commerce Payments Using Stripe and NodeJS
Most relevant
Web Design for Beginners: Real World Coding in HTML & CSS
Most relevant
UI UX Design Hybrid from Figma to HTML CSS and JavaScript
Most relevant
Modern CSS for Beginners 2023 web design getting started
Most relevant
Try It: CSS Fundamentals
Most relevant
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser