Flex-Grow | CodingAddict

Autoplay
Autocomplete

Previous Lesson Complete and Continue

HTML&CSS

Course Kickoff

Intro (2:15)
Course Resources
Useful Info
Q&A

HTML Tutorial

HTML Intro (2:46)
Google Chrome and Visual Studio Code (0:48)
Download Google Chrome (3:10)
Download Visual Studio Code (1:49)
Visual Studio Code Overview (4:09)
Crafting Your New Project (2:24)
First Webpage (4:48)
Basic HTML Document Structure (2:34)
Implement HTML Document Structure (3:19)
Live Server Extension Setup (5:58)
Extra Settings and Emmet (7:19)
Heading Elements (4:09)
Paragraph Element (1:52)
White Space Collapsing (1:25)
Lorem Ipsum (3:14)
Image Basics (3:49)
Multiple Images (4:21)
External Images (3:25)
Nice Images (4:03)
Width and Height (3:21)
Crop Images (3:00)
Comments and Line Breaks (5:44)
External Links (5:15)
Internal Links (4:34)
Links - Within a Page (6:23)
Image Links and Empty Links (3:57)
Sup and Sub Elements (2:32)
STRONG and EM Elements (2:59)
Special Characters (3:23)
Unordered Lists (3:57)
Ordered Lists (1:04)
Nested Lists (1:44)
Table Element (2:52)
Forms - Input Elements and Submit Elements (13:36)
Forms - Textarea, Radio, Checkbox, Select Elements (11:36)
Install Prettier Code Formatter (5:53)
Keyboard Shortcuts (10:15)
Head Element and External Resources (4:49)

HTML Project

Intro (3:17)
Project Assets
Setup (3:12)
Download Images (2:30)
Logo, Heading and Navbar (3:02)
Home Page (13:10)
About Page (3:05)
Numbers Page (6:07)
Contact Page (5:03)
Complete Project

CSS Tutorial

CSS Intro (1:29)
Workspace Setup (3:00)
Text Editor Setup (5:13)
Inline CSS (4:05)
Internal CSS (2:22)
External CSS (9:58)
Power Struggle (6:26)
Basic CSS Syntax (7:35)
Element Selectors (2:39)
Grouping Selectors (2:01)
ID Selectors (4:40)
Class Selectors (4:41)
ID and Class Selector Summary (1:52)
ID and SPAN Elements (7:58)
Inheritance in CSS (5:33)
Inheritance - More Info (2:49)
Last Rule, Specificity and Universal Selector (9:39)
Combine Selectors - Descendant Selector (6:24)

All Projects Intro

All Projects Intro (1:43)

Fundamentals Project

First Project Intro (0:26)
Steps (4:48)
Complete Project (7:46)
Projects Folder (1:21)

CSS Colors

Colors Intro (0:27)
Color and Background-color Properties (4:16)
Color Names (2:47)
RGB (6:27)
RGBA (9:45)
HEX Values (6:08)
VS-Code Color Options (2:50)
External Resources (1:52)

Colors Project

Intro (0:39)
Steps (3:01)
Complete Project (7:15)

CSS Units

Units Intro (0:29)
Pixels, Font-Size, Width, Height (5:43)
Percent Units (4:58)
EM Units (5:45)
REM Units (3:01)
VH and VW (6:17)
Default Browser Styles and Chrome DevTools (12:04)
Calc Function (7:00)
Min-height, Max-height (10:31)

Units Project

Intro (0:58)
Steps (5:22)
Complete Project (8:37)

Typography

Typography Intro (0:22)
Font-family (2:36)
Font-Stack Generic Fonts (2:55)
Google Fonts (8:32)
System Fonts (3:40)
More Google Fonts (2:04)
Font-Weight and Font-Style (7:07)
Text-Align and Text-Indent (2:59)
More Text Properties (11:18)

Typography Project

Intro (0:10)
Steps (0:59)
Complete Project (4:25)

CSS Box Model

Box Model - Intro (0:15)
CSS Box Model - Padding (9:32)
CSS Box Model - Margin (6:48)
CSS Box Model - Border (6:28)
Border-Radius and Negative Margin (4:38)
Outline Property (9:11)
Border Hack (2:51)

CSS Box Model Project

Intro (0:33)
Steps (3:53)
Html Structure (3:37)
CSS Styling (16:59)

Display Property

Display Property Intro (0:16)
Display Property (7:40)
Basic Horizontal Centering (4:17)
Mobile Navbar Example (12:46)
Box-Sizing and Border-Box (7:29)
Display Inline-Block (3:34)
Display:None, Opacity, Visibility (8:34)

Display Property Project

Intro (0:52)
Steps (1:39)
Html Structure (3:26)
CSS Styling (12:19)
Most Common Questions (7:15)

Background Images

Intro (0:50)
Setup (2:50)
Background Image Basics (4:34)
Background-Repeat (7:24)
Background-Size (3:17)
Background-Position (4:33)
Background-Attachment (6:30)
Linear Gradients (12:54)
Background Image Overlay (10:27)
Colorzilla (3:38)

Background Images Project

Intro (0:32)
Steps (1:24)
Setup (2:13)
HTML Structure (3:23)
CSS Styling (15:07)

Positions, Float, Media Queries

Float, Positions, Media Queries, Z-Index Intro (0:40)
Float Property (5:31)
Float Property Column Layout Example (7:14)
Position - Static (3:36)
Position - Relative (3:40)
Position - Absolute (5:40)
Position - Fixed (4:05)
Position - Sticky (4:44)
Media Queries (16:35)
Z-Index (8:49)
::before and ::after Basics (7:42)
::before and ::after Example (15:48)
Inset Property (6:38)

Position Property Project

