Upcoming Challenges MDN Reference Guide FAQ

Navigation

Challenges
Leaderboard

Patterns

  • Layouts
  • Product List
  • Navigations
  • Cards
  • Animations
  • Form Controls
  • Miscellaneous

Filters

  • Easy
  • Medium
  • Advanced
  • Free
  • Premium

Challenges

Login with github
Bottom Solid Shadow
Bottom Solid Shadow new

Bottom Solid Shadow

Buttons

Absolute Center Alignment
Absolute Center Alignment

Absolute Center Alignment

Center <div>

Soccer Field
Soccer Field

Soccer Field

Soccer UIs

Cubic Bezier Animation
Cubic Bezier Animation

Cubic Bezier Animation

Card

Creative Card
Creative Card

Creative Card

Miscellaneous

Clothing Store Product (Tshirt)
Clothing Store Product (Tshirt)

Clothing Store Product (Tshirt)

Shopping

Clothing Store Product Hoodie
Clothing Store Product Hoodie

Clothing Store Product Hoodie

Shopping

Luxury Woman Handbag
Luxury Woman Handbag

Luxury Woman Handbag

Shopping

Perfume Store Product
Perfume Store Product

Perfume Store Product

Shopping

Real Estate Card
Real Estate Card

Real Estate Card

Real Estate

App from a Marketplace
App from a Marketplace

App from a Marketplace

Miscellaneous

Glowing Card
Glowing Card

Glowing Card

Miscellaneous

Tweet Card
Tweet Card

Tweet Card

Quote

Client Testimonial Tool
Client Testimonial Tool

Client Testimonial Tool

Quote

Author Insight
Author Insight

Author Insight

Quote

Player Statistics
Player Statistics

Player Statistics

Sport

Wheels Shop Item
Wheels Shop Item

Wheels Shop Item

Shopping

Sneaker Product Card
Sneaker Product Card

Sneaker Product Card

Shopping

Job Board Profile Card
Job Board Profile Card

Job Board Profile Card

Job Board

CMS Plugin Plan
CMS Plugin Plan

CMS Plugin Plan

Pricing

Customers Feedbacks Plan
Customers Feedbacks Plan

Customers Feedbacks Plan

Pricing

CI Automation Plan
CI Automation Plan

CI Automation Plan

Pricing

Minecraft Server Plan
Minecraft Server Plan

Minecraft Server Plan

Pricing

Managed Server Plan
Managed Server Plan

Managed Server Plan

Pricing

Sales CRM Plan
Sales CRM Plan

Sales CRM Plan

Pricing

Spinning Globe
Spinning Globe

Spinning Globe

Drawing

Hand Drawing Lines
Hand Drawing Lines

Hand Drawing Lines

Text

Continuous Underline
Continuous Underline

Continuous Underline

Text

Rotate Text Effect
Rotate Text Effect

Rotate Text Effect

Text

Sidebar
Sidebar

Sidebar

Layout Patterns

Holy Grail Layout
Holy Grail Layout

Holy Grail Layout

Layout Patterns

Scrollable Horizontal 3 Columns
Scrollable Horizontal 3 Columns

Scrollable Horizontal 3 Columns

Layout Patterns

Flexbox Center Alignment
Flexbox Center Alignment

Flexbox Center Alignment

Center <div>

Vertical 3 Columns
Vertical 3 Columns

Vertical 3 Columns

Layout Patterns

Stacked Layout
Stacked Layout

Stacked Layout

Layout Patterns

Pancake Stack
Pancake Stack

Pancake Stack

Layout Patterns

Mouse Scroll Down
Mouse Scroll Down

Mouse Scroll Down

Drawing

Hamburger Menu to Close Transition
Hamburger Menu to Close Transition

Hamburger Menu to Close Transition

Drawing

Grid Center Alignment
Grid Center Alignment

Grid Center Alignment

Center <div>

Horizontal 2 Columns
Horizontal 2 Columns

Horizontal 2 Columns

Layout Patterns

Checkmark image as background
Checkmark image as background

Checkmark image as background

Checkboxes

Content Replacement with Checkmark
Content Replacement with Checkmark

Content Replacement with Checkmark

Checkboxes

Arrow Type Progress Bar
Arrow Type Progress Bar

Arrow Type Progress Bar

Step Indicators

Breadcrumbs Chevron Separator
Breadcrumbs Chevron Separator

Breadcrumbs Chevron Separator

Breadcrumbs

Breadcrumbs Slash Separator
Breadcrumbs Slash Separator

Breadcrumbs Slash Separator

Breadcrumbs

Rounded Search Box
Rounded Search Box

Rounded Search Box

Search Boxes

Toggle Search
Toggle Search

Toggle Search

Search Boxes

Auto-scaling Search Box Animation
Auto-scaling Search Box Animation

Auto-scaling Search Box Animation

Search Boxes

Gradient Underline
Gradient Underline

Gradient Underline

Buttons

Flashing Animation
Flashing Animation

Flashing Animation

Buttons

Hidden Arrow Animation
Hidden Arrow Animation

Hidden Arrow Animation

Buttons

3D Look
3D Look

3D Look

Buttons

Arrow Transition
Arrow Transition

Arrow Transition

Text

Glowing Circle Text
Glowing Circle Text

Glowing Circle Text

Text

Clip Path Circle Effect
Clip Path Circle Effect

Clip Path Circle Effect

Card

Zero Waste Starter Kits
Zero Waste Starter Kits

Zero Waste Starter Kits

Shopping

Card Effect
Card Effect

Card Effect

Miscellaneous

Clothing Product List
Clothing Product List

Clothing Product List

Shopping

Minimal Home Accessories
Minimal Home Accessories

Minimal Home Accessories

Shopping

Minimal Furniture
Minimal Furniture

Minimal Furniture

Shopping

Tooltip
Tooltip

Tooltip

Tooltips

Toggle Menu
Toggle Menu

Toggle Menu

Menus

Off-Canvas Menu
Off-Canvas Menu

Off-Canvas Menu

Menus

Horizontal Menu
Horizontal Menu

Horizontal Menu

Menus

Footer Call-to-Action Buttons
Footer Call-to-Action Buttons

Footer Call-to-Action Buttons

Footer

Fat Footer with Call-to-Actions
Fat Footer with Call-to-Actions

Fat Footer with Call-to-Actions

Footer

Web Agency Hero Section
Web Agency Hero Section

Web Agency Hero Section

Hero

Multi-step Indicator Check Mark
Multi-step Indicator Check Mark

Multi-step Indicator Check Mark

Step Indicators

Progress Indicator Timeline
Progress Indicator Timeline

Progress Indicator Timeline

Step Indicators

Step Progress Bar
Step Progress Bar

Step Progress Bar

Step Indicators

Previous & Next Buttons
Previous & Next Buttons

Previous & Next Buttons

Paginations

Underline Active Element
Underline Active Element

Underline Active Element

Paginations

Stopping underline
Stopping underline

Stopping underline

Text

Animated Offset Border
Animated Offset Border

Animated Offset Border

Buttons

Fade In Effect
Fade In Effect

Fade In Effect

Buttons

Fill Animation
Fill Animation

Fill Animation

Buttons

Glowing Gradient Effect
Glowing Gradient Effect

Glowing Gradient Effect

Buttons

Gradient Background Transition
Gradient Background Transition

Gradient Background Transition

Buttons

Pancake Stack

Login with github
Pancake Stack
HTML
not started 0/7
CSS
not started 0/3
  • Category Layout Patterns
  • Complexity Easy
  • Deadline 10 min
  • Type Premium