The Modern Flexbox, Grid, Sass & Animations Developer Course

Begin a deep dive into flexbox basics, why to use flexbox, then explore the flex container properties and the flex items properties, supported by resources to reinforce the concepts.

Learn how flexbox turns a container into a flex container and its children into flex items, enabling flexible alignment and space distribution with display:flex or inline-flex.

Discover why flexbox is essential for layouts, focusing on containers and their items, and how it enables responsive card layouts. Assess browser support with caniuse and the gap property's implications.

Explore the flex direction property in the flex container, including default row, row-reverse, column, and column-reverse values. Initiate the flex container with display:flex to see the effects.

Explore how the flex wrap property, a flex container property, controls wrapping with default no wrap, responsive wrapping, and reverse wrapping across screen sizes.

Explore how the flex flow property combines flex direction and wrap to control a flex container, demonstrating row, column, and wrap behaviors with nowrap variations.

Explore how the justify-content property aligns flex items along the main axis, with a default row direction, covering values like flex-start, center, space-between, space-around, and space-evenly, plus practical gallery layouts.

Explore the line items property in flex containers, its cross-axis alignment like flex-start, center, and baseline, and how height, margins, and direction affect stretch behavior.

Explore the align content property in multi-line flex containers, and learn how flex direction, main axis, and cross axis shape spacing with space between, space around, and space evenly.

Explore the flex order property to reorder flex items along the main axis with positive and negative values, without changing the source code, for row and column layouts.

Explore how the flex grow property allocates extra space to flex items, with default zero and growth factors like one or two, and observe its responsive impact on widths.

Learn how the flex shrink property controls how flex items shrink as the container narrows, with shrink on by default and you can deactivate it by setting it to zero.

Set the initial size of a flex item with the flex basis property, using auto or units like px, rem, or vw, and compare it to flex grow and shrink.

Explore the flex shorthand property for flex items, combining grow, shrink, and basis. See how changing these values and the window width affects item sizing, including auto basis.

Explore the align-self property to control a single flex item's position along the cross axis, using values like auto, flex-start, center, stretch, and baseline.

Explore flexbox concepts through hands-on resources, interactive demos, and games that illustrate flex container basics, flex items, justify-content, align-items, wrapping, and order, plus emmet shortcuts.

Explore seven key UI design fundamentals—whitespace, alignment, contrast, scale, typography and color, and visual hierarchy—through practical challenges.

Learn how white space and negative space establish structure in user interfaces by applying padding and margins to cards, headings, and paragraphs.

Learn the alignment fundamentals of the user interface by aligning a logo, heading, paragraph, and call to action button, and fix misalignment caused by whitespace with margin-left and transform adjustments.

Apply UI design fundamentals to three cards by tuning alignment and whitespace, using images and content blocks, and learn how object-fit: cover and first-child selectors enhance layout.

Explore contrast and scale in UI design, using flexbox layouts, responsive content sections, and typography tweaks, with practical CSS techniques like object-fit, border-radius, and hover transitions.

Master typography fundamentals for UI design by balancing font choice, size, line height, spacing, color, contrast, and weight to establish visual hierarchy, typically using a single font family.

Explore the color user interface design fundamental, learning how colors shape user experience, convey meaning across cultures, and guide palette choices using gradients and hex values for readability.

Improve a form’s visual design by refining colors, white space, and typography, then implement CSS for focus states, input and textarea styling, and attribute selectors with borders and background colors.

Discover how visual hierarchy shapes UI design by using alignment, contrast, color, and scale. The lesson demonstrates improving a form’s clarity and emphasis through topography and styling.

Master ui design fundamentals through a final challenge that transforms a messy movie list into a clean, responsive layout using flexbox, typography, spacing, and background color.

Explore responsive web design fundamentals, Firefox developer tools, css properties and units, and media queries through a real-world weather app UI, plus five viewport cases.

Explore Firefox Developer Tools to inspect elements, analyze flex and grid layouts, and simulate responsive behavior with responsive design mode and custom device emulation, including media queries.

