Skip to content

/ project-based-learning-frontend

List of Project based Tutorials for frontend development

192 stars 18 forks
Star
Watch
master
1 branch 0 tags
Go to file
Code

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Latest commit

@binconsole
binconsole Merge pull request #1 from xenleme/fix-typo-and-links
7258585 Sep 16, 2019
Merge pull request #1 from xenleme/fix-typo-and-links 
Fix typo and links in README
7258585

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
README.md
Fix typo and links in README
Sep 16, 2019

README.md

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

    About

    List of Project based Tutorials for frontend development

    Topics

    learning-by-doing frontend frontend-developer beginner

    Resources

    Readme

    Releases

    No releases published

    Packages

    No packages published

    Contributors 2

    •  
    •  
    You can’t perform that action at this time.