web前端入门要怎么做

来源：海口达内IT教育培训机构 时间：2021/4/7 10:01:48

web前端入门要怎么做

基础学习web前端。先说一下学习完web前端之后能干什么？

学完web前端之后你可以开发网页，做h5动画，做手机端app，可以做自己的博客网站，可以做微信公众号开发，可以开发小程序，可以结合nwjs做电脑客户端软件：比如微信的pc版，钉钉的pc版 都是web前端来做的

怎么开始学习？

两条路：自学或者找培训班，找培训班的话，我推荐达内和传智播客，在讲师质量都比较高。这块我们一点就过，我主要讲下怎么去自学。对于自学直接的方式就是看视频学习，可以是在线视频，比如 慕课网，麦子学院，极客学院，北风网都有从入门到精通的前端课程，这些视频都差不多，随便选一套就行，入门课程都一样，不用纠结于选哪一个。

视频找好了之后，如果你不想中途放弃，或者，浪费太多时间又没效果的话。就找找一个引路人，引路人当然是能力越强越好，找引路人的目的在于为你制定学习计划，把控学习质量，及时纠正错误的学习方向，教你正确的学习方式。给你做心理辅导。为你及时打气持续性补充你的信心。

列一个学习大纲

环境搭建：前端环境很好搭建，一个开发工具即可，webstorm，hbuilder，vscode，sublime。初学者建议sublime 也不要装插件，没有语法提示，可以打基础

html基础：带你去认识html，让你学习去运行html，等浏览器上面打开你的页面的时候，你会有很强的成就感，然后开始学习html的基础标签

css基础：html是勾勒，css是染色，基础的css学完你会有种想写页面的冲动，这时候你不用抑制住那种感觉，直接按照自己所想开写，这是你的个项目

js基础：js是页面的逻辑，作为一个web前端工程师，js是很核心的部分，也是很难的部分。js的学习之后放长一些，尤其是周，要让自己去熟悉那种语法环境，培养自己的开发思路，而且有一点就是学完一个星期的知识之后，及时和你的指引人沟通，看卡自己的理解是否有误，还有就是学习思路是否有问题，他会给你指出那些东西需要多学习，哪些不常用，还有就是给你点一下你学的这些在项目中会是怎么去应用，理论联系实际是好的学习方式。

纯js操作dom和jquery：这阶段要知道怎么去用js来更改页面的元素，怎么去写dom事件，经过一番联系后，再引入jquery，不要本末倒置，有个同学学完jquery之后说发誓以后再不用原生js操作dom！然后被我狠狠骂了一顿

开始你的ui框架之旅：这个阶段我推荐从bootstrap开始，这个框架很经典，响应式的珊格系统被后来框架一直沿用，在我线下教学的那几年，我都会带着学生一起看bootstrap的源码，让他们学会这种设计思想，因为之后对他们太有用了，当时他们很痛苦，现在他们说起来觉得很受益，如果可以，你也要去看看源码，先学会去定制bootstrap，公司注重二次开发，定制 bootstrap正好可以练手。

开始深入css3：基础学完css3要提上日程，这时你会看到不一样的世界

深入js：这阶段你就要去解读原型链，原型替换，this指向，es6，es7的新语法，

学一套主流mv*框架：vue，react，angular2选一种，我建议从vue开始，react的jsx语法不适合你入门去学习，angular2的typescript语法糖难度也比较高，vue学起来平滑些，结合vue，学一下vue-router，vuex，element ui，axios，webpack。做个项目玩一下这个全家桶

升级后台语言nodejs：这个不作要求，你在学vue的时候其实已经在用nodejs了，你用的npm就是nodejs的一部分，这个阶段说的是nodejs编程，比较难理解，毕竟是写服务器的东西，不过前面基础打牢固，让别人一点拨就能上手，技术不难，难在思路转换。

总结做项目：两个项目，

第  一个是侧重于css方面的，要求就是非常酷，帅到没朋友

第二个项目侧重逻辑处理，用来升华你的逻辑能力

