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
Absolute Center Alignment
Absolute Center Alignment

Absolute Center Alignment

Center <div>

Easy
Gradient Underline
Gradient Underline new

Gradient Underline

Buttons

Easy
Rounded Search Box
Rounded Search Box new

Rounded Search Box

Search Boxes

Easy
Soccer Field
Soccer Field

Soccer Field

Soccer UIs

Medium
Cubic Bezier Animation
Cubic Bezier Animation

Cubic Bezier Animation

Card

Advanced
Creative Card
Creative Card

Creative Card

Miscellaneous

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

Clothing Store Product (Tshirt)

Shopping

Medium
Clothing Store Product Hoodie
Clothing Store Product Hoodie

Clothing Store Product Hoodie

Shopping

Advanced
Luxury Woman Handbag
Luxury Woman Handbag

Luxury Woman Handbag

Shopping

Medium
Perfume Store Product
Perfume Store Product

Perfume Store Product

Shopping

Medium
Real Estate Card
Real Estate Card

Real Estate Card

Real Estate

Advanced
App from a Marketplace
App from a Marketplace

App from a Marketplace

Miscellaneous

Advanced
Glowing Card
Glowing Card

Glowing Card

Miscellaneous

Medium
Tweet Card
Tweet Card

Tweet Card

Quote

Easy
Client Testimonial Tool
Client Testimonial Tool

Client Testimonial Tool

Quote

Easy
Author Insight
Author Insight

Author Insight

Quote

Advanced
Player Statistics
Player Statistics

Player Statistics

Sport

Advanced
Wheels Shop Item
Wheels Shop Item

Wheels Shop Item

Shopping

Advanced
Sneaker Product Card
Sneaker Product Card

Sneaker Product Card

Shopping

Easy
Job Board Profile Card
Job Board Profile Card

Job Board Profile Card

Job Board

Easy
CMS Plugin Plan
CMS Plugin Plan

CMS Plugin Plan

Pricing

Easy
Customers Feedbacks Plan
Customers Feedbacks Plan

Customers Feedbacks Plan

Pricing

Medium
CI Automation Plan
CI Automation Plan

CI Automation Plan

Pricing

Easy
Minecraft Server Plan
Minecraft Server Plan

Minecraft Server Plan

Pricing

Medium
Managed Server Plan
Managed Server Plan

Managed Server Plan

Pricing

Medium
Sales CRM Plan
Sales CRM Plan

Sales CRM Plan

Pricing

Medium
Spinning Globe
Spinning Globe

Spinning Globe

Drawing

Advanced
Hand Drawing Lines
Hand Drawing Lines

Hand Drawing Lines

Text

Medium
Continuous Underline
Continuous Underline

Continuous Underline

Text

Medium
Rotate Text Effect
Rotate Text Effect

Rotate Text Effect

Text

Medium
Sidebar
Sidebar

Sidebar

Layout Patterns

Easy
Holy Grail Layout
Holy Grail Layout

Holy Grail Layout

Layout Patterns

Medium
Scrollable Horizontal 3 Columns
Scrollable Horizontal 3 Columns

Scrollable Horizontal 3 Columns

Layout Patterns

Medium
Flexbox Center Alignment
Flexbox Center Alignment

Flexbox Center Alignment

Center <div>

Easy
Vertical 3 Columns
Vertical 3 Columns

Vertical 3 Columns

Layout Patterns

Advanced
Stacked Layout
Stacked Layout

Stacked Layout

Layout Patterns

Medium
Pancake Stack
Pancake Stack

Pancake Stack

Layout Patterns

Easy
Mouse Scroll Down
Mouse Scroll Down

Mouse Scroll Down

Drawing

Medium
Hamburger Menu to Close Transition
Hamburger Menu to Close Transition

Hamburger Menu to Close Transition

Drawing

Medium
Grid Center Alignment
Grid Center Alignment

Grid Center Alignment

Center <div>

Easy
Checkmark image as background
Checkmark image as background

Checkmark image as background

Checkboxes

Medium
Content Replacement with Checkmark
Content Replacement with Checkmark

Content Replacement with Checkmark

Checkboxes

Medium
Arrow Type Progress Bar
Arrow Type Progress Bar

Arrow Type Progress Bar

Step Indicators

Advanced
Breadcrumbs Chevron Separator
Breadcrumbs Chevron Separator

Breadcrumbs Chevron Separator

Breadcrumbs

Easy
Breadcrumbs Slash Separator
Breadcrumbs Slash Separator

Breadcrumbs Slash Separator

Breadcrumbs

Easy
Toggle Search
Toggle Search

Toggle Search

Search Boxes

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

Auto-scaling Search Box Animation

Search Boxes

Easy
Flashing Animation
Flashing Animation

Flashing Animation

Buttons

Medium
Hidden Arrow Animation
Hidden Arrow Animation

Hidden Arrow Animation

Buttons

Easy
3D Look
3D Look

3D Look

Buttons

Advanced
Arrow Transition
Arrow Transition

Arrow Transition

Text

Easy
Glowing Circle Text
Glowing Circle Text

Glowing Circle Text

Text

Advanced
Clip Path Circle Effect
Clip Path Circle Effect

Clip Path Circle Effect

Card

Medium
Zero Waste Starter Kits
Zero Waste Starter Kits

Zero Waste Starter Kits

Shopping

Advanced
Card Effect
Card Effect

Card Effect

Miscellaneous

Medium
Clothing Product List
Clothing Product List

Clothing Product List

Shopping

Advanced
Minimal Home Accessories
Minimal Home Accessories

Minimal Home Accessories

Shopping

Advanced
Minimal Furniture
Minimal Furniture

Minimal Furniture

Shopping

Medium
Tooltip
Tooltip

Tooltip

Tooltips

Easy
Toggle Menu
Toggle Menu

Toggle Menu

Menus

Advanced
Off-Canvas Menu
Off-Canvas Menu

Off-Canvas Menu

Menus

Advanced
Horizontal Menu
Horizontal Menu

Horizontal Menu

Menus

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

Footer Call-to-Action Buttons

Footer

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

Fat Footer with Call-to-Actions

Footer

Advanced
Web Agency Hero Section
Web Agency Hero Section

Web Agency Hero Section

Hero

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

Multi-step Indicator Check Mark

Step Indicators

Medium
Progress Indicator Timeline
Progress Indicator Timeline

Progress Indicator Timeline

Step Indicators

Advanced
Step Progress Bar
Step Progress Bar

Step Progress Bar

Step Indicators

Medium
Previous & Next Buttons
Previous & Next Buttons

Previous & Next Buttons

Paginations

Easy
Underline Active Element
Underline Active Element

Underline Active Element

Paginations

Medium
Stopping underline
Stopping underline

Stopping underline

Text

Easy
Animated Offset Border
Animated Offset Border

Animated Offset Border

Buttons

Medium
Fade In Effect
Fade In Effect

Fade In Effect

Buttons

Easy
Fill Animation
Fill Animation

Fill Animation

Buttons

Medium
Glowing Gradient Effect
Glowing Gradient Effect

Glowing Gradient Effect

Buttons

Advanced
Gradient Background Transition
Gradient Background Transition

Gradient Background Transition

Buttons

Medium

Sales CRM Plan

Login with github
Sales CRM Plan
HTML
not started 0/14
CSS
not started 0/56
  • Category Pricing
  • Complexity Medium
  • Deadline 26 min
  • Type Premium