Modern HTML & CSS From The Beginning

Modern HTML & CSS From The Beginning
Modern HTML & CSS From The Beginning
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 17 Hours | 9.24 GB

Build modern responsive websites & UIs with HTML5 & CSS3 including Flexbox and CSS Grid

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. 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
  • Full Projects & Mini Projects
  • Website Deployment to Shared Hosting & Netlify With Git
  • Much More

Sections on Sass will be being added very shortly!

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
Table of Contents

Introduction
1 Welcome To The Course
2 How The Web Works (Summarized)
3 The Roles Of HTML & CSS In Web Development
4 Getting Setup With Visual Studio Code

HTML Basics
5 Section Intro
6 Create & Open HTML Pages
7 Doctype & Basic Layout
8 Setting Up Live Server (VSCode Extension)
9 Meta Tags & Search Engines
10 Headings, Paragraphs & Typography
11 Links, Images & Attributes
12 Lists & Tables
13 Forms & Input
14 Block & Inline Level Elements
15 Divs & Spans, Classes & Ids
16 HTML Entities
17 HTML5 Semantic Tags & Challenge
18 HTML5 Semantics Solution & Wrap Up

CSS Basics
19 Section Intro
20 Implementing CSS
21 Basic CSS Selectors
22 Dev Tools Introduction
23 Fonts In CSS
24 Color Types
25 Backgrounds & Borders
26 Box Model, Margin & Padding
27 Float & Alignment
28 Link State & Button Styling
29 Navigation Menu Styling
30 Inline, Block & Inline-Block Display
31 Positioning
32 Form Style Challenge
33 Form Style Solution
34 Aside: Visibility, Order & Negative Margin

Hotel Website
35 Project Intro
36 Aside: Design & Ideas
37 File Structure & Navbar
38 Showcase & Home Info
39 Features & Footer
40 About Page
41 Contact Page

Intro To Responsive Layouts
42 What Is Responsive Design?
43 Getting Started With Media Queries
44 Em & Rem Units
45 Vh & Vw Units
46 Making The Hotel Website Fully Responsive

Intro To Flexbox
47 What Is Flexbox?
48 Flex Basics
49 Flex Alignment & Order

EdgeLedger Website (Flexbox)
50 Project Intro
51 File Structure & Flex Navbar
52 Showcase Header
53 Quick Note On The Overlay
54 What We Do Section
55 Who We Are & Clients Sections
56 Contact Form, Map & Footer
57 Quick Note On Google Maps
58 Smooth Scrolling With JS
59 Widescreen & Tablet View
60 Smartphone View

Website Deployment – Shared Host
61 Types Of Web Hosting
62 Shared Hosting Setup
63 Hosting Company Links
64 Setting Up Email
65 Upload Your Site via FTP
66 BONUS: Contact Form Submission (PHP Script)

More CSS Concepts – Advanced Selectors, Animation & More
67 Targeted Selectors
68 nth-child Pseudo Selectors
69 before & after Pseudo Selectors
70 Box Shadows
71 Text Shadows
72 CSS Variables (Custom Properties)
73 Keyframe Animation 1
74 Keyframe Animation 2
75 CSS Transitions
76 Transform Property

Mini Projects With Keyframes, Transitions, etc
77 Presentation Website [1] – Intro & HTML
78 Presentation Website [2] – Page CSS
79 Presentation Website [3] – Text Animation
80 Hamburger Menu Overlay [1] – HTML & Base CSS
81 Hamburger Menu Overlay [2] – Creating The Hamburger
82 Hamburger Menu Overlay [3] – Animating The Hamburger Lines
83 Hamburger Menu Overlay [4] – Menu Overlay
84 Knowledge Timeline [1] – HTML & Base CSS
85 Knowledge Timeline [2] – Boxes & Arrows
86 Knowledge Timeline [3] – Responsive Media Queries
87 Knowledge Timeline [4] – Scroll In Animation
88 Quick Dropdown Menu Project

CSS Grid
89 What Is CSS Grid?
90 Grid Basics & Columns
91 Grid Rows
92 Spanning Columns & Rows
93 Auto-Fit & Minmax
94 Grid Template Areas
95 Media Queries & The Grid

NewsGrid Website
96 Project Intro
97 Setup & Favicon
98 Core Styles, Variables & Navbar
99 Showcase With Overlay & Button Styles
100 Home Articles Grid
101 Footer With Grid
102 About Page & Page Container
103 Article Page
104 Responsive Media Queries
105 Bonus: Intro To Photoshop (NewsGrid Logo)

Website Deployment With Netlify (FREE)
106 How It Works
107 Git & Pushing To Github
108 Git Commands & Links
109 Netlify Deploy & Form Submission
110 Custom Domain Name

Where To Go From Here
111 Where To Go From Here


Download from Rapidgator

Download from Turbobit