Web 前端怎样入门? - 诺米粒 - 2024最新贷款口子论坛
登录 or

Web 前端怎样入门?

css+html5+javascript同时学的模式对吗?
已邀请:

白米Ⅲ级

赞同来自:

7.2 更新
被私敲的烦了,私信不回,要问问题可以去值乎付费提问。
对于绝大部分零基础转行的同学来说,你要做的不是想着怎么快速入门前端,而是应该补回计算机基础知识,拥有最基本的专业素养。可以直接拉到答案的最后了……
统一更新下前端现状:
文本编辑器:VS Code + 一系列插件
包管理工具:npm
JS:紧跟每年更新的ES标准,强烈推荐上TypeScript
CSS:多了个PostCSS,以及CSS Modules等一系列模块化方案……
框架:React全家桶,Vue全家桶,本身就是全家桶的Angular(至少擅长其一)
构建工具:webpack
流程工具:npm script足够了,实在不够再用gulp
额外值得强烈推荐的:函数式编程,响应式编程(RxJS)
----------
3.5 更新
大家还是别点赞了吧,这个答案似乎给了很多人前端入坑很简单的错觉,十分惶恐…
----------
11.25 更新
至今 1570 赞,3452 收藏,有点被吓到了。
其实这个回答主观性很强,不适合大多数人,所以收藏的意义不大。
----------
原答案:
五角场文秘职业技术学院,大三狗一枚。
刚刷完IFE最终任务之一,来分享下自己过去三个月的前端学习经历。
我的提交 百度前端技术学院
前端是干什么的我就不赘述了,推荐看这个答案:Web 建站技术中,HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么? - 张秋怡的回答
直接进入正题。前端入门是一个螺旋上升的过程,既要反复看书,也必须抓紧时间实践。
IFE是一个绝佳的练习平台,题目都是开源的。15年的学习资料比较多,而16年的题目题量较大,难度也稍大,新手很容易在task1-6丧失信心,那个任务实在是太麻烦了。所以我个人建议先刷15年的task1和task2,都是很基础的题目了,不会做也可以参考别人的代码。
我把这三个月大致分为三个阶段。
1. HTML + CSS
前端的入门门槛极低,体现在HTML和CSS上。运行环境就是浏览器,推荐Chrome。你需要的只是一个文本编辑器,推荐Sublime Text 3,有不少好插件比如Emmet,谷歌搜一下很容易了解到的。当然你非要用记事本的话,也不是不行的。刚入门查阅资料可以用 w3school 或者 MDN
HTML和CSS不是编程语言,前者只是结构标签,后者则是样式配置,入门是非常简单的。网上资料也有很多,推荐慕课网 HTML+CSS基础课程
我当时是看了一本书 Head First HTML and CSS,讲得浅显易懂,不过价格比较感人,也是只翻一遍的书,没有必要买了。
迅速刷一遍慕课网,对HTML和CSS有个大致印象就好。想巩固HTML标签可以去看看16年的task1-1。
HTML5的API可以先放一放,回头再看。
接下来就是深入学习CSS了。推荐:
  • 《CSS权威指南(第3版)》。很枯燥的一本书,但我确实不知道哪本书更适合了。花两三天硬啃下来就好了。属性细节不必记忆,以后用到肯定要再查的。着重点放在大局上,比如盒模型,浮动和定位这些,抓住重点快速过一遍。
  • 《CSS3 专业网页开发指南》。CSS3也是需要掌握的内容。但这里还是以了解为主,知道CSS3有什么内容就好,记忆属性是枯燥且毫无意义的。

以上内容用时5天左右,下面是实践。
学了几天HTML和CSS了,应该也有点成果了。打开IFE2015 task1,写个静态页面吧。
我X,完全写不出来。
这是正常的。去看下别人的代码吧,看一小部分就开窍了。忘掉的属性就查书或者w3c,多尝试,不断踩坑才有进步。
画完第一张图后,别着急往下写。你的代码肯定会有如下问题:
  • 胡乱的代码缩进
  • 毫无章法的属性顺序
  • 满页的div
  • 不停地写id和class
重写吧,是的。重写之前先看一份代码规范 GitHub - ecomfe/spec: This repository contains the specifications.。当然代码规范不是唯一的,我最早看的是这一份,所以代码风格也一直维持到现在。
再去看一下别人提交的代码,多看几份。当然自己也要判断,不能听风就是雨啊,人家写得不好你再去重写一次,等于你也有责任对不对。
开始重写了,会发现功力大增,写代码速度也快了很多的。
写到第三张页面的时候,应该比较熟练了。如果看到布局就大概知道应该怎么写了,那就可以进入JavaScript的学习了。
以上内容用时10天左右。
进阶部分可以回头再看:
  • 掌握预处理工具Sass,自动化工具Gulp。
  • 阅读Bootstrap源码。
  • 《CSS揭秘》,极其惊艳的一本书,涵盖了CSS3的很多奇技淫巧,虽说有些地方不太实用,但让人眼前一亮,很值得看。

2. JavaScript
这是至关重要的阶段。
  • 强烈推荐《JavaScript高级程序设计(第3版)》,俗称红宝书。前七章是重中之重,必须反复阅读,直至完全理解,期间可配合其他书一起读。DOM,事件流,表单,JSON,Ajax与最后几章也相当重要。其余章节可以略读或跳过(比如浏览器嗅探,XML以及那些列举大量API的章节,完全可以用到再查)
  • 推荐《JavaScript语言精粹》,俗称蝴蝶书。超薄的一本,半天就可以看完。JavaScript是一门有很多坑的语言,我个人是喜欢把这些坑点全部搞清楚的,但这本书却避而不谈了,剩下的也就是所谓的“精粹”了。但清晰地过一遍知识点总是好的。
  • 强烈推荐《你不知道的JS》。精彩至极的一本书,将JavaScript的坑一网打尽。之前搞不懂的问题,比如闭包,this之类的都可以在这里找到答案。
  • ES6也是必学的内容,推荐阮一峰老师的《ES6 标准入门》。但这本书以API居多,所以还是留个大概印象,以后写到类似的地方,查一查有没有ES6更简洁的写法就好,不必死记硬背。以及需要学会Webpack的使用,Babel和模块化就靠Webpack了。
  • 不太推荐《JavaScript权威指南》,也就是犀牛书。那就是一本字典……

进阶:
  • 《JavaScript设计模式与开发实践》,设计模式是必须了解的内容,这本是写得不错的。
  • 《高性能JavaScript》,红宝书作者的另一力作,讲了一些优化技巧与性能瓶颈问题,值得一读。

