在国内大学课程里面, 几乎没有前端开发这门课程, 无非就是一些网页设计之类的课程, 但那些课程无论是老师讲还是学生听, 都是敷衍了事, 这个我深有体会, 我相信大家一定也有同感! 所以, 目前前端开发主要是通过自学, 和参加正规的培训
然而更多的小伙伴喜欢自学, 但是自学是很困难的, 毕竟是一个人自己摸索, 网上看上去有很多视频可以学习, 但是那些视频很多都是过时的, 像 JS 和 h5 这些想要自学根本学不会, 更何况以后深入学习还要掌握框架构造! 很多小伙伴就根本找不到学习的方向, 最后白白浪费了自己的时间和精力!
image
web 前端的学习路线
第一阶段 --html 的学习
超文本标记语言 (HyperText Mark-up Language 简称 HTML) 是一个网页的骨架, 无论是静态网页还是动态网页, 最终返回到浏览器端的都是 HTML 代码, 浏览器将 HTML 代码解释渲染后呈现给用户. 因此, 我们必须掌握 HTML 的基本结构和常用标记及属性.
HTML 的学习是一个记忆和理解的过程, 在学习过程中可以借助 Dreamweaver 的 "拆分" 视图辅助学习. 在 "设计" 视图中看效果, 在 "代码" 视图中学本质, 将各种视图的优势发挥到极致, 这种对照学习的方法弥补了单纯识记 HTML 标签和属性的枯燥乏味, 想必对各位初学的小盆友们来说必定是极好的!
在学习了 HTML 之后, 我们只是掌握了各种 "原材料" 的制作方法, 要想盖一幢楼房就还需要把这些 "原材料" 按照我们设计的方案组合布局在一起并进行一些样式的美化.
第二个阶段 --CSS 的学习
CSS 是英文 Cascading Style Sheets 的缩写, 叫做层叠样式表, 是能够真正做到网页表现与内容分离的一种样式设计语言. 相对于传统 HTML 的表现而言其样式是可以复用的, 这样就极大地提高了我们开发的速度, 降低了维护的成本.
同时 CSS 中的盒子模型, 相对布局, 绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制. 通过此阶段的学习, 我们就可以顺利完成 "一幢楼房" 的建设.
"楼房" 建设完成之后, 我们可以交给用户使用, 但是如果想让用户获得更佳的体验, 我们还可以对 "楼房" 进行更深一步的 "装修", 让它看起来更 "豪华" 一些.
第三个阶段 --JavaScript 的学习
JavaScript 是一种在客户端广泛使用的脚步语言, 在 JavaScript 当中为我们提供了一些内置函数, 对象和 DOM 操作, 借助这些内容我们可以来实现一些客户端的特效, 验证, 交互等, 使我们的页面看起来不那么呆板, 屌丝瞬间逆袭高富帅! 有么有?
此时, 也许你还沉浸在 JavaScript 给你带来的惊喜之中, 但你的项目经理却突然对你大吼道
"这个效果在 ** 浏览器下不兼容, 重新搞......"
"不兼容?" 瞬间石化了有木有?
"我擦, 坑爹啊! 那可是花了我一个晚上写了几百行代码搞定的啊, 吐血了都!"
JavaScript 的兼容性和复杂性有时候的确让我们头疼, 还好有 "大神" 帮我们做了封装.
第四个阶段 --jQuery 的学习
jQuery 是一个免费, 开源的轻量级的 JavaScript 库, 并且兼容各种浏览器(jQuery2.0 及后续版本放弃了对 IE6/7/8 浏览器的支持), 同时现在有很多基于 jQuery 的插件可供选择, 这样在我们实现一些丰富的动态效果时更方便快捷, 大大节省了我们开发的时间, 提高了开发速度, 这也充分体现了其 write Less,do more 的核心宗旨. 这个 Feel 倍儿爽! 有么有?
"豪华大楼" 至此拔地而起, 但是每天这样日复一日, 年复一年的盖楼, 好繁琐! 能不能将大楼里面每一个单独部件模块化, 当需要盖楼时就像堆积木一样组合在一起, 这样岂不是爽歪歪? 可以实现吗? 答案是肯定的.
这种思想在 Web 前端开发中也是适合的, 于是乎就出现了各种前端框架, 在这里推荐给大家的是 Bootstrap. Bootstrap 是 Twitter 推出的一个开源的用于前端开发的工具包, 是一个 CSS/HTML 框架, 并且支持响应式布局. 一经推出后颇受欢迎, 一直是 GitHub 上的热门开源项目.
在项目开发过程中, 我们可以借助 Bootstrap 提供的 CSS 样式, 组件, JavaScript 插件等快速的完成页面布局和样式设置, 然后再有针对性的微调样式, 这样基于框架进行开发大大缩短了开发周期. 站在巨人的肩膀上就是爽!
Web 前端的学习建议
image
给大家聊聊在学习 Web 前端中的一些建议和方法.
在 CSS 布局时需要注意的一个问题是很多同学缺乏对页面布局进行整体分析, 不能够从宏观上对页面中盒子间的嵌套关系进行把握, 就急于动手去做, 导致页面中各元素间的关系很混乱, 容易出现盒子在浮动时错位等情况. 建议大家在布局时采用 "自顶向下, 逐步细化" 的思想, 先用几个盒子将页面从整体上划分, 然后逐步在盒子中继续嵌套盒子.
君子生非异也, 善假于物也 ", 在学习的过程中还要多浏览一些优秀的网站, 善于分析借鉴其设计思路和布局方法, 见多方能识广, 进而才可以融会贯通, 取他人之长为我所用.
同时还要善于使用 Firebug 这个利器. Firebug 一方面可以在我们学习过程中帮助我们调试自己的页面, 另一方面我们可以使用 Firebug 方便地查看, 分析别人网站的源代码,"偷" 也是一种技能!
随着移动互联网热潮的到来, 移动开发越来越受到大家的追捧, 响应式布局, 微网站等需求量不断增加, 也是我们 Web 前端未来的发展方向之一, 学有余力的同学可以多多关注. 最后祝愿大家能在 Web 前端开发道路上走出一片更宽更广的天地!
多年编程经验, 今年 1 月整理了一批 2019 年最新 Web 前端教学视频, 不论是零基础想要学习前端还是学完在工作想要提升自己, 这些资料都会给你带来帮助, 从 HTML 到各种框架, 帮助所有想要学好前端的同学, 学习规划, 学习路线, 学习资料, 问题解答. 只要加入 Web 前端学习交流 qun:296,212,562, 即可免费获取, 学习不怕从零开始, 就怕从不开始.
来源: http://www.jianshu.com/p/d048e561d167