Understand the viewport and device pixel ratio. Learn how the meta viewport tag with initial scale creates a one-to-one css pixel relationship for responsive design.

Explore max-width and min-width properties to build responsive layouts, learning how max-width caps an element at a fixed size while min-width prevents shrinking below a threshold.

Explore how viewport width (vw), height (vh), and the vmin and vmax units size elements fluidly, enabling responsive layouts and dynamic image sizing across screen sizes.

Explore media queries to create responsive web designs that adapt styles for smaller and larger devices, using min-width and max-width, external stylesheets, and media attributes.

Create three body-based media queries for responsive design: 0–400px sets Lorne green, 401–599px sets blue violet, and 600px and up sets dark red, using max-width and min-width breakpoints.

Create a real-world weather app UI as the second lecture on media queries, using font awesome icons and flex containers to build a responsive weather interface.

Build a responsive seven-day forecast for a weather app UI part 2 using flexbox, media queries, and breakpoints to adapt layout and typography across screen sizes.

Explore how viewport units like vw enable dynamic font sizes that scale with screen width, using calc and rem for flexible, readable text. Learn to adjust across small and large screens with media queries to fix sizes when needed.

Explore how viewport units create full screen sections by using 100vh height and flexbox to center content for a landing page with an indigo background and white text.

Explore sticky footer patterns using viewport units and calc to keep the footer anchored to the bottom, regardless of content height, via CSS calc, 100vh, and flex-grow.

Apply viewport units to margins and paddings, turning fixed values into dynamic vh/vw spacing, use calc for responsive padding, and distinguish internal padding from external margins to prevent overflow.

Leverage viewport width units to create a dynamic top border for the header. Convert the border value to vw, and use calc to keep thickness above 2px on mobile.

Explore a responsive Scarlett Tyler portfolio site with hover and parallax effects, a vintage-filtered gallery, two-panel design for design and coding skills, and a minimal hamburger menu.

Set up the portfolio site with Firefox Developer Edition and Google fonts Bolu Telma and Indie Flower, include Font Awesome, and prepare index.html.

Master box sizing and the box model by comparing border-box and content-box sizing, understanding how padding and borders affect width and height, and exploring CSS specificity and cascading rules.

Build a responsive side navigation with markup and styling, using custom properties for a primary, secondary, and tertiary color palette, social icons, flex layout, and sticky positioning.

Build the main navigation with a responsive header and hover marker using flexbox, semantic markup, and a two-panel layout of side nav and main content.

build the main navigation with hover effects using before and after pseudo elements, apply transform and transform-origin for animated lines, and implement a responsive hamburger menu at 610px.

Make the main navigation responsive by applying a 610px max-width media query, hide the nav by default, and reveal it with a hamburger toggle driven by JavaScript.

Learn to build a responsive main navigation with a hamburger trigger, using JavaScript to toggle dynamic classes, apply transforms, fades, and staggered animations for a polished mobile menu.

Build the hero showcase section with flexbox and grid, set a fixed background image for a parallax effect, and style the title, paragraph, and link for responsive typography.

Build the hero and showcase sections with responsive adjustments at 900px and 600px breakpoints. Apply hover effects and z-index layering for the after element with a cubic-bezier reveal animation.

Build a responsive work section with six image cards using flexbox, hover effects, and clip-path edges. Use flex-wrap, flex-grow, and object-fit: cover to ensure a scalable layout without media queries.

Build a responsive about me section with an image and text side by side, and implement a top-to-bottom hover effect using transform-origin and a pseudo-element underline.

Build a six-service portfolio section with hover window effects for ui design, web development, app development, design, blog writer, and project management.

Apply responsive refinements to the services section by adjusting padding and font sizes in the 610px media query to improve readability on smaller screens.

Create a responsive skills section with two areas: design skills and coding skills. Structure the markup with parent and child elements and implement progress bars to visually represent each skill.

Animate the skills section with CSS progress bars using named animations and keyframes, including infinite looping and widths from 0% to target percentages, while applying responsive typography and media queries.