以上内容用时1个月左右,中途可穿插IFE2015 task2的题,比2016年的要简单。
这些书全部刷完的话,应该可以跟人谈笑风生了。
开始实践,IFE2016阶段二的题,想怎么刷就怎么刷吧。如果有编程经验的话,应该没什么压力了。
3. JavaScript框架
这部分就比较自由了,每个人点的技能树都不一样的。前端的发展是爆炸式的,换工具比翻书还快,所以还是以看文档为主了。
目前主流框架经常被提及的是React,Angular,Vue。知乎搜一搜就有相当多的优秀答案了。不过这个答案也有时效性,说不定过两年这些框架全都被淘汰了呢【逃
学习至少一种框架,把IFE2016刷通关吧。耗时1个半月左右。
进阶:看各种源代码。这也是我最近打算做的事情,但是好像期末考要到了TAT
最后补充一下,计算机基础知识是很重要的。由于本人有OI的经验所以稍微占点优势。再推荐几本书,抽空还是要看看的:
  • 《深入理解计算机系统》,CSAPP,也是我们专业这学期的课程(但是我的专业明明是EE啊)。
  • 《计算机网络 自顶向下方法》,看名字就知道必读了吧。
  • 操作系统好书挺多的,推荐一本 Operating Systems: Three Easy Pieces ,英文不够好就《现代操作系统》吧。
  • 算法和数据结构,推荐两本:《算法导论》《数据结构与算法分析》。似乎算法和数据结构与前端关系不大,但作为一个码农,不要求你写红黑树,至少快速排序和二分查找这种要会写的吧。
话说这几本中文的,都是机械工业出版社的啊……
后记:其实学的内容越多,就越感到自己知识面的匮乏。这个答案本应还有4,5,6甚至更多的,但由于本人只学了三个月,水平有限,目前只能达到这个程度了。写得不对的地方,望大牛们指正,轻拍。谢谢大家~
------------
惊人的点赞收藏比……只收藏不点赞的都是坏银QAQ

白米Ⅲ级

赞同来自:

编辑于20171020
昨晚收到了百度的offer,也算圆满结束了我的秋招之路,秋招参加面试的几家单位滴滴、华为、拼多多,以及我老家的中移物联网都收到了录用offer(至于我最后去了哪儿,这就是个迷了)。秋招参加了面试的就这几家,他们的offer也算是给我自学前端的一个认可了吧。
这里给自学前端的,以及打算入门前端或者即将找工作的一些小建议吧:
关于项目:很多人问我怎么接项目,其实我接的项目真的很low,以前都是接的外包,外包除了能挣点钱,由于开发周期短、没人检查你的代码质量,其实学不到什么东西。
简历上面的几个项目也是实验室和校内的项目,当然简历被刷也是常有的事,比如网易、京东、腾讯就没给我面试机会。所以项目不够有亮点的,最好可以找人内推。然后我每次面试自我介绍都是着重介绍我的“电子科技大学助理管理系统”,真的是一听就很low的项目,然而我确实在里面花费了很多心血,从项目的需求、选型、开发、重构、优化等等过程亲力亲为,因此,无论你的项目看起来多么low,只要你认认真真在里面做了事情的,公司都会认可你的。
然后就是我的感觉大公司都很看重基础,不要觉得会react、vue、angular....几十种框架就很牛逼了,他们只要你懂得其中一种就够,注意是“懂”,不仅仅是“会”。
总而言之,先打好基础,再研究工具。能实习就去实习。

小感慨:看了自己以前的回答,发现自己从科研走不通选择了自学前端,然后拿了互联网的offer之后又没有选择互联网。用一个朋友的话来总结自己吧,其实我一直在路上,至于什么时候找到自己想要的喜欢的适合的,还在寻找吧,但我一定会在把每件事情都做好。
祝各位热爱互联网和前端开发的朋友们都能实现自己的理想和抱负吧~
编辑于20170227
首先感谢大家的点赞,这里统一回答一下评论中出现的问题:
1.能不能分享这些电子书?
答:其实我是很乐意分享的,但是考虑到版权问题,大家还是到正规的售卖电子书的地方买吧,抱歉咯~ 不过我可以很乐意的分享我目前正在撰写的Gitbook Web Practice BooK · GitBook (平时对前端知识的总结)
2.如何接外包?
我觉得这个应该是很容易吧 ==,我以前也是不知道,最开始是在我们学校的BBS看到有人的项目找前端的,就接的。(不过建议是在接之前,自己先动手写过几个网页) 然后接了一次,就会有人又来找你。还有就是我们学校外面盘踞了好几个专门做外包的小公司,他们也招做兼职的。不过接活儿的时候一定要注意先多了解一下这个项目,有没有原型图,时间线,技术要求,对方是否靠谱等。
3.打个小广告
上面也介绍了,自己为了找工作,拼命的在补基础知识,并且想把这些知识写成书中。目前就完成了HTML和HTTP部分,不过还是希望大家关注一下,戳这里哦—— Web Practice BooK · GitBook
另外有人问我Git: daisyHawen (Hawen) · GitHub
以下是原文:
好多人提到百度前端学院,是的,作为一个从百度前端学院受益的人来说一说:
2016.3做了百度前端学院系列,确实学习了不少东西。因为其实很多时候做很多东西都是项目驱动型的,如果不给你布置一个什么任务,你根本没有决心学习下去。
然后另一个就是 慕课网。因为慕课网上面的教程好多都是免费的,而且技术也很新。
而且我觉得我看视频的效率比看书要高。
学了一年了,说一下我的心路历程
首先第一步必然是W3cschool
另外我觉得菜鸟教程也不错
HTML 教程 | 菜鸟教程
CSS 教程 | 菜鸟教程
JavaScript 教程
jQuery 教程 | 菜鸟教程
Bootstrap 教程

(不得不说MDN才是王道)
第二步 然后,说一下,我学习的慕课网课程:
  • 最基础的课程:
HTML+CSS基础课程
http://www.imooc.com/u/1974843/messages
JavaScript入门篇-JavaScript入门视频教程
学习HTML、CSS、JS入门
  • 学习IDE,和GIt
快乐的sublime编辑器_sublime编辑器使用
版本控制入门
  • CSS进阶
  • 学习一些CSS3的特效,有好多,这里只列了一部分
十天精通CSS3_css3入门视频教程
CSS3实现漂亮ToolTips效果
css3实现网页平滑过渡效果
形形色色的下拉菜单
CSS3绚丽照片墙
CSS Sprite雪碧图应用
按钮特效-慕课网
Sass入门篇_Sass入门视频教程
  • HTML进阶
  • 主要是学了H5的Canvas
HTML5之元素与标签结构
HTML5音乐可视化
炫丽的倒计时效果Canvas绘图与动画基础
Canvas绘图详解
HTML5离线应用实战演练
  • js进阶
jQuery源码解析(DOM与核心模块)
  • 尝试做一个完整的系统
