Đang tải... (xem toàn văn)
Lộ trình học Frontend từ cơ bản đến nâng cao dành cho những người có nền tảng cơ bản, lộ trình phù hợp với những người tự học nghiên cứu thêm hoặc đang mơ hồ không rõ định hướng. Lộ trình không phù hợp với toàn bộ mà chỉ là một cái nhìn chung tổng thể về phía trước.
Personal Recommendation / Opinion For resources and other roadmaps Alternative Option - Pick this or purple https://roadmap.sh Order in roadmap not strict (Learn anytime) Are you just getting started? I wouldn't recommend Front-end Visit the Beginner Version How does the internet work? Internet What is HTTP? Learn the basics What is Domain Name? Writing Semantic HTML HTML What is hosting? Forms and Validations DNS and how it works? Accessibility Browsers and how they work? SEO Basics Git CSS Learn the basics Learn the Basics Making Layouts Learn DOM Manipulation Version Control Systems VCS Hosting Fetch API / Ajax (XHR) Responsive Design GitHub JavaScript GitLab Bitbucket We have trimmed down the CSS part for the sake of brevity However, I would recommend reading about CSS in JS, React CSS Modules, Styled Components, Vanilla Extract, Panda CSS and look into di!erent frameworks with pre-built components npm Vue.js pnpm such as MUI, daisyUI, Chakra UI and Mantine Angular CSS Architecture Writing CSS BEM Tailwind Svelte Radix UI Solid JS yarn Pick a Framework CSS Preprocessors Package Managers Vite Parce esbuild Webpack Webpack Webpack Qwik Rollup Rollu Shadcn UI Sass Module Bundlers PostCSS Task Runners npm scripts Linters and Formatters Prettier Build Tools Parcel Parce ESLint Authentication Strategies Testing your Apps Vitest JWT, OAuth, SSO, Basic Auth, Session Auth etc Jest Web Security Basics CORS HTTPS Playwright Learn the di!erence between Unit, Integration, and Functional tests and learn how to write Content Security Policy Cypress them with the tools listed on the right OWASP Security Risks Next.js React HTML Templates Web Components Custom Elements Shadow DOM Type Checkers Remix Angular Universal Vue.js Nuxt.js Svelte Svelte Kit TypeScript Server Side Rendering (SSR) Storage PRPL Pattern Web Sockets RAIL Model Server Sent Events Performance Metrics Service Workers Using Lighthouse Location Using DevTools Notifications Calculating, Measuring Device Orientation and improving performance Payments Apollo Relay Modern Progressive Web Apps APIs used in PWAs Static Site Generators Vuepress Astro Jekyll Eleventy Hugo Next.js Nuxt.js Remix Performance Best Practices Credentials Learn di!erent Web GraphQL Electron Tauri Flutter Bonus Content Mobile Applications Desktop Applications React Native Flutter Ionic NativeScript Continue Learning with following relevant tracks TypeScript Roadmap Node.js Roadmap