Project Based Learning - Frontend

Frontend development is challenging to learn. What helped me a lot was not only to learn theory, but to program something every day. If you are a beginner or already working as a frontend developer or designer you can benefit from this list.

Support this Project

If this list helps you, I'd be happy if you'd support me. You can buy stickers or support me directly via buy me a coffee. This enables me to extend this list, keep this list up to date and to do many more such projects.

You can do this via Buy me a Coffee

Thank you.

Javascript

What you build	Source	Price
Calulator	https://zellwk.com/blog/calculator-part-1/ https://zellwk.com/blog/calculator-part-1/ https://zellwk.com/blog/calculator-part-1/
Simple URL shortener with HTML and JvaScript	https://www.freecodecamp.org/news/building-a-simple-url-shortener-with-just-html-and-javascript-6ea1ecda308c/
30 Things in 30 Days	https://javascript30.com/
Todo List App with JavaScript	https://freshman.tech/todo-list/
Simple Calculator App with JavaScript	https://freshman.tech/calculator/
Instant Search With Vanilla Javascript	https://www.florin-pop.com/blog/2019/06/vanilla-javascript-instant-search/
Simple Chrome Extension in Vanilla JavaScript	https://medium.com/javascript-in-plain-english/https-medium-com-javascript-in-plain-english-how-to-build-a-simple-chrome-extension-in-vanilla-javascript-e52b2994aeeb
Memory Game in Vanilla JavaScript	https://medium.com/free-code-camp/vanilla-javascript-tutorial-build-a-memory-game-in-30-minutes-e542c4447eae

Javascript Games

What you build	Source	Price
Snake using only JavaScript, HTML & CSS	https://www.freecodecamp.org/news/think-like-a-programmer-how-to-build-snake-using-only-javascript-html-and-css-7b1479c3339e/
Sprite animation in JavaScript	https://medium.com/dailyjs/how-to-build-a-simple-sprite-animation-in-javascript-b764644244aa	$5/m
2D breakout game using pure JavaScript	https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript
How to Build Tetris in React	https://www.youtube.com/watch?v=ZGOaCxX8HIU
Simple Calculator App with JavaScript	https://freshman.tech/calculator/
Instant Search With Vanilla Javascript	https://www.florin-pop.com/blog/2019/06/vanilla-javascript-instant-search/
Simple Chrome Extension in Vanilla JavaScript	https://medium.com/javascript-in-plain-english/ https-medium-com-javascript-in-plain-english-how-to-build-a-simple-chrome-extension-in-vanilla-javascript-e52b2994aeeb
Memory Game in Vanilla JavaScript	https://medium.com/free-code-camp/vanilla-javascript-tutorial-build-a-memory-game-in-30-minutes-e542c4447eae

Javascript Animations

What you build	Source	Price
JavaScript Animations with Anime.js	https://medium.com/@ajmeyghani/creating-javascript-animations-with-anime-js-f2b14716cdc6	$5/m

HTML/CSS/JS