H5+JS+CSS3实现七夕言情
CSS3扁平化风格博客
商城分类导航效果
手把手教你实现电商网站后台开发
  • Node.js React.js以及前端工具webpack gruntfile
进击Node.js基础(一)-慕课网 进击Node.js基础(二)-慕课网 node+mongodb 建站攻略(一期)-慕课网 node建站攻略(二期)
React入门视频教程 React实战--打造画廊应用(上)-慕课网 React实践图片画廊应用(下)
Grunt-beginner前端自动化工具
学习时长居然有1046小时,当然也有可能是因为我忘记关实验室电脑了。不过后来当你入门了之后,我建议看视频还是来得太慢了,还是看API文档好。

(更新于20171020 后来,我又买了好多付费教学视频来看,什么性能优化类看,什么源码解读类的也看,不仅仅限于如何搭建一个网站了)
第三步 就是百度前端学院了
当然光学这些还是不够的,这期间自己还接了几个外包来练手。
一个是管理系统,另一个类似于借贷宝一样的web系统
还有看书:

以上是我的书单,当然我还没看完。
目前就看了
  • HTML与CSS3权威指南
  • javascript权威指南
  • HTTP权威指南
  • javascript+dom编程艺术
  • (更新于20171020 现在基本上看完了,还有Vue.js权威指南,Node与Expres开发指南,实战ES2015,阮一峰老师的那本ES6....)
最后最后,善于写博客自己总结
非常害羞的给出的自己的blog,写得很粗糙,平时主要只是为了记录自己学习过程中的体会。
Daisy花园

然后也试着用jekyll和gitio搭了博客,但是疏于管理 ,看看就好, Daisy花园
我平时还是比较喜欢在CSDN上写(估计这点会被吐槽,因为不符合程序员的极客思维),但是我觉得CSDN也是markdown语法,写起来也挺方便的啊。
而且在上面我找到了成就感啊



现在已经开始有排名了

后记
想说研一这一年很辛苦:
有导师这边的事:一边在研究云里面的访问控制(发了一篇EI),写了一篇国内核心(然而这居然不能挂自己的名,这也是我放弃了科研的原因),还参与了中国云桌面标准的拟定。
还要上课:昨天看学分,发现要求只用修25个学分,自己修了30个。
另外还接了外包项目,所以经常翘课熬夜加班啊。
因此很多时候学习前端都是偷偷摸摸,导师一出现立马调到word或者matlab界面,然后还翘了很多选修课,不过回头看看自己的收获还是蛮多的。
然而前端技术正在日益更新,而且里面还有很多知识点技术点掌握不牢实,所以,这一年继续加油。
争取明年这个时候可以找一个理想的前端工作。
最后再说一点,遇到bug一定要用google,stackoverflow上面有很多好的问题解答。
难得写得这么用心,您就点个赞再走呗~

李晨 白米Ⅲ级

赞同来自:

从基础到精通列举Web前端工程师的学习路线:
HTML5、CSS、JavaScript、JQuery、Ajax是Web前端工程师的核心技术,另外,作为一个合格的前端工程师还需要熟悉互联网交互设计能力、熟悉后端服务器运行环境和数据通信协议、掌握响应式布局框架、Bootstrap、AngularJS等最新的JS框架技术。
基础:HTML,、CSS学习
主要学习HTML标签、属性和事件,学习使用CSS来控制网页的样式和布局。
基础知识点:HTML 基本格式、文本、图像、超链接、表格、列表、表单、框架等;
CSS 基础语法、框模型与背景、文本格式化、表格、显示与定位、动画、过渡、2D/3D 转换、CSS 优化等。
超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终返回到浏览器端的都是HTML代码,浏览器将HTML代码解释渲染后呈现给用户。因此,Web前端工程师必须掌握HTML的基本结构和常用标记及属性。
HTML 的学习是一个记忆和理解的过程,在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果,在“代码”视图中学本质, 将各种视图的优势发挥到极致,这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味。
在学习了HTML之后,我们只是掌握了各种“原材料”的制作方法,要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化。开始CSS学习。
CSS是英文Cascading Style Sheets的缩写,叫做层叠样式表,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的,这样就极大地提高了我们开发的速度,降低了维护的成本。
同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习,我们就可以顺利完成“一幢楼房”的建设。
进阶:Javascript,jQuery
做HTML5开发,主要使用JS语言,所以学习JS非常有必要,必要时还要学习一些JS库。如jQuery。
基本知识点:JS语法、函数、DOM对象、事件处理等。
JQuery:语法、选择器、JQuery HTML操作、jQuery CSS操作、事件、元素、特效、JQuery Traversing、JQuery常用Plug-in、JQuery扩展、JQuery Mobile
JavaScript是一种在客户端广泛使用的脚本语言,在JavaScript当中提供了一些内置函数、对象和DOM操作,借助这些内容可以来实现一些客户端的特效、验证、交互等,使页面看起来不那么呆板。
JavaScript的兼容性和复杂性有时候的确让人头疼,还好有“大神”做了封装。
jQuery 是一个免费、开源的轻量级的JavaScript库,并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持),同时现在有很多基于jQuery的插件可供选择,这样在我们实现一些丰富的动态效果时更方便快捷,大大节省了开发的时间,提高了开发速度,这也充分体现了其 write less,do more的核心宗旨。
高级:AJAX ,JSON ,XML
ajax是指一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。Ajax 的核心是 JavaScript 对象 XmlHttpRequest。
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成(网络传输速率)。
框架扩展学习:Bootstrap,jQuery UI,jQuery EasyUI ,jQuery Mobile
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架,并且支持响应式布局。一经推出后颇受欢迎,一直是GitHub上的热门开源项目。
在项目开发过程中,我们可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置,然后再有针对性的微调样式,这样基于框架进行开发大大缩短了开发周期。
拓展:
10大H5、Js 3D游戏引擎和框架
22款最佳JavaScript框架盘点
常用开发工具:Dreamweaver,Notepad++,Photoshop
10款Web程序员必备的在线CSS工具
Web前端工程师其他技术:
调试工具:Firebug
UI 交互设计:Photoshop设计工具、原型工具AP、互联网UI交互设计理论
HTTP协议:服务器端组件原理、HTTP请求(GET、POST、PUT、DELETE等)、HTTP响应、Cookie原理、Session原理、Restful协议
服务端:Java服务器端技术简介及Tomcat服务器、PHP服务器端技术简介及Apache服务器、.NET服务器端技术简介及IIS服务器
响应式布局:使同一份代码快速,有效适配手机,平板和PC设备。
Web前端技术刚入门时比较快,但想要精通在后续学习中速度则会降下来。因为前端工程师在工作中接触面比较光,在知识体系上就有一定的广度,但要成为一个有竞争力的工程师在核心技术上也要有深度,有时就牵涉到取舍的问题。另外,WEB前端技术日新月异,入了门想要有一定的发展就需要不断的学习与调整。
附两张Web前端工程师学习图:


