Modern Frontend Development Workshop

HTML5 & CSS3

• Semantic Elements: https://www.w3schools.com/html/html5_new_elements.asp
• Flexbox vs Grid!: http://tutorialzine.com/2017/03/css-grid-vs-flexbox/
• Stylesheets pre-processor: SASS, LESS
• Helper tools: emmet, placehold.it

jQuery

• Tutorial: https://www.w3schools.com/jquery/
• Why CDN: https://gtmetrix.com/why-use-a-cdn.html

Virtual DOM

Vue.JS

• Docs: https://vuejs.org/v2/guide/
• Template Syntax: https://vuejs.org/v2/guide/syntax.html
• Data Driven vs. Dom Manipulation (example: 3 & 5)

Note: Vue.js can be replaced with Facebook React.

Package Manager & Module Bundler

• Package Manager: NPM, YARN
• Use package.json: https://docs.npmjs.com/getting-started/using-a-package.json
• Webpack: https://webpack.js.org/, Loaders: Docs, List
• Ecmascript 6: http://es6-features.org
• Babel: https://babeljs.io/

Advanced Vue.JS

• Single File Components: https://vuejs.org/v2/guide/single-file-components.html
• Global Event Bus: https://alligator.io/vuejs/global-event-bus/
• Server-Side Rendering: https://vuejs.org/v2/guide/ssr.html
• Vuex Store: https://nuxtjs.org/examples/vuex-store, persistedstate
• Nuxt Frameworks: https://nuxtjs.org/
• Vue Strap: bootstrap4 & vue2, bootstrap3 & vue1

Dealing with APIs

• Axios: https://github.com/mzabriskie/axios
• Nuxt AsyncData: https://nuxtjs.org/guide/async-data/