月薪20万的前端工程师浅谈学习HTML+CSS方法

忘是亡心i 2022-03-19 08:08 137阅读 0赞

![webp][]

之前两篇主要谈的是我要认真的对待前端自学这件事情，属于打鸡血的内容。今天我会写些与前端自学具体的学习路线与方式。

我的web前端自学大概的路线图

因为刚开始学习，没有完整的前端知识体系，所以是大概的路线图，希望大家可以帮我一起修改完善。

大致的思路是：1.**先打好基础，在学习框架**。

基础方面主要涉及到的语言是Html、CSS、JavaScript，如果在这三个里面在挑基础的话应该就是Html、CSS了。

所以，2.**基础知识里面先学Html,CSS**。

Html\\CSS学习计划

之前有过一个月的断断续续的学习，W3C的基础知识也看了，但是一到自己写页面还是不会。我就问自己为什么？我觉得可能的原因是，会HTML\\CSS基础知识还不足以写出完整的静态页面，一定是我还缺少了某些知识和能力。

我觉得一个最重要的能力是：**拿到设计图，首先是分析它，而不是直接写代码**。

分析是一种能力，而HTML\\CSS只是实现我们目标的工具，而掌握了HTML\\CSS基础知识仅仅是掌握了如何使用这些工具，就像是我会搬砖，但并不知道怎么盖房子。

我认为这种分析能力是需要通过做大量**完整的页面**来锻炼的。

所以我大致的学习思路是：以最快的速度了解Html\\CSS基础知识，然后至今开始做大量的完整的静态页面。下面会展开说我的学习计划以及一些资料。

1.快速掌握基本的HTML、CSS知识

网上有很多免费的HTML\\CSS教程，但是为了**快速**，我推荐[marksheet][]，这个教程的好处是它先介绍了web方面的基础知识，让大家对web有个宏观上的了解，然后再开始介绍HTML\\CSS的**必要最少知识**，大概四十分钟就可以看完。

2.准备好随时可查阅的资料

我觉得以下几个资料准备好就可以直接开始做页面了：

![webp 1][]

![webp 2][]

准备这个的好处是他们是图片，而且高度概括了HTML\\CSS的基础知识，自己做页面的时候把这个图片打开，随时查阅，会比上网查更快

搜索 xx mdn

![webp 3][]

当然如何需要知道某个html标签或者css属性的详细用法，只需要google一下：**你要找的知识 mdn**

code guide

为了写出很健壮的代码，还是要吸取前辈们的一些最佳实践，我推荐的是[Code Guide ][Code Guide]，也不是要强行的遵守他，但是要有意识注意他，边实践边改自己的代码。

3.做大量完整的静态页面

首先我需要找到这样的静态页面去临摹，下面是哪里寻找这些代码来临摹

[慕课网][Link 1]有大量静态页面实战的视频，跟着视频可以很快做出来一个完整的页面，但是一定要记得，跟着视频做完后，一定**要自己独立的实现一遍**。

![webp 4][]

[freecodecamp][]这是一个学习前端的很好的网站，里面有一些实战的项目，值得去做，但是没有视频指导，会比上一种稍微难一点的。

![webp 5][]

[Dribbble][]上有很多设计很漂亮的设计图，我们可以去上面找到自己喜欢的设计图，然后实现它。这种方式最难，但是也最锻炼人。

![webp 6][]

我的一点建议：我会在实现每一个完整页面前，会写一个简单的**分析报告**，里面的内容就是分析一下这个页面的结构，我大概会怎么实现它，有哪些结构我没见过的需要学习的。因为时间花了，肯定要把每个页面研究透，这也是我之前强调的认真的态度吧。

4.以自己的语言梳理学到的知识

我需要总结自己的cheet sheet，这样才能真正掌握html\\css的基础知识轮廓；

需要总结自己的“设计图到HTML”的能力，因为我是产品经理，觉得语义化的html完全可以作为网站的UE来用；

需要自己总结的常用“设计样板”，类似各种布局的总结，各种导航栏的总结之类的，以后碰到类似的就直接拿来用了。某种程度上，我认为一个好的前端就是有自己的一个“设计样板”库吧，而且不断的更新扩充它。

the last but not the least

最后还是一样，希望大家帮我完善总结一下这个“静态页面”的学习计划，然后希望有小伙伴跟我一起开始按照这份计划去实践，因为去做才是最重要的！

下面是小编整理的一整套系统的web前端学习教程，加群即可免费领取！

自己整理了一份最全面前端学习资料,从最基础的HTML+CSS+JS \[炫酷特效，游戏，插件封装，设计模式\]到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴, 有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

> 加Q 裙：853597293（招募中）

![1240][]

[webp]: /images/20220319/2418391c190f471bb92b81a508403fa1.png
[marksheet]: https://link.jianshu.com/?t=http://marksheet.io/
[webp 1]: /images/20220319/f785451905c44ce98dccb1be35756b2b.png
[webp 2]: /images/20220319/e02bb9f9fa8343d38110b565442743ae.png
[webp 3]: /images/20220319/27b6192a30cc47dbae0e09d5e7532cc6.png
[Code Guide]: https://link.jianshu.com/?t=http://codeguide.co/
[Link 1]: https://link.jianshu.com/?t=http://www.imooc.com/
[webp 4]: /images/20220319/f6fb70cbfc3c48c5b0e730206680dae2.png
[freecodecamp]: https://link.jianshu.com/?t=https://www.freecodecamp.com/
[webp 5]: /images/20220319/c38cea1364b6401d865187aa0b431205.png
[Dribbble]: https://link.jianshu.com/?t=https://dribbble.com/
[webp 6]: /images/20220319/8939f3abd920417f82b6398614cf84fb.png
[1240]: /images/20220319/8ce80acc177c4abf9445af1be8e57b4c.png