Codepen Challenges

Codepen Challenges are fun opportunities for leveling up your skills by building things. Each week, you’ll get a new prompt surrounding a monthly theme to riff on.

Sign Up & Join!

---

My Collections

• June 2020 ( Numbers ) - The challenges is all about numbers.

  1. Counter - every click creates circle object with randomize size and color, each click is counted. View Here!

  2. Positive and Negative - create a glitch effect using text-shadow with positive and negative offset value. View Here!

  3. Even and Odd - pattern design using nth-child selector with odd & even keywords. View Here!

  4. Pi - create a circle with canvas element and use input type range to update the circle. Display radius, circumference and diameter of the circle based on input value. View Here!

• November 2020 ( Design Decades ) -

  The challenges are inspired by the evolution of web interface design from the 1980s, 1990s, 2000s, and 2010s. I decided to recreate Google's old homepage.

  1. The 1980s - since Google launched in 1998, I created a Google not found page View Here!

  2. The 1990s - Google 1998 Homepage View Here!

  3. The 2000s - Google 2000 Homepage View Here!

  4. The 2010s - Google 2010 Homepage View Here!

• December 2020 ( Weather Effects ) - The challenges is all about Weather.

  I used ChatGPT to complete each challenges. ChatGPT is a chatbot launched by OpenAI in November 30.

  1. Snow - Weather Effect View Here!
  2. Rain - Weather Effect View Here!
  3. Wind - Weather Effect View Here!
  4. Sunshine - Weather Effect View Here!