`
葱白的天蓝
  • 浏览: 843 次
文章分类
社区版块
存档分类
最新评论

学习WEb前端开发的需要哪些条件

阅读更多
前端开发是一个近几年兴起的新兴行业,所以远没有电子商务那样成熟的课程体系,大学内也没有完整的前端课程体系,所以学习前端在国内无非就是培训,以及自学。
  培训是针对那些有条件的人来说,很多小伙伴更喜欢的是自学。但是一个人自学毕竟力量是有限的,为了让想学习的人可以更好的学习,给大家推荐一个裙,前面是498,中间是854,最后面就是 七52,这里有很多想学习的人和你一起交流,也有大牛每天晚上免费教学,想要学习的人都可以加入我们,但是我们只欢迎想学习的人,不是来学习,随便看看的就不要进了。
Web前端的学习误区
  
  网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们制作网页带来了极大的方便。
  
  入门快、见效快让我们在不知不觉中已经深深爱上了网页制作。此时,很多人会陷入一个误区,那就是既然借助这么帅的IDE,通过鼠标点击菜单就可以快速方便地制作网页。
  
  那么我们为什么还要去学习HTML、CSS、JavaScrpt、jQuery等这些苦逼的代码呢?这不是舍简求繁吗?
  
  但是随着学习的深入,就会发现我们步入了一种窘境——过分的依赖IDE导致我们不清楚其实现的本质,知其然但不知其所以然。
  
  因此在页面效果出现问题时,我们便手足无措,更不用提如何进行页面优化以及完成一些更高级的应用了。其原因是显而易见的——聪明的IDE成全了我们的惰性,使我们忽略了华丽的网页背后最本质的内容——code。
正确的方向胜过无谓的努力
  
  有两只蚂蚁想翻越一段墙,寻找墙那头的食物。一只蚂蚁来到墙脚就毫不犹豫地向上爬去,可是每当它爬到大半时,就会由于劳累、疲倦而跌落下来。虽然它不气馁,一次次跌下来,又迅速地调整一下自己,重新开始向上爬去。
  
  另一只蚂蚁观察了一下,决定绕过墙去。很快,这只蚂蚁绕过墙来到食物前,开始享受起来;而另一只蚂蚁还在不停地跌落下去又重新开始。
  
  很多时候,成功除了勇气、坚持不懈外,更需要方向。也许有了一个好的方向,成功来得比想象的更快。如果在错误的路上奔跑,再怎么努力也是白搭。学习Web前端也是如此,首先应该选择一个正确的学习路线。
  
  Web前端的学习路线结合我的学习经历、近年来辅导学生的经验以及公司中实际项目的需求,在这里将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前端的学习建议

  最后给大家聊聊在学习Web前端中的一些建议和方法。

  在CSS布局时需要注意的一个问题是很多同学缺乏对页面布局进行整体分析,不能够从宏观上对页面中盒子间的嵌套关系进行把握,就急于动手去做,导致页面中各元素间的关系很混乱,容易出现盒子在浮动时错位等情况。建议大家在布局时采用“自顶向下,逐步细化”的思想,先用几个盒子将页面从整体上划分,然后逐步在盒子中继续嵌套盒子。

  “君子生非异也,善假于物也”,在学习的过程中还要多浏览一些优秀的网站,善于分析借鉴其设计思路和布局方法,见多方能识广,进而才可以融会贯通,取他人之长为我所用。

  同时还要善于使用Firebug这个利器。Firebug一方面可以在我们学习过程中帮助我们调试自己的页面,另一方面我们可以使用Firebug方便地查看、分析别人网站的源代码,“偷”也是一种技能!
随着移动互联网热潮的到来,移动开发越来越受到大家的追捧,响应式布局、微网站等需求量不断增加,也是我们Web前端未来的发展方向之一,学有余力的同学可以多多关注。最后祝愿大家能在Web前端开发道路上走出一片更宽更广的天地!
分享到:
评论

相关推荐

    1+X WEB前端开发初级教案.rar

    在Web前端开发领域,这是学习者踏入这个充满创新和技术挑战世界的入门教材。"1+X"通常指的是国家职业教育1+X证书制度,旨在提升职业教育的质量和对学生技能的培养。 该压缩包中的核心资源是“1+X WEB前端开发初级...

    web前端开发技术储久良第三版答案

    这本书旨在帮助学习者深入理解Web前端开发的核心概念和技术,通过解决实际问题来巩固理论知识。 一、HTML基础 HTML(超文本标记语言)是网页制作的基础,它定义了网页的结构。储久良第三版教材中的答案可能包括各种...

    web前端开发教材初级源代码.rar

    这份"web前端开发教材初级源代码.rar"压缩包提供了一套初级学习资源,旨在帮助初学者掌握基本的前端开发技能。下面我们将深入探讨这些模块及其在实际开发中的应用。 01. HTML基础 HTML(HyperText Markup Language...

    Web前端开发详细教程, Web前端开发代码大全, 包含各种框架详解

    本教程旨在为初学者提供全面而深入的学习资源,帮助大家掌握Web前端开发的核心技术及其应用。 #### 二、基础知识 ##### HTML (HyperText Markup Language) HTML是构成网页的基本语言,用于定义网页的内容结构。在...

    【1+X Web前端开发初级 】样题二(理论+实操).zip

    【1+X Web前端开发初级】样题二涵盖了理论与实操两大部分,旨在测试学习者在Web前端开发领域的基础知识和实践能力。这个压缩包包含了三个文件:`Web前端开发初级实操考试_V1.0.docx`、`Web前端开发初级理论考试_V1.0...

    1+x 证书 Web 前端开发初级实操考试.zip

    综上所述,"1+x 证书 Web 前端开发初级实操考试"覆盖了Web前端开发的基本技能和实践应用,考生需要通过理论学习和动手实践,全面提升自己的Web开发能力。通过这个考试,不仅能验证学习成果,也能为未来的Web开发职业...

    web前端开发知识学习

    在“Web前端开发知识学习”这个资源包中,包含了丰富的前端开发学习材料,主要涵盖了HTML、JavaScript、CSS以及Div+CSS这四大核心领域。这些技术是构建网页和交互式用户体验的基础,下面将对这些知识点进行详细的...

    Web前端开发简明教程-源代码(HTML+CSS+JavaScript+jQuery)

    通过这个简明教程,学习者将能够创建功能丰富、视觉吸引人的网页,并掌握Web前端开发的基本技能。在实践中不断探索和学习,开发者可以逐步掌握更高级的技术,如框架(如React、Vue.js)、ES6+的新特性以及PWA(渐进...

    程序员web前端视频教程(文档+代码+视频).rar

    总的来说,这个资源包为web前端开发提供了全方位的学习资源,无论是理论学习还是实战练习,都能满足初学者的需求。通过系统的视频教程、详细的文档和丰富的代码实例,你将能够一步步建立起坚实的前端开发基础。记住...

    web 前端开发必备材料包含html,css,JavaScript

    学习Web前端开发,不仅要掌握HTML、CSS和JavaScript的基本语法,还需要理解它们之间的协作关系。HTML定义结构,CSS负责样式,JavaScript处理交互。通过这三者的结合,开发者可以创建出既美观又功能丰富的动态网页。...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册六:JS条件语句

    JavaScript是Web前端开发的核心语言之一,它为网页和应用程序提供了动态交互的能力。在JavaScript中,条件语句是...在头歌教学实践平台的Web前端开发课程中,这些基础知识的学习和实践将为你的编程技能打下坚实的基础。

    web前端开发手册大全

    本"web前端开发手册大全"集合了多种关键的前端技术资源,旨在为开发者提供全面的学习和参考材料。以下是这些手册涵盖的主要知识点: 1. **JavaScript(JS)手册**: JavaScript是一种广泛使用的脚本语言,它在...

    Web前端技术中级.pdf

    通过以上内容的总结,可以看出该文件涵盖了JavaScript基础语法、数据类型、函数、事件处理、对象、DOM编程等Web前端开发的重要知识点。这些知识点构成了Web前端技术中级教程的核心,并为学习者提供了必要的理论基础...

    C# 语法经典全解(asp.net web前端开发)

    在ASP.NET Web前端开发中,C#作为服务器端的主要编程语言,负责处理业务逻辑、数据库交互和页面控制。 **C#基础语法** 1. **变量和数据类型**:C#支持多种数据类型,包括基本类型(如int、float、bool)、引用类型...

    WEB前端开发课程计划

    ### WEB前端开发课程计划知识点概览 #### 一、课程安排 - **培训周期**:为期2个月。 - **上课时间**:工作日晚上19:00至21:00;周末上午8:30至11:30,下午13:30至16:30。 - **每课时长度**:50分钟,课间休息10...

    Web前端初级---模拟题-5套.zip

    【描述】"Web前端初级---模拟题-5套"进一步确认了这是针对初学者的Web前端训练材料,通过五组不同的模拟试题,学习者可以深入理解和实践Web前端开发的基本概念与技术。这些模拟题可能涉及到理论知识问答、代码编写及...

    Web前端技术(期末复习 选填、判断、简答、编程等超全总结).zip

    Web前端技术是现代互联网开发的重要组成部分,主要负责构建用户在浏览器中看到和交互的网站界面。这份名为"Web前端技术(期末复习 选填、判断、简答、编程等超全总结).zip"的压缩包文件包含了全面的Web前端学习资源...

    web前端页面实例

    Web前端页面实例是开发者在学习和实践中积累的重要资源,它涵盖了JavaScript、jQuery和CSS这三种核心技术的运用。这些技术是构建交互式、动态且视觉吸引力强的网页的关键工具。 JavaScript,作为网页的脚本语言,...

    2018黑马程序员web前端开发视频

    根据提供的文件信息,我们可以推断出这是一套2018年由“黑马程序员”机构发布的Web前端开发视频教程。接下来,我们将围绕这个标题、描述以及部分链接内容来展开相关的知识点介绍。 ### Web前端开发基础 #### 1. ...

Global site tag (gtag.js) - Google Analytics