Build a four-card testimonials section where content reveals on hover, using a flex layout, image filters, and absolute positioning to slide text from center to top.

Advance the testimonials section by applying contrast backgrounds, hover-driven animations, and responsive typography to maintain readable text over images and deliver clear card layouts.

Build the contact section of a portfolio site using flexbox to lay out a form with name, email, subject, and message, plus a submit button.

Explore the CSS grid layout system, learn to define grid columns and rows, gaps, and areas, master container and item properties, and use repeat, minmax, and auto-fill/auto-fit for responsive layouts.

Discover css grid layout, a two-dimensional system that turns a container into grid items, and learn to use grid template rows and columns, track sizes, and line names.

Explore core CSS grid layout concepts: grid container, grid items, grid lines, grid cells, and grid tracks. Learn to define grid template rows and columns and understand grid area.

Learn CSS grid basics: set four 150px columns and rows, and control spacing with grid column gap, grid row gap, and the grid gap shorthand in old and standard syntaxes.

Discover the repeat function and fr unit to craft responsive grid layouts with template columns and rows, and learn explicit versus implicit grids in css.

Explore how to reposition grid items using grid items properties, including grid row start/end and grid column start/end, plus shorthand and grid area techniques, all within a styled grid container.

Explore how to span grid items across rows and columns using grid row and column lines, and distinguish explicit versus implicit tracks, gaps, overlaps, and stacking order.

Learn to name and reference grid lines in css grid, using named lines for columns and rows with and without repeat to position, span, and end grid items.

Explore how the grid template areas property defines a full website layout in a single blueprint, then assign named areas to elements for a responsive, multi-column grid.

Explore how to align and place grid items within cells using justify items, align items, and place items in the grid container, including practical examples of start, end, and center.

Learn how justify content, align content, and place content align grid tracks inside a grid container, using start, center, end, space around, and space evenly.

Explore how the grid container manages explicit and implicit tracks with grid auto rows, grid auto columns, grid auto flow, and fractional units, while controlling overflow and item placement.

Learn how to use justify-self, align-self, and place-self to position a single grid item within its cell, with values like stretch, start, center, and end.

Learn how max-content, min-content, and minmax functions shape grid tracks in CSS, letting columns and rows adapt to content size within defined bounds.

Explore autofill and auto-fit in the grid container, using repeat and minmax to build responsive columns that adapt to viewport width, highlighting explicit versus implicit grid behavior.

Explore high-quality css grid resources such as grid garden and grid froggie to practice grid concepts, and learn to position and span items with grid column start and end.

Build a responsive villa booking website layout using modern grid and flexbox, with Sass styling, interactive navigation, a dynamic gallery, and no bootstrap.

Learn to set up and scaffold a modern web project by configuring assets, fonts, icons, resets, and custom properties for a responsive Vision Luxury Villas site.

Create a responsive grid layout inside a container capped at 1100px, outlining header, booking content, booking date, and gallery. Use fr-based columns with minmax for a fluid, responsive design.

Define a professional grid layout by naming container start and end lines, building a 12-column grid with minmax and content-based row heights, and balancing fluid responsiveness without fixed heights.

Extend the site layout with css grid, adding sections like the villus, the model, events, and a gallery carousel, and polish with container starts, column spans, and responsive heights.

Build the header nav with a responsive hamburger controlled by a checkbox, a fixed overlay navigation, and gradient background, while structuring links and morphing the hamburger with before/after.

Build the navigation user interface using grid and flexbox, creating a hamburger toggle with CSS tricks, including before and after pseudo elements, adjacent-sibling selectors, transitions, and a fixed centered menu.

Build the navigation by styling the immediate child with a secondary color, expand to fill the viewport, center icons, and use a checkbox with transitions to reveal the menu.

Build and animate the header by wiring logo, title and content into a responsive grid, applying keyframe driven transforms (translate and rotate) and Sass-based styling for a polished navigation.

