IIRF Online > Development > Web Development > CSS > Modern HTML & CSS From The Beginning 2.0 (2024 Revamp)
Modern HTML & CSS From The Beginning 2.0 (2024 Revamp) by Udemy
Build modern responsive websites with HTML and CSS - Learning modules, mini-projects and 3 full websites
Course Highlights
- 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
Skills you will learn!
Curriculum
5 Topics
Welcome To The Course
How The Web Works
The Roles Of HTML CSS & JS In Web Development
VS Code Editor & Environment
Course Code
20 Topics
Section Intro
Create & Open HTML Files
HTML Tags & Attributes
Document Structure
Live Server & Prettier
Sandbox Files Setup
Meta Tags & Search
Headings Paragraphs & Emphasis
Browser Devtools Intro
Lists
Anchor Tags
Images
Block vs Inline Elements
Line Breaks Horizontal Rules & Entities
Divs & Spans
Classes & IDs
Semantic Elements
Emmet Crash Course
Keyboard Shortcuts
Pricing Grid Challenge
9 Topics
Section Intro
Form & Input Tags
Text-Based Input Tags
Input Field Attributes
Select Boxes & Textarea
Checkboxes & Radio Buttons
Other Input Fields
Datalist
HTML Form Challenge
10 Topics
Section Intro
Audio Element
Video Element
Image Map
Tables
Iframe
Global Attributes
SVG Element
Popover & Details
Progress & Meter
11 Topics
Section Intro
Implementing CSS
Basic CSS Selectors
Fonts In CSS
Font & Text Properties
Colors (Color Names HEX RGB HSL)
CSS Specificity
Backgrounds
Styling Links
Font Awesome Library
CSS Basics Challenge
12 Topics
Section Intro
Box Model Explained
Sizing & Overflow
Padding
Margin
Universal Selector & Reset
Borders
Display Property
Position Property
Box Shadow
Freelance Form Mini-Project
Shoe Cards Mini-Project
8 Topics
Section Intro
What Is Flexbox?
Flexbox Basics - Containers & Items
Align & Justify Items
Flex Properties & Dynamic Sizing
Flex Order
Flexbox Layout Challenge
Pricing Card CSS Mini-Project
10 Topics
Section Intro
What Is Responsive Design?
Flexible Layouts & Percentages
rem & em Units
Viewport Units (vh & vw)
Media Queries
Responsive Pricing Grid
Responsive Flexbox Layout
Container Queries
Container Units
6 Topics
Project Intro
Setup & HTML
Base CSS & Header Styles
Main Content Flex & Alignment
Inner Styles
Mobile Layout & Media Queries
8 Topics
Section Intro
Custom Properties
Vendor Prefixes
Filters
Smooth Scroll Mini-Project
Sticky Nav & Style On Scroll
calc() Function
Nesting
10 Topics
Project Intro
Setup & Base CSS
Header & Navigation
Hero Text
Custom Properties
Gallery Section Flexbox
Footer
About Page
Contact Page
Image Lightbox Effect
7 Topics
Section Intro
Intro To Git & GitHub
Generate SSH Keys
Git Workflow & Commands
Deploy Website To Netlify
Contact Form Submission
Connect & Configure a Domain Name
7 Topics
Section Intro
What Is Web Accessibility?
Skilltide Browser Extension
Screen Reader Testing
Role Attribute
ARIA Attributes
Aria Expanded & Dynamic Elements
11 Topics
Section Intro
Attribute Selectors
Child & Sibling Combinators
Pseudo Elements
Pseudo Classes - first-child last-child & nth-child
Pseudo Classes - first-of-type last-of-type nth-of-type
:before & :after Pseudo Elements
Image Overlay With :before
is() where() & has()
Styling Forms
Selectors Challenge
14 Topics
Section Intro
CSS Grid Overview
Grid Columns & Gap
repeat() & minmax()
Grid Rows
Grid Challenge 1
Align & Justify Properties
repeat() With autofit & autofill
Positioning & Spanning Items
Named Grid Lines
Grid Challenge 2
CSS Grid & Media Queries
Grid Template Areas
Lumina Creative Grid Refactor
12 Topics
Section Intro
Transitions Overview
Creating Transitions
Trandform Property
Absolute Centering With Transform/Translate
3D Transforms
JavaScript & CSS Intro
Hamburger Menu
Keyframes - Part 1
Keyframes - Part 2 (CSS Loader Animation)
3D Rotating Cube
Presentation Website Mini-Project
10 Topics
Project Intro
Project Setup
Desktop Navigation
Mobile Navigation
Hero Section
Hero SVG & Media Queries
Navbar Background On Scroll
Learn Section
Chapters Section
Summary Section
9 Topics
Info Section
Takeaway Section
Details & Author Sections
Stats Section
Newsletter Section
Footer & Social Icons
Contact Page
Add Accessibility
Deploy To Vercel & Formspree Setup
10 Topics
Project Intro
BEM Methodology Explained
Project Setup
Navbar & Desktop Menu
Mobile Navigation
Hero Section
Navbar Background On Scroll
Testimonials Section
Features Section
Features Mobile Layout
10 Topics
Preview Section
Animated Play Button
Video Modal
Details Area
Screenshots Section
Download Section
Footer
Create The Details Page
Pricing Cards
Details Features
1 Topic
Course Wrap Up
Modern HTML & CSS From The Beginning 2.0 (2024 Revamp)
Related CSS Courses
Thank You!
Your review has been submitted successfully.