What you build	Source	Price
Calendar with CSS Grid	https://www.freecodecamp.org/news/how-to-build-a-calendar-with-css-grid/
Reddit-inspired loading spinner with only HTML and CSS	https://www.freecodecamp.org/news/how-to-build-a-reddit-inspired-loading-spinner-with-only-html-and-css-5b2fca3fdca/
Mobile App Layout with CSS Flexbox	https://freshman.tech/flexbox-mobile-app/
Navigation Bar with CSS Flexbox	https://freshman.tech/flexbox-navbar/
Testimonial card	https://www.florin-pop.com/blog/2019/07/testimonial-card/
Social media buttons	https://www.florin-pop.com/blog/2019/07/social-media-buttons/
Pure Css Tooltip	https://www.florin-pop.com/blog/2019/05/pure-css-tooltip
Chat Interface	https://www.florin-pop.com/blog/2019/04/chat-interface
Buttons Ui Kit	https://www.florin-pop.com/blog/2019/04/buttons-ui-kit/
Filtering Component in Pure CSS	https://webdesign.tutsplus.com/tutorials/how-to-build-a-filtering-component-in-pure-css--cms-33111
Responsive, Multi-Level, Sticky Footer With Flexbox	(https://webdesign.tutsplus.com/tutorials/how-to-build-a-responsive-multi-level-sticky-footer-with-flexbox--cms-33341
Festive Advent Calendar With CSS Grid	https://webdesign.tutsplus.com/tutorials/how-to-build-a-festive-advent-calendar-with-css-grid--cms-30070
Bouncing Page Loader with CSS3 Animations	https://scotch.io/tutorials/create-a-bouncing-page-loader-with-css3-animations
Modern Dashboard Layout With CSS Grid and Flexbox	https://medium.com/better-programming/build-a-responsive-modern-dashboard-layout-with-css-grid-and-flexbox-bd343776a97e	$5/m
Minimalist HTML Card in just 53 lines of code with Flexbox	https://codeburst.io/build-a-minimalist-html-card-in-just-53-lines-of-code-with-flexbox-b40801927eb5	$5/m
Mashable’s navigation bar with HTML and CSS	https://medium.com/free-code-camp/how-to-easily-build-mashables-navigation-bar-with-html-and-css-9e5007af786
Learn CSS border-radius property by building a calculator	https://codeburst.io/learn-css-border-radius-property-by-building-a-calculator-53497cd8071d
Responsive, Pure CSS Off-Canvas Hamburger Menu	https://medium.com/@heyoka/responsive-pure-css-off-canvas-hamburger-menu-aebc8d11d793
Build a Design System	https://medium.com/codyhouse/create-your-design-system-part-1-typography-7c630d9092bd https://medium.com/codyhouse/create-your-design-system-part-2-grid-layout-aa961d59b8d6 https://medium.com/codyhouse/create-your-design-system-part-3-colors-798e4729921fs https://medium.com/codyhouse/create-your-design-system-part-4-spacing-895c9213e2b9 https://medium.com/codyhouse/create-your-design-system-part-5-icons-594f39cfb1b https://medium.com/codyhouse/create-your-design-system-part-6-buttons-58e2eda2173e
Create a pagination	https://www.florin-pop.com/blog/2019/07/how-to-create-a-pagination/
Notification Box	https://www.florin-pop.com/blog/2019/06/how-to-create-a-notification-box
Custom Progress Bar	https://www.florin-pop.com/blog/2019/06/how-to-create-a-custom-progress-bar/
Accordion	https://www.florin-pop.com/blog/2019/06/how-to-create-an-accordion/
Dark/light Theme Toggle	https://www.florin-pop.com/blog/2019/05/dark-light-theme-toggle
Modal	https://www.florin-pop.com/blog/2019/04/how-to-create-a-modal
Tab Bar Navigation	https://www.florin-pop.com/blog/2019/03/tab-bar-navigation/
Full Page Slider	https://www.florin-pop.com/blog/2019/03/full-page-slider/
Double slider sign in up form	https://www.florin-pop.com/blog/2019/03/double-slider-sign-in-up-form/
Simple Gantt Chart With CSS and JavaScript	https://webdesign.tutsplus.com/tutorials/build-a-simple-gantt-chart-with-css-and-javascript--cms-33813
Horizontal Timeline With CSS and JavaScript	https://webdesign.tutsplus.com/tutorials/building-a-horizontal-timeline-with-css-and-javascript--cms-28378
Shifting Underline Hover Effect With CSS and JavaScript	https://webdesign.tutsplus.com/tutorials/how-to-build-a-shifting-underline-hover-effect-with-css-and-javascript--cms-28510
Fixed Header Which Animates on Page Scroll	https://webdesign.tutsplus.com/tutorials/how-to-create-a-fixed-header-which-animates-on-page-scroll--cms-26672
Tab Bar Navigation	https://www.florin-pop.com/blog/2019/03/tab-bar-navigation/
Tab Bar Navigation	https://www.florin-pop.com/blog/2019/03/tab-bar-navigation/
Animated book store with JavaScript, jQuery, and CSS	https://www.freecodecamp.org/news/how-i-designed-an-animated-book-store-with-javascript-jquery-and-css-9e7102ca7689/

CSS Animations

What you build	Source	Price
Animated loader with nothing but CSS	https://codeburst.io/how-to-create-a-beautiful-animated-loader-with-nothing-but-css-d1962fc5a66c
Animated dashed line background with SVG and CSS	https://blog.fullstackdigital.com/creating-an-animated-dashed-line-background-with-svg-and-css-170f89f47000

Angular

What you build	Source	Price
A component-based Reddit clone A real-time chat app A YouTube search-as-you-type app A Spotify search app/li> Custom Tabs and UI Components Forms with Validations	https://www.ng-book.com/2/	$35 - $79
Recipe Book	https://www.udemy.com/vuejs-2-the-complete-guide/	$10 - $199
Simple Progressive Web App (PWA) with Angular and Lighthouse — Hacker News Clone	https://medium.com/crowdbotics/learn-to-build-a-simple-progressive-web-app-pwa-with-angular-and-lighthouse-hacker-news-clone-51aca763032f
Toggle Component	https://blog.angularindepth.com/build-a-toggle-component-6e8f44889c2c
localization in Angular using i18n tools	https://www.freecodecamp.org/news/how-to-implement-localization-in-angular-using-i18n-tools-a88898b1a0d0/

Vue

What you build	Source	Price
A server-persisted shopping cart A calendar event app A voting application Forms with validations Vuex-based routes and authentication Build bullet-proof apps with testing	https://www.fullstack.io/vue	$39 - $79
Trello Clone	https://www.vuemastery.com/courses/watch-us-build-trello-clone/tour-of-the-app	$19 - $190
The Monster Slayer Wonderful Quotes The Stock Trader	https://www.udemy.com/vuejs-2-the-complete-guide/	$10 - $199
Instagram clone with Vue.js and CSSGram	https://medium.com/fullstackio/tutorial-build-an-instagram-clone-with-vue-js-and-cssgram-24a9f3de0408
Youtube Clone with VueJS, Webpack and Flexbox	https://medium.com/fullstackio/tutorial-build-an-instagram-clone-with-vue-js-and-cssgram-24a9f3de0408
Minesweeper game with Vue	https://medium.com/javascript-in-plain-english/minesweeper-rebuild-with-vue-vuex-and-vuetify-ab1921e5258e
Web App with Vue, Chart.js and an API	https://medium.com/hackernoon/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44
Web App with Vue, Chart.js and an API Part II	https://medium.com/hackernoon/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf
Shopping cart with Vue 2 and Vuex	https://medium.com/employbl/build-a-shopping-cart-with-vue-2-and-vuex-5d58b93c513f
Realtime Chart with Vue.js	https://medium.com/js-dojo/build-a-realtime-chart-with-vue-js-d7e2e25a5e21
Collapsible Tree Menu With Vue.js Recursive Components	https://medium.com/js-dojo/build-a-collapsible-tree-menu-with-vue-js-recursive-components-e598306dc3d1
Multiplayer Quiz Game With Vue.js	https://medium.com/front-end-weekly/build-a-multiplayer-quiz-game-with-vue-js-ca22bad8fb52)
Real-Time Chat App With VueJS, Vuex & Cloud Firestore	https://medium.com/js-dojo/build-a-realtime-chat-app-with-vuejs-vuex-and-firestore-32d081668709
Offline First Masonry Grid Showcase with Vue	https://medium.com/js-dojo/offline-first-masonry-grid-showcase-with-vue-3cd3121dabae
Interactive and Distraction-Free Form with Vue	https://medium.com/vue-mastery/building-an-interactive-and-distraction-free-form-with-vue-bfe23907e981
Highly Customizable Tab Component with Vue.js Slots	https://blog.bitsrc.io/highly-customizable-tab-component-with-vue-js-slots-7e1cee400a7c
Routing in Vue.js With Examples	https://medium.com/@saidhayani/understand-routing-in-vue-js-with-examples-6da96979c8e3
Cryptocurrency Tracker with Vue.js	https://medium.com/eliteng/build-a-cryptocurrency-tracker-with-vue-js-c0efd4c0139e

React

What you build	Source	Price
Todoist Clone	https://www.youtube.com/watch?v=hT3j87FMR6M
Build an Evernote Clone	https://www.youtube.com/watch?v=I250xdtUvy8
Hacker News Clone	https://levelup.gitconnected.com/react-redux-tutorial-build-a-hacker-news-clone-64f320364f85
Realtime PWA	https://medium.com/better-programming/build-a-realtime-pwa-with-react-99e7b0fd3270
Image Slider With React & ES6	https://medium.com/@ItsMeDannyZ/build-an-image-slider-with-react-es6-264368de68e4
PWA with Create-React-App and custom service workers	https://medium.com/free-code-camp/how-to-build-a-pwa-with-create-react-app-and-custom-service-workers-376bd1fdc6d3
meme-maker with React	https://medium.com/free-code-camp/react-for-beginners-building-a-meme-maker-with-react-7164d3d3e55f
construct a heat map in React	https://www.freecodecamp.org/news/a-heat-map-implementation-in-typescript/
Countdown component using React & MomentJS	https://www.freecodecamp.org/news/how-to-create-a-countdown-component-using-react-momentjs-4717edc4ac3/

Jquery

What you build	Source	Price
Grid Accordion with jQuery	https://css-tricks.com/grid-accordion-with-jquery/

Contribution

Before making a pull request, please consider the following:

• The tutorial you want to add should not already exist
• The tutorial should be correctly placed under the appropriate technology
• If the tutorial isn't free, add the price. Even medium.com premium content.
• No URL shorteners.

Todo

• Add more technologies
• More Angular, React and Vanilla Javascript