{"id":63,"date":"2023-04-15T10:24:06","date_gmt":"2023-04-15T02:24:06","guid":{"rendered":"https:\/\/www.qzdd.net\/?p=63"},"modified":"2023-04-15T10:24:06","modified_gmt":"2023-04-15T02:24:06","slug":"front-roadmap","status":"publish","type":"post","link":"https:\/\/www.qzdd.net\/?p=63","title":{"rendered":"\u524d\u7aef\u8def\u7ebf\u56fe"},"content":{"rendered":"\n

\u4ee5\u4e0b\u524d\u7aef\u6280\u672f\u8def\u7ebf\u56fe\u662f\u6765\u81eaGitHub\u975e\u5e38\u706b\u7206\u7684develop-roadmap<\/a>\u9879\u76ee\u3002<\/p>\n\n\n\n

\u539f\u94fe\u63a5\uff1ahttps:\/\/roadmap.sh\/frontend<\/a><\/p>\n\n\n\n

\u6700\u4e0b\u9762\u6709\u522b\u4eba\u7ffb\u8bd1\u7684\u7e41\u4f53\u4e2d\u6587\u7248<\/a><\/p>\n\n\n\n

<\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/rect>Desktop Applications<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Electron<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Bonus Content<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Tauri<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/rect>Linters and Formatters<\/tspan><\/text><\/g><\/rect>Prettier<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>ESLint<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/rect>yarn<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/rect>HTML<\/tspan><\/text><\/g>Front-end<\/tspan><\/text><\/g><\/rect>Learn the basics<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Writing Semantic HTML<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Forms and Validations<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Conventions and Best Practices<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>CSS<\/tspan><\/text><\/g><\/rect>Floats<\/tspan><\/text>Positioning<\/tspan><\/text>Display<\/tspan><\/text>Box Model<\/tspan><\/text>CSS Grid<\/tspan><\/text>Flex Box<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Learn the basics<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Making Layouts<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>For resources and other roadmaps<\/tspan><\/text>https:\/\/roadmap.sh<\/tspan><\/text><\/g><\/rect>Visit the Beginner Version<\/tspan><\/text><\/g>Are you just getting started?<\/tspan><\/text><\/rect>Responsive design and Media Queries<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>JavaScript<\/tspan><\/text><\/g><\/rect>Syntax and Basic Constructs<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Learn DOM Manipulation<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Hoisting, Event Bubbling, Scope,<\/tspan><\/text>Prototype, Shadow DOM, strict<\/tspan><\/text>Understand the concepts<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Learn Fetch API \/ Ajax (XHR)<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>ES6+ and modular JavaScript<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Internet<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>How does the internet work?<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>What is HTTP?<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Browsers and how they work?<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>DNS and how it works?<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>What is Domain Name?<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>What is hosting?<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Accessibility<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>SEO Basics<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Basic Usage of Git<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>GitHub<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Repo hosting services<\/tspan><\/text>Create account and Learn to use GitHub<\/tspan><\/text><\/g><\/rect>Version Control Systems<\/tspan><\/text>What are they and why you should use one<\/tspan><\/text><\/g><\/rect>Package Managers<\/tspan><\/text><\/g><\/rect>npm<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Bitbucket<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>GitLab<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Web Security Knowledge<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect><\/circle><\/circle><\/path>Personal Recommendation \/ Opinion<\/tspan><\/text>I wouldn’t recommend<\/tspan><\/text><\/circle>Order in roadmap not strict (Learn anytime)<\/tspan><\/text><\/circle><\/circle><\/path>Alternative Option – Pick this or purple<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect><\/rect>CORS<\/tspan><\/text><\/g><\/rect>HTTPS<\/tspan><\/text><\/g><\/rect>Content Security Policy<\/tspan><\/text><\/g><\/rect>OWASP Security Risks<\/tspan><\/text><\/g>Get at least a basic knowledge of all of these<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/path><\/path><\/path><\/path><\/rect>CSS Preprocessors<\/tspan><\/text><\/g><\/path><\/path><\/path><\/rect>CSS Architecture<\/tspan><\/text><\/g><\/rect>BEM<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/path><\/path><\/rect>Build Tools<\/tspan><\/text><\/g><\/path><\/path><\/rect>Task Runners<\/tspan><\/text><\/g><\/path><\/rect>npm scripts<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/path><\/path>Webpack<\/tspan><\/text><\/rect>Webpack<\/tspan><\/text><\/circle><\/circle><\/path><\/g>Rollup<\/tspan><\/text><\/rect>Rollup<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g>Parcel<\/tspan><\/text><\/rect>Parcel<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Module Bundlers<\/tspan><\/text><\/g><\/path><\/rect>Pick a Framework<\/tspan><\/text><\/g><\/rect>React<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Angular<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Vue.js<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/path><\/rect>Modern CSS<\/tspan><\/text><\/g><\/path><\/path><\/rect>Styled Components<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>CSS Modules<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/path><\/path><\/rect>Emotion<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Apollo<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Static Site Generators<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>GatsbyJS<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Next.js<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Nuxt.js<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Vuepress<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Jekyll<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>CSS Frameworks<\/tspan><\/text><\/g><\/rect>CSS first frameworks<\/tspan><\/text>that don’t come with<\/tspan><\/text>JS framework<\/tspan><\/text>components by default.<\/tspan><\/text><\/g><\/rect>Bootstrap<\/tspan><\/text><\/g><\/rect>Bulma<\/tspan><\/text><\/g><\/rect>You can fill all your testing<\/tspan><\/text>needs with just these.<\/tspan><\/text><\/g><\/rect>react-testing-library<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Jest<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Cypress<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Testing your Apps<\/tspan><\/text>and <\/tspan>Functional<\/tspan> tests and learn how to write<\/tspan><\/text>them with the tools listed on the right.<\/tspan><\/text>Learn the difference between <\/tspan>Unit<\/tspan>, <\/tspan>Integration<\/tspan>, <\/tspan><\/text><\/g><\/rect>Type Checkers<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>TypeScript<\/tspan><\/text><\/circle><\/circle><\/path><\/circle><\/circle><\/path><\/g><\/rect>Progressive Web Apps<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect><\/rect>Service Workers<\/tspan><\/text><\/g><\/rect>Storage<\/tspan><\/text><\/g><\/rect>Location<\/tspan><\/text><\/g><\/rect>Notifications<\/tspan><\/text><\/g><\/rect>Device Orientation<\/tspan><\/text><\/g><\/rect>Payments<\/tspan><\/text><\/g><\/rect>Credentials<\/tspan><\/text><\/g><\/rect>Web Sockets<\/tspan><\/text><\/g>Learn different Web<\/tspan><\/text>APIs used in PWAs<\/tspan><\/text><\/circle><\/circle><\/path><\/rect>Server Sent Events<\/tspan><\/text><\/g><\/rect><\/rect>PRPL Pattern<\/tspan><\/text><\/g><\/rect>RAIL Model<\/tspan><\/text><\/g><\/rect>Performance Metrics<\/tspan><\/text><\/g><\/rect>Using Lighthouse<\/tspan><\/text><\/g><\/rect>Using DevTools<\/tspan><\/text><\/g>Calculating, Measuring<\/tspan><\/text>and improving performance<\/tspan><\/text><\/circle><\/circle><\/path><\/rect>Server Side Rendering (SSR)<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>React<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Next.js<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Angular<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Universal<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Vue.js<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Nuxt.js<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Mobile Applications<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>React Native<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>NativeScript<\/tspan><\/text><\/g><\/rect>Flutter<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Hugo<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Ionic<\/tspan><\/text><\/g><\/rect>GraphQL<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Relay Modern<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Web Components<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>HTML Templates<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Custom Elements<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Shadow DOM<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>PostCSS<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Sass<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Styled JSX<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g>Webpack<\/tspan><\/text><\/rect>esbuild<\/tspan><\/text><\/circle><\/circle><\/path><\/g>Parcel<\/tspan><\/text><\/rect>Vite<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect><\/circle><\/circle><\/path>Eleventy<\/tspan><\/text><\/g><\/rect>pnpm<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Svelte<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Solid JS<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Playwright<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Remix<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Remix<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Flutter<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Astro<\/tspan><\/text><\/circle><\/circle><\/path><\/g><\/rect>Svelte<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Svelte Kit<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Authentication Strategies<\/tspan><\/text><\/circle><\/circle><\/path>JWT, OAuth, SSO, Basic Auth, Session Auth etc<\/tspan><\/text><\/g><\/rect>JS based and better to use with your<\/tspan><\/text>framework based JavaScript apps.<\/tspan><\/text><\/g><\/rect>Tailwind<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Material UI<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Mantine<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Radix UI<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Chakra UI<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>DaisyUI<\/tspan><\/text><\/circle><\/circle><\/circle><\/path><\/g><\/rect>Continue Learning with following relevant tracks<\/tspan><\/text><\/rect>Node.js Roadmap<\/tspan><\/text><\/g><\/rect>TypeScript Roadmap<\/tspan><\/text><\/g><\/path><\/rect>Performance Best Practices<\/tspan><\/text><\/g><\/svg><\/p>\n\n\n\n

\u7e41\u4f53\u4e2d\u6587\u7248\u94fe\u63a5\uff1ahttps:\/\/github.com\/goodjack\/developer-roadmap-chinese<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

\u4ee5\u4e0b\u524d\u7aef\u6280\u672f\u8def\u7ebf\u56fe\u662f\u6765\u81eaGitHub\u975e\u5e38\u706b\u7206\u7684develop-roadmap\u9879\u76ee\u3002 \u539f\u94fe\u63a5\uff1ahttps:\/\/r […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[54,71,91],"class_list":["post-63","post","type-post","status-publish","format-standard","hentry","category-front-end","tag-roadmap","tag-71","tag-91"],"_links":{"self":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts\/63","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=63"}],"version-history":[{"count":0,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts\/63\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=63"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=63"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}