白米Ⅲ级

赞同来自:

学习前端就好比如盖房子~
html就充当了房子结构这部分,也是房子的基础。
css呢,就好比咱们房子的装修,墙面什么颜色,什么风格,什么地板...这些给房子改变风格,样式的就是css
javascript呢,就好比这个房子的功能,房子需要制冷吧,需要暖气吧,也需要上下水吧。这些功能性的就相当于是javascript
例子可能不是很恰当,只是帮助大家有个初步的认识~
方法步骤、工具以及开发的案例展现
1、前端工具箱(dreamwear/sublime/Photoshop/SVN等)
2、零基础入门(html,CSS)
前端开发概况、代码入门
页面基本结构、文档声明、编码声明、css语法、style属性、link和style标签、id属性、基本样式、Border 、Background、 Font、盒模型、文本设置...
常用标签集合
header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd...绝对路径、相对路径、标签语义化、标签嵌套规范、SEO...
常用选择器&标签类型划分
d、class、类型选择、包含选择、群组选择、通配符、选择器优先级、标签样式初始化订制方案、超链接及伪类划分、标签类型划分及特性、inline、inline-block、block..
浮动进阶
浮动的作用、浮动的特性、文档流、浮动的各种问题、clear、BFC(块级格式化上下文)、触发BFC的条件、Haslayout、Haslayout的触发条件...
定位
relative相对定位、Absolute绝对定位、Absolute绝对定位、Fixed 固定定位、inherit 继承、static静态定位、默认值、zIndex层级问题、margin负值、透明度...
表格和表单
表格标签、表格样式重置、单元格合并、表单元素、表单相关的属性操作、表单默认样式初始...
兼容性问题处理
兼容性问题总结、浮动在IE6,7下的各种问题、表单在低版本IE的问题、处理低版本IE对新增标签的支持、CssHack、条件注释语句、PNG问题、透明度的问题、固定定位在IE低版本的处理方式...
整站进阶
样式规划、favicon、Css Sprite、Data URI、隐藏元素、测试工具使用、滑动门、等高布局、三列布局、未知宽高图片在容器内水平垂直居中、文本水平垂直居中、多行文本水平垂直居中...
css3入门
transition、属性选择器、nth-of- type、nth-child、backgroundSize、box-sizing、圆角,盒模型阴影、文字阴影、rgba、表单高级、H5表单新增属 性、E:not(s)、E:target、E::selection、background-clip...
移动端布局
测试环境Emulation、viewport、 window.devicePixelRatio、物理分辨率、Media Queries、rem、window.screen、移动端布局相关问题、 window.deviceorientationevent、横竖屏判断...
Animation和Transform
浏览器前缀、keyFrames、Animation调 用、播放次数设置、动画偶数次调用顺序、Animation的问题、无缝滚动、动画播放|暂停、rotate旋转、deg、skew斜切、scale缩 放、translate位移、transform-origin、transform的执行顺序问题...
Bootstrap前端开发框架
Html语法规范、CSS语法规范、Less 和 Sass 中的嵌套、class 命名、选择器、Normalize.css、栅格系统、排版、代码、响应式工具...
3.项目实战
PC端的企业网站布局(例:sony官网)
PC端的电商类网站布局(例:京东商城)
移动端常见页面布局(例:微信活动页/商城)
推荐图书:
学习前端书籍自然不可少,这里给大家推荐《html 5与 css 3权威指南》,虽然主要是讲解html5+css3,但倒也是一本好的入门书籍。该书比较系统,覆盖面也比较广。技术新颖,所有知识点都紧跟 html 5与css 3的最新发展动态(html 5和css 3仍在不断完善之中);也有比较强的实战性(包含246个示例页面),不仅每个知识点都 配有精心设计的小案例(便于动手实践),配合案例,也比较生动有趣。该书不仅能满足你全面而系统地学习理论知识的需求,还能满足你需要充分实践的需求。
本次整理了一些web前端视频资料,注册账号就能免费下载,初级、中级、高级的任君选
下载链接: web前端开发工程师_web前端开发视频教程
个人认为学习前端可能又分为下面几个阶段;
第一阶段——HTML标签的学习
超文本标记语言(HyperText Mark-up Language 简称HTML),“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
html是一个网页的骨架,就好比是盖房子的结构~这也是前端页面的基础。试着想一下,如果一个房子连砖头和水泥都没有,后面的步骤又有什么意义呢?所以我们必须完全掌握HTML的基本结构和常见的标签,属性。有了一个好的开始,距离成功已经一小半啦~
关于HTML怎么记忆、学习?可能一上来死记硬背,也不会有太好的预期。而且还有可能被吓到?
“我去!这么多标签!怎么记得玩?”
个人感觉有两点可以尝试:
1,语义化的去记忆。比如ul li这个就是列表,button就是按钮,table就是表格。其实这也是html5所倡导的,语义化标签。
2,试着写一个一个小的demo,也许就只是一个列表,一个表格,或者一个按钮。也许写着写着你就懂了呢?
学习HTML就是要自己不断的去写,去尝试。看着自己的代码能跑起来,有了心目中的效果,这种心情还是很开心的!给大家推荐一个网站,w3cSchool,这里面有在线的代码编辑器。可以边写边看到效果~
ok~学习完成html后,我们来到第二阶段——css
去给我们的房子装修一番吧~
第二阶段——CSS的学习
CSS,层叠样式表—— (Cascading Style Sheets),是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对 网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文 本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。
CSS看似比较繁杂,其实只要掌握了CSS中的盒子模型、定位、以及页面布局,就基本上掌握了大半啦~这时我们就以及能够对网页中各个元素进行精准的排版,做出符合我们意愿的网页啦!
关于CSS的各种属 性,我们还是可以参考学习HTML那样。可以说CSS的属性几乎完全是语义化的。我们需要改变边框,那就是“border”,那我们需要右侧边框做一些改 变,那就是“border-right”。很明显,接下来按照我们的需求还有“右边框的宽度——border-right-with”,”右边框颜色—— border-right-color”等等等,诸如此类~
完全就是我们需要什么,只要凭着需求去寻找。
说完装修,我们终于要给房子打造一些功能啦~follow me~
第三阶段——JavaScript
JavaScript一种直译式脚本语言,是一种动态 类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
简单来 说,javascript是一个可以运行在浏览器上面的语言(当然现在基于一些库/框架已经远不只是在浏览器上了),它可以操控浏览器,让浏览器听从我们 的命令。这有点像一个电视剧和遥控器,而javascript就是我们的遥控器。浏览器根据javascript的指令,做出相应的反馈。比如操作 DOM(也可以理解成为操作HTML),可以操作CSS。有了javascript就可以让我更加灵活&动态的操控HTML,CSS.
严格来说、HTML和CSS还算不上真正的“语言”,而javascript却是如假包换的脚本型语言,既然是语言,那就会有字符串,数组,对象等等。而我们的javascript可以处理这些与数据有关的工作,比如给数组排个序,去个重等等。
而我们依靠javascript可以做些什么呢?网页上常见的轮播图,网站的注册功能,提交我们的留言,刷新获取新闻等等。当然,我们强大的javascript远不止此啦~以后再为大家深入介绍~
然而因为历史原因,比如我们灰常“尊敬”的 IE 浏览器~出了一套自己的javascript标准,没有和主流javascript标准兼容啊!!作为一个前端er是不是应该把更多精力用在有意义的地方呢,而不是解决兼容。。。
所以,似乎我们还需要一个利器,来让我们更快速的开发~没有错,这就是我们的——jQuery!
第四个阶段——jQuery
jQuery是一个兼容多浏览器的 javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人 John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开 发。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
如果继续用盖房子做例子,jQuery更像是一个装修队。我们只需要关注我们的房子设计本身,把我的想法,理念告知这个装修队,让它来给我们处理那些杂七杂八的事情。比如会不会吵到邻居?怎么协调物业?干活总得有人手的,对吧...
jQuery的优点我就不挨个说啦,一句话,jQuery是你更上一层楼的利器,也是我们前端er一大利器!
Web前端学习小建议
这里跟大家扯一扯学习前端的小方法,是我自己的学习方法,大家凑合看看,倒也不一定对~
在写css前,其实html的结构要是比较合理的,这样写css也会比较顺手。在写一个网页之前,建议先琢磨几分钟,不要上来就写。多去看看别人是怎么写的,然后结合自己的项目,心中有一个大致规划。可以先把最外层轮廓写好,先不着急去写某一个具体的部分。
这里给大家分享一些小技巧:
1、使用reset.css
火狐和IE这两种不同的浏览器,在绘制CSS样式方法上截然不同。这种情况下,使用reset.css重置所有的基本样式会让你得到一个全新的空样式表。(可以去网上找一下,很多的)
2、CSS缩写
CSS缩写简化了你的CSS代码,更重要的是,它让你的代码更加整洁易懂。
不是像这样创建CSS
.header {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}
而是像这样创建CSS
.header {
background: #fff url(image.gif) no-repeat top left
}
3、理解class和id
这两个选择器总是让初学者感到迷惑。在CSS中,Class和ID分别用点“.”和井号“#”来标识。简单来说id就是用来标识那些单独不重复的样式,而class是可以重复使用的。
4、实用的<li>
<li>也叫链接列表,在与<ol>或<ul>正确搭配的时候非常好用,尤其是用在导航菜单样式上。
5、少用<table>多用<div>
CSS最大的优势之 一是使用<div>达到样式上的灵活多变。不同于<table>,<div>里的内容不会 被锁在单元 格<td>中。可以说几乎所有的表格布局都可以在<div>和样式的正确使用下完成。当然,有大量表格内容时,还是 用 <table>吧。
6、CSS调试工具
在设计CSS时,能够得到页面布局的预览对于优化CSS样式和纠错是很有帮助的。这里有一些免费的CSS调试工具推荐给你,你可以把它装在浏览器上:比如FireFox Web Developer、DOM Inspector、Firebug等
7、!Important
所有被!important 标记的样式,即使它后来被重写,浏览器也只会采用被标记的那条。
.page {
background-color:blue !important;
background-color:red;
}
比如上面的例子,因为background-color:blue 被标记为!important ,即使后来有把背景改成红色的语句,也只采用被标记的那条。!important 用来强制使一个样式避免在之后的编码中被修改,遗憾的是IE不支持。
牢记以上小技巧,也许你的css技能突然就起飞了呢?
关于javascript的一些小技巧,下次我再整理给大家~一次性看太多,大家是不是也有点晕?
学习前端需要方法,更需要一颗平常心,不要把前端想的多难,需要吃什么苦。。。既然学习这么痛苦,为什么不快乐一点学呢?
anyway~希望大家可以成为一个优秀的前端er!

