第一次与前端亲密接触

最近业余时间在学习数据结构、算法和前端&＃xff0c;学习前端的原因在前面我有提到过&＃xff0c;感兴趣的同学可以看看 开启我的前端之路。我本身是做 iOS 的&＃xff0c;对移动端比较了解。学习前端完全可以按照移动端的套路来学&＃xff08;我是这么干的&＃xff09;。

移动端的学习流程大致是&＃xff1a;

1.开发工具的准备&＃xff1b;

2.掌握开发语言&＃xff1b;

3.UI部分&＃xff1a;布局、动画、页面之间切换、各种交互实现&＃xff0c;各种UI设计实现&＃xff1b;

4.通用技术&＃xff0c;数据结构算法&＃xff0c;网络&＃xff0c;数据库&＃xff0c;设计模式&＃xff0c;架构&＃xff1b;

5.各种第三方框架的使用及原理分析&＃xff1b;

6.各种 API 的使用&＃xff1b;

我们按这个思路来学习前端&＃xff0c;首先需要把环境搭好了。

开发工具

前端开发工具比较简单&＃xff0c;一个浏览器加一个 IDE 即可。IDE 可以选择 VSCode、Sublime 和 Webstorm&＃xff0c;我刚开始使用的Sublime&＃xff0c;后来用了一次 VSCode&＃xff0c;就再也不想用 Sublime 了。个人感觉用 VSCode 比 Sublime 好用很多&＃xff0c;起码会给我想要的提示信息。下图是 VSCode 的效果&＃xff0c;点击右键&＃xff0c;可以在浏览器预览&＃xff0c;这个需要安装一个插件 open in browser。

浏览器主要用来调试 HTML&＃xff0c;查看布局信息等&＃xff0c;这里主推 Chrome&＃xff08;谷歌浏览器&＃xff09;。在打开的网页中&＃xff0c;右键&＃xff0c;点击检查&＃xff0c;即可看到下面这种效果。可以看到&＃xff0c;HTML 的源码&＃xff0c;红色方块的大小及属性&＃xff0c;选择不同的移动端设备等。

还有一个非常重要的地方需要注意&＃xff0c;要多看「官方」推荐的资料&＃xff0c;少看 N 手资料&＃xff0c;不过有些博文写的是比较好&＃xff0c;如果看官方看不明白再看这些博文。比如下面这两个&＃xff1a;

Web 开发技术 MDN https://developer.mozilla.org/zh-CN/docs/Web
W3C https://www.w3.org/2002/03/tutorials.html#webdesign_htmlcss

学习前端的资料比较多&＃xff0c;也有很多电子书&＃xff0c;想看书的同学可以到网上找找&＃xff0c;或者购买纸质书。特别推荐 Web 开发技术 MDN 这个网站&＃xff0c;支持中文&＃xff0c;比如我在网上找了很多资料学习 Web 的 UI布局的方式&＃xff0c;看了很多博文都是东一句西一句&＃xff0c;始终没能彻底理解&＃xff0c;直到看到 MDN 上详细的介绍&＃xff0c;我才明白网页是如何布局的。

大家加油&＃xff01;&＃xff01;&＃xff01;

推荐阅读&＃xff1a;

开启我的前端之路

图解前端