Build Responsive Real-World Websites with HTML and CSS

Focused View

Jonas Schmedtmann

37:26:07

431 View

01 - Welcome and First Steps

001 Course Structure and Projects.mp4

05:34

002 Read Before You Start!.html

002 all-design-guidelines.pdf

002 theory-lectures-v2-BEST.pdf

002 theory-lectures-v2-SMALLER.pdf

003 Migration Guide to v2.html

004 A High-Level Overview of Web Development.mp4

11:01

005 Setting Up Our Code Editor.mp4

08:52

006 Your Very First Webpage!.mp4

09:56

007 Downloading Course Material.mp4

04:21

008 Watch Before You Start!.mp4

05:44

external-links.txt

02 - HTML Fundamentals

001 Section Intro.mp4

00:40

002 Introduction to HTML.mp4

04:18

003 HTML Document Structure.mp4

11:46

004 Text Elements.mp4

16:20

005 More Text Elements Lists.mp4

10:59

006 Images and Attributes.mp4

12:45

007 Hyperlinks.mp4

14:49

008 Structuring our Page.mp4

10:56

009 A Note on Semantic HTML.mp4

06:28

010 Installing Additional VS Code Extensions.mp4

07:14

011 CHALLENGE #1.mp4

11:50

012 CHALLENGE #2.mp4

17:12

external-links.txt

03 - CSS Fundamentals

001 Section Intro.mp4

00:56

002 Introduction to CSS.mp4

04:06

003 Inline, Internal and External CSS.mp4

12:12

004 Styling Text.mp4

15:31

005 Combining Selectors.mp4

09:12

006 Class and ID Selectors.mp4

15:23

007 Working With Colors.mp4

24:07

008 Pseudo-classes.mp4

10:00

009 Styling Hyperlinks.mp4

09:43

010 Using Chrome DevTools.mp4

08:04

011 CSS Theory #1 Conflicts Between Selectors.mp4

17:23

012 CSS Theory #2 Inheritance and the Universal Selector.mp4

14:36

013 CHALLENGE #1.mp4

17:41

014 CSS Theory #3 The CSS Box Model.mp4

08:05

015 Using Margins and Paddings.mp4

22:07

016 Adding Dimensions.mp4

08:03

017 Centering our Page.mp4

07:56

018 CHALLENGE #2.mp4

10:59

019 CSS Theory #4 Types of Boxes.mp4

22:19

020 CSS Theory #5 Absolute Positioning.mp4

16:04

021 Pseudo-elements.mp4

16:52

022 Developer Skill #1 Googling and Reading Documentation.mp4

12:15

023 Developer Skill #2 Debugging and Asking Questions.mp4

22:16

024 CHALLENGE #3.mp4

19:37

external-links.txt

04 - Layouts Floats, Flexbox, and CSS Grid Fundamentals

001 Section Intro.mp4

01:18

002 The 3 Ways of Building Layouts.mp4

05:18

003 Using Floats.mp4

17:22

004 Clearing Floats.mp4

07:22

005 Building a Simple Float Layout.mp4

08:46

006 box-sizing border-box.mp4

11:12

007 CHALLENGE #1.mp4

20:15

008 Introduction to Flexbox.mp4

09:43

009 A Flexbox Overview.mp4

07:35

010 Spacing and Aligning Flex Items.mp4

10:51

011 The flex Property.mp4

11:34

012 Adding Flexbox to Our Project.mp4

19:57

013 Building a Simple Flexbox Layout.mp4

12:15

014 CHALLENGE #2.mp4

14:13

015 Introduction to CSS Grid.mp4

10:57

016 A CSS Grid Overview.mp4

09:40

017 Sizing Grid Columns and Rows.mp4

13:54

018 Placing and Spanning Grid Items.mp4

13:00

019 Aligning Grid Items and Tracks.mp4

13:46

020 Building a Simple CSS Grid Layout.mp4

15:46

021 CHALLENGE #3.mp4

07:47

external-links.txt

05 - Web Design Rules and Framework

001 Section Intro.mp4

02:18

002 Project Overview.mp4

06:13

003 Overview of Web Design and Website Personalities.mp4

12:36

003 all-design-guidelines.pdf

004 Web Design Rules #1 Typography.mp4

16:17

005 Implementing Typography.mp4

23:23

006 Web Design Rules #2 Colors.mp4

13:40

007 Implementing Colors.mp4

18:12

008 Web Design Rules #3 Images and Illustrations.mp4

14:57

009 Web Design Rules #4 Icons.mp4

12:59

010 Implementing Icons.mp4

21:33

011 Web Design Rules #5 Shadows.mp4

13:04

012 Implementing Shadows.mp4

12:08

013 Web Design Rules #6 Border-radius.mp4

04:54

014 Implementing Border-radius.mp4

06:40

015 Web Design Rules #7 Whitespace.mp4

13:10

016 Web Design Rules #8 Visual Hierarchy.mp4

22:58

017 Implementing Whitespace and Visual Hierarchy.mp4

15:43

018 Web Design Rules #9 User Experience (UX).mp4

20:37

