Unit 4 Overview

Part 1 introduces CSS frameworks: Bootstrap (component-based) and Tailwind (utility-first), including when to use each. Part 2 adds visual polish with transforms, gradients, blend modes, and filters so you can create visually stunning and engaging interfaces.

Part 1: Bootstrap & Tailwind

Complete the following in the specified order by the due dates listed in Canvas or before the end of the unit if no date is listed:

• Bootstrap: Intro, Grid, Components & Customization
  Learn Bootstrap from overview and installation through grid system, components, utilities, and customization so your site does not look like a default theme.
• Tailwind: Setup, Utility-First Methodology & Utilities
  Set up Tailwind, understand the utility-first philosophy, and use utility classes and @apply effectively.
• When to Use a Framework
  Use a decision framework for when to choose Bootstrap, Tailwind, or custom CSS based on project size, team, and goals.
• Build with Bootstrap
  Build a page using Bootstrap and customize the theme so it matches a specific brand or design system.
• Tailwind Utility-First Practice
  Build a component using Tailwind to practice the utility-first approach and see how it differs from writing custom CSS.
• Framework Gospel Project
  Choose either Bootstrap or Tailwind and build a gospel-themed page (New Testament or Book of Mormon) in your portfolio. Submit via portfolio URL and Canvas as specified in the assignment.

Part 2: Transforms, Gradients, Blend Modes & Filters

Complete the following in the specified order by the due dates listed in Canvas or before the end of the unit if no date is listed:

• CSS Transforms and Shapes
  Explore transform properties, CSS shapes, clip-path, and 3D transforms to create dynamic layouts and elements.
• Complex Gradients
  Learn advanced gradient techniques, including conic gradients and animated gradients, to add depth and interest to your designs.
• Blend Modes
  Discover how CSS blend modes, mix-blend-mode, and background-blend-mode can be used to create creative compositing effects.
• CSS Filters
  Study CSS filter functions and backdrop-filter, and consider when these effects make sense from both design and performance perspectives.
• Visual Effects Practice
  Build a small showcase page that highlights your use of transforms, gradients, filters, and blend modes in a cohesive visual design.
• Team Project: Visual Showcase
  Collaboratively create a visual showcase website where different pages or sections highlight specific categories of visual effects. Builds on the Unit 3 Responsive Multi-Page Layout team repo.