Cool list with some front end challenges
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Front End Challenges

Here go some cool front end challenges that you can do and practice your learning, being a master!

Getting Started

  1. Fork that repo
  2. Add your name and username into an issue here - I'll add you to
  3. Choose a challenge - doesn't matter if you start with number 15 and keep with 27
  4. Open his folder - each challenge has a folder with a basic index.html file and you can do everything that you need to finish the challenge there
  5. Do it - doesn't matter if you think that you can do or not, just DO IT.

Adding challenges

  1. Fork that repo
  2. Add your challenge to the list
  3. Create a folder with the your challenge's name and copy index-demo.html to there
  4. Give me a PR


Baby steps

  1. Draw a heart, square, triangle and circle with CSS - folder
  2. Draw an YouTube logo with CSS - folder
  3. Do a section with 12 boxes aligned like that using flexbox and article tags - just the boxes, folder
  4. Draw a calendar of your birth month, using flexbox - folder
  5. Do a simple layout page with five columns, you can do it with flexbox too - what do you think about coloring them? folder
  6. Build a footer like that from Uber - folder
  7. Create a header/section like that - folder
  8. Do a newsletter section like that - folder
  9. Do a menu like that - folder
  10. Draw a PureCSS logo like that - folder
  11. Draw a animated 404 page - folder
  12. Draw a mobile menu icon with CSS - folder
  13. Draw a menu bar like the Facebook - folder

Working like a machine

Learn how to use some king of CSS pre-processor like SASS/SCSS(I love this), LESS, Stylus or whatever.

  1. Build your own website dividing each section on a different pre-processor file. Like 'header.scss', 'about.scss', and join everything in a file - folder