白米Ⅲ级

赞同来自:

老衲多年前失足跌下悬崖遭遇异缘, 获得失传已久上古时期前端天书三卷, 每一卷除了心法之外还有招式. 开篇第一言,“天地不仁,以前端为刍狗”,老衲按照天书苦学修炼, 相信终有一日,定能成为武林霸主,一统江湖。
老衲自出道以来, 遇到的道友, 功力一般在一二层之间.能到达第三层者,凤毛麟角。但江湖上兴起了学习前端的热潮,一场血雨腥风即将撒满神州大地,PHP,js,Java,Python究竟鹿死谁手,不得而知。
为了能使三卷天书造福江湖,夺我前端霸主地位,我说说我对三卷天书的学习心得,虽然我才练到第一卷。
适合看此天书的人有两种,门派是前端的和门派是非前端的。
你或许会疑惑,其他Python派,PHP系,Java流。。。。为什么要学你前端的招式。前端在江湖就是招式和武器,刀、枪、剑、戟、斧,其他门派都是专修内力,不重招式。
难道你天真的以为前端只有其形,不得其神,那你错了,天书第二卷中修炼nodeJs,轻松打通任督二脉,便可修炼绝世神功!
下面老衲将亲授如何练习此功。

是的,前端是门神功,杂乱无章,尤其其中有一门JavaScript的心法,与其他门派心法背道而驰。
所以其他门派学习心法必先废其功力再练习,否则,走火入魔,万劫不复!当然如果剑走偏锋,多派心法齐修,也能修成正果,就像《诛仙》中的张小凡,同时修行天音功法和青云心法,佛、道、魔三修之大才,成为绝世高手。
所以此天书更适合无任何功力的习武之人,因为上手太容易了,一个Chrome浏览器,一个编辑器(sublime,notepad++........),我们看下前端的学习曲线。



学习三个月便可到第一层,天资聪慧者九个月可到第二层,上古奇才二十七个月可到达第三层。
[h1]天书一卷[/h1]前端修炼初期重招式不重心法,七天玩转HTML各种标签,七天学习HTML5各种暗器,再花七天学习CSS各种琴棋书画,让自己才兼文雅,学比山成。最后花七七四十九天研读JavaScript,此时你会接触到一些打坐修心,呼吸吐气的的心法,之前学的都是江南七怪的杂七杂八,郭靖出去打不过谁的,只有挨打的份,只有学点全真教心法,才能攀岩走壁,套得汗血宝马。心法中所涉及的闭包,面向对象,Dom,ajax是JavaScript心法之上乘,马虎不得,乃前端大法根基之所在。得js者得前端,得前端者得天下!

