All in 1 CSS Course : Learn CSS, Sass, Grid, Flex, Animation

Explore the three CSS inclusion methods—inline styles, internal styles, and external styles—and learn how priority, linking, and best practices shape scalable web page styling.

Explore how to style elements with CSS borders, border-radius, and outlines, including border width, color, and style, using shorthand, creating circles, and handling focus outlines for links.

Understand the CSS box model by seeing how padding, borders, and margins affect a 200px content box's width and height.

Explore how the font-family property selects an element's font using fallback names. Identify the difference between family names and generic names with examples like Arial, Helvetica, Courier, and Sun City.

Master CSS positioning by exploring static, relative, absolute, and fixed layouts, and learn how top, left, bottom, and right work, plus centering with margin auto.

Master the CSS opacity property to control transparency from 0 to 1 in a container demo where the image starts at 0.4 and becomes opaque on hover.

Explore text-shadow, a CSS property that adds horizontal and vertical offsets, blur, and color to text. Practice by adjusting font size, color, and font weight to create bold, emphasized text.

Learn how to use transition property and transition duration to create smooth hover effects on a centered button, including box-shadow and text-shadow techniques.

This lecture teaches how to create a css animation for a ball using keyframes, specifying animation name, duration, and iteration count, and defining frames with from-to or percentage steps.

Explore core CSS animation properties such as animation-name, duration, delay, iteration-count, direction, timing-function, and fill-mode. See how normal, reverse, forwards, backwards, and alternate govern playback.

Build a full-page hero with a glassy slider and centered text using flexbox. Animate the background with CSS keyframes, cycling through black, red, green, and blue.

Learn to add a background video to a hero area with the video tag, autoplay, mute, and loop, then style with absolute positioning, overflow hidden, and hover effects.

Refine the CTA with a consistent box shadow and a 30px border radius, changing the background color and adding a text shadow on hover for the animated video hero area.

Explore CSS grid fundamentals to build two-column layouts using display grid. Learn grid template columns, grid gap, and grid auto rows to control spacing and row heights.

Explore grid auto flow in CSS, learn how the default is rows and how switching to column arranges items column by column within the grid.

Master the CSS grid gap concept by using the grid-gap shorthand to set equal or different row and column gaps, with examples of 100px and 200px.

Learn how a grid container uses justify-content to align items horizontally, with values start, end, center, space-between, space-around, and space-evenly.

Explore the difference between justify content and justify items in CSS grid, illustrating how justify content centers the overall grid content while justify items targets each grid item individually.

Learn how to align grid content and items using justify-content, align-content, and align-items, centering or edge-aligning both the whole grid and its individual items.

Master css grid basics by building a 3x3 orange item layout on a 900 by 900 container, applying 50px gaps, and learning to reorder items with grid line start/end properties.

Explore the grid-area shorthand in CSS and learn its value order (grid-row-start, grid-column-start, grid-row-end, grid-column-end) with slash separators. Tackle a practical item placement challenge using grid area.

Learn to place item three in the middle using grid area on a two-column, two-row grid, and set its background to green to illustrate grid area.

Learn how flex direction controls item layout in a flex container, switching between row, column, and column-reverse to arrange items and change alignment.

Explore the flex flow property for containers, combining flex direction and flex wrap, and see how justify content and align items shape alignment and wrapping.

Explore how the justify-content property aligns flex items horizontally within a container, with values like flex-start, flex-end, center, space-between, space-around, and space-evenly for precise spacing.

Master centering content inside a flex container by using display:flex and align-items to achieve horizontal and vertical alignment.

Explore how align-content centers multi-line flex containers, using justify-content and align-items, and understand when flex-wrap enables equal top and bottom spacing across multiple lines.

Explore flex item properties by applying styles to child elements and mastering the order property, including default zero value, ascending sorting, and practical rearrangement of items.

Discover how flex basis sets the initial width of flex items, and how flex grow and flex shrink control sizing when space changes.

Explore flex alignment with align-self to position three items using flex-start, center, and flex-end for vertical alignment in a simple layout.

Define and reuse Sass variables for colors and fonts, using global scope with !global for universal updates. See live compilation from extensions and how changes reflect across styles.

Explore Sass nesting to write concise selectors like container, section, and section content, enabling viewport height with 100% width and 100vh height, and center content using flex and text-align center.

Learn how the ampersand marks the parent in Sass and how nesting groups properties with the same prefixes to shorten code, with a hint at import, mixin, and extend.

Explore how to use mixins in Sass to create reusable button styles with gradient backgrounds, padding, and border radius, and include them across sections for consistent design.

Learn to import styles, use a center alignment mixin, and create gradient text with a linear gradient, background clip, and transparent text fill, while troubleshooting a compile error.

Explore extending section styles in CSS by using inheritance to apply gradient text colors, compare section one and section two, and preview reverse gradients in upcoming lessons.

Master Sass basics by styling a button with variables, nesting, import, mix, and extend, and learn to reuse code and efficiently customize colors and backgrounds.

Learn how to build a unique hover effect with CSS pseudo elements, using before and after, absolute positioning, transitions, and z-index to create layered button visuals.

Create a unique hover effect using before and after pseudo elements to reveal rotating circles from the button, powered by CSS animations, keyframes, and gradient styling with flexbox alignment.

Create a unique hover effect by using a pseudo-element on a button-like div, centering it in a full-viewport container with flex, and animating the before element.

Explore how to create a unique hover effect with two overlapping pseudo elements and keyframe animations, controlling border color changes and sequencing for a polished user interface.

Learn to create CSS shapes, including a triangle crafted with clip-path polygon, and build a hero area in a web design project using gradients and responsive layout.

Learn to build a hexagon in CSS using clip-path polygon, define six points, and apply layered backgrounds for images or testimonials, with a preview of a future circle technique.

Create a circle in CSS by setting equal width and height and applying a 50% border-radius, and experiment with a blue and green background.

Learn to build a book shape with CSS polygon points and clip-path, set a 300 by 300 area, and apply a yellow to red gradient for web designs.

Create a basic HTML markup and a centered glass-style layout with a container and image container, using flexbox and absolute positioning, and add font awesome icons and a stylesheet.

Place four absolute elements: triangle, cross, square, curvy inside a relative image container for hover. Initially, opacity is zero; they fade in on hover with a 0.5s ease transition.

Explore zooming, bouncing, and rotation animations from keyframes to transforms, using rotate and scale, duration, ease, and infinite looping to enhance interactive user interfaces.

Perform a subtle rotation using transform rotate, add a 0.5s ease transition, apply overflow hidden to the image container, and scale the image to 1.2 with a diagonal hover overlay.

Discover how to create reusable hover overlay effects using a single HTML markup, with front and back faces, an image, and overlay content including project name, description, and icons.

Create interactive hover effects by styling front and back panels with absolute positioning, flex centering, and a red-to-yellow gradient. Master practical CSS techniques for layout, borders, box sizing, and fonts.

Explore a dynamic hover project in CSS, building a turnover effect with multiple layered containers, z-index tweaks, smooth transitions, and transform scale animations to reveal back content.

Explore six unique hover effects using CSS transitions, transforms, and box shadows, including scaling, movement, glow, and an oval animation, with pseudo elements and calc-based positioning.