All Projects → crongro → Front End Curriculum

crongro / Front End Curriculum

2021 Front-End Curriculum

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Front End Curriculum

Front End Roadmap
Tell you how to learn front end development ~
Stars: ✭ 1,070 (+331.45%)
Mutual labels:  learning, roadmap, front-end
Learning Roadmap
The Front-End Developer Learning Roadmap by Frontend Masters
Stars: ✭ 336 (+35.48%)
Mutual labels:  learning, roadmap, front-end
Front End Handbook 2018
2018 edition of our front-end development handbook
Stars: ✭ 4,172 (+1582.26%)
Mutual labels:  learning, front-end
frontendQuickbytes
A repo containing real life frontend challenges which you can use to practice frontend!
Stars: ✭ 129 (-47.98%)
Mutual labels:  learning, front-end
CppDeveloperRoadmap
Roadmap for learning the C++ programming language for beginners and experienced devs.
Stars: ✭ 1,048 (+322.58%)
Mutual labels:  learning, roadmap
Android Developer Roadmap
Android Developer Roadmap - A complete roadmap to learn Android App Development
Stars: ✭ 2,170 (+775%)
Mutual labels:  learning, roadmap
Pinecoders.github.io
PineCoders Web Site
Stars: ✭ 30 (-87.9%)
Mutual labels:  learning, roadmap
Frontend Developer Roadmap
📘 Front-end developer roadmap in 2021. This repository aims to collect the most important concepts of front-end.
Stars: ✭ 233 (-6.05%)
Mutual labels:  roadmap, front-end
Learningrecord
学习资料汇总、阅读记录,持续学习,每天进步一点点.🏫🏫
Stars: ✭ 95 (-61.69%)
Mutual labels:  learning, front-end
Fed Note
我是Mokou, 📘 这里是写前端博客和备忘学习的地方。Vue3 源码解析连载中。喜欢请Star。
Stars: ✭ 180 (-27.42%)
Mutual labels:  learning, front-end
Howtobeaprogrammer
A guide on how to be a Programmer - originally published by Robert L Read
Stars: ✭ 14,912 (+5912.9%)
Mutual labels:  learning
Java8 Tutorial
Modern Java - A Guide to Java 8
Stars: ✭ 15,276 (+6059.68%)
Mutual labels:  learning
Ros robotics projects
Example codes of new book ROS Robotics Projects
Stars: ✭ 240 (-3.23%)
Mutual labels:  learning
Learntla
A TLA+ guide
Stars: ✭ 241 (-2.82%)
Mutual labels:  learning
Bootcamp python
Bootcamp to learn Python for Machine Learning
Stars: ✭ 228 (-8.06%)
Mutual labels:  learning
Rebble Store
Pebble app store replacement.
Stars: ✭ 240 (-3.23%)
Mutual labels:  front-end
Learn
A social network of lifelong learners built around humanity's universal learning map.
Stars: ✭ 224 (-9.68%)
Mutual labels:  learning
Wasm By Example
Wasm By Example is a website with a set of hands-on introduction examples and tutorials for WebAssembly (Wasm)
Stars: ✭ 226 (-8.87%)
Mutual labels:  learning
Geostats.jl
An extensible framework for high-performance geostatistics in Julia
Stars: ✭ 222 (-10.48%)
Mutual labels:  learning
Mnemosyne
Mnemosyne: efficient learning with powerful digital flash-cards.
Stars: ✭ 243 (-2.02%)
Mutual labels:  learning

2021 front-end curriculum



2021 web front-end roadmap

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, closure, operator, switch, iterator, condition..
- ES2015+ features (destructuring, const, let, arrow, spread operator, for-of)
- New feature (Dynamic import, Nullish Coalescing, Optional Chaining)
Function
- declaration and expression
- arguments, parameter
- calling stack
- arrow function
Function based programming design
- subroutine
- rest parameter, default parameter
- destructuring
- recursion
- pure function
Collection
- JavaScript data structures
- Array (APIs, Higher-rder 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
- understanding testing (why software testing is important?)
Algorithm training
- complexity
- stack, queue
- recursion
- search algorithm
- sort

STEP 2. Browser Web Development Basic

contents
Understanding HTTP
- Web Architecture
- Resource & URL
Browser & Server
- How browser works (Browser render cycle)
- 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..)
- DOM traversal
Functional Programming
- pure function
- Immutability
- Function Compose & Combinator
- Closure
- 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)
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
Resuable UI Components
- Reusable Component Design
- Practices
- Slide UI (infinite sliding)
- Tab UI
- Search-bar auto-completion
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
- Performance Diagnosis & Analysis
- Dynamic & mixed animation handling
- Throttling & Debounce
- Minimizing browser reflow
- Lazy loading
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)
- Development & Production mode
SPAs
- Understanding SPAs
- URL Routing & History API
- Fetch and Indicator
- Cache & localStroage
- Observer pattern
React Basic
- background & philosophy
- Renderng flow
- React features
- Virtual DOM concepts
- states & props

- Styling (CSS-in-JS)

- Hooks API
- JSX Syntax
- CRA based projects (step by step)
- Hooks based Component Design
React Advanced
- state management (Flux Architecture)
- useReducer, 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
Web Multimedia APIs
- Audio, Video Element
- Web Socket
- WebRTC
- Canvas, WebGL, SVG
- Web Audio API
- Web MIDI API

{CODESQUAD } 😎

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].