GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → binconsole → Project Based Learning Frontend

binconsole / Project Based Learning Frontend

List of Project based Tutorials for frontend development

Labels

frontendbeginnerlearning-by-doing

Projects that are alternatives of or similar to Project Based Learning Frontend

Learn Heroku
🏁 Learn how to deploy your web application to Heroku from scratch step-by-step in 7 minutes!
Stars: ✭ 110 (-54.17%)
Mutual labels:  beginner, learning-by-doing
Pandemic-Produce-Delivery-Project
An ongoing open-source e-commerce shop using React, Express, Firebase, and MongoDB. Designed for pandemic-relief and social good. New contributors are always, always, welcomed, regardless of where you are 🔥. Feel free to reach out at [email protected]~
Stars: ✭ 20 (-91.67%)
Mutual labels:  beginner, learning-by-doing
go-examples
Collection of Go examples for beginner back end developers
Stars: ✭ 44 (-81.67%)
Mutual labels:  beginner, learning-by-doing
Nodebook
📖 Livre publié aux Éditions Eyrolles • Première édition : Node.js v10 et npm v6.
Stars: ✭ 286 (+19.17%)
Mutual labels:  learning-by-doing, frontend
Programming Challenges
Algorithmic, Data Structures, Frontend and Pentest - Programming challenges and competitions to improve knowledge.
Stars: ✭ 592 (+146.67%)
Mutual labels:  beginner, frontend
Docker Basiclearning
🐬 Understand Docker step by step. A tutorial repo for beginners 🔥
Stars: ✭ 296 (+23.33%)
Mutual labels:  beginner, learning-by-doing
learn2code
Learn to code in any language. If
Stars: ✭ 15 (-93.75%)
Mutual labels:  beginner, learning-by-doing
100 page python intro
🐍 Short, introductory guide for the Python programming language 📗 ⚡️
Stars: ✭ 90 (-62.5%)
Mutual labels:  beginner, learning-by-doing
Hacktoberfest
This hacktoberfest project exists to help you submit your first Pull Request and welcome you to the world of open source!
Stars: ✭ 216 (-10%)
Mutual labels:  beginner, learning-by-doing
Awesome Design Systems
A curated list of bookmarks, resources and articles about design systems focused on developers.
Stars: ✭ 222 (-7.5%)
Mutual labels:  frontend
Functional intro to python
[tutorial]A functional, Data Science focused introduction to Python
Stars: ✭ 228 (-5%)
Mutual labels:  learning-by-doing
Vue.py
Pythonic Vue.js
Stars: ✭ 223 (-7.08%)
Mutual labels:  frontend
Frontend Boilerplate
An ES20XX starter with common frontend tasks using Webpack 4 as module bundler and npm scripts as task runner.
Stars: ✭ 224 (-6.67%)
Mutual labels:  frontend
Rl learn
我的强化学习笔记和学习材料📖 still updating ... ...
Stars: ✭ 234 (-2.5%)
Mutual labels:  learning-by-doing
Dotnetcorekoans
A set of Koans to teach the C# language on .NET Core.
Stars: ✭ 222 (-7.5%)
Mutual labels:  beginner
Rfs
✩ Automates responsive resizing ✩
Stars: ✭ 2,789 (+1062.08%)
Mutual labels:  frontend
Blog
📚 前端手册 & 个人学习总结博客
Stars: ✭ 219 (-8.75%)
Mutual labels:  frontend
Topluluk Rehberi
Geliştiriciler için topluluk rehberi
Stars: ✭ 219 (-8.75%)
Mutual labels:  frontend
Gulp Front
Frontend boilerplate and framework based on gulp, pug, stylus and babel
Stars: ✭ 237 (-1.25%)
Mutual labels:  frontend
Frontend Developer Roadmap
📘 Front-end developer roadmap in 2021. This repository aims to collect the most important concepts of front-end.
Stars: ✭ 233 (-2.92%)
Mutual labels:  frontend
View All Similar Projects ➔

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 cloneA real-time chat app A YouTube search-as-you-type appA Spotify search app/li>Custom Tabs and UI ComponentsForms 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 appA voting applicationForms with validationsVuex-based routes and authenticationBuild 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 SlayerWonderful QuotesThe 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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].