Intro (1:01)
Steps (2:57)
Complete Project (13:11)

Selectors Re-Visited

Selectors Intro (0:51)
Basic Selectors (3:02)
Descendant and Child Selectors (4:40)
First-Line and First-Letter (1:05)
:hover pseudo-class Selectors (3:46)
Link pseudo-class Selectors (4:32)
:root pseudo-class Selector (5:53)

Transform, Transition and Animation

Intro (1:09)
transform : translate() (6:14)
Translate Hero Example (5:03)
transform : scale() (2:37)
transform : rotate() (3:43)
transform : skew() (1:51)
Transition Property (3:27)
Multiple Transitions (2:21)
Transition - Delay, Shorthand, All Properties (5:14)
Transition-timing-function (9:54)
Animation (10:53)
Animation-fill-mode (5:42)

Animation Project

Intro (0:20)
Steps (1:19)
Complete Project (5:53)

CSS Tutorial Continued

Intro (0:41)
CSS Variables (18:14)
FontAwesome Icons - Intro (3:33)
FontAwesome Icons - Self Hosting Option (5:56)
FontAwesome Icons - CDN Link (2:55)
FontAwesome Icons - SVG Approach (1:56)
FontAwesome Icons - Versions (3:52)
Browser Prefixes (4:22)
Text-Shadow and Box-Shadow (6:21)
Semantic HTML (9:40)
Object-Fit (9:06)
Emmet Workflow (6:55)
:is() (3:10)
:not() (1:30)
HSL Color Values (11:06)
Five Server Extension (4:46)

Last Tutorial Project

Intro (0:42)
Setup (2:18)
Images and Icons (3:20)
HTML Structure (8:40)
Reset (0:39)
CSS Variables (10:42)
Body (3:28)
Blog Card (2:41)
Blog Image (4:50)
Complete Project (6:06)

Tea Station Project

Git And Github Setup

Useful Info
Intro (1:08)
Git Install (3:49)
Git Commands (4:26)
Setup Github (3:19)
Benefits (13:20)

CSS Flexbox

CSS Flexbox Intro (2:39)
Setup (9:04)
Naming Conventions (3:23)
Flex-Direction (4:08)
Flex-Wrap (5:25)
Justify-Content (6:37)
Align-Items (5:19)
Hero Project (10:23)
Align-Content (4:24)
Main Axis / Cross Axis (4:23)
Order Property (3:09)
Align-Self (3:10)
Flex-Grow (4:30)
Flex-Shrink (2:52)
Flex-Basis and Flex (8:54)
New Flexbox Features !!! (9:29)

Backroads Tour Company

Intro (6:21)
Setup File and Finished Project
Project Setup (8:03)
Color Shades (3:13)
Logo (0:54)
Favicon (3:10)
Hero HTML (3:55)
Hero CSS (13:07)
About HTML (5:57)
About CSS (4:36)
About Column Layout (11:14)
Services HTML (5:51)
Services CSS (10:14)
Tours HTML (9:16)
Tours CSS (9:59)
Additional Design (5:39)
Contact HTML (5:06)
Contact CSS (10:28)
Gallery HTML (5:02)
Gallery CSS (9:07)
Footer HTML (8:31)
Footer CSS (5:23)
Navbar HTML (8:53)
Navbar CSS - Small Screen (10:55)
Navbar Toggle (5:15)
Smooth Scroll (3:31)
Navbar CSS - Big Screen (8:37)
Autoprefixer (1:46)
Continuous Deployment (11:52)
Finished Project

CSS Grid Tutorial

CSS Grid - Intro (3:19)
Setup (7:05)
Basic Syntax - Grid-Template-Columns (3:12)
Implicit Grid (3:43)
General CSS Setup (3:04)
Units - Auto (2:38)
Grid-Template-Rows (4:34)
FR Units (3:58)
Gap Property (2:27)
Gap - New Syntax !!! (1:46)
FR VS % (3:38)
Firefox Developer Tools (6:28)
Grid Lines (9:23)
Naming Grid Lines (6:29)
Grid Template Areas (11:45)
Order Property (3:34)
Repeat Function (2:32)
Justify-Content (4:57)
Align-Content (3:11)
Align-Items, Justify-Items, Align-Self, Justify-Self (4:02)
Minmax() (3:57)
Auto-Fit and Auto-Fill (9:46)

Grid Mini Projects

Intro (5:40)
Setup Files and Finished Project
Setup (7:30)
Global Styles (11:27)
Navbar Mini Project (12:33)
Hero HTML (5:50)
Hero CSS (11:40)
Cards HTML (7:05)
Cards CSS - Small Screen (6:01)
Cards CSS - Big Screen with Media Queries (4:46)
Cards CSS - Big Screen with minmax(), auto-fit and auto-fill (16:26)
Cards CSS - Row Height (7:02)
Tiles HTML (4:14)
Tiles CSS (16:01)
Object-Fit Add-On (0:35)
Layout HTML (5:30)
Layout CSS - General (11:37)
Layout CSS - Grid Lines (12:25)
Complete Source Code and Live Project

Portfolio Project (CSS Grid)

Default Starter

Intro (1:39)
Useful Resources
Structure (3:51)
HTML (1:50)
Normalize (2:47)
Fonts (4:17)
Fonts - Overview and Tweaks (8:38)
Colors - General Setup (4:31)
Primary Shades (3:56)
Grey Shades (7:04)
Happy Hues (1:21)
Rest of the CSS Variables (6:20)
Image (7:02)
Buttons (7:14)
Alerts (3:47)
Form Setup (5:16)
Form CSS (9:10)
Loading (3:00)
Title (2:23)

Additional Projects

Teach online with

Flex-Grow

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock