/DeftCode-s-Front-end-Schedule

Front-end schedule providing good direction of personal development.

DeftCode's Front-end Schedule (Version 1.0)

Introduction:

Goal of this schedule is to help new front-end developers keep learning in a good and consistent way and to help veterans of front-end development to systematize already obtained knowledge. Feel free to make pull request in order to improve this schedule.

Table of contents:

1. FUNDAMENTALS: HTML Fundamentals, CSS Fundamentals, JavaScript Fundamentals, Design Fundamentals, Version Control

2. BASICS: Web and browsers, CSS Basics, JavaScript Basics, jQuery Basics, Tools and workflow, Usability and accessibility, UI/UX

3. ADVANCED: CMS/SSG, HTML5 API, Advanced CSS, Advanced JavaScript, Advanced jQuery

4. BEYOND ADVANCED: Expert JavaScript, Scalable Vector Graphic (SVG), Other

1. FUNDAMENTALS

HTML Fundamentals

  • History of HTML
  • Fundamentals (Elements, attributes)
  • Semantic markup
  • Best practices and styleguide

CSS Fundamentals

  • History of CSS
  • Fundamentals (Selectors, properties)
  • Resets and normalizers
  • Box-model
  • Best practices and styleguide

JavaScript Fundamentals

  • Variables and functions (Hoisting)
  • Data structures
  • Object-oriented JavaScript and "this"
  • First-class functions
  • Scopes and closures (IIFE)
  • Types and grammar
  • Node.js basics
  • JSON
  • Best practices and styleguide

Design Fundamentals

  • Desktop design principles
  • Mobile design principles
  • Responsive design (Including mobile first)

Version Control

  • Git (Basic commands like init, add, commit, branch, merge, rebase and common workflows and collaboration)
  • Github/Bitbucket/Gitlab

2. BASICS

Web and browsers

  • HTTP actions
  • Request/response headers
  • DOM
  • BOM and browser events
  • DNS
  • Web hostings
  • TCP/IP
  • SSL/TSL

CSS Basics

  • Floats
  • Clearing techniques
  • Transitions and animations
  • Translations
  • Preprocessors (Sass, Less, Stylus)
  • Performance

JavaScript Basics

  • ES5
  • AJAX
  • Prototypal inheritance
  • Design patterns
  • Performance

jQuery Basics

  • Fundamentals
  • Performance and good practices

Tools and workflow

  • Progressive enchancement
  • Graceful degradation
  • Task runners (Gulp, NPM, Grunt, Webpack)
  • Editors (Sublime Text, Webstorm)
  • CDNs and asset delivery
  • Chrome Dev Tools
  • Client-side debugging
  • Command line
  • Package managers
  • Graphic tools (Photoshop/Illustrator)

Usability and accessibility

  • WAI-ARIA
  • WCAG 2.0

UI/UX

  • UX fundamentals
  • UI prototyping
  • UI architecture

3. ADVANCED

CMS/SSG

  • Content Management Systems (Wordpress, Drupal, Joomla)
  • Static Sites Generators (Jekyll, Metalsmith, Hexo)

HTML5 API

  • Canvas
  • Web audio
  • Web video
  • Geolocalization
  • Cookies
  • Session storage, local storage
  • WebRTC

Advanced CSS

  • Media queries
  • Methodologies (BEM, OOCSS, SMACSS)
  • Flexbox
  • Frameworks (Bootstrap, Foundation, SemanticUI, Materialize, Pure, Skeleton)
  • Webfonts and responsive typography

Advanced JavaScript

  • HTML templating (Handlebars, Jade)
  • Functional JS (Partial application, currying, immutable data)
  • Asynchronous JS (Callbacks, promises)
  • ES6
  • Typescript
  • API
  • Modules
  • Test-driven JavaScript

Advanced jQuery

  • Plugins and libraries

4. BEYOND ADVANCED

Expert JavaScript

  • Frameworks (Angular, React, Meteor)
  • Data visualization (D3, Three.js)

Scalable Vector Graphic (SVG)

  • Styling SVG
  • Limits of SVG

Other

  • Web components
  • Web sockets (Socket.io)
  • Offline caching
  • Client-side security
  • CORS
  • Mobile Development with Apache Cordova
  • Hybrid and native mobile development
  • Localization and internationalization
  • Cross-browser development and testing
  • Client-side performance
  • Headless browsers
  • SEO