蔬菜类网站建设规划书,如何做网络营销方案,手机网站开发多少钱,企业首次建设网站的策划流程2020 前端学习路线总结在 GitHub 看到一个很不错的前端学习路线图#xff08;roadmap#xff09;#xff0c;从前端基础到前端工程化#xff0c;再到跨端#xff0c;都有知识点的覆盖#xff0c;非常推荐阅读。图下面是我翻译的一个文字版#xff0c;可以先看图再看文字…2020 前端学习路线总结在 GitHub 看到一个很不错的前端学习路线图roadmap从前端基础到前端工程化再到跨端都有知识点的覆盖非常推荐阅读。图下面是我翻译的一个文字版可以先看图再看文字。 ✔︎ 表示个人推荐学习 ✔︎ 表示可选择学习 ✔︎ 表示不需要严格按照路线的先后顺序可在任何时间补充这一块的知识 ✘ 表示个人不再推荐 计算机网络掌握计算机网络的基础是一名前端工程师的基本素养建议先学习以下的知识✔︎ Internet 如何工作✔︎ HTTP 协议✔︎ 浏览器工作机制✔︎ DNS 及其运行机制✔︎了解域名、网站托管HTML✔︎ 学习 HTML 基础标签、元素、表单验证等等✔︎ 语义化标签✔︎ 了解 Web 无障碍Accessibility✔︎ 学习 SEO 优化CSS✔︎ 学习 CSS 基础✔︎ 制作布局浮动、定位、显示、盒模型、网格布局、弹性布局✔︎ 响应式设计和媒体查询media✔︎ 结合 HTML 制作一个简单的网页作为最佳实践JavaScript✔︎ 学习语法和基本结构✔︎ 学习操作 DOM✔︎ 学习 Fetch API / AjaxXHR✔︎ ES6 和模块化 JavaScript✔︎ 了解变量提升、事件冒泡机制、作用域、原型、Shadow DOM、严格模式等概念版本控制✔︎ Git 的基本操作✔︎ 创建账号并且学习使用 GitHub✔︎ 创建账号并且学习使用 GitLabWeb 安全知识✔︎ HTTPS✔︎ 内容安全策略CSP✔︎ 跨域资源共享✔︎ OWASP 安全风险上面的内容是前端最基础的部分建议多花时间掌握好每一个知识点。从这开始将进入前端工程化的部分你可能会接触到很多种不同的框架并学习使用多种的工具为自己的开发提效。包管理工具npm 和 yarn 都很好选择一个学习即可他们两是相似的✔︎ npm✔︎ yarnCSS 构架通过使用现代的 CSS 框架和 CSS-in-JS 的书写方式不用再担心 CSS 的构架问题但熟悉 BEM 规范是一个不错的选择。✔︎ BEM一种书写规范✘ OOCSS✘ SMACSSCSS 预处理器以下三个可选择一个进行学习。✔︎ SCSS✔︎ PostCSS✔︎ Less构建工具任务执行器✔︎ npm scripts✘ Gulp2.代码检查和格式化工具✔︎ Prettier 代码格式化✔︎ ESLint 代码检查✘ StandardJS3.模块打包✔︎ Webpack✔︎ Rollup✔︎ Parcel前端框架前端框架推荐先学习 React能理解函数式编程和组件化。Vue 的特点是上手快中文文档齐全可以选择性的学习。✔︎ React.js✔︎Redux✔︎ MobX2.✔︎ Vue.jsVueX3.✔︎ AngularRxJSNgRx现代 CSS✔︎ Styled Component✔︎ CSS Module✔︎ Styled JSX✔︎ Emotion✘ Radium✘ GlamorouWeb 组件✔︎ HTML 模版✔︎ 自定义元素✔︎ Shadow DOMCSS 框架CSS 框架有两种一种是基于 JavaScript 框架开发的应用程序。推荐的框架有✔︎ Reactstrap✔︎ Material UI✔︎ TailWind CSS✔︎ Chakra UI另外一只是纯 CSS 框架默认和不和 JavaScript 组件一起使用。✔︎ BootStrap✔︎ Materialize CSS✔︎ Bulma测试在这里你需要学习使用下面的框架进行单元、集成和功能测试。✔︎ Jest✔︎ react-testing-library✔︎ Cypress✔︎ Enzyme类型检查器✔︎✔︎ TypeScript✘ Flow上面是前端工程化的学习内容接下来的内容涉及到性能、服务端渲染以及跨端这一部分前端也叫被称作「大前端」。PWA✔︎ 学习 PWA 中使用到的 Web APIStorageWeb SocketsService Workers定位通知设备方向支付、证书等等2.✔︎计算、测量以及提高性能PRPL 模式RAIL 模式性能指标学习使用 LightHouse学习使用 DevTools服务端渲染✔︎ Next.js React.js✔︎ Nuxt.js Vue.js✔︎ UniversalAngular✔︎ GraphQL✔︎ Apollo✔︎ Relay Modern✔︎ 静态网站生成✔︎ Next.js✔︎ GatsbyJS✔︎ Nuxt.js✔︎ Vuepress✔︎ JekyII✔︎ Hugo✔︎ 移动端应用开发✔︎ ReactNative✔︎ Flutter✔︎ 桌面应用开发✔︎ Electron✔︎ Carlo✔︎ Proton Native✔︎ WebAssembly总结完毕不由得感叹前端生态真是丰富多彩要学的东西很多自己不懂的也很多有些知识点也是浅尝辄止。虽然有这么多的方向但还是需要找到一个点能够深挖。如果你是前端的初学者也不要被这些框架给吓到学好基础然后加以实践更为重要。上面推荐的 Roadmap GitHub 仓库里也有后端以及 DevOps 的学习路线可以自行浏览如果有时间我也会整理出一版文字版以供大家参阅。Keep Learning持续精进。web的前端最详细的web前端学习攻略直接收藏吧zhuanlan.zhihu.com作者mydev链接https://juejin.im/post/6895203865336119304来源掘金
