crongro / Front End Curriculum
2021 Front-End Curriculum
Stars: ✭ 248
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
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
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
Ros robotics projects
Example codes of new book ROS Robotics Projects
Stars: ✭ 240 (-3.23%)
Mutual labels: learning
Bootcamp python
Bootcamp to learn Python for Machine Learning
Stars: ✭ 228 (-8.06%)
Mutual labels: learning
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].