loading...
Cover image for Curated list of project-based frontend tutorials [Project-Based Learning Frontend]

Curated list of project-based frontend tutorials [Project-Based Learning Frontend]

binconsole profile image BinConsole Updated on ・7 min read

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.

Javascript

What you build Source Price
Calulator https://zellwk.com/blog/calculator-part-1/
https://zellwk.com/blog/calculator-part-2/
https://zellwk.com/blog/calculator-part-3/
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-
comjavascript-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

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

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
    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

    Jquery

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

    This project is also on Github.
    https://github.com/binconsole/project-based-learning-frontend

    Thank you!

    You can support such posts by buying something on my developer shop if you want. This is my favorite :)

    Posted on by:

    binconsole profile

    BinConsole

    @binconsole

    UX Designer and Developer

    Discussion

    markdown guide
     

    I love this list! Here's a similar one I put together broken down by difficulty: dev.to/mibzman/100-project-ideas-oda

     

    Thanks! Good idea to sort by difficulty.

     
     

    Thank you so much for this list. This’ll help me to keep on track with daily projects and add to my portfolio

     

    YouTube clone with vue js, has a link to Instagram clone with vue js

     

    Thanks for the feedback! I update the post tomorrow.