└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Project Based Learning - Frontend 2 | 3 | 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. 4 | 5 | ### Support this Project 6 | 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. 7 | 8 | You can do this via [Buy me a Coffee](https://www.buymeacoffee.com/binconsole) 9 | 10 | Thank you. 11 | 12 | ### Javascript 13 | | What you build| Source | Price | 14 | |--|--|--| 15 | | Calulator | https://zellwk.com/blog/calculator-part-1/
https://zellwk.com/blog/calculator-part-1/
https://zellwk.com/blog/calculator-part-1/ || 16 | | Simple URL shortener with HTML and JvaScript | https://www.freecodecamp.org/news/building-a-simple-url-shortener-with-just-html-and-javascript-6ea1ecda308c/ || 17 | | 30 Things in 30 Days | https://javascript30.com/ || 18 | | Todo List App with JavaScript |https://freshman.tech/todo-list/ || 19 | | Simple Calculator App with JavaScript |https://freshman.tech/calculator/ || 20 | | Instant Search With Vanilla Javascript | https://www.florin-pop.com/blog/2019/06/vanilla-javascript-instant-search/ || 21 | | 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 || 22 | | Memory Game in Vanilla JavaScript | https://medium.com/free-code-camp/vanilla-javascript-tutorial-build-a-memory-game-in-30-minutes-e542c4447eae || 23 | 24 | ### Javascript Games 25 | | What you build| Source | Price | 26 | |--|--|--| 27 | | 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/ || 28 | | Sprite animation in JavaScript | https://medium.com/dailyjs/how-to-build-a-simple-sprite-animation-in-javascript-b764644244aa |$5/m| 29 | | 2D breakout game using pure JavaScript | https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript || 30 | | How to Build Tetris in React | https://www.youtube.com/watch?v=ZGOaCxX8HIU || 31 | | Simple Calculator App with JavaScript |https://freshman.tech/calculator/ || 32 | | Instant Search With Vanilla Javascript | https://www.florin-pop.com/blog/2019/06/vanilla-javascript-instant-search/ || 33 | | 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 || 34 | | Memory Game in Vanilla JavaScript | https://medium.com/free-code-camp/vanilla-javascript-tutorial-build-a-memory-game-in-30-minutes-e542c4447eae || 35 | 36 | 37 | ## Javascript Animations 38 | | What you build| Source | Price | 39 | |--|--|--| 40 | | JavaScript Animations with Anime.js |https://medium.com/@ajmeyghani/creating-javascript-animations-with-anime-js-f2b14716cdc6 |$5/m| 41 | 42 | ## HTML/CSS/JS 43 | 44 | | What you build| Source | Price | 45 | |--|--|--| 46 | | Calendar with CSS Grid |https://www.freecodecamp.org/news/how-to-build-a-calendar-with-css-grid/ || 47 | | 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/|| 48 | | Mobile App Layout with CSS Flexbox |https://freshman.tech/flexbox-mobile-app/ || 49 | | Navigation Bar with CSS Flexbox |https://freshman.tech/flexbox-navbar/ || 50 | | Testimonial card | https://www.florin-pop.com/blog/2019/07/testimonial-card/ || 51 | | Social media buttons |https://www.florin-pop.com/blog/2019/07/social-media-buttons/ || 52 | | Pure Css Tooltip |https://www.florin-pop.com/blog/2019/05/pure-css-tooltip || 53 | | Chat Interface | https://www.florin-pop.com/blog/2019/04/chat-interface || 54 | | Buttons Ui Kit |https://www.florin-pop.com/blog/2019/04/buttons-ui-kit/ || 55 | | Filtering Component in Pure CSS |https://webdesign.tutsplus.com/tutorials/how-to-build-a-filtering-component-in-pure-css--cms-33111 || 56 | | 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 || 57 | | Festive Advent Calendar With CSS Grid |https://webdesign.tutsplus.com/tutorials/how-to-build-a-festive-advent-calendar-with-css-grid--cms-30070 || 58 | | Bouncing Page Loader with CSS3 Animations |https://scotch.io/tutorials/create-a-bouncing-page-loader-with-css3-animations || 59 | | 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| 60 | | 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| 61 | | 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 || 62 | | Learn CSS border-radius property by building a calculator |https://codeburst.io/learn-css-border-radius-property-by-building-a-calculator-53497cd8071d || 63 | | Responsive, Pure CSS Off-Canvas Hamburger Menu |https://medium.com/@heyoka/responsive-pure-css-off-canvas-hamburger-menu-aebc8d11d793 || 64 | | 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|| 65 | | Create a pagination |https://www.florin-pop.com/blog/2019/07/how-to-create-a-pagination/ || 66 | | Notification Box |https://www.florin-pop.com/blog/2019/06/how-to-create-a-notification-box || 67 | | Custom Progress Bar |https://www.florin-pop.com/blog/2019/06/how-to-create-a-custom-progress-bar/ || 68 | | Accordion |https://www.florin-pop.com/blog/2019/06/how-to-create-an-accordion/ || 69 | | Dark/light Theme Toggle |https://www.florin-pop.com/blog/2019/05/dark-light-theme-toggle || 70 | | Modal |https://www.florin-pop.com/blog/2019/04/how-to-create-a-modal || 71 | | Tab Bar Navigation |https://www.florin-pop.com/blog/2019/03/tab-bar-navigation/ || 72 | | Full Page Slider |https://www.florin-pop.com/blog/2019/03/full-page-slider/ || 73 | | Double slider sign in up form |https://www.florin-pop.com/blog/2019/03/double-slider-sign-in-up-form/ || 74 | | Simple Gantt Chart With CSS and JavaScript |https://webdesign.tutsplus.com/tutorials/build-a-simple-gantt-chart-with-css-and-javascript--cms-33813 || 75 | | Horizontal Timeline With CSS and JavaScript |https://webdesign.tutsplus.com/tutorials/building-a-horizontal-timeline-with-css-and-javascript--cms-28378 || 76 | | 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 || 77 | | 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 || 78 | | Tab Bar Navigation |https://www.florin-pop.com/blog/2019/03/tab-bar-navigation/ || 79 | | Tab Bar Navigation |https://www.florin-pop.com/blog/2019/03/tab-bar-navigation/ || 80 | | 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/ || 81 | 82 | ### CSS Animations 83 | | What you build| Source | Price | 84 | |--|--|--| 85 | | Animated loader with nothing but CSS |https://codeburst.io/how-to-create-a-beautiful-animated-loader-with-nothing-but-css-d1962fc5a66c || 86 | | Animated dashed line background with SVG and CSS |https://blog.fullstackdigital.com/creating-an-animated-dashed-line-background-with-svg-and-css-170f89f47000 || 87 | 88 | 89 | 90 | 91 | ### Angular 92 | | What you build| Source | Price | 93 | |--|--|--| 94 | |
  • 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| 95 | | Recipe Book |https://www.udemy.com/vuejs-2-the-complete-guide/ |$10 - $199| 96 | | 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 || 97 | | Toggle Component|https://blog.angularindepth.com/build-a-toggle-component-6e8f44889c2c || 98 | | localization in Angular using i18n tools|https://www.freecodecamp.org/news/how-to-implement-localization-in-angular-using-i18n-tools-a88898b1a0d0/ || 99 | 100 | 101 | 102 | ### Vue 103 | | What you build| Source | Price | 104 | |--|--|--| 105 | |
  • 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| 106 | |Trello Clone |https://www.vuemastery.com/courses/watch-us-build-trello-clone/tour-of-the-app |$19 - $190| 107 | |
  • The Monster Slayer
  • Wonderful Quotes
  • The Stock Trader
    • |https://www.udemy.com/vuejs-2-the-complete-guide/ |$10 - $199| 108 | | Instagram clone with Vue.js and CSSGram |https://medium.com/fullstackio/tutorial-build-an-instagram-clone-with-vue-js-and-cssgram-24a9f3de0408 || 109 | | Youtube Clone with VueJS, Webpack and Flexbox |https://medium.com/fullstackio/tutorial-build-an-instagram-clone-with-vue-js-and-cssgram-24a9f3de0408 || 110 | | Minesweeper game with Vue |https://medium.com/javascript-in-plain-english/minesweeper-rebuild-with-vue-vuex-and-vuetify-ab1921e5258e || 111 | | 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 || 112 | | 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 || 113 | | Shopping cart with Vue 2 and Vuex |https://medium.com/employbl/build-a-shopping-cart-with-vue-2-and-vuex-5d58b93c513f || 114 | | Realtime Chart with Vue.js |https://medium.com/js-dojo/build-a-realtime-chart-with-vue-js-d7e2e25a5e21 || 115 | | Collapsible Tree Menu With Vue.js Recursive Components |https://medium.com/js-dojo/build-a-collapsible-tree-menu-with-vue-js-recursive-components-e598306dc3d1 || 116 | | Multiplayer Quiz Game With Vue.js |https://medium.com/front-end-weekly/build-a-multiplayer-quiz-game-with-vue-js-ca22bad8fb52) || 117 | | 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 || 118 | | Offline First Masonry Grid Showcase with Vue |https://medium.com/js-dojo/offline-first-masonry-grid-showcase-with-vue-3cd3121dabae || 119 | | Interactive and Distraction-Free Form with Vue |https://medium.com/vue-mastery/building-an-interactive-and-distraction-free-form-with-vue-bfe23907e981 || 120 | | Highly Customizable Tab Component with Vue.js Slots |https://blog.bitsrc.io/highly-customizable-tab-component-with-vue-js-slots-7e1cee400a7c || 121 | | Routing in Vue.js With Examples |https://medium.com/@saidhayani/understand-routing-in-vue-js-with-examples-6da96979c8e3 || 122 | | Cryptocurrency Tracker with Vue.js |https://medium.com/eliteng/build-a-cryptocurrency-tracker-with-vue-js-c0efd4c0139e || 123 | 124 | 125 | ### React 126 | 127 | | What you build| Source | Price | 128 | |--|--|--| 129 | | Todoist Clone |https://www.youtube.com/watch?v=hT3j87FMR6M || 130 | | Build an Evernote Clone |https://www.youtube.com/watch?v=I250xdtUvy8|| 131 | | Hacker News Clone |https://levelup.gitconnected.com/react-redux-tutorial-build-a-hacker-news-clone-64f320364f85|| 132 | | Realtime PWA |https://medium.com/better-programming/build-a-realtime-pwa-with-react-99e7b0fd3270|| 133 | | Image Slider With React & ES6 |https://medium.com/@ItsMeDannyZ/build-an-image-slider-with-react-es6-264368de68e4|| 134 | | 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|| 135 | | meme-maker with React |https://medium.com/free-code-camp/react-for-beginners-building-a-meme-maker-with-react-7164d3d3e55f|| 136 | | construct a heat map in React |https://www.freecodecamp.org/news/a-heat-map-implementation-in-typescript/|| 137 | | Countdown component using React & MomentJS |https://www.freecodecamp.org/news/how-to-create-a-countdown-component-using-react-momentjs-4717edc4ac3/|| 138 | 139 | 140 | ### Jquery 141 | | What you build| Source | Price | 142 | |--|--|--| 143 | | Grid Accordion with jQuery |https://css-tricks.com/grid-accordion-with-jquery/ || 144 | 145 | 146 | ### Contribution 147 | Before making a pull request, please consider the following: 148 | * The tutorial you want to add should not already exist 149 | * The tutorial should be correctly placed under the appropriate technology 150 | * If the tutorial isn't free, add the price. Even medium.com premium content. 151 | * No URL shorteners. 152 | 153 | #### Todo 154 | - [ ] Add more technologies 155 | - [ ] More Angular, React and Vanilla Javascript 156 | --------------------------------------------------------------------------------