很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了,好的学习路线对学习会引向成功之路,事半功倍,所以要明确,我该走哪个方向,我该学习什么,我怎么学习才会更好,下面小猿圈web前端讲师说一下,web前端的学习路线,和针对学习路线有什么好的建议给你们。

第一阶段:HTML的学习

超文本标记语言(HyperTextMark-upLanguage简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终返回到浏览器端的都是HTML代码,浏览器将HTML代码解释渲染后呈现给用户。因此,我们必须掌握HTML的基本结构和常用标记及属性。

HTML的学习是一个记忆和理解的过程,在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果,在“代码”视图中学本质,将各种视图的优势发挥到极致,这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味,想必对各位初学的宝宝们来说必定是极好的!

在学习了HTML之后,我们只是掌握了各种“原材料”的制作方法,要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化。

第二个阶段:CSS的学习

CSS是英文CascadingStyleSheets的缩写,叫做层叠样式表,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的,这样就极大地提高了我们开发的速度,降低了维护的成本。

同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习,我们就可以顺利完成“一幢楼房”的建设。

“楼房”建设完成之后,我们可以交给用户使用,但是如果想让用户获得更佳的体验,我们还可以对“楼房”进行更深一步的“装修”,让它看起来更“豪华”一些。

第三个阶段:javascript的学习

JavaScript是一种在客户端广泛使用的脚步语言,在JavaScript当中为我们提供了一些内置函数、对象和DOM操作,借助这些内容我们可以来实现一些客户端的特效、验证、交互等,使我们的页面看起来不那么呆板,给人眼前一亮的体验。

此时,也许你还沉浸在JavaScript给你带来的惊喜之中,但你的项目经理却突然对你大吼道

“这个效果在××浏览器下不兼容,重新搞……”

“不兼容?”瞬间石化了有木有?

“我擦,坑爹啊!那可是花了我一个晚上写了几百行代码搞定的啊,吐血了都!”

JavaScript的兼容性和复杂性有时候的确让我们头疼,还好有“大神”帮我们做了封装。

第四个阶段:jQUery的学习

jQuery是一个免费、开源的轻量级的JavaScript库,并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持),同时现在有很多基于jQuery的插件可供选择,这样在我们实现一些丰富的动态效果时更方便快捷,大大节省了我们开发的时间,提高了开发速度,这也充分体现了其writeless,domore的核心宗旨。这个Feel倍儿爽!有么有?

“豪华大楼”至此拔地而起,但是每天这样日复一日,年复一年的盖楼,好繁琐!能不能将大楼里面每一个单独部件模块化,当需要盖楼时就像堆积木一样组合在一起,这样岂不是爽歪歪?可以实现吗?答案是肯定的。

这种思想在Web前端开发中也是适合的,于是乎就出现了各种前端框架,在这里推荐给大家的是Bootstrap。

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架,并且支持响应式布局。一经推出后颇受欢迎,一直是github上的热门开源项目。

在项目开发过程中,我们可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置,然后再有针对性的微调样式,这样基于框架进行开发大大缩短了开发周期。站在巨人的肩膀上就是爽!

建议:

首先,任何技术实际都是从零基础开始的,不管是直接学习还是通过相近经历转行。所以不需要因零基础担心。

其次,一定要做好准备:一项技术的学习,意味着你各方面资源不同程度的消耗——时间、工具、资金,甚至融入相关交流圈子的准备。在这个准备过程中,最好是带有一个强硬的目标:“我要在一个月内达到能够实现XXX的水平”或者“我一定要在2周内把XXX项目完成”。如果没有这个规划,一般人都会越来越懒惰,最终放弃。

然后,选准一个或多个老师。这个老师,可以是一个页面,一本书,也可以是一个真实的人。对于前端这块来说,个人的理解是读十本书不如写一个页面,而我本人也是实实在在地硬着头皮一个标签一个标签百度出来的。只有在实际去写的时候,才会出现各种问题,只有在凭自己的思考来解决这些问题的时候,才会得到非常深刻的印象,把相关知识真正转变为自己的。

学习路线和学习方法决定一个人掌握一门技能的效率,有的人几个月,有的人几年也不一定可以掌握,小猿圈web前端讲师希望看到我的文章后有一个明确的方向,学习的方法,然后在定一个目标,逐渐去实现它,这样的学习才是最有效率的学习,希望你在前端的道路上越走越远,也可以给我留言成为好朋友,小编也从那个阶段过来的,可以相互学习,相互进步!

转载于:https://juejin.im/post/5d01fe496fb9a07ef819f7bd

