CSS3 for beginners, learn css animation, css flexbox & more

Explore CSS margins in this hands-on tutorial, learning to set top, right, bottom, and left margins in pixels, adjust spacing with floats, and center elements with left and right margins.

Learn how to apply CSS padding and margins in all directions, understand their clockwise order, and distinguish padding inside the element from margin outside it for precise spacing.

Learn CSS text properties, including color, text align, text decoration, text transform, letter spacing, word spacing, line height, and text indent, with practical examples.

Explore nine CSS text properties—color, text-align, text-decoration, text-transform, letter-spacing, word-spacing, line-height, text-shadow, and text-indent. Learn to center text, adjust spacing, and apply shadows and indentation.

Explore how to use the font-family property to change text typography by selecting font names, trying system fonts or Google fonts, and previewing results in your browser.

Change the title font style from here, apply font style to text and paragraphs, and preview changes in the browser.

Learn to style links with CSS by building a simple menu, adjusting colors, borders, text decoration, and states like hover, visited, and active.

Demonstrate compound and group selectors in CSS to style multiple elements with a single rule, using comma separation. Apply color, background, font, line height, and margins to all selected elements.

Explore styling ordered and unordered lists with CSS, mastering list marker formats—from numbers and letters to roman numerals—adding custom icons, adjusting start values, and visual tweaks.

Learn to style tables with borders, colors, and alignment, and customize headers and cells. The lesson covers inserting images, adjusting widths and heights, and applying font size and colors.

Master table vertical alignment by adjusting top, center, and bottom alignment for table cells, experimenting with borders and layout to align content effectively in CSS.

Learn to implement a table row hover effect in css3, applying hover styles to tr elements to highlight rows with background and text color changes.

Explore setting width and height in CSS using pixels, percent, and centimeters with examples like 500px width and 100px height, and preview changes in the browser.

Explore how the CSS position property works with static and relative values, using top, left, bottom, and right properties to offset elements, and why static positioning ignores those offsets.

Learn how to use position relative on a parent and position absolute on a child to control layout. Explore practical examples with top and left coordinates in a parent-child context.

Learn how to create a simple fixed menu in CSS using position: fixed, with layout, color, and linked anchors, and understand how fixed menus behave while scrolling.

Explore the css opacity property to control transparency across elements. Apply values such as 0.9, 0.15, and 0.7 on inline and block layouts to compare effects.

Learn to use CSS attribute selectors to target form inputs by type, such as text, email, and submit, and apply precise styling like a green border.

Master advanced css selectors using class and id to style a navigation menu, applying height, line-height, color, font, margins, and text-decoration.

Learn to create rounded and circular images with css by setting equal width and height, applying border-radius, centering using positioning, and previewing results in a web page.

Learn to apply individually rounded corners to images using border-radius, adjusting top-left, top-right, bottom-left, and bottom-right radii with percentage values in css3.

Explore the background-size property, learn how to adjust with percent, pixel, and centimeter values, and decide between cover and contain to control how much of an image fills the background.

Explore how to apply multiple background images in CSS, control each image’s size with pixels or percent, position them (top, bottom, left, right), and manage repeat using comma-separated syntax.

Explore repeating linear gradient in CSS by adjusting colors, percentages, and degrees to customize background stripes across red, yellow, blue, purple, and more.

Learn to create linear gradients in CSS, pick and adjust colors, starting and ending points, and directions. Copy the CSS code and apply gradients to your page.

Explore CSS box-shadow techniques with practical examples, adjusting horizontal and vertical offsets, blur radius, and color, then compare inset versus outset shadows and circle shapes with border-radius.

This lecture shows how to handle text overflow in a div using clip and ellipsis, set width constraints like 200 to 250 pixels, and observe truncation.

Explore word wrap and text flow in CSS, learn how to control overflow, apply word-break and break-word techniques, and understand how long words wrap across lines.

Explore how text-align-last controls the alignment of the last line in a paragraph, and experiment with left, center, right, and justify options using CSS3.

Practice CSS transitions to animate a box's size, changing width and height from 100px to 300px on hover, and control duration with transition properties.

Apply color transitions in CSS by using the transition property on the color attribute and set a duration to animate link color changes.

Explore how transition timing functions control animation speed, comparing linear, ease-in, ease-out, and ease-in-out, with hands-on examples using a parent and child element and a 3 second duration.

Learn to apply css transitions to a positioned child, moving from left to right with a duration and transition delay. Use timing functions to control the animation flow.

Apply the CSS transform rotate to rotate elements, control animation duration, and vary rotation angles from 45 to 360 degrees to create engaging animations.

Apply css transform skew to elements, exploring horizontal and vertical skew directions and how top-to-bottom or bottom-to-top variations affect placement and spacing.

Learn how to apply multiple CSS transforms—translate, scale, and skew—on elements, combine them in one transform declaration, and practice positioning text blocks visually.

Explore creating and timing a first CSS animation by defining a div with a named keyframes sequence, setting duration, keyframe percentages, and visual properties like width, height, and color.

Explore how animation fill mode affects CSS animations, control timing and duration, and observe how the start point and last point determine the animation's behavior.

Explore css animation delays, set specific seconds for title animations, and loop effects infinitely to practice timing and pacing in css animations.

Discover how animation direction shapes the start and flow of css animations, using normal, reverse, alternate, and alternate reversed with colors like light green, blue, red, purple, and black.

Explore box sizing to understand how width and height change with padding and borders, comparing content-box and border-box, and learn how padding and margins affect layout.

Master flexbox alignment by applying display: flex and flex-direction to arrange items horizontally, then use center, space around, and space between to achieve responsive layouts.

Learn how flex-wrap wraps items onto multiple lines and how the order property repositions elements in a flex container, with flex properties to control width and weight.

Explore how flex grow and flex shrink allocate extra space among items, adjust width and height, and control element sizes in a flex container.

Learn to build an image gallery with a CSS lightbox: structure images with id and classes, control visibility and transitions, and add titles, close and navigation buttons.

Learn to navigate a lightbox image gallery with next and previous controls, cycle through four images, open and close the lightbox, and reset by refreshing the page.