前端发展越来越快,每天都有数不胜数的技术发布。
想要入门前端却没有一条较为理想的路径?
在这个世界里兜兜转转了很久还是感觉在外围搬砖?
那么你可能需要这份技术学习路线图!
我们把学习前端分为三重境界:
-
单机写基础网页
-
联机高效写网页
-
让网页能够被更多人使用
接下来我们就通过介绍这三重境界来为你呈现详细的学习路线图。
单机写基础网页
何为单机呢?其实就是一个人 ??
你一个人使用 Web 基础技术开发网站,没有将代码分享给别人(你可能不知道程序世界的代码分享规则),同时只是在本地环境运行你的网站,你甚至对网站如何能把其他人访问到毫无头绪。
这个阶段也是成为一名前端工程师最最基础的一环,大部分初学者还停留在这个阶段,那么我们来看一下这个阶段需要什么样的技能。
HTML + CSS + JavaScript
没错,其实就是我们耳熟能详的前端三剑客,虽然看起来是最最入门的内容,但是需要了解的内容也不少,就类似我们需要先学 26 个字母,学各种汉字基础,才能写作或者创作诗歌一样。了解这三门技术大致需要了解那些内容以及有哪些学习资源推荐呢?
HTML
HTML 代表超文本标记语言。 它用于前端,为网页提供结构,您可以使用 CSS 设置样式并使用 JavaScript 进行交互。
HTML 的学习大致需要 6 个阶段:
-
编写语义化的 HTML:https://www.w3schools.com/html/html5_semantic_elements.asp
-
了解表单与校验:https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
-
遵守一些约定与最佳实践:https://github.com/hail2u/html-best-practices
CSS
CSS 或级联样式表是用于设置任何网站前端样式的语言。 CSS 是万维网的基础技术,与 HTML 和 JavaScript 并列。
学习基础的 CSS 大致需要 3 个阶段:
-
学会如何布局,其中布局又包括以下知识:
- Floats 浮动:https://css-tricks.com/all-about-floats/
- Positioning 定位:https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
- Display 展示:https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/
- 盒子模型:https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
- CSS 网格:https://cssgridgarden.com/
- Flex 弹性盒布局:https://flexboxfroggy.com/
-
学习媒体查询知识与 Web 响应式设计:https://www.freecodecamp.org/learn/responsive-web-design/
JavaScript
JavaScript 允许您向页面添加交互性。 您可能在网站上看到的常见示例是滑块、点击交互、弹出窗口等。
学习基础的 JavaScript 大致需要 5 个阶段:
-
基础的语法:https://javascript.info/
-
学习 DOM 操作:https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/
-
学习 Fecth API 与 Ajax(XHR):https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
-
学习 ES6 与模块化 JavaScript:https://www.javascripttutorial.net/es6/
-
理解进阶知识