CSS

By ABHANG KARODE Categories: CODING, CSS
Wishlist Share
Share Course
Page Link
Share On Social Media

Course Content

Day 1 — Introduction to CSS
What is CSS, inline vs internal vs external CSS, basic syntax (selector { property: value; }). Exercise: Link an external stylesheet to an HTML page.

Day 2 — Colors & backgrounds
color values (names, HEX, RGB, HSL), background color, background images, gradients. Exercise: Create a colorful hero section.

Day 3 — Text styling
font families, font size units (px, em, rem, %), font weight, line height, letter spacing, text alignment, text decoration. Exercise: Style a blog post’s headings and paragraphs.

Day 4 — The Box Model
content, padding, border, margin, box-sizing, border-radius, shadows. Exercise: Style a card with padding, border, and shadow.

Day 5 — Selectors & combinators
class, id, element selectors, descendant, child, sibling combinators, attribute selectors, pseudo-classes like :hover, :first-child. Exercise: Style a navigation menu with hover effects.

Day 6 — Units & measurements
absolute vs relative units (px, %, em, rem, vw, vh), calc(). Exercise: Create a layout with responsive font sizes.

Day 7 — Mini project: Styled profile card
Build a styled profile card using box model, colors, typography, and hover effects.

Day 8 — Display & positioning basics
block vs inline vs inline-block, display, position (static, relative, absolute, fixed, sticky). Exercise: Place an image caption at the bottom-right using positioning.

Day 9 — Flexbox fundamentals
flex container properties (display: flex, justify-content, align-items), flex item properties (flex-grow, flex-shrink, flex-basis). Exercise: Create a horizontal navigation bar with centered items.

Day 10 — Flexbox advanced patterns
wrapping, align-content, vertical centering, equal-height columns. Exercise: Build a responsive 3-column card layout.

Day 11 — CSS Grid basics
defining rows/columns, grid-template, gap, placing items, implicit vs explicit grid. Exercise: Create a simple two-column layout.

Day 12 — CSS Grid advanced patterns
grid areas, spanning rows/columns, auto-fit/auto-fill with minmax(). Exercise: Build a responsive gallery grid.

Day 13 — Floats & legacy layout methods
floats, clearfix, when to use (rarely), inline-block layout. Exercise: Recreate a simple float-based two-column layout.

Day 14 — Mini project: Responsive landing page layout
Combine flexbox, grid, and positioning to structure a landing page with header, hero, features, and footer.

Day 15 — Transitions & transforms
transition properties, transform (scale, rotate, translate, skew). Exercise: Animate hover effects on buttons.

Day 16 — Animations & keyframes
@keyframes, animation properties (duration, timing, iteration), chaining. Exercise: Create a simple bouncing ball animation.

Day 17 — Responsive design & media queries
@media queries, breakpoints, mobile-first approach. Exercise: Make your landing page responsive for 3 screen sizes.

Day 18 — CSS variables & functions
custom properties (--var), var(), calc(), color functions like hsl(), nesting with :is(). Exercise: Refactor colors into CSS variables.

Day 19 — Advanced selectors & pseudo-elements
:nth-child(), :not(), ::before, ::after, styling form states. Exercise: Add decorative elements with pseudo-elements.

Day 20 — Final project: Multi‑page styled website
Apply CSS to the 3‑page site from the HTML map. Add responsive layouts, typography, colors, forms, animations.

Day 21 — Review & polish
cross-browser testing, validation, CSS resets/normalize, minification basics. Exercise: Test, fix, and prepare site for deployment.

Student Ratings & Reviews

No Review Yet
No Review Yet
Mentorteach