CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox)

Explain what css is and how it styles html content, show how linking a css file yields a styled page, and mention modules like colors, grid, and flexbox.

Learn how to write CSS using inline, internal, and external methods, and apply selectors, properties, and declarations to style HTML elements like h1, h2, and h3.

Explore how an HTML document is structured as a family tree, with the HTML element as the root and nested parent, child, and sibling relationships guiding page structure.

Master CSS selectors by targeting elements with tag names, classes, IDs, and attribute selectors, and understand how precedence and grouping determine which styles apply.

Explore css combinators and how they define relationships between selectors. Learn the four types—descendant, child, adjacent sibling, and general sibling—and see practical examples transforming element backgrounds.

Explore CSS colors, including named colors, rgb, rgba, and hex values, to craft modern, accessible web designs. Learn mood and contrast considerations, dominant colors, and practical color schemes.

Observe how CSS inheritance lets child elements inherit color from their parent elements such as body and div. Close parent precedence applies, but a child's own color overrides inherited styles.

Explore how CSS text formatting enhances web pages by styling color, size, and alignment. Learn how block vs inline elements behave and how display and wrappers affect text positioning.

Explore CSS font-family concepts, including generic families (serif, sans serif, cursive, monospace) and specific fonts like Times New Roman, Georgia, Helvetica, Verdana.

Learn how to apply common CSS pseudo classes like first-child, last-child, and nth-child to style list items, and control list bullets with decimal, square, or none values.

Explore pseudo elements such as first letter, before, and after, and learn how they style parts of an element using the content property to insert and color new content.

Explore CSS measurement units, including units such as pixels and relative units such as em and rem. See how font sizes depend on parent and root sizes with viewport values.

Explore relative units in CSS beyond pixels and rems, focusing on percentage, viewport height (vh), and viewport width (vw) and how they size elements relative to the parent or viewport.

Explore CSS position values, including absolute, relative, fixed, and sticky, with practical examples of top, left, bottom, right, and z-index to control element stacking.

Explore how the float property aligns elements left or right in CSS, why floats are less popular today, and to clear floats with overflow, a clearing element, or clear fix.

Explore advanced CSS backgrounds by applying background image techniques, sizing, repeating, positioning, and fixed attachment to create modern, parallax-ready layouts.

Learn how to control background images with background size, origin, and clip, including pixels, percentages, contain and cover, then apply shorthand and multiple backgrounds for polished layouts.

Explore CSS gradients and learn how linear gradients create smooth color transitions with configurable directions, including multiple colors and overlaying with background images using rgba opacity.

Explore text shadow and box shadow in CSS, control horizontal and vertical offsets, blur, and color, apply to headings and cards, and enhance with hover and transition effects.

Explore how CSS transitions create smooth state changes on hover by using the transition property for width and background color, and customize duration, delay, timing function, and cubic bezier.

Master CSS transforms by exploring two dimensional and three dimensional transforms, focusing on translate, rotate, and scale, with hover and transition animations.

Explore css transforms, mastering 2d and 3d effects by applying translate, rotate, scale, and skew (including skew x/y), using shorthand for multiple transforms, with hover and transition demonstrations.

Explore css animations with keyframes and styles. Connect with animation-name and animation-duration to move a box using left, top, and background color changes across 0% to 100%.

Explore CSS animations from keyframes to advanced properties, including delay, iteration count (finite or infinite), direction (normal, reverse, alternate, alternate reverse), timing functions, fill modes, and the shorthand animation syntax.

Discover how CSS flexbox simplifies alignment with a flex container and flex items on the main and cross axes, using direction, wrap, justify content, and align items.

Explore flex container properties to build responsive layouts, mastering flex direction, wrapping, and alignment with justify-content, align-items, and align-content for precise control.

Build the grand hotel project using flexbox for a responsive, multi-section site. Explore a header with a banner, a fixed left sidebar, room and customer cards, and a rich footer.

Create a left sidebar with a hamburger menu that reveals navigation, including a heading with a search input, nav items, social icons, and a year caption with a background image.

Fix a sidebar navigation with a nav element, header grand hotel, a search form with input and fa-search button, and list of links: home, about us, rooms, events, customers, contact.

Style the navigation beside the sidebar with fixed positioning and a 40rem width, featuring a cover background image and gradient, and refine the heading and search input with focus states.

Create a click event to toggle navigation using checkbox input and label; when checked, the navigation slides in from the left with a smooth transition, while the hamburger lines animate.

Create a modern header markup in pure HTML and CSS, including brand with logo and heading, and a banner with heading, paragraph, and button, with visibility fix for fixed sidebar.