[h1]天书二卷[/h1]习完天书一卷,你便可下山历练,行走江湖,斩妖除魔,行侠仗义!记住,打不过就跑!你也会发现,经常打不过人家,你缺把趁手的武器,人家打架姿势,帅得一匹,用bootstrap,foundation,打得很是漂亮,就拿拔剑的姿势
看看人家



再看看你的姿势(建议视频全屏看,注意剑入鞘的姿势)













https://www.zhihu.com/video/896407255635861504











你会发现别人不仅打架的姿势优美,斩妖除魔的速度也是刚刚的!
原来人家用了vue或者react这样的法宝,能够以一敌十。当然行走江湖,要讲规矩,什么TCP,http,你得知道点,不然哪天一不小心就被道上的人做成人肉包子吃了!
当你学完vue或者react这等法宝,你就可以修炼nodeJs心法,挑战其他门派,告诉他们,江湖没你们照样转!斩妖除魔更不在话下。
另外,某些非前端心法你也得学一学,比如Git,svn等等,这些是江湖中人一起修炼的法器,就像学玉女心经,小龙女一个人是搞不定的,得和杨过一起修炼!这块安全也很重要,不然难免中间会跑出个尹志平。还有全真教那群道士练的天罡北斗阵和少林派的十八铜人都用此心法。
当你武器装备精良,内功深厚,打遍周围无敌手,可以好好研究研究设计模式,看看你不知道的Js上卷和中卷,下卷失传!
[h1]天书第三卷[/h1]第二卷我已经看不懂了,我就不扯第三卷了。。。。。等我学完我再更。。。。。
呜呜呜。。。。。一入前端深似海。。。。。。

我半生坎坷,却多不由我。我欲平凡度日,却卷入佛道之争;我欲安心修行,却成了妖魔邪道;我愿真心对人,却不料种错情根,待我明白了真心待我是谁的时候……

我已经回不去了,对不对,小灰?

白米Ⅲ级

赞同来自:

上W3school把html和css走一遍,然后动手写几个页面,可以自己想像的写,不过最好仿照一个网站写。(如没任何编码基础的情况下,大概1-3周)

然后你熟练一点后你就发现页面上还有这么写奇怪炫酷的效果,这时你想将这些效果也弄一弄,然后就开始学习JS,先暂时了解Dom编程这一块,有趣一点,慢慢来。(大概2-4周)

再然后你会想前端页面上的内容怎么与后台进行交换的,这时你需要学习一门后端语言和数据库(不一定要精通,但一定要了解,并知道数据是怎么传递的,并手写一个简单的后台。)
(因为有JS的一些基础了,开始学习会比较轻松,1个月掌握)。

然后重新学HTML.CSS.js,因为目前状态是什么都懂一点,现在才算正式开始学前端(现在学习的重点就是css+js,比如Ajax,json,html5,css3)。

别看学习时间挺长,其实亲历并不是很长(每天下班回去学习那几个小时,算一天)。

白米Ⅲ级

赞同来自:

白米Ⅲ级

赞同来自:

小白必看:web前端学习路线三部曲

初级前端

——主要学习三个部分:HTML,CSS,JavaScript

一、html+css部分:

   这部分特别简单,到网上搜资料,书籍视频非常多。css中盒子模型,流动,block,inline,层叠,样式优先级等这些自学起来也是非常容易。最 后再深入了解下浏览器差异性,ie9以下兼容简单了解就行了,ie9以下浏览器被淘汰掉是趋势,低版本没必要浪费大量时间去学习兼容主流浏览 器,google chrome浏览器、firefox浏览器、safari浏览器、opera浏览器即可。浏览器差异内容很多,建议在实践中多多积累。

二、JavaScript部分。

  1.基础学习:

   难点,也是重点,要学的内容实在很多,如果没有其他编程语言的基础的话,学起来可能要费些力,有很多比较抽象的概念,必须要深入理解,比如闭包、原型、 面向对象、封装等,要理解透彻。看书是必不可少的,找一本优秀的js书从头到尾,反复研究学习,第一遍可以快速翻阅,大体知道了解概念即可,第二三遍就需 要深入学习了。另外,js面向对象编程必须要学习,非常重要,个人推荐一本书, Stoyan Stefanov著,凌杰译的《javascript面向对象指南》。边学边练,实践出真知。

  2.jQuery学习:

   这些基础知识掌握好之后,还需要学jQuery,这是一个非常优秀的Javascript库,大型开发必备。它简化了Javascript的复杂操作, 消除了Javascript跨平台兼容问题,提供了大量实用方法,有良好的文档和帮助手册,是一个非常成熟的Javascript库。

3.进阶学习:

  有了以上知识,对于大多数小型网站,你应该已经可以写出能够工作的代码了。但要想成为更专业的前端,你还需继续努力。更高的要求大概还有四方面:易维护,可测试,高性能,低流量(移动端)

    中高级前端

1.工具学习:
大 型项目中,前端代码构建已经不是简单的压缩一下了,依赖管理、模块合并、各种编译步步不可缺少,需要学会使用grunt、gulp等前端构建工具,要学习 的还有:包管理器bower、npm,代码优化CSS Lint、JSHint、JSLint,CSS预处理器less、sass,代码管理及版本控制svn、Git,web框架/服务器Node、 Express,代码规范、HTML模块化、css模块化。

  2.布局框架学习如Bootstrap.

  3.新技术html5学习。

  4.js框架学习,requireJS、AngularJS等,往前端架构师靠近。

  5.nodejs学习。

白米Ⅲ级

赞同来自:

根据自己经验做的前端技能树 前端学习技能树 希望有所帮助=-=

mark 白米Ⅲ级

赞同来自:

前端入门还是相对简单的,毕竟算是鄙视链末端(实话实说,别打我)
基础入门学习曲线还是比较平缓,所以经常有看到各种设计师来抢我们前端的饭碗 逃)
学习路线基本上还是很经典的 HTML->CSS->JavaScript这一路线,并行学习我不太推荐,毕竟这方面知识还是存在一些依赖关系。
想入门的话,看前面的答案给了一堆参考资料,我认为其实不需要这么多;我们只要找准了主线,那些资料自己就能搜到,主线就是w3school 在线教程 ,把 HTML CSS JavaScript 部分学完就ok了。
到此差不多就算入门了。学习过程中建议多做点实际项目,如果没有实际项目,也可以仿站。比如就用css和html把知乎的静态ui仿出来。
不过当今前端高速发展,基础入门已经不够了,后面就该学点进阶的东西了。
这时候建议去学学 ES6/7,教程同样也只推荐一篇,ECMAScript 6入门 这边在线开源电子书足够了。
学的差不多就可以去学学 vue.js 官方教程写的非常好,是一个非常适合学习框架。vue学好了无论是去公司做事情还是入门其他前端框架都能做到胸有成竹。
学写程序最重要的就是动手,以上所有都建议自己动手实现。
祝题主早日入门前端,也希望我写的答案对大家有帮助。
点赞加关注,干货持续分享中。

