Frontend Details Roadmap
This section provided details roadmap for beginers (internship level). Base on candidate skills, the roadmap can be changed to fit the need.
| STT | Phase | Est. Time | Details Roadmap | Important criteria | Evaluation criteria |
|---|---|---|---|---|---|
| 1 | Phase 1: Introduction to web development. 1. Project documentation: Syllabus and related documents. 2. How the web works 3. Which tools/language we use: HTML, CSS, JS, ReactJS/VueJS/Jhipster 4. Linux introduction, Git Basic, Figma | 1 week | 1. Create account, access resourse. 2. Documentation reading, understand what mentee will do through this project. - Prepare codes and documents assets. - Jira and work process. 3. IDE setup 4. Implements a basic HTML page, practice with website structure and git usage. Coding convention applied. | - How the web works, HTML, CSS, JS contribution. - Learning process, what mentee will do. - Version control, git and basic git usage and command. - Coding convention. | - Git - Basic HTML structure - Coding convention |
| Phase 2: HTML5, CSS3, JS6, TS 1. Advanced HTML5: structure, best pratice, DOM 2. Basic CSS3 3. Basic JS(ES6) 4. Typescript | 3-4 weeks | Start to implements figma design in HTML, CSS, JS. 1. HTML Basic & advanced - HTML structure - Tag - Multiple page website - Best practice through project and reviews - DOM 2. CSS basic - CSS property, selectors - Inline, internal and external CSS - CSS speccificity and inheritance - CSS box model - Browsers dev tools - CSS positioning and display - Media query and responsive - Combine CSS selector and selector priority - Flexbox - Grid 3. Javascript - Overview of JavaScript and its uses. - Understand how to work with a code editor and IDEs. - Basic syntax and data types in JavaScript - Variables and their scope (let, const) - Data types (string, number, boolean, null, undefined, symbol) - Operators and expressions, including arithmetic, comparison, and logical operators - Control structures like if/else statements and loops - Functions and their importance in JavaScript, including: + Function declaration and expression + Function scope and closures + Arrow functions and their syntax - Higher-order functions, including: + Passing functions as arguments to other functions + Returning functions from other functions - The map, filter, and reduce methods on arrays and their use with higher-order functions - Arrays and their methods - Object-oriented programming in JavaScript - Asynchronous: Promise, Async, Await - ESModules and CommonJS 4. Typescript - Introduction: what is ts and why - Project setup - Types: Primitive types, reference types, dynamic type, literal type - Array - Object - Alias - Casting - Class - Modules - Interface - Generic - Enum - Narrowing | 1. Coding convention. Git convention. 2. HTML structure, best practices 3. CSS: Understand how css works and apply it into HTML project. Detail skills will be listed in gitlab repository. 4. JS: Basic: Detail skills will be listed in gitlab repository. 5. Typescript basic: interface, type, ... | ||
| Phase 3: React/VueJS Basic(TS setup) 1. React(Hooks)/VueJS3 2. Routing 3. Authentication/Authorization 4. State managerment | 4-6 weeks | Implements figma design in ReactJS/VueJS(TS): * Reactivity system I. ReactJS 1. Introduction to React - Overview of React - React's core concepts and philosophy 2. Setting Up the Environment - Install Node.js and npm - Create a React application with Create React App - Explore the file structure 3. JSX (JavaScript XML) - Syntax and rules of JSX - Embedding expressions in JSX - JSX vs. React.createElement 4. Styling - Inline styles - CSS Modules - Styled-components or emotion - CSS-in-JS 4. Components - Function components vs. Class components - Component lifecycle methods - Component properties (props) - Component state management - 5. Handling Events - Event handling in React - Synthetic events - Event binding and methods 6. Conditional Rendering - Inline conditional expressions - Conditional rendering with if-else statements - Ternary operators and logical && operator 7. Lists and Keys - Rendering lists of elements - Using keys to identify elements 8. Forms and Controlled Components - Handling form inputs - Controlled vs. uncontrolled components - Form submission and validation 9. Lifting State Up - Sharing state between components - Callback functions and state lifting 10. Context API - Creating context - Using context in functional and class components - Context provider and consumer 11. Hooks - useState - useEffect - useContext - Custom hooks - useReducer 12. React Router - Setting up React Router - Creating routes - Navigating programmatically - Route parameters and query strings 13. State Management Libraries - Introduction to Redux and redux Toolkit - Actions, reducers, and store - Connecting React with Redux 14. Performance Optimization - React.memo - useMemo and useCallback - Code splitting and lazy loading - Suspense 15. Error Boundaries - Creating error boundaries - Handling JavaScript errors in components 16. Testing (Optional) - Testing components with Jest - Testing library or Enzyme - Snapshot 18. Build and Deployment - Building for production 19. Advanced Patterns and Concepts - Higher-order components (HOCs) - Render props - React Profiler 20. Integration with Backend - HTTP/HTTPS in depths - Understand how api works - Fetching data with fetch API or Axios - Handling asynchronous operations - Integrating with RESTful APIs or GraphQL 21. Progressive Web Apps (PWAs) - Making a React app a PWA - Service workers and caching 22. Server-Side Rendering (SSR) - Introduction to Next.js or similar frameworks - Static site generation (SSG) vs. SSR) 23. TypeScript with React - Setting up TypeScript - Typing props and state - TypeScript with functional and class components 24. Internationalization (i18n) - Adding multi-language support - Libraries for internationalization (e.g., react-i18next) 25. Accessibility - Improving accessibility (a11y) in React applications - ARIA roles and attributes II. VueJS 1. Introduction to Vue.js - Overview of Vue.js - Vue.js core concepts and philosophy 2. Setting Up the Environment - Install Node.js and npm - Create a Vue application with Vue CLI - Explore the file structure 3. Vue.js Fundamentals - Vue instance - Vue lifecycle hooks - Vue directives (v-bind, v-model, v-if, v-for, v-show, ...) 4. Templates and JSX - Vue template syntax - Using JSX with Vue (optional) 4. Styling - Scoped styles - Using CSS Modules - Styled components or CSS-in-JS libraries (e.g., vue-styled-components) 5. Components - Creating and using components - Props and events - Component lifecycle hooks - Component slots (default and named slots) 6. Data Binding - One-way data binding - Two-way data binding with v-model - Computed properties and watchers 7. Event Handling - Handling user input and events - Event modifiers - Custom events and event bus 8. Directives - Built-in directives (v-if, v-else, v-for, v-show, ...) - Custom directives 9. Vue Router - Setting up Vue Router - Creating routes - Route parameters and query strings - Navigation guards 10. State Management - Introduction to Vuex or Pinia - State, mutations, actions, and getters - Modules and namespacing - Integration with Vue components 11. Vue CLI and Build Tools - Vue CLI overview and commands - Project configuration (vue.config.js) - Code splitting and lazy loading 12. Forms and Validation - Handling form inputs - Custom form validation - Using libraries for validation (e.g., VeeValidate) 13. Mixins and Composition API - Using mixins for code reuse - Introduction to Composition API - Using reactive, ref, computed, and watch in Composition API - Creating and using custom hooks 14. Lifecycle Hooks - Understanding Vue lifecycle hooks - Using hooks in both Options API and Composition API 15. Directives and Plugins - Creating custom directives - Using and creating Vue 16. Performance Optimization - Optimization techniques (lazy loading, code splitting) - Vue's performance features (v-once, v-memo, etc.) 17. Testing - Testing components with Vue Test Utils and Jest - End-to-end testing with Cypress or similar tools - Snapshot testing 18. Build and Deployment - Building for production 19. Internationalization (i18n) - Adding multi-language support - Libraries for internationalization (e.g., vue-i18n) 20. Accessibility - Improving accessibility (a11y) in Vue applications - ARIA roles and attributes 21. Server-Side Rendering (SSR) - Introduction to Nuxt.js or similar frameworks - Static site generation (SSG) vs. SSR 22. TypeScript with Vue - Setting up TypeScript in Vue - Typing props, data, and methods - TypeScript with Composition API and Vuex 23. Progressive Web Apps (PWAs) - Making a Vue app a PWA - Service workers and caching 24. Advanced Patterns and Concepts - Render functions and functional components - Advanced component patterns | Implements figma design in ReactJS/VueJS(TS): Evaluate the following: * ReactJS/VueJS vs static page * Coding convention * Understand how API works and overall system design when developt a ReactJS/VueJS application. * Understand authentication, authorization. JWT, Sessions, Oauth * HTTP/HTTPS * Calling APIs: fetch xhr, axios * Docker usage basic, running API assets in docker * Solving problems skill I. ReactJS 1. Virtual DOM, JSX, hooks, components, props, lyfecyrcle... 2. routing, layout with outlet, move between pages 3. Integrate APIs: getting data and transform data 4. React context, redux toolkit: implements store II. VueJS 1. Virtual DOM, template, slot, props, lyfecircle, ... 2. routing, layout with vuejs-router, move between pages 3. Integrate APIs 4. Pinia: implement store | ||
| Phase 4: Micro-frontend & Jhipster 1. Micro-frontend 2. Jhipster & Jhipster micro-frontend | 1-2 weeks | Continue Implements figma design in ReactJS/VueJS: - Webpack config basic - Basic understanding microfontend - Code generate with Jhipster - Integrate a microfontend webpage from Jhipser into previos project. | |||
| Phase 5: Training project 1. Ecommerce website |