Prework Example Projects and Exercises

These projects and exercises are meant as a way to continue practicing your skills leading up to class. They also can be used as a break from some of the videos and written content from the prework.

Flexbox Games

These two games will review Flexbox concepts in CSS. They will lead you through different flexbox properties and values in a series of different game levels:

• http://flexboxfroggy.com/
• http://www.flexboxdefense.com/

HTML Projects

The following are projects from FreeCodeCamp and will help practice HTML and CSS skills. You do not need to have completed any other exercises on FreeCodeCamp to try out these exercises:

• https://www.freecodecamp.com/challenges/build-a-tribute-page
• https://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage

These two projects will ask you to recreate the following sites in Codepen (or your editor if that is more comfortable to you):

• https://codepen.io/freeCodeCamp/full/NNvBQW
• https://codepen.io/freeCodeCamp/full/YqLyXB

Do not worry if you cannot recreate these sites perfectly, practice the CSS properties you have learned. Ask yourself what parts of the layout and design is hard to recreate.

JS Exercises

The following projects from FreeCodeCamp will help practice your Javascript skills. You do not need to have completed any other exercises on FreeCodeCamp to try out these exercises:

• https://www.freecodecamp.com/challenges/convert-celsius-to-fahrenheit
• https://www.freecodecamp.com/challenges/word-blanks
• https://www.freecodecamp.com/challenges/shopping-list
• https://www.freecodecamp.com/challenges/golf-code
• https://www.freecodecamp.com/challenges/counting-cards