FrontEnd Fundamentals 1. HTML • Intro • https://developer.mozilla.org/en-US/docs/Web/HTML • Basic • https://developer.mozilla.org/en-US/docs/Learn/ Getting_started_with_the_web/HTML_basics • HTML element • https://developer.mozilla.org/en-US/docs/Web/HTML/Element • Global Attributes • https://developer.mozilla.org/en-US/docs/Web/HTML/ Global_attributes • Debugging HTML • https://developer.mozilla.org/en-US/docs/Learn/HTML/ Introduction_to_HTML/Debugging_HTML 2. CSS • Intro • https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/ How_CSS_works • Basic • https://www.w3schools.com/css/css_intro.asp • Debugging CSS • https://developer.mozilla.org/en-US/docs/Learn/CSS/ Building_blocks/Debugging_CSS • Media Queries • https://www.w3schools.com/css/css_rwd_mediaqueries.asp • Flexbox • https://css-tricks.com/snippets/css/a-guide-to-flexbox/ • https://torquemag.io/2020/02/flexbox-tutorial/ • https://vegibit.com/css-flexbox-tutorial/ • Transition • https://css-tricks.com/almanac/properties/t/transition/ • https://www.freecodecamp.org/news/css-transition-examples/ • Responsive Web Design • https://learn.shayhowe.com/advanced-html-css/responsive-webdesign/ • CSS Framework • https://bulma.io/ 3. JavaScript • Intro • https://developer.mozilla.org/en-US/docs/Web/JavaScript • Basic • https://developer.mozilla.org/en-US/docs/Learn/ Getting_started_with_the_web/JavaScript_basics • Working with DOM • https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Clientside_web_APIs/Manipulating_documents • https://www.freecodecamp.org/news/whats-the-document-objectmodel-and-why-you-should-know-how-to-use-it-1a2d0bc5429d/ • Array https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Global_Objects/Array • push https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Global_Objects/Array/push • pop https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Global_Objects/Array/pop • splice https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Global_Objects/Array/splice • map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Global_Objects/Array/map https://www.digitalocean.com/community/tutorials/4-uses-ofjavascripts-arraymap-you-should-know • forEach https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Global_Objects/Array/forEach • reduce https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Global_Objects/Array/Reduce • Loops • https://www.freecodecamp.org/news/javascript-loops-explained-forloop-for/ • ECMAScript • https://www.freecodecamp.org/news/whats-the-differencebetween-javascript-and-ecmascript-cba48c73a2b5/ • https://medium.com/@madasamy/javascript-brief-history-andecmascript-es6-es7-es8-features-673973394df4 • AJAX • https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX • XMLHttpRequest • https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/ Using_XMLHttpRequest • Fetch • https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/ Using_Fetch • JavaScript Prototype • https://www.freecodecamp.org/news/javascript-prototypeexplained-with-examples/ • Object destructuring • https://flaviocopes.com/javascript-object-destructuring/ • Classes • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Classes • this • https://medium.com/@happymishra66/this-in-javascript8e8d4cd3930 • IIFE (Immediately Invoked Function Expression) • https://javascript.plainenglish.io/https-medium-com-javascript-inplain-english-stop-feeling-iffy-about-using-an-iife-7b0292aba174 • https://flaviocopes.com/javascript-iife/ • https://www.freecodecamp.org/news/iife-in-javascript-what/ • Scope • https://www.geeksforgeeks.org/understanding-variable-scopes-injavascript/ • JavaScript Closures • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures • https://www.freecodecamp.org/news/lets-learn-javascript-closures66feb44f6a44/ • Hoisting • https://flaviocopes.com/javascript-hoisting/ • https://www.freecodecamp.org/news/var-let-and-const-whats-thedifference/ • Template Literals • https://www.digitalocean.com/community/tutorials/understandingtemplate-literals-in-javascript • Arrow Function • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Functions/Arrow_functions • Ternary Operator • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Operators/Conditional_Operator • Spread And Rest Operator • https://scotch.io/bar-talk/javascripts-three-dots-spread-vs-restoperators543 • https://www.digitalocean.com/community/tutorials/understandingdestructuring-rest-parameters-and-spread-syntax-in-javascript • Callback Function • https://www.freecodecamp.org/news/javascript-callback-functionswhat-are-callbacks-in-js-and-how-to-use-them/ • https://dmitripavlutin.com/javascript-callback/ • https://www.javascripttutorial.net/javascript-callback/ • Promise • https://www.javascripttutorial.net/es6/javascript-promises/ • Async & Await • https://www.javascripttutorial.net/es-next/javascript-async-await/ 4. Node.js • Intro • https://nodejs.org/en/about/ • Module • https://www.sitepoint.com/understanding-module-exports-exportsnode-js/ • fs (file system) • https://www.digitalocean.com/community/tutorials/how-to-workwith-files-using-the-fs-module-in-node-js • https://nodejs.org/docs/latest-v12.x/api/fs.html • Web server with HTTP module • https://www.digitalocean.com/community/tutorials/how-to-create-aweb-server-in-node-js-with-the-http-module 5. NPM (Node Package Manager) • Intro • https://nodejs.dev/learn/an-introduction-to-the-npm-packagemanager • https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/ • npm init • https://docs.npmjs.com/creating-a-package-json-file • npm global or local packages • https://nodejs.dev/learn/npm-global-or-local-packages • npm dependencies and devDependencies • https://nodejs.dev/learn/npm-dependencies-and-devdependencies • https://www.geeksforgeeks.org/what-is-the-difference-betweensave-and-save-dev-in-node-js/ • npx • https://nodejs.dev/learn/the-npx-nodejs-package-runner 6. Express.js • Installing • https://expressjs.com/en/starter/installing.html • Hello World • https://expressjs.com/en/starter/hello-world.html • Routing • https://expressjs.com/en/starter/basic-routing.html • https://expressjs.com/en/guide/routing.html • Middleware • https://expressjs.com/en/guide/writing-middleware.html • https://medium.com/@selvaganesh93/how-node-js-middlewareworks-d8e02a936113 • https://expressjs.com/en/guide/using-middleware.html • API Reference • https://expressjs.com/en/4x/api.html 7. Webpack https://webpack.js.org/concepts/ • Tutorial • https://www.edc4it.com/en/blog/webpack-tutorial.html • https://www.ivarprudnikov.com/static-website-multiple-html-pagesusing-webpack-plus-github-example/ 8. Babel https://babeljs.io/docs/en/ 9. CSS Preprocessing (SASS/SCSS) https://sass-lang.com/guide 10.Vuejs • Intro https://vuejs.org/v2/guide/ • Vue Instance https://vuejs.org/v2/guide/instance.html • Template Syntax https://vuejs.org/v2/guide/syntax.html • Computed Properties & Watchers https://vuejs.org/v2/guide/computed.html • Class and Style Bindings https://vuejs.org/v2/guide/class-and-style.html • Conditional Rendering https://vuejs.org/v2/guide/conditional.html • List Rendering https://vuejs.org/v2/guide/list.html • Event Handling https://vuejs.org/v2/guide/events.html • Form Input Bindings https://vuejs.org/v2/guide/forms.html • Components Basics https://vuejs.org/v2/guide/components.html • Components Registration https://vuejs.org/v2/guide/components-registration.html • Props https://vuejs.org/v2/guide/components-props.html • Custom Events https://vuejs.org/v2/guide/components-custom-events.html • Slots https://vuejs.org/v2/guide/components-slots.html • Dynamic & Async Components https://vuejs.org/v2/guide/components-dynamic-async.html • Handling Edge Cases https://vuejs.org/v2/guide/components-edge-cases.html • Enter/Leave & List Transitions https://vuejs.org/v2/guide/transitions.html • State Transitions https://vuejs.org/v2/guide/transitioning-state.html • Mixins https://vuejs.org/v2/guide/mixins.html • Custom Directives https://vuejs.org/v2/guide/custom-directive.html • Plugins https://vuejs.org/v2/guide/plugins.html • Filters https://vuejs.org/v2/guide/filters.html • Single File Components https://vuejs.org/v2/guide/single-file-components.html • Routing https://vuejs.org/v2/guide/routing.html • API https://vuejs.org/v2/api/ • Style Guide https://vuejs.org/v2/style-guide/ • Server Side Rendering https://ssr.vuejs.org 11.Vuex (state management) • https://vuejs.org/v2/guide/state-management.html • Intro https://vuex.vuejs.org • State https://vuex.vuejs.org/guide/state.html#single-state-tree • Getters https://vuex.vuejs.org/guide/getters.html • Mutations https://vuex.vuejs.org/guide/mutations.html • Actions https://vuex.vuejs.org/guide/actions.html • Modules https://vuex.vuejs.org/guide/modules.html#namespacing 12.Nuxtjs • Installation https://nuxtjs.org/docs/2.x/get-started/installation • Routing (Nuxt pages as routing) https://nuxtjs.org/docs/2.x/get-started/routing • Directory Structure https://nuxtjs.org/docs/2.x/get-started/directory-structure • Views https://nuxtjs.org/docs/2.x/concepts/views • Context & Helpers https://nuxtjs.org/docs/2.x/concepts/context-helpers • Server Side Rendering https://nuxtjs.org/docs/2.x/concepts/server-side-rendering • Nuxt Lifecycle https://nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle • Nuxt Components https://nuxtjs.org/docs/2.x/features/nuxt-components • assets directory https://nuxtjs.org/docs/2.x/directory-structure/assets • components directory https://nuxtjs.org/docs/2.x/directory-structure/components • layouts directory https://nuxtjs.org/docs/2.x/directory-structure/layouts • middleware directory https://nuxtjs.org/docs/2.x/directory-structure/middleware • pages directory https://nuxtjs.org/docs/2.x/directory-structure/pages • plugins directory https://nuxtjs.org/docs/2.x/directory-structure/plugins • static directory https://nuxtjs.org/docs/2.x/directory-structure/static • store directory https://nuxtjs.org/docs/2.x/directory-structure/store • nuxt.config https://nuxtjs.org/docs/2.x/directory-structure/nuxt-config