Cool list with some front end challenges
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
animated-404
basic-forms
birth-calendar
boxes
color-columns
facebook-menubar
mobile-menu
newsletter-invision
purecss-logo
spacex-header
twilio-menu
uber-footer
your-own-website
youtube
CONTRIBUTORS.md
LICENSE
README.md
index-demo.html

README.md

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 CONTRIBUTORS.md
  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

Challenges


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