web前端开发菜鸟教程（自学web前端，应该从哪些知识入门呢）

本文目录

• 自学web前端，应该从哪些知识入门呢
• 如何才能自学web前端
• 如何学习web前端
• 零基础怎么学前端要学哪些内容
• web前端怎么自学，有什么好的网站，或者资料推荐吗

自学web前端，应该从哪些知识入门呢

介绍一下Web前端学习路线，帮助零基础的小伙伴更好的学习。
1、前端页面重构。主要内容为PC端网站布局、HTML5+CSS3基础、WebApp页面布局。学习目标是完成PC端网站布局，WebApp页面布局，还要可以通过HTML5+CSS3的2D、3D等属性实现一些精美的动画效果。
2、JavaScript高级课程、PC端全栈项目开发。主要内容为原生JavaScript、面向对象进阶与ES5/ES6应用、JavaScript工具库自主研发、JQuery经典交互特效开发、HTTP协议、Ajax进阶与后端开发、前端工程化与模块化应用以及AngularJS等。学习目标是可以通过原生JavaScript开发交互功能，实现网站上的交互效果，以及模块化应用等，实现完整的前端工程。
3、Web前端框架、混合开发(Hybrid，RN)、大数据可视化。主要内容为Node.js后端开发、Vue.js前端框架、React前端框架、混合开发(Hybrid，RN)、Angular前端框架、大数据可视化等。学习目标是可以独立完成相应的项目，如场景，应用Vue.js/Ionic/React.js等框架开发WebApp，小程序项目开发，以及各类混合应用项目开发等。
以上就是为大家规划的学习路线，相信学完该课程即使是零基础的小白，也能熟练掌握移动Web网页开发、JavaScript网页编程、前后端交互、小程序项目开发，以及各类混合应用项目开发等核心技能，胜任前端开发工程师的岗位。

如何才能自学web前端

学习前端首先要学的就是基础（html,css,javasrcipt,html5,css3,jquery）
前期学习html和css,(用来布局和修饰页面)，接着学习javascript（比较重要，要学好它），
***隐藏网址***
jq是js的框架，只是为了更快的开发项目，所以学好js才学jq就会觉得jq很容易。
基础扎实之后开始学习框架，先从简单入手，bootstrap一个比较简单的框架，
可以找一些比较简单的响应式官方网站来模仿练习。接着可以学习比较主流的框架
如：vue、angular、react.学一个就可以了，当然你也可以都学，但是一般就学一个也够了，
（我个人是使用vue和angular），建议是学vue,因为在目前微信小程序是比较主流的，
vue的写法和微信小程序很像，所以学vue对你以后学小程序是有帮助的。
当然只有这些还不够，要学会使用数据库，node.js，还有git等（git代码管理工具，团队开发的时候比较重要）
至于在哪学？当然是看视频教程一边看一边跟着写罗。

如何学习web前端

学习最重要的是找到正确的方向，否则，付出再多的努力也是与成功背道而驰。

　　很多时候，成功除了需要勇气、坚持外，更需要正确的方向。也许有了一个正确的方向，成功来得比想象中更快。如果在错误的路上奔跑，再怎么努力也是无济于事。学习Web前端也是如此，首先明确自己的学习路线。以下讲述一下学习web前端的4个阶段怎么做：

　　1.HTML

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

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

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

　　2.CSS

　　接着来学习CSS。CSS（Cascading Style Sheets，层叠样式表），是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。

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

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

　　3.Javascript

　　JavaScript是一种被广泛用于客户端的脚本语言，JavaScript为我们提供了一些内置函数、对象和DOM操作，借助这些内容可以实现一些客户端的特效、验证、交互等，使页面看起来更加活泼。

　　尽管JavaScript有很多优点，让你惊喜不已，但当项目经理对你说“这个效果在××浏览器下不兼容，重做！”时，你肯定懵了：“不兼容？那可是花了我一个晚上写了几百行代码的啊！”

　　的确，JavaScript的兼容性和复杂性有时真的很让人头疼，幸好有“大神”帮我们做了封装。

　　4.jQUery

　　最后学习jquery。jQuery是一个免费、开源的轻量级的JavaScript库，并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持)，同时有很多基于jQuery的插件可供选择，这样，在实现一些丰富的动态效果时更方便快捷，大大节省了开发时间，提高了开发速度，这也充分体现了其“writeless，domore”（写更少的代码，做更多的事情）的核心宗旨。

　　“豪华大楼”至此拔地而起，但是如此日复一日，年复一年的盖楼，好繁琐！如果可以将大楼里面每一个单独部件模块化，当需要盖楼时就像堆积木一样组合在一起，这样就简便、快捷了。

　　这种思想也适用于Web前端开发中，于是出现了各种前端框架，下面介绍的是Bootstrap。

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

　　在项目开发过程中，借助Bootstrap提供的CSS样式、组件、JavaScript插件等，可以快速地完成页面布局和样式设置，然后有针对性地微调样式，这样基于框架进行开发大大缩短了开发周期。

二、关于学习Web前端的建议

　　最后给大家讲一下在学习Web前端过程中的一些建议。

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

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

　　同时还要善于使用Firebug这个利器。Firebug一方面可以帮助我们调试自己的页面，另一方面我们可以使用Firebug方便地查看、分析别人网站的源代码。

　　随着移动互联网热潮的到来，移动开发越来越受到大家的欢迎，响应式布局、微网站等需求量不断增加，也是Web前端未来的发展方向之一。对web前端开发感兴趣的同学可以多点学习这方面的知识。

零基础怎么学前端要学哪些内容

html（几天而已）--》CSS(不做纯前端看几天，做纯前端练一个月)--》JavaScript(重点基础，花1到2个月时间用心学)，然后看你想用什么语言做后端，不想学其它语言就接着看Node.js，vue。这2个合起来一个月左右，恭喜你，你入门了！后面你就知道自己要学什么了。

web前端怎么自学，有什么好的网站，或者资料推荐吗

基础性的学习网站：

***隐藏网址***

w3cplus：www.w3cplus.com

***隐藏网址***

***隐藏网址***

***隐藏网址***

***隐藏网址***

视频类的学习网站：

***隐藏网址***

***隐藏网址***

***隐藏网址***

***隐藏网址***

***隐藏网址***

个人博客类的学习网站：

***隐藏网址***

***隐藏网址***

***隐藏网址***

***隐藏网址***

***隐藏网址***

社区类的学习网站：

***隐藏网址***

***隐藏网址***

***隐藏网址***

***隐藏网址***

***隐藏网址***

***隐藏网址***

***隐藏网址***

***隐藏网址***