Modern HTML & CSS From The Beginning (Including Sass)
4.7 (10,425 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
31,394 students enrolled

Modern HTML & CSS From The Beginning (Including Sass)

Build modern responsive websites & UIs with HTML5, CSS3 & Sass! Learn Flex & CSS Grid
4.7 (10,425 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
31,394 students enrolled
Created by Brad Traversy
Last updated 4/2020
English
English [Auto-generated]
Current price: $96.99 Original price: $149.99 Discount: 35% off
10 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 21 hours on-demand video
  • 2 articles
  • 26 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build Multiple High Quality Website & UI Projects
  • HTML5 Semantic Layout & CSS Fundamentals
  • Flexbox & CSS Grid Projects
  • CSS Variables, Transitions, Dropdowns, Overlays & More
  • Website Hosting & Deployment With FTP & Git
  • All Skill Levels
Course content
Expand all 129 lectures 20:46:24
+ Introduction
4 lectures 26:58
The Roles Of HTML & CSS In Web Development
06:34
Getting Setup With Visual Studio Code
07:12
+ HTML Basics
14 lectures 01:51:56
Section Intro
02:29
Doctype & Basic Layout
07:47
Setting Up Live Server (VSCode Extension)
04:33
Meta Tags & Search Engines
09:09
Headings, Paragraphs & Typography
09:42
Links, Images & Attributes
10:25
Lists & Tables
08:46
Forms & Input
17:24
Block & Inline Level Elements
05:50
Divs & Spans, Classes & Ids
09:58
HTML Entities
07:55
HTML5 Semantic Tags & Challenge
05:35
HTML5 Semantics Solution & Wrap Up
03:37
+ CSS Basics
16 lectures 02:32:49
Section Intro
03:03
Implementing CSS
08:47
Basic CSS Selectors
10:24
Dev Tools Introduction
05:39
Fonts In CSS
12:11
Color Types
08:44
Backgrounds & Borders
16:39
Box Model, Margin & Padding
15:03
Float & Alignment
13:15
Link State & Button Styling
09:19
Navigation Menu Styling
11:10
Inline, Block & Inline-Block Display
08:14
Positioning
10:32
Form Style Challenge
04:55
Form Style Solution
09:11
Aside: Visibility, Order & Negative Margin
05:43
+ Hotel Website
7 lectures 01:35:21
Aside: Design & Ideas
03:39
File Structure & Navbar
21:01
Showcase & Home Info
22:24
Features & Footer
12:14
About Page
20:03
Contact Page
11:54
+ Intro To Responsive Layouts
5 lectures 01:08:01
What Is Responsive Design?
03:23
Getting Started With Media Queries
15:06
Em & Rem Units
15:39
Vh & Vw Units
14:44
Making The Hotel Website Fully Responsive
19:09
+ Intro To Flexbox
4 lectures 22:23
What Is Flexbox?
03:09
Flexbox Basics
06:02
Flex Properties
05:16
Flex Alignment & Justify
07:56
+ EdgeLedger Website (Flexbox)
10 lectures 01:43:52
Header HTML & Navbar Styles
14:10
Hero Section & Overlay
10:52
Icons & Solutions Sections
15:10
Cases & Blog Sections
08:51
Finishing The Homepage
13:37
Responsive Media Queries
06:29
Inner Pages
12:59
Navbar & Lightbox Effects
16:34
Extra - Adding a Favicon
01:52
+ Website Deployment - Shared Host
6 lectures 34:32
Types Of Web Hosting
07:59
Shared Hosting Setup
09:51
Hosting Company Links
00:09
Setting Up Email
04:45
Upload Your Site via FTP
05:36
BONUS: Contact Form Submission (PHP Script)
06:12
+ More CSS Concepts - Advanced Selectors, Animation & More
10 lectures 01:25:11
Targeted Selectors
09:38
nth-child Pseudo Selectors
06:52
before & after Pseudo Selectors
10:51
Box Shadows
08:19
Text Shadows
05:35
CSS Variables (Custom Properties)
10:49
Keyframe Animation 1
10:44
Keyframe Animation 2
07:15
CSS Transitions
07:51
Transform Property
07:17
+ Mini Projects With Keyframes, Transitions, etc
12 lectures 02:13:33
Presentation Website [1] - Intro & HTML
07:33
Presentation Website [2] - Page CSS
09:02
Presentation Website [3] - Text Animation
08:38
Hamburger Menu Overlay [1] - HTML & Base CSS
20:18
Hamburger Menu Overlay [2] - Creating The Hamburger
11:37
Hamburger Menu Overlay [3] - Animating The Hamburger Lines
04:41
Hamburger Menu Overlay [4] - Menu Overlay
15:00
Knowledge Timeline [1] - HTML & Base CSS
07:54
Knowledge Timeline [2] - Boxes & Arrows
14:32
Knowledge Timeline [3] - Responsive Media Queries
05:51
Knowledge Timeline [4] - Scroll In Animation
09:44
Quick Dropdown Menu Project
18:43
Requirements
  • This course is for any developer, beginner to advanced
Description

This course is for both beginners and seasoned developers that want to learn how to build responsive websites and user interfaces with modern HTML5 and CSS3+ technologies like Flexbox and CSS Grid as well as the Sass pre-compiler. This course includes hours of both learning & studying sections along with real life projects. Stop having to rely on frameworks like Bootstrap for your user interface and learn how to create your own layouts and utility classes to build custom responsive websites and app UIs.

The first few sections are tailored for beginners so even if you have never built anything before, you will learn all of the basics. If you already have experience with basic HTML & CSS, just move to section 3 or 4 and get started.

Things We Cover

  • How Websites Work

  • Visual Studio Code Setup, Shortcuts, Live Server & Emmet

  • HTML5 Semantic Layout

  • CSS Fundamentals

  • Responsive Design With Media Queries

  • CSS Units - rem, em, vh, vw, etc

  • Flexbox

  • CSS Grid

  • Animation with Keyframes & Transitions

  • CSS Variables

  • Sass Pre-compiler with portfolio project

  • Full Projects & Mini Projects

  • Website Deployment to Shared Hosting & Netlify With Git

  • Much More

Sections on Sass will be being added very shortly!

Who this course is for:
  • From absolute beginner to seasoned developer