2018 front-end curriculum
STEP 1. JavaScript Programming (with nodeJS)
| contents |
|---|
| IDE (with nodeJS) |
| Version control(Git) |
| Variables, Scope, Type, String |
| operator, switch, iterator, condition |
| Function - declaration and expression - arguments property & return - call stack |
| Array - Array - methods Object - Object - methods |
| Object literal pattern & this keyword |
| Function methods - bind, apply, call |
| String manipulation |
| Regular Expressions |
| Asynchronous basic. - setTimeout - nodeJS user Input |
| JavaScript clean code |
| JavaScript debugging - nodeJS debugging - Chrome dev tools(source, console panel) |
| programming design basic |
STEP 2. Browser Web development Basic
| contents |
|---|
| Understanding HTTP - Web architecture - URI - HTTP (header, method, status, cookie, session) |
| How Browser works |
| frontend-backend R&R |
| HTML - structured design - semantic tags - Class and ID properties |
| Scope and Closure |
| CSS- properties- selector- layout(float, position, boxmodel) |
| Debugging (with Chrome developer tools) - elements, networks panels |
| DOM Manipulation - traversal, append, delete, move |
| Event handling. - EventListener- Event object |
| Event handling. - delegation and bubbling/capturing |
| Event handling - keyboard control |
| HTML Templating - string replace. - understanding templating strategy |
| HTML Templating - Using library - ES2015 template literal |
| Style property handling |
| Ajax & JSON - Using XMLHttpRequest - CORS |
| Ajax-cache & localStorage |
| Object-oriented JavaScript - Prototype based design. |
| Module pattern |
| Understanding ES2015 - let, const, arrow Function - spread operator, rest parameter, destructuring - Classes, Proxy |
| Web animations - animation basic. - CSS3 animation (Transition and transform) - JavaScript & CSS3 animation control. - JavaScript animation |
| UI Component - Slide |
| UI Component - Tab UI |
| UI Component - Layer |
| UI Component - search bar auto-complete |
| Form control |
| Back-End application (nodeJS) - nodeJS web application and Express - URL Routing and HTTP Response - View Engine - APIs |
| Programming design advanced |
| UX programming thinking. |
STEP3. Browser Web development Advanced
| contents |
|---|
| CSS Layout - Flex, - CSS Grid layout |
| CSS Preprocessor - SASS |
| Responsive Web Design |
| Mobile Touch Events. |
| Mobile UI Component - Flicking UI (infinite-slide) |
| Using JavaScript library - jQuery, handlebar |
| Functional programming - reduce, partial, currying - compose, pipline - lodash.js |
| File-Uploader |
| design pattern - proxy - Observer - MVC - Inheritance |
| Asynchornous technique - Promise- generator - Async/await |
| UI Unit test - How to write UI Unit test - Using Mocha - Using Mock |
| Front-End Build - NPM - Webpack build - Transpiling |
| Debugging advanced |
| Understanding SPAs |
| SPAs - ES6 Modular Programming - Architecuture Design (like Flux Architecture) |
| SPAs - Resuable component - Routing & History API |
| Improved Usability - lazy loading - Ajax and indicator |
| Typescript. |
| JavaScript Frameworks overview |
| Web animation control - pause/resume - throttling - minimizing browser reflow |
| Code quality - linting |
| React framework - background & philosophy - Renderng flow. - React features - virtual DOM - components life cycles - states & props - JSX Syntax |
| React Practices - CRA based mini projects (step by step) - Write React Component - Higher order components - Presentational/Container components - immutable & shoouldComponentUpdate |
| React + Data flow(Redux) - Flux Architecture - Examples |
| React + Async - generator and Redux-saga |