CSS Mastery Course by Treasure

Course Overview

• Objective: Master CSS by completing 24 projects in 24 challenges.
• Instructor: Treasure
• Projects Include:
  • Recreating components/layouts from apps like GitHub, Instagram, etc.
  • Loading animations
  • Progress bars
  • Flashcards
  • Country flags
  • Playing cards

Key Concepts and Strategies

• All Challenges Open: Free to use external resources (Google, research) to complete the challenges.
• Reference Examples: Refer to example projects to align your creations as closely as possible.
• Pixel Perfection: Strive for accuracy, but it's a 'stretch goal'. Main goal is to get close.

Problem-Solving Tips

Breaking Down UI Elements

1. **Progress Bar Example: **

• Visualize as a div with width, height, background color, and rounded corners.
• Break down into smaller components.

2. **Archery Target: **

• Visualize as concentric circles, each smaller and centered within the larger.
• Use circles with varying sizes and centered alignment.

3. **Playing Card Example: **

• Visualize as columns and rows.
• Break into components like suits and ranks on different card parts.
• Use flexbox/grid techniques.

Layout and Alignment Techniques

• Flexbox and Grid: Understand and utilize these to layout and align elements within containers.
• CSS Variables: Utilize for easier color and font management.
• Hover States: Create transitions and animations for interactive elements.
• Centering Elements: Use flexbox to align elements both vertically and horizontally.

Example Challenges

Colorful Button Challenge

• HTML and CSS Provided: Minimal structure given to start with colors preset via CSS variables.
• **Requirements: **
  1. Gradient border using provided colors or custom ones.
  2. 115-degree gradient angle.
  3. Hover state where gradient flips horizontally and button grows slightly.
  4. Text color transition from gray to white on hover.
  5. Button centered on the page.
• **Solution Tips: **
  • Wrap button in a div for gradient border.
  • Use linear-gradient for gradient effects.
  • Hover to change gradient direction.

Expanding Search Bar Challenge

• Objective: Create a search bar that expands on focus and contracts on blur.
• **Requirements: **
  1. Default to 1/3 width of its container.
  2. Expand to full width on focus.
  3. Shrink back on blur.
  4. Border turns blue on focus, placeholder text disappears on focus.
  5. Accessibility requirement: Add an invisible label.
• **Solution Tips: **
  • Focus pseudo-class and transition for smooth expansion/contraction.
  • Pseudo-element for screen reader label.

Animation Techniques

Loading Animations

1. Example: Three circles growing and changing colors (two challenges with growing and rotating animations).

• Setup keyframes with grow and color change properties.
• Continuous looping.

2. **Practical Tips: **

• Use keyframes and animation properties.
• Ensure seamless continuity with infinite timing and alternate values for smoother transition.
• Transform and Scale properties for growth/shrink effects.

Flashcard App (Jeopardy Themed)

• Visualize: Front and back side flip using 3D transform properties.
• Transition: Utilize transform property to rotate card in 3D space.
• Preserve 3D: Ensure smooth, realistic flip with the transform-style: preserve-3D; property.

Real-World Implementations

GitHub Profile Layout

• Objective: Recreate a profile layout with an image, username, and other details.
• Focus: Correct alignment, spacing, border-radius, hover state for buttons, etc.
• Techniques: Use flexbox/grid, alignment techniques.

Responsive Layouts for Country Flags

• **Example Challenges: **

1. French Flag: Grid/Flex for perfectly aligned columns, precise aspect ratios.
2. Madagascar Flag: Aspect ratio calculations for complicated flag sections.
3. Swiss Flag: Overlay and centering elements using transform and positioning.

Complex UI Elements

• Instagram Menu: Different border states based on conditions (story viewed, live, etc.).
• GitHub Contributions Graph: Using CSS Grid and attribute selectors for dynamic content placement and styling.

Final Takeaways

• Customization: Experiment with colors, themes, and fonts.
• Expansion: Find and recreate components/layouts you like from real-world apps.
• Challenge Exercise: Complete similar coding challenges to keep skills sharp.