Modern Html Css From The Beginning

  1. Home
  2. Css
  3. Modern Html Css From The Beginning

Tags: CSS

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

Last updated 2022-01-10 | 4.7

- Build Multiple High Quality Website & UI Projects
- HTML5 Semantic Layout & CSS Fundamentals
- Flexbox & CSS Grid Projects

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

* 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

Course content

16 sections • 129 lectures

Introduction 4 lectures

Welcome To The Course Preview 05:34

How The Web Works (Summarized) Preview 07:38

The Roles Of HTML & CSS In Web Development Preview 06:34

Getting Setup With Visual Studio Code Preview 07:12

HTML Basics 14 lectures

Section Intro Preview 02:29

Create & Open HTML Pages Preview 08:46

Doctype & Basic Layout Preview 07:47

Setting Up Live Server (VSCode Extension) Preview 04:33

Meta Tags & Search Engines Preview 09:09

Headings, Paragraphs & Typography Preview 09:42

Links, Images & Attributes Preview 10:25

Lists & Tables Preview 08:46

Forms & Input Preview 17:24

Block & Inline Level Elements Preview 05:50

Divs & Spans, Classes & Ids Preview 09:58

HTML Entities Preview 07:55

HTML5 Semantic Tags & Challenge Preview 05:35

HTML5 Semantics Solution & Wrap Up Preview 03:37

CSS Basics 16 lectures

Section Intro Preview 03:03

Implementing CSS Preview 08:47

Basic CSS Selectors Preview 10:24

Dev Tools Introduction Preview 05:39

Fonts In CSS Preview 12:11

Color Types Preview 08:45

Backgrounds & Borders Preview 16:39

Box Model, Margin & Padding Preview 15:03

Float & Alignment Preview 13:15

Link State & Button Styling Preview 09:19

Navigation Menu Styling Preview 11:10

Inline, Block & Inline-Block Display Preview 08:14

Positioning Preview 10:32

Form Style Challenge Preview 04:55

Form Style Solution Preview 09:11

Aside: Visibility, Order & Negative Margin Preview 05:43

Hotel Website 7 lectures

Project Intro Preview 04:06

Aside: Design & Ideas Preview 03:39

File Structure & Navbar Preview 21:01

Showcase & Home Info Preview 22:24

Features & Footer Preview 12:14

About Page Preview 20:03

Contact Page Preview 11:54

Intro To Responsive Layouts 5 lectures

What Is Responsive Design? Preview 03:23

Getting Started With Media Queries Preview 15:06

Em & Rem Units Preview 15:39

Vh & Vw Units Preview 14:44

Making The Hotel Website Fully Responsive Preview 19:09

Intro To Flexbox 4 lectures

What Is Flexbox? Preview 03:09

Flexbox Basics Preview 06:02

Flex Properties Preview 05:16

Flex Alignment & Justify Preview 07:56

EdgeLedger Website (Flexbox) 10 lectures

Project Intro Preview 03:18

Header HTML & Navbar Styles Preview 14:10

Hero Section & Overlay Preview 10:52

Icons & Solutions Sections Preview 15:10

Cases & Blog Sections Preview 08:51

Finishing The Homepage Preview 13:37

Responsive Media Queries Preview 06:29

Inner Pages Preview 12:59

Navbar & Lightbox Effects Preview 16:34

Extra - Adding a Favicon Preview 01:52

Website Deployment - Shared Host 6 lectures

Types Of Web Hosting Preview 07:59

Shared Hosting Setup Preview 09:51

Hosting Company Links Preview 00:09

Setting Up Email Preview 04:45

Upload Your Site via FTP Preview 05:36

BONUS: Contact Form Submission (PHP Script) Preview 06:13

More CSS Concepts - Advanced Selectors, Animation & More 10 lectures

Targeted Selectors Preview 09:38

nth-child Pseudo Selectors Preview 06:52

before & after Pseudo Selectors Preview 10:51

Box Shadows Preview 08:19

Text Shadows Preview 05:35

CSS Variables (Custom Properties) Preview 10:49

Keyframe Animation 1 Preview 10:44

Keyframe Animation 2 Preview 07:15

CSS Transitions Preview 07:51

Transform Property Preview 07:17

Mini Projects With Keyframes, Transitions, etc 12 lectures

Presentation Website [1] - Intro & HTML Preview 07:33

Presentation Website [2] - Page CSS Preview 09:03

Presentation Website [3] - Text Animation Preview 08:38

Hamburger Menu Overlay [1] - HTML & Base CSS Preview 20:18

Hamburger Menu Overlay [2] - Creating The Hamburger Preview 11:37

Hamburger Menu Overlay [3] - Animating The Hamburger Lines Preview 04:42

Hamburger Menu Overlay [4] - Menu Overlay Preview 15:00

Knowledge Timeline [1] - HTML & Base CSS Preview 07:54

Knowledge Timeline [2] - Boxes & Arrows Preview 14:32

Knowledge Timeline [3] - Responsive Media Queries Preview 05:51

Knowledge Timeline [4] - Scroll In Animation Preview 09:45

Quick Dropdown Menu Project Preview 18:43

CSS Grid 7 lectures

What Is CSS Grid? Preview 04:04

Grid Basics & Columns Preview 09:26

Grid Rows Preview 03:59

Spanning Columns & Rows Preview 06:47

Auto-Fit & Minmax Preview 03:39

Grid Template Areas Preview 07:18

Media Queries & The Grid Preview 05:03

NewsGrid Website 10 lectures

Project Intro Preview 03:14

Setup & Favicon Preview 07:13

Core Styles, Variables & Navbar Preview 13:23

Showcase With Overlay & Button Styles Preview 13:24

Home Articles Grid Preview 17:57

Footer With Grid Preview 11:55

About Page & Page Container Preview 08:16

Article Page Preview 09:01

Responsive Media Queries Preview 18:19

Bonus: Intro To Photoshop (NewsGrid Logo) Preview 12:00

Website Deployment With Netlify (FREE) 5 lectures

How It Works Preview 02:59

Git & Pushing To Github Preview 07:07

Git Commands & Links Preview 00:11

Netlify Deploy & Form Submission Preview 06:50

Custom Domain Name Preview 06:03

Learning Sass 7 lectures

What Is Sass? Preview 06:19

Environment Setup With Node-Sass Preview 05:41

Koala Sass Compiler - GUI Alternative Preview 04:44

Variables & Partials Preview 06:21

Nesting & Structuring Preview 06:32

Inheritance & Contrast Preview 05:09

Functions, Mixins & More Preview 11:17

Portfolio Website With Sass 11 lectures

Project Intro Preview 03:38

Project Setup Preview 14:14

Header & Main Nav Preview 23:00

Specialize & Stats Section Preview 17:03

Process Section & Footer Preview 26:07

About Page Info Section Preview 13:22

About Page Logos & Testimonials Preview 14:27

Work Gallery With Transitions Preview 22:49

Contact Page Preview 15:41

Responsive Media Queries Preview 25:18

Deploy & Contact Form With Spam Filter Preview 09:39

Where To Go From Here 1 lectures

Where To Go From Here Preview 02:20