Skip to content

rubythonode/2018-front-end-curriculum

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 

Repository files navigation

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

About

2018 Front-End Curriculum

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published