Modern HTML & CSS From The Beginning (Including Sass)

Focused View

Brad Traversy

20:46:21

28 View

01 - Introduction

001 Welcome To The Course.mp4

05:34

002 How The Web Works (Summarized).mp4

07:38

003 The Roles Of HTML & CSS In Web Development.mp4

06:34

004 Getting Setup With Visual Studio Code.mp4

07:13

02 - HTML Basics

001 Section Intro.mp4

02:29

001 htmlsandbox-finished.zip

001 htmlsandbox-starter.zip

002 Create & Open HTML Pages.mp4

08:46

003 Doctype & Basic Layout.mp4

07:48

004 Setting Up Live Server (VSCode Extension).mp4

04:33

005 Meta Tags & Search Engines.mp4

09:09

006 Headings, Paragraphs & Typography.mp4

09:42

007 Links, Images & Attributes.mp4

10:25

008 Lists & Tables.mp4

08:46

009 Forms & Input.mp4

17:24

010 Block & Inline Level Elements.mp4

05:50

011 Divs & Spans, Classes & Ids.mp4

09:58

012 HTML Entities.mp4

07:55

013 HTML5 Semantic Tags & Challenge.mp4

05:35

013 html5-semantics-start.zip

014 HTML5 Semantics Solution & Wrap Up.mp4

03:37

03 - CSS Basics

001 Section Intro.mp4

03:03

001 csssandbox-finished.zip

001 csssandbox-starter.zip

002 Implementing CSS.mp4

08:47

003 Basic CSS Selectors.mp4

10:24

004 Dev Tools Introduction.mp4

05:39

005 Fonts In CSS.mp4

12:11

006 Color Types.mp4

08:45

007 Backgrounds & Borders.mp4

16:39

008 Box Model, Margin & Padding.mp4

15:03

009 Float & Alignment.mp4

13:15

010 Link State & Button Styling.mp4

09:20

011 Navigation Menu Styling.mp4

11:10

012 Inline, Block & Inline-Block Display.mp4

08:14

013 Positioning.mp4

10:32

014 Form Style Challenge.mp4

04:55

014 form-styling-start.zip

015 Form Style Solution.mp4

09:12

016 Aside Visibility, Order & Negative Margin.mp4

05:43

04 - Hotel Website

001 Project Intro.mp4

04:06

001 hotel-website.zip

001 image-resources.zip

002 Aside Design & Ideas.mp4

03:39

003 File Structure & Navbar.mp4

21:01

004 Showcase & Home Info.mp4

22:24

005 Features & Footer.mp4

12:14

006 About Page.mp4

20:03

007 Contact Page.mp4

11:54

05 - Intro To Responsive Layouts

001 What Is Responsive Design.mp4

03:24

001 csssandbox-updated.zip

002 Getting Started With Media Queries.mp4

15:06

003 Em & Rem Units.mp4

15:39

004 Vh & Vw Units.mp4

14:44

005 Making The Hotel Website Fully Responsive.mp4

19:09

005 hotel-website-responsive.zip

06 - Intro To Flexbox

001 What Is Flexbox.mp4

03:09

001 csssandbox-updated.zip

002 Flexbox Basics.mp4

06:02

003 Flex Properties.mp4

05:16

004 Flex Alignment & Justify.mp4

07:56

07 - EdgeLedger Website (Flexbox)

001 Project Intro.mp4

03:18

001 edgeledger-website.zip

001 image-resources.zip

002 Header HTML & Navbar Styles.mp4

14:10

003 Hero Section & Overlay.mp4

10:52

004 Icons & Solutions Sections.mp4

15:10

005 Cases & Blog Sections.mp4

08:51

006 Finishing The Homepage.mp4

13:37

007 Responsive Media Queries.mp4

06:29

008 Inner Pages.mp4

12:59

009 Navbar & Lightbox Effects.mp4

16:34

010 Extra - Adding a Favicon.mp4

01:53

08 - Website Deployment - Shared Host

001 Types Of Web Hosting.mp4

07:59

002 Shared Hosting Setup.mp4

09:51

003 Hosting Company Links.html

004 Setting Up Email.mp4

04:45

005 Upload Your Site via FTP.mp4

05:36

006 BONUS Contact Form Submission (PHP Script).mp4

06:13

006 contact.zip

006 edgeledger-website-final.zip

09 - More CSS Concepts - Advanced Selectors, Animation & More

