chdaud78/front-end-curriculum

2020 Front-End Curriculum

2020 front-end curriculum

---

STEP 1. JavaScript Programming

contents
Fundamentals - Development tool (VSCode) - unix basic command - git / github
Node.JS - npm project - package.json & module dependencies - Modules & CommonJS - VSCode node debugging
JavaScript Syntax - type, string, scope(let,const,var), operator, switch, iterator, condition.. - ES 2015+ features (destructuring, const, let, arrow, spread operator, for-of)
Function - declaration and expression - arguments, parameter - calling stack - arrow function
Function based programming design - subroutine - rest parameter, default parameter - destructuring - recursion - pure function
Collection - handling JavaScript data structures - Array (APIs, higher-order functions) - Object (Object literal, Handling Object property) - Set & Map
String - String manipulation, methods - Regular Expressions
Asynchronous basic - setTimeout - JS stack & callback queue & event loop
Clean code - software maintenance - maintainable code, readable code - coding convention
debugging - JavaScript Errors - Error handling - VSCode or Chrome dev tools(source, console) debugging
OOP programming - Object-Oriented Programming - SOLID - ES Classes and instance(object) - prototype & Inheritance & Class Extends - object literal pattern - this, bind, apply, call
Unit test basic - unit test basic - make simple test library
Algorithm training - complexity, - stack, queue - recursion

STEP 2. Browser Web development Basic

contents
Understanding HTTP - Web Architecture - Resource & URL
Browser & Server - How browser works - How server works (Node.JS simple server) - request & response - HTTP (header, method, status, cookie, session)
HTML - HTML structured design - semantic tags - Class and ID properties - HTML debugging(Chrome Dev tools)
CSS - style properties - cascading - Inheritance - selector - layout (float, position, boxmodel, flex) - CSS debugging(Chrome Dev tools)
DOM Manipulation - HTML & DOM - DOM properties & method - DOM manipulation(append, delete, move..)
Functional Programming - compose & combinator - currying & partial application - iterator & generator - lazy evaluation - monad & error handling - functional asynchronous handling
HTML Templating - templating strategies - template literal
Asynchronous communication - Fetch API - XMLHttpRequest - JSON handling - Promise pattern - Cross-domian (SOA, CORS, JSONP)
Functional Programming - scope and closure - partial, currying - Immutability - pipeline & combinator - iteration protocol (for-of, generator) - Monad(Either..)
UI Unit test - DOM, Asynchronous test - Using Test library (Jest, Mocha)
Web Animations - understanding web animations - Browser Rendering pipeline - CSS property( keyframe, transition, transform) - requestAnimationFrame & requestIdleCallback
UI Components - Slide UI (infinite sliding) - Tab UI - Search-bar auto-completion - Reusable Component Design
Web Service Application Architecture - Modular programming (ES Modules) - Project structure for Web services
Back-End application Basic(nodeJS) - Express - URL Routing and HTTP Response - template engine & Server-side rendering - Building a RESTful API
UX programming - thinking. - UX improving programming.

STEP3. Browser Web development Advanced

contents
CSS Advanced - Layout (CSS Grid layout) - preprocessor (Sass) - Responsive Web Design - CSS Typed Object Model
Mobile Web - touch events - swipe gesture interaction - mobile web debugging
Performance & UXable technique - dynamic & mixed animation handling - throttling & debounce - minimizing browser reflow - Lazy loading - Performance diagnosis (with Chrome Dev tools)
HTTP - File-Uploader & Mulipart formdata - session - token based authentication & jwt
Asynchornous technique - promise APIs - generator - Async/await - Erros handling
TypeScript - Types - union, interface, generics, Enums, Classes, Functions
Front-End Build - NPM script - build(webpack, parcel) - Transpiling (babel) - setup development & production
SPAs - Understanding SPAs - history API & URL Routing - fetch and indicator - data cache & localStroage & KVStorage - module depencies management (Observer pattern)
React Basic - background & philosophy - Renderng flow - React features - virtual DOM concepts - states & props - Styling (styled components, material UI...) - Hooks API - JSX Syntax - CRA based projects (step by step) - Hooks based component design
React Advanced - state management (Flux Architecture) - useReduce, useContext - Optimization technique (React.memo, useCallbackm, useMemo, Suspense, Lazy) - Concurrent mode - React Test (Jest & React testing library) - SSR
Progressive Web Apps - Service worker - Fetch API - Cache API and Cache strategy - offline - push notification and push API

{I LOVE CODESQUAD } 😎