The following is a list of practice projects for full stack 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: Build a full stack flashcards app, pre-populated with flash cards for JavaScript review.
- Project: Full stack project of your choice (ideas: clone Facebook, Reddit, Netflix, Slack) - Consider building it as a Chrome Extension, Mobile, or Electron App.
- Project: CSS Zen Garden - implement your own CSS design for the competition
- Project: Enhance your flash cards app with another deck of cards for an additional topic of your choosing.
- Project: Full stack project of your choice (ideas: clone Facebook, Reddit, Netflix, Slack) - Consider building it as a Chrome Extension, Mobile, or Electron App.
- Project: Clone Twitter using the language/framework of your choice on the backend, and your frontend framework/library of choice. Include all basic features: signup/login/logout, follow user, search, tweet, like/retweet, home page with stream of recent tweets.
- 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: Enhance your flash cards app with another deck of cards for an additional topic of your choosing.
- 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: Full stack project of your choice (ideas: clone Facebook, Reddit, Netflix, Slack) - Consider building it as a Chrome Extension, Mobile, or Electron App.
- Project: Enhance your flash cards app with another deck of cards for an additional topic of your choosing.
- 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: Enhance your flash cards app with another deck of cards for an additional topic of your choosing.
- Project: Clone Medium. Include: create account, create post, publish post, edit post, add topic to post, follow user, follow topic, cheer for post, and home page with feed of recent posts, followed users, and followed topics.
- How to not f-up your local files with Git part1, part2 and part 3
- surge.sh
- heroku
- Glitch
- MDN
- 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
- Node.js - should be your primary reference for building backend projects
- Express - an excellent framework to accompany Node.js on the backend
- MongoDB - for storing data
- Mongoose - access to MongoDB from Node.js made easy(er)
- Passport.js - remember this link when you have to setup a login system
- 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)