小猿圈Web前端开发学习路线相关推荐

  1. 小猿圈web前端之移动端Vue+Vant实现上传压缩旋转图片功能

    小猿圈web前端讲师为了大家更好的学习前端知识决定每天分享一个web前端案例,希望对你与学习前端的你有所帮助,今天分享的是移动端Vue+Vant的Uploader实现上传.压缩.旋转图片等功能的详细介 ...

  2. web前端三大主流框架_小猿圈web前端之前端的主流框架都有哪些?

    社会在不断发展,互联网更新换代也是飞速,web框架也是经历一代又一代的革新,那么当今时代什么框架是前端的主流框架呢?小猿圈web前端讲师查了一些资料,整理出当今时代比较流行的三种框架,下面说一下这三种 ...

  3. 小猿圈web前端之jQuery抽奖系统

    你有没有想过有一天可以成为千万富翁呢?你是通过自己的努力和奋斗还是其他手段获得的呢?前端程序员是通过jQuery获得的,他自己写了一个抽奖系统,下面就小猿圈前端讲师分享给大家. 效果图: <!D ...

  4. 小猿圈web前端简述canvas如何实现二维码和图片合成

    你经常看到活动海报什么的,上都是有各种宣传文案以及二维码形成的,你知道怎么用canvas实现二维码和图片合成,下面小猿圈Linux讲师为你详细介绍一下canvas如何实现二维码和图片合成的. 使用ur ...

  5. th:text为null报错_小猿圈web前端之vue-cli项目打包完成后运行文件路径报错问题

    学习前端的小伙伴越来越多,问题也就越多,前面基础部分还好一些,特别是一到框架的时候,难住了一大部分人,今天小猿圈web前端讲师就为大家总结了vue-cli项目打包完成后运行文件路径报错问题,有兴趣的小 ...

  6. css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...

    最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...

  7. 前端 input怎么显示null_小猿圈WEB前端之HTML5+CSS3面试题(一)

    学习是一件非常充实的过程,特别是把自己的乐趣变成工作的时候,很多朋友就喜欢学习web前端,所以学习前端,也希望从事前端的工作,但是因为缺少实战经验,所以很多都是卡在面试这关上,下面小猿圈总结了web前 ...

  8. ajax中async_小猿圈web前端之ajax的同步和异步有怎样的区别?

    对于ajax我们应该知道ajax是主要用来在前端页面中向服务器后端请求数据,ajax中根据async的值不同分为同步(async = false)和异步(async = true)两种执行方式,那么, ...

  9. 小猿圈WEB前端之HTML5+CSS3面试题(一)

    越来越多人喜欢前端岗位,毕业季已经悄然来临,很多毕业生面临找工作,那你们在狂欢快乐最后恋恋不舍之际,是否想着过几天招工作的危机.如果想要毕业之后,走向前端的岗位,那看到小编的文章后好好做一下这套题,今 ...

最新文章

  1. 论文被拒,项目被砍?斯坦福「最惨」在读博士教你如何直面失败
  2. linux手写数字识别opencv,opencv实现KNN手写数字的识别
  3. java.vm.info_深入理解java虚拟机
  4. java代码实现看帖回帖功能_求助Java窗口菜单如何实现复制粘贴剪切等功能(内附源代码)...
  5. 记一个UltraEdit15.10注册码
  6. Thymeleaf中使用select进行消息回显时提示:Exception evaluaating SpringEL expression
  7. 【机器学习】主题模型
  8. Spring中的InitializingBean接口的使用
  9. 英语打卡3:可数名词
  10. 摄像机高精度标定的一些方法
  11. 如何调用阿里云、百度云API接口
  12. 注册码破解神器--OllyDbg
  13. VICA 架构设计(1)
  14. 百度人脸对比,人脸认证Demo
  15. 参考文献格式字号字体_论文格式要求及字体大小
  16. android开发脚本之awk
  17. openstack restful api 使用
  18. 北大计算机在本部吗,北大本部和北大医学部都属于北京大学,那么两者有什么区别?...
  19. 【从0到1搭建LoRa物联网】19、LoRa串口透传例程(补充)
  20. 汉字乱码现象的分类解析

热门文章

  1. 全球及中国交联的高密度聚乙烯行业投资应用与供应需求规模分析报告2022版
  2. 2022-2028年中国医疗器械行业战略运营模式与典型案例分析报告
  3. 当引用com类dll时,在VS2005下会出现,dll虽然更换了但是引用没有更换或找不到的错误
  4. 如何将表中的数据导出到电子表格中
  5. php layui实现添加input,Layui实现input输入和选择的方法
  6. What are current fashion trends in Sydney?
  7. 比较强得一个个性签名
  8. 获取所有栈的信息,只有最上面的和最下面的,但是不能获取栈中间的activity信息...
  9. [WC 2011]Xor
  10. Django之Cookie