Develop the booking content section with a grid layout and font awesome icons, verify header responsiveness, and implement media queries at 1000px and 600px to adjust font sizes for readability.

Build the booking contents icons as a grid with two columns (0.5fr and 1fr), align icons with flex, and use gaps and a taller row track for spacing.

Explore building the booking date section with a three-column grid for arrival, departure, and guests, and style the contact area with a reservation link, hotline, and 24-hour availability.

Build the booking dates section by creating arrows with before pseudo elements, applying DRY principles to reuse markup, and styling hover states, end alignment, and responsive typography.

Learn to craft a fully responsive booking section by mastering grid and media queries to adapt booking content and dates across breakpoints, adjust padding, typography, and alignment.

Build the villas section using an auto-fit grid with minmax(40rem, 1fr) to create responsive villa cards that switch from many columns to fewer as the width shrinks, with a 300px minimum.

Within the modern flexbox, grid, sass & animations developer course, build villa cards with padding, hover and active transitions, transforms, and before pseudo-element overlays for dynamic UI.

Fix the navigation z-index bug and apply six villa card backgrounds with a gradient overlay, using a DRY approach to enhance gaps and font sizes at 800, 600, and 400px.

Build the motto section of a website by structuring motto content with an h2 and paragraph, adding an after underline, and applying responsive CSS to center text and adjust typography.

Create the events content section with a two-card grid, using grid template areas, overlays, and background images; apply responsive breakpoints to hide text at 600px.

Explore building the events text section with responsive visibility at 600px. Rotate the text 90 degrees and structure it in a grid with centered items and a tertiary color.

Build the gallery text section with a grid layout, rotate text to face the carousel, and ensure the gallery carousel spans the full column below 600px.

Create the gallery carousel markup, including left and right arrows, an image container with ten images, and navigation dots, using clear class naming and markup conventions.

The lecture styles the gallery carousel by removing background, setting a 290vh responsive height, hiding overflow, and positioning images and navigation buttons with absolute layout and object-fit: cover.

Style the gallery carousel navigation using absolute positioning, centered alignment, and a grid layout, create circular navigation dots, highlight the current image, and optimize responsive spacing for smaller screens.

Learn to build a responsive gallery carousel with JavaScript by creating app.js, linking it to the demo, and testing with the browser console and navigation elements like arrows and dots.

Grab gallery carousel elements with JavaScript using querySelector, store them in a const, and verify via console.log to inspect the list and note zero-based indexing and next element sibling.

Build a dynamic gallery carousel with JavaScript by selecting images, converting them to an array, using querySelector for next and previous controls, and organizing carousel navigation items.

Develop a dynamic gallery carousel in JavaScript by computing each image's width with getBoundingClientRect and applying it to the next slide, ensuring a full-width transition when clicking next or previous.

Learn to arrange gallery images side by side using JavaScript, computing left offsets with image width and index, and update positions with a set image position function and arrow functions.

Build a gallery carousel in JavaScript by wiring click events, tracking the current image, and moving to the next image with translateX and left styling while updating active classes.

Apply the dry principle by creating a reusable move-to-image function. Wire event listeners for next and previous, using parameters for list, current image, and target image to update slides.

Learn to implement dot navigation for a carousel by using a single event listener on the carousel navigation, and event.target with closest to switch the corresponding image.

Learn to build a dynamic gallery carousel by detecting dot clicks, calculating the target index from the dots array, and moving to the matching image with a move-to-image function.

Update the gallery carousel by syncing dot and arrow colors with the current image, refactoring into an update-dots function, and using parameters, execution context, and next/previous logic to handle clicks.

Learn to build a gallery carousel in JavaScript, hiding and showing previous and next arrows based on the current image index, and updating dot indicators with a hide/show arrows function.

Build the features content section with grid layout, image overlays, and rotated text to mirror the events content while ensuring responsive behavior for small screens.

Build the testimonials section with six cards featuring front and back faces for a three d rotation governed by the perspective property, using a grid and 28 rem card width.

