Course Overview
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
FAQ
FAQ area empty
Course curriculum
-
Section Intro
68 -
Create & Open HTML Files
344 Xem trước -
HTML Tags & Attributes
308 -
Document Structure
372 Xem trước -
Live Server & Prettier
320 -
Sandbox Files Setup
189 -
Meta Tags & Search
591 -
Headings, Paragraphs & Emphasis
536 -
Browser Devtools Intro
307 -
Lists
332 -
Anchor Tags
510 -
Images
354 -
Block vs Inline Elements
403 -
Line Breaks, Horizontal Rules & Entities
362 -
Divs & Spans
354 -
Classes & IDs
402 -
Semantic Elements
395 -
Emmet Crash Course
516 -
Keyboard Shortcuts
536 -
Pricing Grid Challenge
546
-
Section Intro
132 -
Attribute Selectors
404 -
Child & Sibling Combinators
416 -
Pseudo Elements
327 -
Pseudo Classes - first-child, last-child & nth-child
307 -
Pseudo Classes - first-of-type, last-of-type, nth-of-type
395 -
:before & :after Pseudo Elements
359 -
Image Overlay With :before
585 -
Is(), where() & has()
346 -
Styling Forms
662 -
Selectors Challenge
554
-
Section Intro
129 -
CSS Grid Overview
380 -
Grid Columns & Gap
503 -
Repeat() & minmax()
217 -
Grid Rows
304 -
Grid Challenge 1
181 -
Align & Justify Properties
327 -
Repeat() With autofit & autofill
348 -
Positioning & Spanning Items
467 -
Named Grid Lines
367 -
Grid Challenge 2
224 -
CSS Grid & Media Queries
293 -
Grid Template Areas
438 -
Lumina Creative Grid Refactor
440
-
Section Intro
106 -
Transitions Overview
225 -
Creating Transitions
362 -
Trandform Property
398 -
Absolute Centering With Transform/Translate
137 -
3D Transforms
434 -
JavaScript & CSS Intro
740 -
Hamburger Menu
1074 -
Keyframes - Part 1
463 -
Keyframes - Part 2 (CSS Loader Animation)
548 -
3D Rotating Cube
551 -
Presentation Website Mini-Project
970
Requirment
-
This course is for any developer, beginner to advanced
Outcomes
-
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
0 Student
1 Course
0 review