019 The Website-Personalities-Framework.mp4

30:59

020 The Missing Piece Steal Like An Artist!.mp4

10:26

06 - Components and Layout Patterns

001 Section Intro.mp4

01:00

002 Web Design Rules #10 - Part 1 Elements and Components.mp4

27:48

003 Building an Accordion Component - Part 1.mp4

25:31

004 Building an Accordion Component - Part 2.mp4

19:24

005 Building a Carousel Component - Part 1.mp4

21:25

006 Building a Carousel Component - Part 2.mp4

29:41

007 Building a Table Component - Part 1.mp4

10:04

008 Building a Table Component - Part 2.mp4

13:16

009 CHALLENGE #1 Building a Pagination Component.mp4

24:19

010 Web Design Rules #10 - Part 2 Layout Patterns.mp4

21:52

011 Building a Hero Section - Part 1.mp4

22:11

012 Building a Hero Section - Part 2.mp4

21:21

013 Building a Web Application Layout - Part 1.mp4

15:12

014 Building a Web Application Layout - Part 2.mp4

15:56

07 - Omnifood Project Setup and Desktop Version

001 Section Intro.mp4

01:02

002 The 7 Steps to a Great Website.mp4

20:30

003 Defining and Planning the Project (Steps 1 and 2).mp4

24:36

004 Sketching Initial Layout Ideas (Step 3).mp4

07:36

005 First Design and Development Steps (Step 4).mp4

15:21

006 Responsive Design Principles.mp4

08:37

007 How rem and max-width Work.mp4

16:06

008 Building the Hero - Part 1.mp4

16:12

009 Building the Hero - Part 2.mp4

29:26

010 Building the Hero - Part 3.mp4

23:57

011 Building the Header.mp4

15:15

012 Building the Navigation.mp4

15:55

013 Setting Up a Reusable Grid.mp4

21:23

014 Building the How-It-Works Section - Part 1.mp4

29:16

015 Building the How-It-Works Section - Part 2.mp4

35:12

016 Building the Featured-In Section.mp4

19:45

017 Building the Meals Section - Part 1.mp4

26:35

018 Building the Meals Section - Part 2.mp4

21:01

019 Building the Meals Section - Part 3.mp4

29:42

020 Building the Testimonials Section - Part 1.mp4

18:15

021 Building the Testimonials Section - Part 2.mp4

24:38

022 Building the Pricing Section - Part 1.mp4

24:00

023 Building the Pricing Section - Part 2.mp4

25:58

024 Building the Features Part.mp4

19:06

025 Building the Call-To-Action Section - Part 1.mp4

26:12

026 Building the Call-To-Action Section - Part 2.mp4

24:45

027 Building the Call-To-Action Section - Part 3.mp4

29:09

028 Building the Footer - Part 1.mp4

19:16

029 Building the Footer - Part 2.mp4

27:58

08 - Omnifood Project Responsive Web Design

001 Section Intro.mp4

00:47

002 How Media Queries Work.mp4

14:23

003 How to Select Breakpoints.mp4

04:47

004 Responding to Small Laptops.mp4

15:33

005 Responding to Landscape Tablets.mp4

19:25

006 Responding to Tablets.mp4

25:24

007 Building the Mobile Navigation.mp4

37:58

008 Responding to Smaller Tablets.mp4

18:56

009 Responding to Phones.mp4

26:42

09 - Omnifood Project Effects, Optimizations and Deployment

001 Section Intro.mp4

00:50

002 A Short Introduction to JavaScript.mp4

18:48

003 Making the Mobile Navigation Work.mp4

08:32

004 Implementing Smooth Scrolling.mp4

29:24

005 Implementing a Sticky Navigation Bar.mp4

28:02

006 Browser Support and Fixing Flexbox Gap in Safari.mp4

19:06

007 Testing Performance With Lighthouse.mp4

08:45

008 Adding Favicon and Meta Description.mp4

12:24

009 Image Optimizations.mp4

18:26

010 Deployment to Netlify.mp4

08:20

011 Making the Form Work With Netlify Forms.mp4

07:49

10 - The End!

001 Where to Go from Here.mp4

04:32

002 My Other Courses + Updates.html

11 - [LEGACY] Old Course Version 1

001 Download the Old Course Version.html

001 SECTION-01.zip

001 SECTION-02.zip

001 SECTION-03.zip

001 SECTION-04.zip

001 SECTION-05.zip

001 SECTION-06.zip

001 SECTION-07.zip

001 SECTION-08.zip

001 SECTION-09.zip

001 SECTION-99-BONUS.zip

001 course-materials-v1.zip

001 course-outline-v1.pdf

Description

Learn modern HTML5, CSS3 and web design by building a stunning website for your portfolio! Includes flexbox and CSS Grid

What You'll Learn?

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)

Who is this for?

Complete beginners who want to learn how to build a professional, beautiful and responsive website

Students with some knowledge about HTML and CSS, but who struggle to put together a great website

Designers who want to expand their skill set into HTML5 and CSS3

What You Need to Know?

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

More details

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

User Reviews

Rating

average 0

Total votes0

Focused display

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.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.