Marlysson / front-challenges

Cool list with some front end challenges

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

About

Cool list with some front end challenges

License:MIT License


Languages

Language:HTML 67.0%Language:CSS 33.0%