前端学习之路:我的HTML、CSS学习之路

前端学习大概的路线图

因为刚开始学习,没有完整的前端知识体系,所以是大概的路线图,希望大家可以帮我一起修
改完善。
大致的思路是: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.准备好随时可查阅的资料

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


准备这个的好处是他们是图片,而且高度概括了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前端的朋友,可以加这边的交流裙(1146649671)学习资料、面试资料、视频资源,资源给你们拉满,不见不散哦~

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值