The Modern Flexbox, Grid, Sass & Animations Developer Course

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.

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.

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.

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.

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.

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.

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 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.

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.

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 a six-service portfolio section with hover window effects for ui design, web development, app development, design, blog writer, and project management.

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.

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 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 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.

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.

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.

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.

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.

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

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 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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.