白米Ⅲ级

赞同来自:

我整理过前端入门书单
前端入门书单 - 前端小记 - 知乎专栏

总地来说,CSS/JS/HTML先大致过一遍,然后可以做点小东西,比如todo list就很经典,还有TodoMVC可以参考借鉴,然后看需要再学别的工具或框架,然后就做具体项目边做边学吧。

然后,书籍资料、网上别人整理的文章什么的,多多善益。

白米Ⅲ级

赞同来自:

第一次在知乎回答问题,哈哈,好紧张~~~这个问题已经看了好多大神的回答,我也分享一下我这个小白学习web前端过程,当然没有大神们那么高效,感觉是最笨的方法,仅供参考~*^_^*

先说说我的个人情况和怎么接触前端。我专业测控技术与仪器,只会C语言和Linux,自学过Mysql一些基础内容,但也有学过PLC、Labview、EDA、单片机、Matlab等编程课,不过都偏相于硬软件相结合。九月初,一次偶然的机会,班里的艾同学用几句简单的代码,实现一个简单的个人网页,当时很好奇,感觉发现了什么新鲜事物,仿佛一下子就被这技术深深吸引了,从此我开始了前端自学。

一开始学习前端技术还是比较迷茫的,首先不知道从何入手,通过查阅了大量书籍与资料,决定了先从Git开始学习,先保障自己能把作品传到github上,这对后期提高学习兴趣有很大帮助,Git我是从廖雪峰的官方网站学的,里面有一套完整的Git教程,个人认为比较全和详细,教你如何安装软件、搭建环境变量、上传文件到库里、克隆别人的作品、分支管理等一系列基本操作,就不做详细说明了。

做完这一步过程,你就可以随时分享你的源码和参考别人优秀的源码作品了。然后我开始了HTML、CSS的学习,我用的开发工具是HBuilder,然后开始去W3C把HTML、CSS一整套内容先快速学一遍,记得,一定要动手敲,多思考琢磨。(还有也可以去慕课网,里面的视频全是干货,老师也比较幽默,学起来也比较轻松,不过还是得通过多练)HTML它是简单的标记语言,一般熟练了就能很快地使用它,就能建立起网页的基本结构了,学完它,你就得开始学CSS了,CSS它像是一门样式修饰语言。可以勉强算作弱类型语言,能让HTML更美观地呈现出来,好了,学完这两样你就可以做出一个静态的主页出来了,然后你就可以传到github上秀秀你的小作品。学习过程一定得给自己一些动力,有好的正向的反馈,不然很难坚持下来。所以你得多动手写代码,建议尽自己所能写一个简单的个人主页并把它弄到最好,一步步地修改完善,当你弄出一个好的主页,那时你就会有满满的成就感。(这个阶段没有基础的同学大概需要两周时间)当然区间需要你全心投入,认真总结思考,千万不要三天打鱼两天晒网!然后你就可以开始模仿一些作品了,百度、淘宝、京东主页等,看看他们主页的静态布局自己能不能完成,重复训练,完整地写几个页面下来,大概就能熟练地运用HTML、CSS标签了。

以上阶段我大概花了一个月,因为这些阶段在宿舍学,也比较懒散,所以进度也比较慢。然后这时,你如果想往这方向发展的话,得更深一步学习了。然我开始学习PS的一些内容,同样建议去慕课网学习,能让你短时间内了解PS前端工程师需要具备的技能,而且那讲师很幽默内容也很全。然后你就要学会切图,把UI设计师psd格式的图片转换成用HTML和CSS呈现出来,这时你就得深入学习DIV+CSS了,这能让你结构更清晰,作品更有效地布局,有助于后期维护修改。

学习了以上内容,我相信你对页面布局已经不会感到害怕了,接下来只需要去熟练,多写代码,争取短时间能更快更高效地完成。接下来我就开始学习BootStrap框架,以前需要大量的代码才能呈现出来的导航效果,现在只要添加几个类,就能很快地呈现,珊栏系统特别好用,而且自带媒体查询,能很好适应屏幕大小,你需要去学习它的一些功能对应的类,重复去使用加深印象,如果你需要修改内容也可以在后面添加你想改的样式(一般不修改原先的内容),没错,学习了这些内容以后,你就将学会一个很好的呈现效果的框架,我把之前写的个人主页用BootStrap自己去实现一遍,同时获得了很好的效果。

中间学了几个小技巧,iconfont字体库、CssSprite制作、animate CSS、Sublime text3,其中我想说下Sublime text3,简直就是开发神器,一句指令就能完成十几句代码,不过建议初学者还是多熟练敲代码好,等后续真,正需要开发的时候再深入学习。为了让页面有动态效果,接下来我开始学了CSS3,学会了用transition、transform、animation制作一些简单动态。接下来我就开始学JavaScript了,一些基本内容基础还是相对简单,不过到了后面对象、DOM、Ajax就相对费劲了,因为自己现在正处于这个阶段,所以也不好分享太多心得体会,等后面再慢慢更新内容。(有人建议JavaScript一些难得内容可以先跳过,如果时间不允许的话,当然学扎实是最好的),然后就得开始学JQuery了,它是一个神奇的JS库,JS里一些需要很长的代码它只需几句代码就可实现,我也正在学习,所以也不太好说经验总结,不过它相对原生JS效率明显比较低,不过也能大大加快开发速率。

以上大概是我目前学习的内容,当然还有一些细节不太好分享,也求一些大神能给我点经验,如何更好地走web这条路。同时也欢迎各位想学web前端的朋友们可以一起分享经验,共同进步。我相信当你喜欢上了一件事,你会激发出无限的激情与动力,这就是我学前端的理由,我相信只要你喜欢的事情,肯花时间,符合实际,总归会收获好的成果的,加油!(经验只供参考,欢迎各位交流,如果有不足之处,请指出,必虚心请教,本文不经同意,禁止转载)
匿名用户

匿名用户 白米Ⅲ级

赞同来自:

我最近恰巧总结了一些自己一路走过来的经历,在此分享给大家:
前端入门学习指南

觉得做什么都需要兴趣和持之以恒的心,优秀的前端的很难速成。

白米Ⅲ级

赞同来自:

