避坑网-技术改善未来!
📢公告:
路线图资源已添加文本列表形式,方便复制及后续添加资源链接!

前端Frontend

一步步成为2021年前沿的前端开发者

编写路线图 提改进建议

推荐指数:r1-建议 r2-备选 r3-选学 r4-不推荐

资源列表:

  • 119
    1 互联网
  •   
    121
    1.1 互联网是如何工作的? r1
  •   
    123
    1.2 什么是HTTP? r1
  •   
    125
    1.3 浏览器运行机制? r1
  •   
    127
    1.4 DNS及其运行机制 r1
  •   
    129
    1.5 什么是域名? r1
  •   
    131
    1.6 什么是网站托管? r1
  • 149
    2 HTML
  •   
    75
    2.1 学习HTML基础 r1
  •   
    77
    2.2 写一个语义化的HTML r3
  •   
    117
    2.3 表单和验证 r1
  •   
    80
    2.4 惯例和最佳实践 r1
  •   
    133
    2.5 可访问性 r3
  •   
    135
    2.6 SEO基础 r3
  • 150
    3 CSS
  •   
    84
    3.1 学习CSS基础 r1
  •   
    86
    3.2 制作布局 r1
  •      
    87
    3.2.1 浮动 r1
  •      
    90
    3.2.2 定位 r1
  •      
    91
    3.2.3 显示 r1
  •      
    92
    3.2.4 Box盒模型 r1
  •      
    93
    3.2.5 网格布局 r1
  •      
    94
    3.2.6 弹性布局 r1
  •   
    89
    3.3 响应式设计和媒体查询 r1
  •   
    705
    3.4 ps基础及原型设计工具等 r3
  • 151
    4 JavaScript
  •   
    97
    4.1 JS基础语法和结构 r1
  •   
    99
    4.2 学习DOM操作 r1
  •   
    721
    4.3 javascript面向对象编程 r1
  •   
    105
    4.4 学习 Fetch API / Ajax (XHR) r1
  •   
    107
    4.5 ES6+ 和模块化 JavaScript r1
  •   
    774
    4.6 理解概念变量提升,事件冒泡, 作用域,原型, Shadow DOM, 严苛模式 r1
  • 144
    5 版本控制系统
  •   
    137
    5.1 Git的基本使用 r1
  •   
    141
    5.2 仓库托管服务
  •      
    139
    5.2.1 GitHub r1
  •      
    162
    5.2.2 GitLab r1
  •      
    159
    5.2.3 Gitee码云 r1
  • 165
    6 Web安全知识
  •   
    174
    6.1 HTTPS r3
  •   
    176
    6.2 内容安全策略(CSP) r3
  •   
    172
    6.3 跨域资源共享(CORS) r3
  •   
    178
    6.4 OWASP安全风险 r3
  • 147
    7 包管理
  •   
    152
    7.1 npm r1
  •   
    153
    7.2 yarn r1
  • 186
    8 CSS 架构
  •   
    190
    8.1 BEM r3
  •   
    195
    8.2 OOCSS
  •   
    192
    8.3 SMACSS
  • 181
    9 CSS 预处理器
  •   
    507
    9.1 Sass r3
  •   
    503
    9.2 PostCSS r3
  •   
    244
    9.3 Less
  • 199
    10 构建工具
  •   
    201
    10.1 任务执行器
  •      
    203
    10.1.1 npm scripts r1
  •      
    205
    10.1.2 Gulp
  •   
    222
    10.2 模块化打包
  •      
    224
    10.2.1 Webpack r1
  •      
    226
    10.2.2 Rollup r2
  •      
    228
    10.2.3 Parcel r2
  •   
    208
    10.3 代码检查和格式化工具
  •      
    210
    10.3.1 Prettier r3
  •      
    212
    10.3.2 ESLint r3
  •      
    214
    10.3.3 StandardJS
  • 230
    11 选择一个前端框架
  •   
    710
    11.1 jquery r1
  •   
    232
    11.2 React.js r1
  •      
    238
    11.2.1 Redux r1
  •      
    240
    11.2.2 MobX r2
  •   
    234
    11.3 Angular r2
  •      
    249
    11.3.1 RxJS r2
  •      
    251
    11.3.2 NgRx r2
  •   
    236
    11.4 Vue.js r1
  •      
    247
    11.4.1 VueX r1
  • 242
    12 现代 CSS
  •   
    253
    12.1 Styled Components r1
  •   
    255
    12.2 CSS Modules r1
  •   
    541
    12.3 Styled JSX r2
  •   
    257
    12.4 Emotion r2
  •   
    259
    12.5 Radium
  •   
    262
    12.6 Glamorous
  • 447
    13 Web 组件
  •   
    449
    13.1 HTML 模板 r3
  •   
    451
    13.2 自定义元素 r3
  •   
    453
    13.3 Shadow DOM r3
  • 307
    14 CSS 框架
  •   
    324
    14.1 Reactstrap r1
  •   
    320
    14.2 Material UI r1
  •   
    326
    14.3 Tailwind CSS r2
  •   
    322
    14.4 Chakra UI r3
  •   
    310
    14.5 Bootstrap r1
  •   
    778
    14.6 element ui\antd\vant r1
  •   
    689
    14.7 Materialize CSS r2
  • 342
    15 测试你的应用
  •   
    336
    15.1 Jest r1
  •   
    332
    15.2 react-testing-library r1
  •   
    338
    15.3 Cypress r1
  •   
    334
    15.4 Enzyme r1
  •   
    356
    15.5 Mocha
  •   
    347
    15.6 Chai
  •   
    350
    15.7 Ava
  •   
    353
    15.8 Jasmine
  • 361
    16 类型检查器 r3
  •   
    363
    16.1 TypeScript r1
  •   
    265
    16.2 Flow
  • 365
    17 渐进式网页应用程序(PWA) r3
  • 386
    18 服务器端渲染 (SSR)
  •   
    390
    18.1 React.js r1
  •      
    392
    18.1.1 Next.js r1
  •   
    397
    18.2 Angular r2
  •      
    399
    18.2.1 Universal r2
  •      
    394
    18.2.2 After.js
  •   
    402
    18.3 Vue.js r1
  •      
    404
    18.3.1 Nuxt.js r2
  • 429
    19 GraphQL
  •   
    431
    19.1 Apollo r1
  •   
    432
    19.2 Relay Modern r2
  • 282
    20 静态网站生成器
  •   
    286
    20.1 Next.js r1
  •   
    284
    20.2 GatsbyJS r2
  •   
    288
    20.3 Nuxt.js r2
  •   
    290
    20.4 Vuepress r1
  •   
    292
    20.5 Jekyll r2
  •   
    425
    20.6 Hugo r2
  •   
    686
    20.7 Gridsome r2
  • 417
    21 移动端应用开发
  •   
    781
    21.1 微信、钉钉、百度等小程序 r1
  •   
    696
    21.2 React Native r1
  •   
    694
    21.3 NativeScript
  •   
    693
    21.4 Flutter
  •   
    692
    21.5 Ionic
  • 409
    22 桌面应用开发
  •   
    411
    22.1 Electron r1
  •   
    702
    22.2 浏览器插件 r2
  •   
    413
    22.3 Carlo
  •   
    455
    22.4 Proton Native
  • 437
    23 Web Assembly

热门学习资源
建设中
热门博文集锦
建设中
最佳范例
建设中
站点信息
意见反馈
免责声明
关于我们
社交媒体
github
码云

念念不忘,必有回响,不忘初心,方得始终! --李叔同《晚睛集》
我们的目标:通过优质的经验、轻松的表达,激发好奇心和学习乐趣是我们的使命,让引领未来世界者在这里自然生长。