Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development CSS

Modern HTML & CSS From The Beginning (Including Sass)

Build modern responsive websites & UIs with HTML5, CSS3 & Sass! Learn Flex & CSS Grid
Rating: 4.7 out of 54.7 (16,533 ratings)
49,103 students
Created by Brad Traversy
Last updated 4/2020
English
English [Auto]
30-Day Money-Back Guarantee

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
Curated for the Udemy for Business collection

Course content

16 sections • 129 lectures • 20h 46m total length

  • Preview05:34
  • Preview07:38
  • The Roles Of HTML & CSS In Web Development
    06:34
  • Getting Setup With Visual Studio Code
    07:12

  • Section Intro
    02:29
  • Preview08:46
  • 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

  • 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

  • Preview04:06
  • 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

  • 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

  • What Is Flexbox?
    03:09
  • Flexbox Basics
    06:02
  • Flex Properties
    05:16
  • Flex Alignment & Justify
    07:56

  • Preview03:18
  • 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

  • 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

  • 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

  • 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

Featured review

Meet Thakkar
Meet Thakkar
2 courses
1 review
Rating: 4.5 out of 58 months ago
Amazing course!!!. It was amazing experience to learn HTML & CSS under Brad's teaching. In 2-3 points, I felt like Brad doesn't explain whole thing clearly. But somethimes you have to search some stuff at another places also so that you can have better understating. Other than that, I think It is the best HTML & CSS course for beginners on udemy. Worth for money and time. I am jumping into Javascript course which is created by Brad. Thank you Brad and Good luck to all.

Instructor

Brad Traversy
Full Stack Web Developer & Instructor at Traversy Media
Brad Traversy
  • 4.7 Instructor Rating
  • 102,148 Reviews
  • 262,825 Students
  • 15 Courses

Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media which is a successful web development YouTube channel and specializes in everything from HTML5 to front end frameworks like Angular as well as server side technologies like Node.js, PHP and Python. Brad has mastered explaining very complex topics in a simple manner that is very understandable. Invest in your knowledge by watching Brad's courses.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.