首先学习之后的目的是为了找到一份工作,所以前端水平只要达到了公司的要求水平就可以了。
但是不同的城市对前端的要去是完全不一样的,因为我自己是在合肥。我就以这样一个三线城市的互联网公司对于前端实习生的要求来谈一谈。
先说说我自己的情况,我自己自学了两个月的前端,然后去找到了一份工作。

先从企业招人的角度来说,他们肯定是希望招到厉害的前端,但是他们也知道厉害的技术很少去做前端了。
所以三线城市的公司觉得只要能够招到网页制作师就可以了。
什么是网页制作师,能够用css布局,能够写一些网页特效就可以了。
所以对于想从事前端的人来说,只要你能够用css布局,能够写非常常见的网页特效。基本上就可以试着在三线城市找前端工作了。



现在我具体说说html css JavaScript要到什么样的水平,就可以试着找工作了

html常见的标签,认识,知道怎么用就可以了。
你可以直接把一些大网站的index.html保存到本地,然后看看里面的每一个html标签,认识完了,基本上html水平就可以了

css能够到仿京东首页,做html5宣传页就可以了


JavaScript能够写轮播图,下拉菜单这样简单的网页特效就可以了。

最后一定要会的就是jquery,毕竟小公司几乎没有不用jquery的,能够用jquery操作dom就行了,即使不熟练也没有关系,去了公司再好好学习。
慢慢摸索。

现在很多小公司在广泛的使用bootstrap,这个还是非常建议学习一下的,学习完这个之后,对于移动web的开发也就了解了很多了。

剩下的一些前端技术,自己一个人自学是比较不容易学的,因为没有业务场景,你只能去模仿demo。自学的效果都是不太好的。
或者就是企业的需求不是很强。

自学效果不是很好的前端技术如下:ajax,JavaScript面对对象和封装框架
,angular等mvc框架。

企业需求不强的前端技术:canvas 混合app开发 nodejs。


关于学习资料,我自己的学习资料都是在淘宝上面买一些知名培训机构的视频教程,只要几块钱就行了。
这些教程非常的系统,比自己间断的在慕课网等一些在线平台学习要好很多。因为系统的学习是非常重要的。


最后的最后,去企业实战是学习最好的方法。
匿名用户

匿名用户 白米Ⅲ级

赞同来自:

自学前端两年,楼上的推荐我都基本都试过。现在已经在两家公司实习,下一个目标是想进大公司。我发现,你想学得好,有时候不止是时间的投资,还应该包括金钱,现在好多前端培训课程出来,乱七八糟的。我听过一些,感觉我自学二十分钟比他讲一小时有效果。
我推荐一个楼上都没有的,VIP视频列表 这个是妙味课堂,我没有参加他们的线上线下培训,我是付费看他们的视频,这个对我来说已经足够了,毕竟钱也不是很多。付费意味着有质量的收获。听看他们部分视频感觉还是不错的。
有些网站为什么我不喜欢了,就教程视频来说。好多视频的录音者的发音,都带有口音,麻烦不是人人都是你那条村的,而且清晰度也是一个问题,好多时候根本看不清楚。另外一点是关键,麻烦你们把讲的知识点,写下来,不要就会嘴里说,我想记下来难度要我重新听几次啊?不止是PPT必须,还有写代码的麻烦备注一下啊,好多时候学员一下就忘记了,有更奇葩的,就是早把代码写好了。
最好再推荐我目前感觉最适合初学者的网站,首页-妙味课堂www.miaov.com,推荐可以试试付费观看教学视频。。

我不是推销的,,,,

白米Ⅲ级

赞同来自:

谢邀啦,里面的大神说的没错~我就不再过多掺和啦。
------------
简单说一下吧:
首先什么是编程语言?编程语言就是人和机器沟通的需要~机器是个听话的好伙伴,然后他有他自己的语言,而且只有学会了他的语言才能和他很好的交流,他也能够更好地理解你,为你服务。

html是一种文本标记语言,用一个个标签告诉浏览器我这里是标题哟,可以用<title>标签,我这里是段落<p>标签。没有什么逻辑判断能力,不算一门真正的编程语言。但是很重要,帮助浏览器理解你的每个部分是什么东西,是一个网页不可缺少的根基。

css是一个页面的样式表,比如我这个段落要用什么颜色,什么字号……相当于给页面进行硬装修。也相当于告诉浏览器指挥每个页面元素要在哪里站好。这个还是不算真正的狭义上的编程语言,逻辑性不强~但还是很重要,人靠衣装,马靠鞍~这是在给我们的网页穿衣服,能不重要吗!!!

js是一门脚本语言,有一定的逻辑结构~这意味着你用这门语言和机器沟通的时候,机器能够理解更复杂的指令。比如,你可以告诉计算机说当你遇到这个情况的时候,你自己看着办,如果是甲情况,你就去执行A指令;如果是乙情况,你就去执行B。有了语言之后,页面就好像活了过来,页面就能够响应用户的操作啦(专业术语叫做事件)。

所以说,这是前端三剑客。有一个html是一个裸体羞羞哒的网页;有了CSS,页面穿上了衣服,再也不用非礼勿视啦;有了js,页面就能和人互动啦,有了一定的生气。

综上所述,html+css+js学习没毛病~

--------------------
前端是一个庞而杂的学科,没有一蹴而就的捷径,需要学习很多很多东西,这意味着要潜心去学习,不要学着学着就怀疑人生了。

如果想功利的快速把技能变现,那么推荐ios开发,封闭的系统环境给学习者降低了很多学习成本((´-ω-`)不过要给苹果钱,买设备啦,买开发者帐号啦…)

以上。。。

白米Ⅲ级

赞同来自:

1.找两本书籍系统化学习前端知识。
我入门的时候看的是head first的HTML+CSS和javascript高级程序设计。
2.去Freecodecamp上独立完成习题
一定要独立!遇到不懂的地方就用读查问大招。
3.对于一个很难的点可以去找视频或者博客文章来看,集中精力攻克直到会为止。
4.找认识的人接活来干,不要钱都行。实在找不到活就把觉得做的不好的某个网站重新做一遍,按自己的想法。比如我就是把学校的一些网站重做了。
多读文档!多上github和stack overflow!

白米Ⅲ级

赞同来自:

先学好计算机基础,再来谈学习前端,要不然再怎么都是野生程序员

白米Ⅲ级

赞同来自:

学习路线,先系统学,最好有人带,然后通过项目练习提升。

白米Ⅲ级

赞同来自:

web前端入门看w3cshool就好了,然后找一些psd设计稿去练练,这是目前我认为最好的方法。
我目前在公司也带人,就是通过这种方法,不出3个月,基本上pc、h5手机、响应式、edm邮件等都可以上手开始做,比市面上培训出来的好太多了,真话。

要回复问题请先登录注册

var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();