月薪20万的前端工程师浅谈学习HTML+CSS方法
之前两篇主要谈的是我要认真的对待前端自学这件事情,属于打鸡血的内容。今天我会写些与前端自学具体的学习路线与方式。
我的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.准备好随时可查阅的资料
我觉得以下几个资料准备好就可以直接开始做页面了:
准备这个的好处是他们是图片,而且高度概括了HTML\CSS的基础知识,自己做页面的时候把这个图片打开,随时查阅,会比上网查更快
搜索 xx mdn
当然如何需要知道某个html标签或者css属性的详细用法,只需要google一下:你要找的知识 mdn
code guide
为了写出很健壮的代码,还是要吸取前辈们的一些最佳实践,我推荐的是Code Guide ,也不是要强行的遵守他,但是要有意识注意他,边实践边改自己的代码。
3.做大量完整的静态页面
首先我需要找到这样的静态页面去临摹,下面是哪里寻找这些代码来临摹
慕课网有大量静态页面实战的视频,跟着视频可以很快做出来一个完整的页面,但是一定要记得,跟着视频做完后,一定要自己独立的实现一遍。
freecodecamp这是一个学习前端的很好的网站,里面有一些实战的项目,值得去做,但是没有视频指导,会比上一种稍微难一点的。
Dribbble上有很多设计很漂亮的设计图,我们可以去上面找到自己喜欢的设计图,然后实现它。这种方式最难,但是也最锻炼人。
我的一点建议:我会在实现每一个完整页面前,会写一个简单的分析报告,里面的内容就是分析一下这个页面的结构,我大概会怎么实现它,有哪些结构我没见过的需要学习的。因为时间花了,肯定要把每个页面研究透,这也是我之前强调的认真的态度吧。
4.以自己的语言梳理学到的知识
我需要总结自己的cheet sheet,这样才能真正掌握html\css的基础知识轮廓;
需要总结自己的“设计图到HTML”的能力,因为我是产品经理,觉得语义化的html完全可以作为网站的UE来用;
需要自己总结的常用“设计样板”,类似各种布局的总结,各种导航栏的总结之类的,以后碰到类似的就直接拿来用了。某种程度上,我认为一个好的前端就是有自己的一个“设计样板”库吧,而且不断的更新扩充它。
the last but not the least
最后还是一样,希望大家帮我完善总结一下这个“静态页面”的学习计划,然后希望有小伙伴跟我一起开始按照这份计划去实践,因为去做才是最重要的!
下面是小编整理的一整套系统的web前端学习教程,加群即可免费领取!
自己整理了一份最全面前端学习资料,从最基础的HTML+CSS+JS [炫酷特效,游戏,插件封装,设计模式]到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴, 有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。
加Q 裙:853597293(招募中)
- html/css/js 学习笔记 - 牛客网试卷:前端工程师能力评估
- WEB前端开发学习----6.CSS 和 JS 在html的使用方法
- WEB前端(HTML、XML、CSS、JS)学习笔记
- web前端学习之HTML CSS/javascript之一
- 前端开发面试笔试学习--html/css-01
- 2016.01.22 前端学习 HTML/CSS
- 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位
- 前端学习 -- Html&Css -- 条件Hack 和属性Hack
- 学习笔记-《零基础学习HTML5—html+css基础 》1.前端认知
- python学习-day14-前端之html、css
- 前端学习 -- Html&Css -- 表单
- 小白的前端学习日记HTML/CSS之---九宫格
- 前端HTML、CSS学习完整笔记(下篇)
- 【前端】【html/css】前端学习之路(三):CSS外观(文本)属性
- 前端攻城狮学习笔记六:常见前端面试题之HTML/CSS部分(一)
- 前端学习 HTML、CSS、JS基础
- 优秀前端工程师如何养成--html学习路线
- 前端HTML、CSS、JS绘制三角形的方法
- CSS基础学习1-HTML应用CSS的三种方法
- 前端学习 -- Html&Css -- 背景