DEV Community

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

Posted on • Updated on • Originally published at

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

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.


What you build Source Price
Simple URL shortener with HTML and JvaScript
30 Things in 30 Days
Todo List App with JavaScript
Simple Calculator App with JavaScript
Instant Search With Vanilla Javascript
Simple Chrome Extension in Vanilla JavaScript
Memory Game in Vanilla JavaScript

Javascript Games

Javascript Animations

What you build Source Price
JavaScript Animations with Anime.js $5/m


What you build Source Price
Calendar with CSS Grid
Reddit-inspired loading spinner with only HTML and CSS
Mobile App Layout with CSS Flexbox
Navigation Bar with CSS Flexbox
Testimonial card
Social media buttons
Pure Css Tooltip
Chat Interface
Buttons Ui Kit
Filtering Component in Pure CSS
Responsive, Multi-Level, Sticky Footer With Flexbox (
Festive Advent Calendar With CSS Grid
Bouncing Page Loader with CSS3 Animations
Modern Dashboard Layout With CSS Grid and Flexbox $5/m
Minimalist HTML Card in just 53 lines of code with Flexbox $5/m
Mashable’s navigation bar with HTML and CSS
Learn CSS border-radius property by building a calculator
Responsive, Pure CSS Off-Canvas Hamburger Menu
Build a Design System
Create a pagination
Notification Box
Custom Progress Bar
Dark/light Theme Toggle
Tab Bar Navigation
Full Page Slider
Double slider sign in up form
Simple Gantt Chart With CSS and JavaScript
Horizontal Timeline With CSS and JavaScript
Shifting Underline Hover Effect With CSS and JavaScript
Fixed Header Which Animates on Page Scroll
Tab Bar Navigation
Tab Bar Navigation
Animated book store with JavaScript, jQuery, and CSS

CSS Animations


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
  • $35 - $79
    Recipe Book $10 - $199
    Simple Progressive Web App (PWA) with Angular and Lighthouse — Hacker News Clone
    Toggle Component
    localization in Angular using i18n tools


    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
  • $39 - $79
    Trello Clone $19 - $190
  • The Monster Slayer
  • Wonderful Quotes
  • The Stock Trader
  • $10 - $199
    Instagram clone with Vue.js and CSSGram
    Minesweeper game with Vue
    Web App with Vue, Chart.js and an API
    Web App with Vue, Chart.js and an API Part II
    Shopping cart with Vue 2 and Vuex
    Realtime Chart with Vue.js
    Collapsible Tree Menu With Vue.js Recursive Components
    Multiplayer Quiz Game With Vue.js
    Real-Time Chat App With VueJS, Vuex & Cloud Firestore
    Offline First Masonry Grid Showcase with Vue
    Interactive and Distraction-Free Form with Vue
    Highly Customizable Tab Component with Vue.js Slots
    Routing in Vue.js With Examples
    Cryptocurrency Tracker with Vue.js



    What you build Source Price
    Grid Accordion with jQuery

    This project is also on Github.

    Thank you!

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

    Discussion (8)

    samborick profile image
    Sam Borick

    I love this list! Here's a similar one I put together broken down by difficulty:

    binconsole profile image
    BinConsole Author

    Thanks! Good idea to sort by difficulty.

    bradtaniguchi profile image

    Excellent resource list!

    tysonthurman profile image
    Tyson Thurman

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

    seanmclem profile image

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

    binconsole profile image
    BinConsole Author • Edited on

    Thanks for the feedback! I update the post tomorrow.

    niyasrahman profile image


    miguelangelcruza profile image
    Miguel Angel

    Excellent list!