Modern HTML & CSS From The Beginning (Including Sass)

34,126 students enrolled

Modern HTML & CSS From The Beginning (Including Sass)

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

34,126 students enrolled

Created by Brad Traversy

Last updated 4/2020

English

English [Auto]

Preview this course

Modern HTML & CSS From The Beginning (Including Sass)

$104.99 $149.99 30% off

5 hours left at this price!

30-Day Money-Back Guarantee

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

+ – Introduction

4 lectures 26:58

Welcome To The Course

Preview 05:34

How The Web Works (Summarized)

Preview 07:38

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

Create & Open HTML Pages

Preview 08: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

+ – 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

Preview 04: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

+ – 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

Preview 03: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

+ – 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

6 more sections

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

Matthew Burton ( 19 courses, 9 reviews )

a year ago

I have learned so much from this course there is not one fault I could say about it have finally mastered the flex-box: Which I was finding very hard before but now I actually have a deep understanding of how to use it and when to use it can't wait to take more of these courses wish I could have known about brads content before wasting funds on other outdated tutorials! Would really recommend this content to anyone! Thank you for the great content.