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

Master css syntax by writing internal styles in the style tag, learn about selectors, properties, values, and simple examples like color and background color.

Explore CSS selectors in depth, from single and multiple element selectors to descendant, child, and sibling patterns, plus id and class selectors, with practical examples like color and font size.

Compare descendant and child selectors in css, and see how a div with id me targets only direct paragraph children, changing colors from red to green.

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 CSS color fundamentals, including hex color codes, rgb and rgba values, named colors, and applying text and background colors with practical examples.

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.

Learn how CSS margins create space outside an element, using top, right, bottom, and left values and the shorthand margin to control spacing around boxes.

Explore css padding, using shorthand and individual top, right, bottom, left values to create inside space, differentiate from margin, and preview the box model.

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 controlling width and height with CSS, add background color and text color, and center text by setting line-height equal to height and using text-align center.

Explore fixed text formatting in CSS by applying text-align left, right, center, or justify, text-transform uppercase, lowercase, or capitalized, and spacing controls like text-indent, letter-spacing, and word-spacing.

Explore the css display property, including block, inline, inline block, and none. Learn how width and height apply to block and inline block, while inline stays compact.

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.

Explore the concept of CSS overflow and how a 300x300 container reveals or hides content with visible, hidden, scroll, and auto values.

Master float and clear CSS properties to control layout, learn how floating elements are removed from the normal flow, and see how text wraps around images and supports navigation menus.

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.

Learn to apply CSS box-shadow and inner shadow to containers, experimenting with hover, offsets, blur, color, and drop shadow to enhance visuals.

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.

Explore transition property basics, then apply transition duration, delay, and timing function to create smooth hover effects. Learn easing options like ease, ease-out, linear, and cubic-bezier.

Master CSS transitions by combining property, duration, timing function, and delay into a single line, and apply hover-driven left and top movements to create dynamic illustrated effects.

Create a stylish CSS button hover effect using a relative container and two ::before and ::after pseudo elements positioned absolutely, with transitions, skew, overflow hidden, borders, and box-shadow.

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.

Master the CSS animation shorthand by setting the name, duration, and a linear timing function, with reverse direction and keyframes at 0% and 100% for hover-ready projects.

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.

Explore placing content in a three-by-three CSS grid with 200px cells and 50px gaps, using align items, justify items, align content, justify content, and the place content shorthand.

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 to align individual grid items using justify-self, align-self, and place-self, with examples of start, end, and center, and understand their relation to other grid alignment properties.

Create a css grid layout by defining grid areas for header, sidebar, content, photo, and footer, and applying grid template areas and grid gaps to arrange a four-column design.

Explore how display:flex turns a container into a flexbox, arranging items in a row for flexible layouts. Learn key properties like justify-content and align-items to center items and control spacing.

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

Learn how the flex wrap property controls item wrapping in a container, with wrap and no wrap values; shrinking the window moves items to the next line, enabling responsive layouts.

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.

Explore how flex grow sets the growth rate of flex items and distributes space. See how values like 1, 2, and 3 create proportional space, while zeros yield no growth.

Explore how flex shrink governs how items reduce width when the container narrows, illustrated with three items at 400 px and differing shrink values.

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

Explore the flex shorthand property by applying flex grow, shrink, and basis to three items, observe responsive behavior in the browser, and learn how flex basis sets initial weights.

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

Learn Sass, the syntactically awesome stylesheet preprocessor for css, and see how variables, nesting, inheritance, and functions—and import, mixin, and extend directives—simplify maintenance and reduce repetition.

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.

Explore the ampersand sign in CSS to reference the parent, and see how font size affects centered text.

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.

Master mixins and apply them across body, container, and sections to align content, set layout, and style text using variables and CSS properties.

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.

Learn to implement gradient text with a CSS mixin using arguments for direction and two colors, enabling dynamic color schemes such as green to blue or purple to orange.

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.

Design and implement a final hero area project by building a two-pane layout with text and image, centered via flex, styled with hover transitions and before/after shapes.

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.

Acquire and embed the Font Awesome CDN link with a single line of code, avoiding download or installation, to enable Font Awesome icons on your website or app.

Explore styling a project by building a centered container with height 100vh, a positioned content layer at 10% offsets, 80% width and height, and a translucent white background.

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.

Learn to add font awesome icons to web projects using a CDN link or a local download, and implement icons in HTML with the i tag and fa classes.

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.

Learn a hover effect that shrinks an image to a circle with a glow, and reveal front and back content with scale and opacity using CSS.

Explore advanced hover effects in CSS using before and after pseudo elements to create an extended border animation, image fade, and responsive spacing for element cards.

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.

Master css border animations by practicing extended and reduced border effects with a gap at the end and a rotating front image, and develop problem-solving skills through this challenge.

Learn to build a hover effect using element three, with before and after borders, rotating and translating the front image, and content transitions for a polished CSS animation.

Practice a twist on hover effects by animating image fronts with skew and opacity transitions, staggering the transform and back content to reveal content on hover.

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.

Explore hover effects in project seven by animating a split element with circular borders and a gradient background, revealing top and bottom content through translate and opacity transitions.

Explore the eighth hover effect: an opening book animation using a y-axis rotate (180 degrees), a custom transform-origin, and hover-triggered back content with opacity and translation.

Discover a hover border animation using before and after pseudo elements to reveal content, with borders, transitions, transforms, and overflow handling for a polished user interface effect.

Explore a unique bent hover effect by animating border radii, moving the front content down, and revealing back content with overflow hidden and transitions.