Style a full-viewport header with a background image and gradient overlay, arrange brand and banner via flexbox, and implement a staged reveal animation for heading, paragraph, and button.

Style the about us section using flexbox to create a two-column layout, refine typography, spacing, and hover effects on the call-to-action button with responsive sizing and underlines.

Style the second part of the about us section by positioning four images with absolute coordinates inside a relative container, centering the third image with translate(-50%, -50%).

Style the rooms section with flexbox to show two cards per row and center them, while applying common header styles, card content, image fit, shadows, and a centered hover button.

Create the customers section markup with a header, paragraph, and two customer cards that display an image, a full name, and short paragraphs representing customers' opinions about the hotel.

Learn to style the customers section using flexbox, applying card layouts, typography, spacing, and color tweaks to create a polished left-image, right-text card design.

Create a two-part footer markup with a main part for hotel information, navigation, signup form, and a gallery, plus a copyright section, designed for responsive styling.

Learn to style the footer with flexbox, create a four-section layout, build a responsive gallery with hover scale, and refine typography and colors, culminating in responsive design via media queries.

Fine-tune a Grand Hotel layout for mobile responsiveness using CSS media queries at 1200, 900, and 750px, adjusting flex directions, padding, typography, and images.

Learn how CSS grid provides a two-dimensional layout system that works alongside flexbox, including grid containers, grid items, grid lines, gaps, tracks, cells, and areas.

Explore how fractional units (fr) in CSS grid divide available space among columns and rows, using repeat, auto, and other units like percentage and viewport width for flexible layouts.

Explore css grid positioning and spanning, placing items with grid column start and end, grid row start and end, grid area, and span, including end-of-container techniques and z-index adjustments.

Learn to name grid lines and grid areas in CSS grid, replacing numbers with named lines, and apply it to a sample header, sidebar, main, boxes, and footer layout.

Define names for grid rows and columns to position header, main, sidebar, boxes, and footer in CSS Grid, including start/end points and the repeat function.

Master explicit and implicit grids in CSS by building a two-column 600px container with 100px rows, using grid auto rows, grid auto flow, and gaps.

Learn to align grid tracks inside a container using justify-content and align-content in CSS grid, moving tracks horizontally and vertically with start, center, end, space-between, space-around, and space-evenly.

Explore autofill and auto-fit in CSS grid to auto size columns within a container, using minmax and fractional units for responsive layouts that wrap as space changes.

Build a furniture store layout using CSS grid as the main structure, with Flexbox for parts. Include a navbar with social icons, a signup/login modal, dropdown, slideshow, and hover-blur gallery.

Build the navbar markup by creating a social icons block and a first navigation with four items, using Font Awesome icons and a container wrapper.

Build a responsive navbar layout with social icons on the left and navigation on the right using CSS grid. Apply style resets, grid columns, hover effects, and underline animation.

Create a right-aligned search form under the navigation using a 10-column grid, with an input and a Font Awesome search button.

Create a banner section with a heading and a hover-changing button, and build a four-image slideshow with markup for banner content, slideshow wrapper, slides, and four slide control buttons.

Create a four-image banner slideshow with flexbox, using a 400% wide wrapper and 100% width images, apply object-fit: cover, and implement a 20s infinite keyframe animation with overflow hidden.

Create day offer section with a four-column CSS grid, placing an image, heading, paragraph, and shop now button, and position second image at bottom with gaps and hover effects.

Build a new best selling furniture section using html markup with six product cards, each containing an image, heading, price, and a by now button.

Style the bestselling furniture section with responsive CSS grid, arranging product cards, headings, paragraphs, and a full-width button, including hover effects and subtle card shadows.

Build a modern responsive gallery using CSS grid, placing twelve images in an eight-column by four-row grid with responsive cell sizes, gaps, and hover opacity effects.

Create the contact section and a simple footer with CSS grid and flexbox, style the form inputs and button with hover effects, and prepare for responsiveness and a modal box.

Build a modal box for signup and login using checkbox-driven show/hide, labels, and an X close control, with a forms wrapper that disables the page while forms are active.

Style a modal box by centering the form wrapper with fixed positioning and transform translate(-50%, -50%), using an index; refine buttons, headings, and inputs with flexbox, borders, padding, and color.

Style a modal box that remains hidden by default and appears when sign up or login is clicked, toggling two forms with disabled buttons using pure CSS.

Apply CSS media queries at 1250px, 1000px, 800px, and 600px to make the furniture store project responsive. Use grid techniques to adjust banner heading, navigation, social icons, and forms.