English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 200 lectures (24h 16m) | 11.25 GB
Build modern responsive websites with HTML and CSS – Learning modules, mini-projects and 3 full websites
Just revamped for 2024, this course is for both beginners that want to learn HTML/CSS beginning to end as well as seasoned developers that just want to build some cool projects. This is my most important course because it is the entry point to everything else that I have created. Whether you want to build front-end applications with React or full stack Node.js, PHP, Python, etc, you will always need use HTML and CSS in some way.
We go over all kinds of HTML tags, elements and structure and tons of CSS properties and concepts with a sandbox environment. Outside of these learning modules are mini-projects, challenges and 3 main website projects. One project uses the BEM CSS methodology.
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, you can skip around and learn what you need or just go right into the projects.
Things We Cover In This Course
- How Websites Work
- Visual Studio Code Setup, Shortcuts, Live Server & Emmet
- HTML5 Semantic Elements & Layout
- CSS Fundamentals (colors, fonts, alignment, etc)
- The Box Model, Margin, Padding & Border
- Responsive Design With Media and Container Queries
- CSS Units – rem, em, vh, vw, etc
- Flexbox Layout Model
- CSS Grid
- Animation with Keyframes & Transitions
- Using JavaScript to toggle classes & styles
- CSS Custom Properties
- Git & Github
- Deploying Websites to Netlify and Vercel
- Mini-Projects & Challenges
- Project 1 – Lumina Creative Agency Website
- Project 2 – Tutor Course Website
- Project 3 – Leno Mobile App Website (BEM Methodology)
- Much More
What you’ll learn
- Build 3 High Quality Websites Along With Mini-Projects
- Sandbox Environment For Learning Tags, CSS Properties, Accessibility & Other Concepts
- Semantic Elements, Box Model, Transitions, Keyframes, Pseudo Selectors & More
- Create Flexible Layouts WIth Flexbox & CSS Grid
- Create Responsive Websites With Media Queries, Relative Units & Flexible Layouts
- Learn The Basics of Git, GitHub and Website Deployment
- Learn the BEM (Block Element Modifier) Methodology
- All Skill Levels
Table of Contents
Introduction
1 Welcome To The Course
2 How The Web Works
3 The Roles Of HTML CSS JS In Web Development
4 VS Code Editor Environment
5 Course Code
Essential HTML
6 Section Intro
7 Create Open HTML Files
8 HTML Tags Attributes
9 Document Structure
10 Live Server Prettier
11 Sandbox Files Setup
12 Meta Tags Search
13 Headings Paragraphs Emphasis
14 Browser Devtools Intro
15 Lists
16 Anchor Tags
17 Images
18 Block vs Inline Elements
19 Line Breaks Horizontal Rules Entities
20 Divs Spans
21 Classes IDs
22 Semantic Elements
23 Emmet Crash Course
24 Keyboard Shortcuts
25 Pricing Grid Challenge
HTML Form Input Elements
26 Section Intro
27 Form Input Tags
28 TextBased Input Tags
29 Input Field Attributes
30 Select Boxes Textarea
31 Checkboxes Radio Buttons
32 Other Input Fields
33 Datalist
34 HTML Form Challenge
More HTML Elements
35 Section Intro
36 Audio Element
37 Video Element
38 Image Map
39 Tables
40 Iframe
41 Global Attributes
42 SVG Element
43 Popover Details
44 Progress Meter
CSS Basics
45 Section Intro
46 Implementing CSS
47 Basic CSS Selectors
48 Fonts In CSS
49 Font Text Properties
50 Colors Color Names HEX RGB HSL
51 CSS Specificity
52 Backgrounds
53 Styling Links
54 Font Awesome Library
55 CSS Basics Challenge
Box Model Positioning
56 Section Intro
57 Box Model Explained
58 Sizing Overflow
59 Padding
60 Margin
61 Universal Selector Reset
62 Borders
63 Display Property
64 Position Property
65 Box Shadow
66 Freelance Form MiniProject
67 Shoe Cards MiniProject
Flexbox
68 Section Intro
69 What Is Flexbox
70 Flexbox Basics Containers Items
71 Align Justify Items
72 Flex Properties Dynamic Sizing
73 Flex Order
74 Flexbox Layout Challenge
75 Pricing Card CSS MiniProject
Responsive Design
76 Section Intro
77 What Is Responsive Design
78 Flexible Layouts Percentages
79 rem em Units
80 Viewport Units vh vw
81 Media Queries
82 Responsive Pricing Grid
83 Responsive Flexbox Layout
84 Container Queries
85 Container Units
Landing Form MiniProject
86 Project Intro
87 Setup HTML
88 Base CSS Header Styles
89 Main Content Flex Alignment
90 Inner Styles
91 Mobile Layout Media Queries
Various CSS Features
92 Section Intro
93 Custom Properties
94 Vendor Prefixes
95 Filters
96 Smooth Scroll MiniProject
97 Sticky Nav Style On Scroll
98 calc Function
99 Nesting
Lumina Creative Website Project
100 Project Intro
101 Setup Base CSS
102 Header Navigation
103 Hero Text
104 Custom Properties
105 Gallery Section Flexbox
106 Footer
107 About Page
108 Contact Page
109 Image Lightbox Effect
Git GitHub Web Hosting
110 Section Intro
111 Intro To Git GitHub
112 Generate SSH Keys
113 Git Workflow Commands
114 Deploy Website To Netlify
115 Contact Form Submission
116 Connect Configure a Domain Name
Web Accessibility Introduction
117 Section Intro
118 What Is Web Accessibility
119 Skilltide Browser Extension
120 Screen Reader Testing
121 Role Attribute
122 ARIA Attributes
123 Aria Expanded Dynamic Elements
Advanced Selectors Pseudo Classes Elements
124 Section Intro
125 Attribute Selectors
126 Child Sibling Combinators
127 Pseudo Elements
128 Pseudo Classes firstchild lastchild nthchild
129 Pseudo Classes firstoftype lastoftype nthoftype
130 before after Pseudo Elements
131 Image Overlay With before
132 is where has
133 Styling Forms
134 Selectors Challenge
CSS Grid
135 Section Intro
136 CSS Grid Overview
137 Grid Columns Gap
138 repeat minmax
139 Grid Rows
140 Grid Challenge 1
141 Align Justify Properties
142 repeat With autofit autofill
143 Positioning Spanning Items
144 Named Grid Lines
145 Grid Challenge 2
146 CSS Grid Media Queries
147 Grid Template Areas
148 Lumina Creative Grid Refactor
Transitions Animation A Little JavaScript
149 Section Intro
150 Transitions Overview
151 Creating Transitions
152 Trandform Property
153 Absolute Centering With TransformTranslate
154 D Transforms
155 JavaScript CSS Intro
156 Hamburger Menu
157 Keyframes Part 1
158 Keyframes Part 2 CSS Loader Animation
159 D Rotating Cube
160 Presentation Website MiniProject
Tutor Website Project Part 1
161 Project Intro
162 Project Setup
163 Desktop Navigation
164 Mobile Navigation
165 Hero Section
166 Hero SVG Media Queries
167 Navbar Background On Scroll
168 Learn Section
169 Chapters Section
170 Summary Section
Tutor Website Project Part 2
171 Info Section
172 Takeaway Section
173 Details Author Sections
174 Stats Section
175 Newsletter Section
176 Footer Social Icons
177 Contact Page
178 Add Accessibility
179 Deploy To Vercel Formspree Setup
Leno Website Project BEM Part 1
180 Project Intro
181 BEM Methodology Explained
182 Project Setup
183 Navbar Desktop Menu
184 Mobile Navigation
185 Hero Section
186 Navbar Background On Scroll
187 Testimonials Section
188 Features Section
189 Features Mobile Layout
Leno Website Project BEM Part 2
190 Preview Section
191 Animated Play Button
192 Video Modal
193 Details Area
194 Screenshots Section
195 Download Section
196 Footer
197 Create The Details Page
198 Pricing Cards
199 Details Features
Outro
200 Course Wrap Up
Resolve the captcha to access the links!