这两个项目可以从网上搜几个网站来模仿，之前我的学生有做过：苹果，魅族，花瓣网，网易云音乐，在行等很多网站，做的也很不错。

面试技巧培养阶段：这个阶段要培养下公司项目的具体流程以及面试技巧的培养，面试回答思路，如果有同学想多了解这方面，我很乐意给大家讲解

初级阶段：从到网页大师

HTML5标签

HTML5表单

CSS3页面美化

CSS3页面布局

CSS3动画

浏览器兼容和SEO

Bootstrap响应式框架

项目管理和原型设计

UI设计及切图技巧

JavaScript入门

HTML 相当于盖房子的原材料。学习了HTML之后，我们只是掌握了各种“原材料”的制作方法，要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化。而css就是做这些工作的。CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。

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

基础阶段：从网页大师到前端开发工程师

JavaScript语言基础

JavaScript核心对象

DOM、BOM、事件驱动编程

闭包、原型、面向对象编程

jQuery、插件、Underscore

Promise、Defferred异步编辑

Ajax、RESTful

SVG、Chart图表

Node.JS服务端和应用接口设计

GIT源代码管理

JavaScript是一种在客户端广泛使用的脚步语言，在JavaScript当中为我们提供了一些内置函数、对象和DOM操作，借助这些内容我们可以来实现一些客户端的、验证、交互等，使我们的页面看起来不那么呆板，屌丝瞬间逆袭高富帅!

刚学会JavaScript，你会沉浸在JavaScript给你带来的惊喜之中不能自拔，产生一种“天下你有”的错觉。但这个时候你去找一份工作，你的项目经理会经常对你大吼道：

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

“不兼容?”瞬间石化！“我擦，坑爹啊!那可是花了我一个晚上写了几百行代码搞定的啊，吐血了都!”

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

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

“豪华大楼”至此拔地而起，但是每天这样日复一日，年复一年的盖楼，好繁琐！能不能将大楼里面每一个单独部件模块化，当需要盖楼时就像堆积木一样组合在一起，这样岂不是爽歪歪？

可以实现吗？答案是肯定的。

这种思想在Web前端开发中也是适合的，于是乎就出现了各种前端框架。在项目开发过程中，我们可以借助框架提供的CSS样式、组件、JavaScript插件等的完成页面布局和样式设置，然后再有针对性的微调样式，这样基于框架进行开发大大缩短了开发周期。站在巨人的肩膀上就是爽！

进阶阶段：前端开发工程师

HTML5存储、多线程

HTML5 Canvas

PHP服务端

SUI、HTML模版化

HTML模板化引擎

AMD、RequireJs模块化

设计模式与MVC架构

Backbone编程

Angular编程

自动化构建、测试、缺陷管理

基础的东西以完成，到了本阶段，就是量变到质变的过程。学完本阶段可以掌握大型网站、管理系统、Web应用的整体架构体系，能够独立完成或带领团队完成中大型前端项目的研发工作。

项目实施：经验丰富的业界高手

Java及.NET服务端技术

新浪微博/腾讯第三方OAuth登录

百度地图 JS SDK

支付宝在线支付集成

Web Socket即时通讯

React编程

微信平台、微网站开发

HTML5游戏开发

项目管理技术

全栈综合项目实战

学完本阶段可以极大地丰富前端开发经验、掌握到当前前端开发领域中热门、具商业价值的前沿技术和高端技术，在前端开发方面达到级别，成为市场上炙手可热的高端人才。以上每个阶段均会有1~2个真实项目实操训练，帮助同学熟练掌握并运用所学知识，以解决具体项目、具体问题出发，在见招拆招中提高。

当然，从菜鸟到大牛，路很长。前端是一个看似入门门槛不高，但要学好很难的领域。前端的知识体系庞杂又松散，技术演进快，如果摸不清脉络的话很容易陷入盲人摸象的困境甚至跑偏。掌握了正确的方法，「学习前端」和「学好前端」就只是个时间问题。

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/3843/news/343101/违者必究！ 以上就是海口达内IT教育培训机构 小编为您整理 web前端入门要怎么做的全部内容。