001 Targeted Selectors.mp4

09:39

001 csssandbox2.zip

002 nth-child Pseudo Selectors.mp4

06:52

003 before & after Pseudo Selectors.mp4

10:51

004 Box Shadows.mp4

08:20

005 Text Shadows.mp4

05:35

006 CSS Variables (Custom Properties).mp4

10:49

007 Keyframe Animation 1.mp4

10:44

008 Keyframe Animation 2.mp4

07:15

009 CSS Transitions.mp4

07:51

010 Transform Property.mp4

07:17

10 - Mini Projects With Keyframes, Transitions, etc

001 Presentation Website [1] - Intro & HTML.mp4

07:33

001 presentation-website.zip

002 Presentation Website [2] - Page CSS.mp4

09:03

003 Presentation Website [3] - Text Animation.mp4

08:39

004 Hamburger Menu Overlay [1] - HTML & Base CSS.mp4

20:19

004 hamburger-overlay-menu.zip

005 Hamburger Menu Overlay [2] - Creating The Hamburger.mp4

11:37

006 Hamburger Menu Overlay [3] - Animating The Hamburger Lines.mp4

04:42

007 Hamburger Menu Overlay [4] - Menu Overlay.mp4

15:00

008 Knowledge Timeline [1] - HTML & Base CSS.mp4

07:54

008 knowledge-resume.zip

009 Knowledge Timeline [2] - Boxes & Arrows.mp4

14:32

010 Knowledge Timeline [3] - Responsive Media Queries.mp4

05:51

011 Knowledge Timeline [4] - Scroll In Animation.mp4

09:45

012 Quick Dropdown Menu Project.mp4

18:43

012 dropdown.zip

11 - CSS Grid

001 What Is CSS Grid.mp4

04:04

001 grid-sandbox.zip

002 Grid Basics & Columns.mp4

09:26

003 Grid Rows.mp4

03:59

004 Spanning Columns & Rows.mp4

06:47

005 Auto-Fit & Minmax.mp4

03:39

006 Grid Template Areas.mp4

07:18

007 Media Queries & The Grid.mp4

05:03

12 - NewsGrid Website

001 Project Intro.mp4

03:14

001 image-resources.zip

001 newsgrid.zip

002 Setup & Favicon.mp4

07:13

003 Core Styles, Variables & Navbar.mp4

13:23

004 Showcase With Overlay & Button Styles.mp4

13:24

005 Home Articles Grid.mp4

17:57

006 Footer With Grid.mp4

11:55

007 About Page & Page Container.mp4

08:16

008 Article Page.mp4

09:01

009 Responsive Media Queries.mp4

18:19

010 Bonus Intro To Photoshop (NewsGrid Logo).mp4

12:00

13 - Website Deployment With Netlify (FREE)

001 How It Works.mp4

02:59

002 Git & Pushing To Github.mp4

07:07

003 Git Commands & Links.html

004 Netlify Deploy & Form Submission.mp4

06:50

005 Custom Domain Name.mp4

06:03

14 - Learning Sass

001 What Is Sass.mp4

06:19

001 sass-sandbox-finished.zip

002 Environment Setup With Node-Sass.mp4

05:42

003 Koala Sass Compiler - GUI Alternative.mp4

04:44

004 Variables & Partials.mp4

06:21

005 Nesting & Structuring.mp4

06:32

006 Inheritance & Contrast.mp4

05:09

007 Functions, Mixins & More.mp4

11:17

15 - Portfolio Website With Sass

001 Project Intro.mp4

03:38

001 portfolio-website.zip

002 Project Setup.mp4

14:14

002 project-resources.zip

003 Header & Main Nav.mp4

23:00

004 Specialize & Stats Section.mp4

17:03

005 Process Section & Footer.mp4

26:07

006 About Page Info Section.mp4

13:22

007 About Page Logos & Testimonials.mp4

14:27

008 Work Gallery With Transitions.mp4

22:49

009 Contact Page.mp4

15:41

010 Responsive Media Queries.mp4

25:18

011 Deploy & Contact Form With Spam Filter.mp4

09:39

16 - Where To Go From Here

001 Where To Go From Here.mp4

02:20

Description

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

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

Who is this for?

From absolute beginner to seasoned developer

What You Need to Know?

This course is for any developer, beginner to advanced

More details

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

User Reviews

Rating

average 0

Total votes0

Focused display

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

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.