07550183510
×
Welcome
×
Welcome
×
Welcome
×
Welcome
Info!
Succesfull Added in Wishlist

Build Responsive Real-World Websites with HTML and CSS

Created By Jonas Schmedtmann

  • Overview
  • Course Content
  • Instructor
  • Compare

Build Responsive Real-World Websites with HTML and CSS

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

English

455 3,499

This course includes:
  • 37h 29m On-demand training
Build Responsive Real-World Websites with HTML and CSS

Build Responsive Real-World Websites with HTML and CSS

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

English

455 3,499

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)

Course content

148 sections • 9 lectures • 37h 29m total length
Expand all sections

Course Structure and Projects

Read Before You Start!
Migration Guide to v2
A High-Level Overview of Web Development
Setting Up Our Code Editor
Your Very First Webpage!
Downloading Course Material
Watch Before You Start!

Section Intro

Introduction to HTML

HTML Document Structure

Text Elements
More Text Elements: Lists
Images and Attributes
Hyperlinks
Structuring our Page

Section Intro

Introduction to CSS

Inline, Internal and External CSS
Styling Text
Combining Selectors
Class and ID Selectors
Working With Colors
Pseudo-classes

Section Intro
The 3 Ways of Building Layouts
Using Floats
Clearing Floats
Building a Simple Float Layout
box-sizing: border-box
CHALLENGE #1

Section Intro
Project Overview
Overview of Web Design and Website Personalities
Implementing Typography
Web Design Rules #2: Colors
Implementing Colors

Section Intro
Web Design Rules #10 - Part 1: Elements and Components
Building an Accordion Component - Part 1
Building an Accordion 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

Section Intro
The 7 Steps to a Great Website
Defining and Planning the Project (Steps 1 and 2)
Sketching Initial Layout Ideas (Step 3)
First Design and Development Steps (Step 4)
Responsive Design Principles

Section Intro

How Media Queries Work
How to Select Breakpoints
Responding to Small Laptops
Responding to Landscape Tablets
Responding to Tablets
Building the Mobile Navigation

Section Intro
A Short Introduction to JavaScript
Making the Mobile Navigation Work
Implementing Smooth Scrolling
Implementing a Sticky Navigation Bar
Browser Support and Fixing Flexbox Gap in Safari
This course includes:
  • 37h 29m On-demand training

Requirements

NA

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

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

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.

Similar Courses
In 2020, build a beautiful responsive Wordpress site that looks great on all devices. No experience required

In 2020, build a beautiful responsive Wordpress site that looks great on all devices. No experience required

Andrew Williams, NA

455 3,499

In 2020, build a beautiful responsive Wordpress site that looks great on all devices. No experience required

9h 20m • Mixed

Wordpress for Beginners - Master Wordpress Quickly..

Become a WordPress Developer: Unlocking Power With Code

Become a WordPress Developer: Unlocking Power With Code

Brad Schiff, NA

455 3,499

Become a WordPress Developer: Unlocking Power With Code

35h 31m • Mixed

Learn PHP, JavaScript, WordPress theming & the WP REST API to Create Custom & Interactive WordPress ..

SEO 2021: Complete SEO Training + SEO for WordPress Websites

SEO 2021: Complete SEO Training + SEO for WordPress Websites

Arun Nagarathanam, NA

455 3,499

SEO 2021: Complete SEO Training + SEO for WordPress Websites

11h 12m • Mixed

Rank 1 on Google with Technical SEO, 1s Pagespeed, UX SEO, Backlink SEO, Keyword Research SEO + Word..

The Complete WordPress Website Business Course

The Complete WordPress Website Business Course

Rob Percival, NA

455 3,499

The Complete WordPress Website Business Course

22h 3m • Mixed

Master WordPress with this Complete WordPress Course, without learning how to code and without any p..

WordPress for Beginners: Create a Website Step by Step

WordPress for Beginners: Create a Website Step by Step

Brad Schiff, NA

455 3,499

WordPress for Beginners: Create a Website Step by Step

4h 39m • Mixed

Create Websites and Blogs With Zero Experience Using WordPress and This Step By Step Guideq..

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

Jonas Schmedtmann, NA

455 3,499

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

28h 6m • Mixed

The most advanced and modern CSS course on the internet: master flexbox, CSS Grid, responsive design..

HTML and CSS for Beginners - Build a Website & Launch ONLINE

HTML and CSS for Beginners - Build a Website & Launch ONLINE

Edwin Diaz, NA

455 3,499

HTML and CSS for Beginners - Build a Website & Launch ONLINE

5h 49m • Mixed

HTML and CSS for Beginners course will give your all the knowledge you need to master HTML and CSS e..

Modern HTML & CSS From The Beginning (Including Sass)

Modern HTML & CSS From The Beginning (Including Sass)

Brad Traversy, NA

455 3,499

Modern HTML & CSS From The Beginning (Including Sass)

20h 46m • Mixed

Build modern responsive websites & UIs with HTML5, CSS3 & Sass! Learn Flex & CSS Grid..

455 3,499