Explore building a testimonial card flip effect with front and back faces, using rotateY, perspective, and hover interactions to achieve a 3D-like transition, plus responsive layout considerations.

Build a responsive footer with copyright text and social icons using a grid layout, animated hover effects, and stacking at 800px for accessibility.

Explore the essentials of Sass, including setup methods, variables, maps, and nesting. Master functions with maps, mixins, extend, and control flow with conditionals, @each, for, and while loops, plus arithmetic.

Explore Sass as a syntactically awesome stylesheet preprocessor and why it boosts large CSS projects. Learn the first installation method, including a method-1 folder and node-sass setup with get bash.

Install sass using node by creating a node project in your folder and initializing npm. Install sass as a dev dependency with npm install, updating package.json in VS Code.

Learn to install Sass with node-sass, configure npm scripts to watch scss files, and compile style.scss to css in a separate up/sass folder, while deploying only the compiled css.

Master installing Sass using VS Code with the Live Sass Compiler extension, method-2, enabling expanded CSS output and automatic CSS generation from Sass.

Compare the .sass and .scss file types, highlighting the indented syntax versus the standard css-like syntax, and explain how both compile to css.

Explore Sass variables, declare them globally with a dollar sign, and see how they compile to native CSS values for 100 percent browser compatibility, unlike CSS variables.

Explore Sass maps by grouping color variables into a colors map and retrieving values with map-get, turning individual color vars into a cohesive, maintainable Sass color system.

Master Sass nesting to structure styles with parent and child elements, ampersand usage, and interpolation, and learn best practices to keep nesting to two levels.

Learn how Sass partials and imports organize large stylesheets by splitting code into underscore-named partials, linking them with @import in a main file, and compiling to a single CSS file.

Explore Sass functions to access a colors map efficiently, replacing map get with function calls, applying the dry principle, and organizing code with partials and imports.

Learn to define and reuse styles with Sass mixins, import partials, and use include to apply a section styling mixin with a direction parameter for row or column layouts.

Explore Sass mixins with a desktop breakpoint of 1000px, using at include to apply a reusable media query that stacks cards under 1000px.

Discover how the Sass @extend rule lets a selector inherit styles from another, using selector extends and placeholder rule sets to share typography and layout across sections.

Explore how the Sass @each rule automates repeating styles by iterating over a class list to assign dynamic background images, using template literals and short and long methods.

Learn Sass conditionals and if statements to control code execution, using mixins, parameters, and else logic to set section background colors with color primary and color secondary.

Explore how sass for loops automatically assign background images to gallery items from 1 to 6, using a loop variable and template literals to generate gallery-content-1 with gallery-image-1.jpg.

Explore how while loops in Sass compare to for loops, initialize a one-based variable, iterate while less than seven, and increment after applying gallery background images.

Explore Sass arithmetic operators for addition, subtraction, multiplication, and division, and see how they compile to 100 percent browser-compatible values; relate to Sass variables and the calc function.

Explore a responsive gym website built with flexbox and grid, using Sass, gradient text, 3D hover effects, animations, and a multi-step form with dark mode.

Set up a web project from scratch with Sass and up folders, compile main.scss to main.css, organize partials (_reset, _variables, _utilities), and implement a light/dark theme using CSS custom properties.

Build the overall website layout with a grid-based sass workflow, outlining header, showcase, motto, features, trainers, testimonials, clients, register, and fodder sections using modular partial files.

Build the header markup for a responsive site, adding a three-part header with a hamburger menu, overlay, and navigation logo, and craft Sass maps for font weights and font sizes.

Build the header navigation by adding a container with items (home, about, colossus, events, news, shop) as anchors using data-text, and add a toggle checkbox for theme wired to JavaScript.

Style the header with a responsive hamburger menu, dynamic classes, and an overlay; use flexbox navigation, logo sizing, and 3D hover effects with before/after pseudo elements.

Build and style a dynamic header with a 3D logo, animate navigation links on page reload, and implement a responsive dark mode toggle using Sass nesting and checkbox tricks.

