The following is a list of practice projects for frontend development intended to be used as ideas for portfolio projects or for use in a speedrun (set aside a month or two and speed through as many as you can in that time - as an intensive hands on practice.)
Always find or make your own open source assets when doing any clone, and attribute your sources. Don't get sued for copyright violation.
- Project: 100 Days of CSS - pick 1 of the 100 and implement it
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Project: 100 Days of CSS - pick 1 of the 100 and implement it
- Project: Select an API from Todd Motto's API List and build a frontend-only application powered by data fetched from the API you chose.
- Project: 100 Days of CSS - pick 1 of the 100 and implement it
- Project: CSS Zen Garden - implement your own CSS design for the competition
- Project: 100 Days of CSS - pick 1 of the 100 and implement it
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Project: 100 Days of CSS - pick 1 of the 100 and implement it
- Project: Select an API from Todd Motto's API List and build a frontend-only application powered by data fetched from the API you chose.
- Project: 100 Days of CSS - pick 1 of the 100 and implement it
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Project: 100 Days of CSS - pick 1 of the 100 and implement it
- Project: Select an API from Todd Motto's API List and build a frontend-only application powered by data fetched from the API you chose.
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Project: 100 Days of CSS - pick 1 of the 100 and implement it
- Project: Select an API from Todd Motto's API List and build a frontend-only application powered by data fetched from the API you chose.
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Project: 100 Days of CSS - pick 1 of the 100 and implement it
- Project: Select an API from Todd Motto's API List and build a frontend-only application powered by data fetched from the API you chose.
- Project: Clone this blog template - note that there are multiple pages
- How to not f-up your local files with Git part1, part2 and part 3
- surge.sh
- Learn to Code HTML & CSS
- Learn to Code Advanced HTML & CSS
- Getting Sassy with CSS
- Programming for the Web with JavaScript
- Data Visualization and D3.js
- YDKJS
- For when you need assets/ideas
- Official Docs
- MDN HTML - for exploring all that HTML has to offer
- MDN CSS- for exploring all that CSS has to offer
- MDN JavaScript- for exploring all that JavaScript has to offer
- Sass - supercharged CSS
- D3 - for creating awesome graphs and charts
- Angular - option for creating single page apps on the frontend
- React - option for creating single page apps on the frontend
- Vue - option for creating single page apps on the frontend
- Redux - for managing state in a single page app
- Mocha - venture into testing
- Karma - venture into testing
- Jest - venture into testing
- Webpack - module bundler for use in your build process (so you can minify your HTML/CSS/JavaScript among other things and deliver an optimized build to production)
- Babel - makes the new JavaScript work on old browsers (or node versions for that matter)
- Gulp - for automating your workflow
- ESLint - for helping to keep your code clean
- Prettier - more help keeping your code clean
- Travis - continuous deployment (how to trigger a build/deploy whenever you commit your changes via git)