Skip to content

Instantly share code, notes, and snippets.

@leny
Created December 13, 2020 23:26
Show Gist options
  • Save leny/186d9489cb10161789f622e52f147977 to your computer and use it in GitHub Desktop.
Save leny/186d9489cb10161789f622e52f147977 to your computer and use it in GitHub Desktop.

The Dribbble Challenges

This is the end of the year, always a complicated period to give a complex team project. Especially this year, with your holidays in the middle.

So, we craft for you a special & fun serie of challenges to keep your CSS skills alive (and discover some new stuffs in the process): the Dribbble Challenges!

Ok, Leny, calm down… what's the Dribbble challenges? And what's Dribbble, by the way?!

Dribbble is a website for designers to share their graphics projects.
It's a really great website for inspiration & trends discovering.

Also, there's a lot of very good concepts that lead to an existential question:

How will I do if I had to integrate this concept into HTML, CSS & JavaScript?!

Good Question, Edmond! Let's figure it out!

What should I do?

The Dribbble Challenges are a "solo project", which means you can work on your own but, as you know, you will learn way more by using the group power.

We don't ask you to do all the challenges!
Do as much as you can but take your time to do it properly. The goal here is to make some new, tricky CSS over fun & stylish concepts.

For each challenge, the goal is to reproduce the concept as much as you can.
Of course, do as you can for images or external resources. Be creative!

Use CodePen

For the challenges, we will use CodePen - a website to work on small concepts without having to set a whole local env. It's very useful - I let you discover it's advantages.

Just login/sign in with your GitHub account, create a public collection named The BeCode Dribbble Challenges - part one, and create one pen per challenge.
👉 Don't forget to put the original concept link and its creator in the pen details.

The challenges

Your beloved coaches have selected 12 concepts for the first week (the following concepts will be given to you after the holidays).

  1. Reserve Room by Mauricio Bucardo
  2. Email validation by Aaron Iker
  3. PLIM : In-place edition CMS - Edit tooltip by Pierre-Antoine Delnatte
  4. Indie Directors Club by Marko Cvijetic
  5. Places by Olivier Pineda
  6. Interior design agency marketing website by Ramotion
  7. Doclock | Code by Olivier Pineda
  8. Burger by Elena Sinianskaya
  9. Concept Airline by Dennys Hess
  10. Folder Hover Animation by Shunya Koide
  11. TikBook Design by unknown user (we've lost the original link)
  12. Subscription plan dark by unknown user (we'v lost the original link)

At the end of the week, just send us the link to you CodePen collection.

Challenge Accepted

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment