IIRF Online > Development > Web Development > CSS > HTML&CSS Tutorial and Projects Course (Flexbox&Grid)
HTML&CSS Tutorial and Projects Course (Flexbox&Grid) by Udemy
Web Development for absolute beginners.Learn HTML5 and CSS3 from scratch by building 20+ amazing real world projects.
Course Highlights
- Learn HTML5 from scratch.
- Learn CSS3 from scratch.
- Create responsive real world projects from scratch.
- Learn CSS Grid and Flexbox Layout Modules.
- Learn where to get free images, custom fonts.
- Learn how to work with font-awesome icons
- Learn where to get custom color palettes.
Skills you will learn!
Curriculum
3 Topics
Course Structure
Video Blur Fix
Course Review
39 Topics
HTML Intro
Google Chrome and Visual Studio Code
Download Google Chrome
Download Visual Studio Code
Visual Studio Code Overview
Create A Project
First Webpage
Basic HTML Document Structure
Implement HTML Document Structure
Live Server Extension Setup
Extra Settings and Emmet
Heading Elements
Video Resources
Paragraph Element
White Space Collapsing
Lorem Ipsum
Image Basics
Multiple Images
External Images
Nice Images
Width and Height
Crop Images
Comments and Line Breaks
External Links
Internal Links
Links - Within a Page
Image Links - Empty Links
Sup and Sub Elements
STRONG and EM Elements
Special Characters
Unordered Lists
Ordered Lists
Nested Lists
Table Element
Forms - Input Elements and Submit Elements
Forms - Textarea RadioCheckboxes Select
Install Prettier Code Formatter
Keyboard Shortcuts
Head Element - External Resources
10 Topics
Intro
Setup
Project Assets
Download Images
Logo Heading and Navbar
Home Page
About
Numbers
Contact
Complete Project
19 Topics
CSS Intro
Workspace Setup
Text Editor Setup
Video Resources
Inline CSS
Internal CSS
External CSS
Power Struggle
Basic CSS Syntax
Element Selectors
Grouping Selectors
ID Selectors
Class Selectors
ID and Class Selector Summary
DIV and SPAN Elements
Inheritance in CSS
Inheritance - More Info
Last Rule Specificity and Universal Selector
Combine Selectors - Descendant Selector
2 Topics
All Projects Intro
Complete Project
4 Topics
First Project Intro
Steps
Complete Project
Projects Folder
8 Topics
Colors Intro
Color and Background-color Properties
Color Names
RGB
RGBA
HEX Values
VS-Code Color Options
External Resources
3 Topics
Intro
Steps
Complete Project
9 Topics
Units Intro
Pixels Font-Size Width Height
Percent Units
Em Units
Rem Units
Vh and Vw
Default Browser Styles and Chrome DevTools
Calc Function
Min-height Max-height
3 Topics
Intro
Steps
Complete Project
9 Topics
Typography Intro
Font-family
Font-Stack Generic Fonts
Google Fonts
System Fonts
More Google Fonts
Font-weight Font-style
Text-align Text-indent
More Text Properties
3 Topics
Intro
Steps
Complete Project
7 Topics
Box Model - Intro
CSS Box Model - Padding
CSS Box Model - Margin
CSS Box Model - Border
Border-radius Negative Margin
Outline Property
Border Hack
4 Topics
Intro
Steps
Html Structure
CSS Styling
7 Topics
Display Property Intro
Display Property
Basic Horizontal Centering
Mobile Navbar Example
Box-sizing : border-box
Display inline-block
Display:none Opacity Visibility
5 Topics
Intro
Steps
Html Structure
CSS Styling
Most Common Questions
10 Topics
Intro
Setup
Background Images Basics
background-repeat
background-size
background-position
background-attachment
Linear Gradients
Background Image Overlay
Colorzilla
5 Topics
Intro
Steps
Setup
Html Structure
CSS Styling
13 Topics
Float Positions Media Queries Z-index Intro
Float Property
Float Property Column Layout Example
Position static
Position Relative
Position Absolute
Position Fixed
position:sticky
Media Queries
Z-index
::before and ::after Basics
::before and ::after Example
Inset Property
3 Topics
Intro
Steps
Complete Project
7 Topics
Selectors Intro
Basic Selectors
Descendant and Child Selectors
First-line and First-letter
:hover pseudo-class Selector
Link pseudo-class Selectors
:root pseudo-class Selector
12 Topics
Intro
transform : translate()
Translate Hero Example
transform:scale()
transform:rotate()
tranform:skew()
Transition Property
Multiple Transitions
Transition - Delay Shorthand All Properties
Transition-timing-function
Animation
Animation-fill-mode
3 Topics
Intro
Steps
Complete Project
16 Topics
Intro
CSS Variables
FontAwesome Icons - Intro
FontAwesome Icons - Self Hosting Option
FontAwesome Icons - CDN Link
FontAwesome Icons - SVG Approach
FontAwesome Icons - Versions
Text-Shadow Box-shadow
Browser Prefixes
Semantic HTML
object-fit
Emmet Workflow
:is()
:not()
HSL Color Values
Five Server Extension
10 Topics
Intro
Setup
Images and Icons
HTML Structure
Reset
CSS Variables
Body
Blog Card
Blog Image
Complete Project
35 Topics
Intro
Setup Files and Finished Project
Setup
Assets
CSS Variables
Global Styles
Header HTML
Additional Video
Header CSS
Content Divider
Skills HTML
Skills CSS
Skills Columns and Clearfix
Class VS Descendant
About HTML
About CSS
Products HTML
Products CSS
Services HTML
Services CSS
Services Icon
Contact HTML
Contact CSS
Footer Html
Footer CSS
Nav Button
Navbar Html
Navbar CSS
Navbar Functionality
Animation
Multiple Pages
Form Submission
Netlify - Intro
Netlify - Drag and Drop
Finished Project
6 Topics
Optional Section
Intro
Git Install
Git Commands
Setup Github
Benefits
16 Topics
CSS Flexbox Intro
Setup
Naming Conventions
flex-direction
flex-wrap
justify-content
align-items
Hero Project
align-content
Main Axis / Cross Axis
order property
align-self
flex-grow
flex-shrink
flex-basis and flex
NEW FLEXBOX FEATURES !!!
30 Topics
Intro
Setup Files and Finished Project
Project Setup
Color Shades
Logo
Favicon
Hero HTML
Hero CSS
About HTML
About CSS
About Column Layout
Services HTML
Services CSS
Tours HTML
Tours CSS
Additional Design
Contact HTML
Contact CSS
Gallery HTML
Gallery CSS
Footer HTML
Footer CSS
Navbar HTML
Navbar CSS - Small Screen
Navbar Toggle
Smooth Scroll
Navbar CSS - Big Screen
Autoprefixer
Netlify - Continuous Deployment
Finished Project
22 Topics
CSS Grid - Intro
Setup
Basic Syntax - grid-template-columns
Implicit Grid
General CSS Setup
Units - auto
grid-template-rows
fr units
gap property
Gap - New Syntax!
fr vs %
Firefox Developer Tools
grid-lines
Naming Grid Lines
Grid Template Areas
Order Property
Repeat Function
justify-content
align-content
align-items jusitfy-items align-selfjustify-self
minmax()
auto-fit and auto-fill
19 Topics
Intro
Setup Files and Finished Project
Setup
Global Styles
Navbar Mini Project
Hero HTML
Hero CSS
Cards HTML
Cards CSS - Small Screen
Cards CSS - Big Screen with Media Queries
Cards CSS - Big Screen with minmax and auto-fitauto-fill
Cards CSS - Row Height
Tiles HTML
Tiles CSS
Object-fit add-on
Layout HTML
Layout CSS - General
Layout CSS - Grid Lines
Complete Source Code and Finished Project
41 Topics
Intro
Starter Project
Setup
Navbar HTML
Navbar CSS - Small Screen
Navbar CSS - Big Screen
Sidebar HTML
Sidebar CSS
Sidebar Functionality
Fixed Navbar
Hero HTML
Hero CSS - Small Screen
Hero CSS - Big Screen
About HTML
About CSS - Small Screen
About CSS - Big Screen
Services HTML
Services CSS - Small Screen
Services CSS - Big Screen
Projects HTML
Projects CSS - Small Screen
Projects CSS - Big Screen
Projects CSS - Custom Layout
Connect HTML
Connect CSS - Basic Video Setup
Connect CSS - Overlay
Connect - Banner
Temporary Remove Video
Connect Clip-Path
External Video Resources
Skills HTML
Skills CSS
Timeline HTML
Timeline CSS
Blog - Basic Setup
Blog - Complete
Footer
About Contact - HTML
About Contact -CSS
Projects Page and Browser Prefixes
Complete Project
19 Topics
Intro
Resources
Structure
Html
Normalize
Fonts
Fonts - Overview and Tweaks
Colors - General Setup
Primary Shades
Gray Shades
Happy Hues
Rest of the Vars
Image
Buttons
Alerts
Form Setup
Form CSS
Loading
Title
43 Topics
Intro
Starter
Setup
Color Flipper - Intro
Color Flipper - HTML
Color Flipper - CSS
Counter - Intro
Counter - HTML
Counter - CSS
Task Manager- Intro
Task Manager - Form HTML
Task Manager - Form CSS
Task Manager - List HTML
Task Manager - List CSS
Task Manager - Edit Form HTML
Task Manager - Edit Form CSS
Reviews - Intro
Reviews - HTML
Reviews - CSS
Navbar - Intro
Navbar - HTML
Navbar - CSS (small screen)
Navbar - CSS (big screen)
Navbar - JS (toggle functionality)
Sidebar - Intro
Sidebar - HTML
Sidebar - Toggle Button
Sidebar - CSS
Sidebar - Functionality
Modal - Intro
Modal - HTML
Modal - Hero CSS
Modal - CSS
Questions - Intro
Questions - HTML
Questions - CSS
Menu - Intro
Menu - HTML
Menu - CSS
Grocery Bud - Intro
Grocery Bud - HTML
Grocery Bud - CSS
1 Topic
Bonus
HTML&CSS Tutorial and Projects Course (Flexbox&Grid)
Related CSS Courses
Thank You!
Your review has been submitted successfully.