Style the header's toggle component using before and after pseudo elements, manage states with checkbox, add shadows and transitions, then introduce Sass maps and a breakpoint mixin for responsive design.

Explore header styling with a fixed navigation, 3d transform and perspective, responsive hamburger menu with overlay, and Sass-driven media queries for desktop breakpoints and micro interactions.

Create a functional responsive header by wiring a JavaScript navigation toggle that moves the hamburger, toggles open on the header, menu, and overlay, and reveals navigation across sizes.

Implement a dark mode for the website by wiring a JavaScript file to a theme checkbox, toggling the HTML data-theme attribute between light and dark, with a smooth transition.

Create the showcase markup and responsive utilities, configuring a 800px breakpoint to let the showcase reach 100vh height, and structure content with title, para, and two action links.

Continue building the showcase section by implementing a background image with placeholder rule sets for reusable styles, applying flexbox layouts, overlay gradients, and gradient text effects clipped to text.

Builds and styles a responsive showcase section using Sass, flexbox, and grid, enhancing interaction with hover effects, dark mode colors, and multi-breakpoint typography for clear visual hierarchy.

Create a responsive motto section with three content cards, each featuring an icon, title, paragraph, and a link, over a colored background with an overlay for text contrast.

Style the motto section by revealing a background on hover and animating lines with staggered left and top transitions, using 1 second durations and delays of 0s, 0.25s, 0.5s, 0.75s.

Create a nine-card features section markup with title, paragraph, and read more links, then use a Sass for loop to assign background images for a responsive layout.

Learn to style a responsive features grid using a mix of flexbox and grid, with responsive breakpoints, hover effects, and animated before/after pseudo elements to create interactive cards.

Learn to build the trainers section with six trainer cards and hover animations that reveal each trainer’s name and specialty, from bodybuilding coach to cardio and conditioning and cross fit expert.

Build the trainers section styling with a responsive grid, hover animations, and image handling; adjust padding, typography, and interactive effects to reveal trainer names on hover.

Build a three-slide testimonials markup with slider and indicator sections, using data-id attributes for each indicator and an active class toggled by JavaScript.

Learn to style a testimonial section with a background image and gradient, configure a responsive slider with placeholders and borders, and prepare for JavaScript-driven toggling and keyframe animations.

Implement interactive testimonials by wiring indicators to text and name displays, using JavaScript to manage slides, data-id attributes, and active states across dark mode.

Develop the clients section markup using a container and eight client images arranged with grids and flexbox, each image housed in its own div for responsive layout without media queries.

Apply flexbox styling to the clients section, adding a background image with gradient overlay, responsive typography, and hover effects on the title and client images using before/after pseudo-elements.

Create a scroll-to-top button using a single-line div with class scroll and fixed positioning that appears after 200 pixels and toggles an active class for smooth top scrolling on click.

Build a two-part register component with a four-step progress and a four-page markup form covering name, contact, birth and gender, and credentials, with navigation and submit.

Style the register section by removing the height, adding a background image without an overlay, organizing assets into section folders, and using flexbox with a grid and color variables.

Continue building the registers section by styling content with a 28rem wide parent, applying flexbox and grid layouts, and fine-tuning form fields, focus states, and button alignment and spacing.

Complete the register section functionality by wiring four-step navigation with next and previous buttons, update progress indicators, and handle submit with a timed alert and page reload.

Learn to implement multi-step form navigation for a register, wiring next and previous buttons, manage progress ticks, and refactor with reusable functions for cleaner code.

Learn to structure a website footer using grid and flexbox, including contact, logo, and social sections, with icons, links, a newsletter form, and the head office section.

Continue styling the footer with a background image and linear gradient, using a responsive grid. Refine logo sizing, typography, spacing, and borders for the first three sections.

Style the footer’s form and social section using responsive flexbox, grid gaps, and Sass extends; fix borders, inputs, and hover effects, and implement a 600px breakpoint for centering.

Congratulations on completing this extensive course and mastering real-world web development for front end work. Begin next steps with JavaScript, Python, and database development through bootcamps.