前端入门_入门前端 - CSDN
精华内容
参与话题
  • 前端基础入门

    2019-03-09 22:21:00
    前端入门,首先要知道前端到底是个什么玩意儿,先来看以下名词 HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 在解释这一大堆不知道什么鬼的名词的同时,讲一讲Web访问的机制,以下参考这...

    目录

    ① WEB

    ② 前端

    ③ 实践

    【WEB】

    前端入门,首先要知道前端到底是个什么玩意儿,先来看以下名词

    HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services
    在解释这一大堆不知道什么鬼的名词的同时,讲一讲Web访问的机制,以下参考这篇知乎(看原文更好,这里只是简略地说一下,想更专业点的话请看相同问题的这篇回答)

    先来一波名词对照:

    1. 服务器运算(后端)→服务器脚本(PHP, ASP.NET

    2. 浏览器运算(前端)→浏览器脚本(HTML, CSS, JavaScript)

    3. 数据库(MySQL, SQLSever)

    其中,脚本就是我们写出来的那些代码。

    当你访问一个网站,顺序是2→1→3→1→2,如下图(就那篇知乎里的图)

    好了,现在剩下的名词有三个:

    HTML5和XHTML,这俩看成HTML也没关系,反正一个家族的,就用HTML当代言人吧;

    Web Services让PHP和ASP.NET两种语言、让(PHP + MySQL)和(ASP.NET + SQLServer)两种架构之间有了统一的接口标准,有了互通的可能。

    以上,名词解释到此为止,简略版看不太懂的话就去看看原文那人语文比我好。

    So,前端在整个网络交互过程中的任务也就比较明显了:售货员!直接面对客户,先听听你要买啥(需求),然后把活儿(请求)甩给跑腿的(后台),跑腿的到仓库(数据库)取货,然后咱把货(网页)拿到客户面前,DONE!

    【前端】

    有个大概了解之后,咱们正式说说前端那点事儿

    HTML——骨架

    HTML就是最直观的网络页面,静态的死的,不会动的。正式点的说法可以看看这里的简介。

    在其语言规范中,HTML是靠一个个标签来实现各种功能的,比如最简单的

    这是一段话

    而HTML有茫茫多的标签供我们实现各种各样的静态页面。但这么多记不住怎么办?来看看这个参考手册,另外一个参考手册也可以。不过这东西不用背,因为不知道的或记不清的标签在实际写代码的过程中多来查几次就能记得很牢了。

    CSS——血肉

    既然HTML的标签属性中有style这种东西,那为何还要用CSS?

    规范,以及逼格。

    首先,在style中写的东西想在另一个标签中用到要怎么办?复制+粘贴,多快,还不用多想。然而,这样做代码就臃肿了。——CSS专做各种批量刷格式。

    其次,改动页面布局的时候,难道要一个个style地找过去?眼都要瞅瞎了。——CSS专搞各种格式聚集地。

    最后,想用别人的格式怎么办,全用style的话要报警了好吧。——CSS专营各种格式借鉴抄袭。

    然而,这一切的一切,都阻挡不了某些时候style更好用的事实反向营销?。这一点暂且按下不表,让我们先分析分析CSS的神奇功能。

    CSS的常客两大类:id与class。

    每个标签都可以有这两种属性(没错html这个标签貌似也能)。顾名思义,id就是标签唯一认证的东西,就是说你这一套样式只能给一个标签用;class依旧沿用类的概念,由于可以有多个标签同属一个class属性,它就成了给一批标签同时刷格式的存在了。

    CSS有个很吊的特征:优先级。

    !important > 内联样式 > ID选择器 > 类选择器 > 继承 > 浏览器默认属性

    左侧覆盖右侧,记住上面这行就可以满足日常需要了。这东西说着没做着好玩,推荐实际写写玩玩,可以搞很多花样出来。(内联样式就是style这种了)

    于是,在有了优先级的情况下我们可以批量刷格式,单刷格式,动态刷格式(这时简单格式用style更顺手,也不会出现异步无数据的问题),而各个css文件的调用也可以让我们自己制作格式模板。当然,千万不要擅改class的格式就是了。

    JavaScript——灵魂

    JS的功能一句话说来就是页面反应,是让页面“动”起来的根本所在。

    前端三大件,HTML和CSS只是结构标签与样式配置,只有JS才算得上是一门编程语言。这门编程语言使用逻辑语句实现预设的功能,也就有了各种炫酷的动态,使页面活了起来。

    Wait,编程语言?C?

    我当初第一反应就是这个。然后我现在终于发现这玩意儿不是C,它在某种意义上比C更简单……由于原生JS和JQ都是围绕元素进行操作的,在用这俩写.js的时候基本都会有很清晰的思路。目前高级特效我还没涉及到,暂不讨论。

    另外,既然刚才提到了JQ,顺手介绍一波主流框架:Vue,Angular,React。这仨选一个学好就行,学的多不如精一个。

    JS就不多说了,因为还是编程的那一套流程:写着写着就会了。(当然还是需要看书的,直接上手会有一段时间不适应,而且不利于成长)

    【实践】

    瞎扯结束,上干货作业

    先顺手来一发编辑器推荐:JetBrain家的WebStorm,工程项目用起来很顺手,毕竟功能太强大了没有WebStorm我就不会写代码了。风格设置可以参考这里。

    当然像Sublime Text 3这类的也很好虽然我没用过就是了。嗯,其实记事本也是能拿来写的。

    ————————————我就是吐槽的分割线————————————

    实践之前先说一句,代码规范是个很重要的东西,如果你之前没有正式系统地学习过一门编程语言,就需要在规范上多下点功夫,让自己的代码风格更趋近于正统思想:简洁、工整、有效。规范可以参考以下三个:

    HTML编码规范

    CSS编码规范

    JavaScript编码规范

    另外,这篇前端开发学习指南推荐看一下。里面有各种tips,专治开发过程中的小困惑,可能会对实际开发有所帮助。

    ————————————我还是吐槽的分割线————————————

    然后就是喜闻乐见的真枪实弹环节,可以参考这位知乎答主的做法:Web 前端怎样入门。

    ①HTML+CSS基础课程迅速过一遍,只要对这俩有个大概的了解就好。
    ②啃书。下边会列出书单,共8本。
    ③通关百度前端技术学院的零基础学院。

    以上三项的难度分别是,1,24,975。

    好了不扯了,这是上边那位答主的书单:

    《CSS权威指南(第3版)》——权威指南了解一下……没错,真的只是了解就好。
    《CSS3 专业网页开发指南》——进阶。不看也没什么大问题,把CSS搞懂就能满足大部分需求了。
    《JavaScript高级程序设计(第3版)》——前七章,DOM,事件,表单脚本,JSON,Ajax与最后几章,这些需要看。百度网盘----链接:https://pan.baidu.com/s/1hsZUXzm 密码:nlul
    《JavaScript语言精粹》——这本书干的事儿就是,考前划重点。
    《你不知道的JS》——各种非主流疑难杂症。
    《ES6 标准入门》——ECMAScript 6,下一代JavaScript语言标准,目前已经全书开源。留个印象就好。
    《JavaScript设计模式与开发实践》——进阶。设计模式看个人需求。
    《高性能JavaScript》——进阶。优化是永远的话题。

    这些东西看完了大概就能跟大牛们谈笑风生了,不考虑一波?

    最后的最后,记住两点:看书比看视频更难但更快,模仿代码比自己写更基础但更利于学习

    展开全文
  • 结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路。互联网的快速发展和激烈竞争,用户...

    结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路。

    互联网的快速发展和激烈竞争,用户体验成为一个重要的关注点,导致专业前端工程师成为热门职业,各大公司对前端工程师的需求量都很大,要求也越来越高,优秀的前端工程师更是稀缺。个人感觉前端入门相对容易,但是也需要系统地认真学习,在打好基础后坚持学习,成为优秀前端工程师也只是时间问题。

    学习任何知识最重要的都是兴趣,如果经过一段时间的学习感觉不喜欢,那可能强迫自己学习是很痛苦的,效果也不会好,毕竟这很可能就是以后很多年生存的技能。不过随着互联网行业的发展,前端必然是Web开发人员需要学习的知识,有时候是没有专业前端工程师一起合作的,所以即使不做专门的前端工程师,掌握基本的前端技能为工作带来方便。

    后期邀请了一些同学分享学习经历。如果有同学愿意分享,欢迎push

    必备基础技能

    前端技能汇总这个项目详细记录 了前端工程师牵涉到的各方面知识。在具备基本技能之后可以在里面找到学习 的方向,完善技能和知识面。

    frontend-dev-bookmarks是老外总结的前端开发资源。覆盖面非常广。包括各种知识点、工具、技术,非常全面。

    以下是个人觉得入门阶段应该熟练掌握的基础技能:

    • HTML4HTML5语法、标签、语义
    • CSS2.1CSS3规范,与HTML结合实现各种布局、效果
    • Ecma-262定义的javascript的语言核心,原生客户端javascriptDOM操作HTML5新增功能
    • 一个成熟的客户端javascript库,推荐jquery
    • 一门服务器端语言:如果有服务器端开发经验,使用已经会的语言即可,如果没有服务器端开发经验,熟悉Java可以选择Servlet,不熟悉的可以选PHP,能实现简单登陆注册功能就足够支持前端开发了,后续可能需要继续学习,最基本要求是实现简单的功能模拟,
    • HTTP

    在掌握以上基础技能之后,工作中遇到需要的技术也能快速学习。

    基本开发工具

    恰当的工具能有效提高学习效率,将重点放在知识本身,在出现问题时能快速定位并 解决问题,以下是个人觉得必备的前端开发工具:

    • 文本编辑器:推荐Sublime Text,支持各种插件、主题、设置,使用方便
    • 浏览器:推荐Google Chrome,更新快,对前端各种标准提供了非常好的支持
    • 调试工具:推荐Chrome自带的Chrome develop tools,可以轻松查看DOM结构、样式,通过控制台输出调试信息,调试javascript,查看网络等
    • 辅助工具:PhotoShop编辑图片、取色,fireworks量尺寸,AlloyDesigner对比尺寸,以及前面的到的Chrome develop tools,
    • 翻墙工具:lantern, 壁虎漫步

    学习方法和学习目标

    方法:

    1. 入门阶段反复阅读经典书籍的中文版,书籍中的每一个例子都动手实现并在浏览器中查看效果
    2. 在具备一定基础之后可以上网搜各种教程、demo,了解各种功能的实际用法和常见功能的实现方法
    3. 阅读HTML,CSS,Javascript标准全面完善知识点
    4. 阅读前端牛人的博客、文章提升对知识的理解
    5. 善用搜索引擎

    目标:

    1. 熟记前面知识点部分的重要概念,结合学习经历得到自己的理解
    2. 熟悉常见功能的实现方法,如常见CSS布局,Tab控件等。

    入门之路

    以下是入门阶段不错的书籍和资料

    1. HTML先看《HTML & CSS: Design and Build Websites》1-9章,然后《HTML5: The Missing Manual》1-4章。
    2. CSS先看《CSS: The Missing Manual》,然后《CSS权威指南》
    3. javascript先看《javascript高级程序设计》,然后《javascript权威指南》
    4. HTTP看HTTP权威指南
    5. 在整个学习过程中HTML CSS JavaScript会有很多地方需要互相结合,实际工作中也是这样,一个简单的功能模块都需要三者结合才能实现。
    6. 动手是学习的重要组成部分,书籍重点讲解知识点,例子可能不是很充足,这就需要利用搜索引擎寻找一些简单教程,照着教程实现功能。以下是一些比较好的教程网址
    7. 原生javascript是需要重点掌握的技能,在掌握原生javascript的基础上推荐熟练掌握jQuery,在实际工作中用处很大,这方面的书籍有《Learning jQuery》或者去jQuery官网
    8. 建一个https://github.com/账号,保存平时学习中的各种代码和项目。
    9. 有了一定基础之后可以搭建一个个人博客,记录学习过程中遇到的问题和解决方法,方便自己查阅也为其他人提供了帮助。也可以去http://www.cnblogs.com/或者http://www.csdn.net/这样的网站注册账号,方便实用
    10. 经常实用Google搜索英文资料应该经常找到来自http://stackoverflow.com/的高质量答案,与到问题可以直接在这里搜索,如果有精力,注册一个账号为别人解答问题也能极大提高个人能力。
    11. 经典书籍熟读之后,可以打开前面必备基础技能部分的链接。认真读对应标准,全面掌握知识

    继续提高

    有了前面的基础之后,前端基本算是入门了,这时候可能每个人心中都有了一些学习方向,如果还是没有。 可以参考前面必备技能部分提到的那两个项目,从里面选一些进行发展学习。以下是一些不错的方面:

    一些个人经历

    LingyuCoder的学习经历

    上面的大神都总结得差不多了,我这里就胡扯一些吧

    工具

    • chrome dev tools:前端开发调试利器,着重注意几个功能:
      • console(废话)
      • elements:元素样式调整,很常用
      • sources:代码中添加断点,单步调试,以及单步调试过程中查看内存中的对象
        • watch expression:通过表达式查看当前内存中的值
        • call stack:查看调用栈,开启async,可以看异步调用栈(这个非常有用,尤其是ajax调试的时候)
        • scope variables:作用域链上的变量,非常有用
      • network:抓包查看每个请求,非常重要,前后端联调必备
      • timeline:分析渲染、js执行等等各个阶段,性能优化利器
      • emulation:模拟移动端环境,mobile页面开发必备
      • 一些插件:
        • liveload: 修改页面后自动刷新,不用按F5
        • dimensions:直接在页面上测量的利器
        • livestyle:css样式修改后自动起效果,不需要刷新,elements修改后也能同步到代码中
        • image tool:测量,取色
        • UC二维码:移动端调试扫码必备
        • pagespeed,YSlow:页面性能分析和优化插件
        • 马克飞象:优秀的在线markdown编辑器,快速写周报,做记录
    • sublime text2:编码方便,插件多,速度快,性能好
      • emmet:提升html编码速度必备
      • sublimelinter + 各种语言的lint和hint:代码纠错
      • 一些snippets:自动补全,提升开发效率
    • Intellij IDEA和WebStorm:集成开发环境,集成了各种功能,开发比sublime要方便,但会比较吃性能
    • Mark Men:测量、取色、标注利器,拿到视觉稿之后第一个打开的软件
    • GFW Fucker:我用红杏,可以的话买个虚拟服务器当梯子
    • iHosts:非常优秀的hosts管理软件,轻松修改hosts,开发调试必备
    • Charles:Mac 平台最好用的抓包分析工具
    • Rythem:AlloyTeam出品的代理抓包软件,非常轻量,安装简单,移动端(真机)开发调试很好用
    • Wunderlist:一个非常不错的Todo List,任务、需求多的时候管理起来很方便

    技能

    前端的技能其实除了JavaScript(包括NodeJS)、HTML、CSS以外,还有很多。其实前端的技能树很大,这里只能列一些我开发中见到的说一说

    语言基础

    JavaScript:

    • 作用域链、闭包、运行时上下文、this
    • 原型链、继承
    • NodeJS基础和常用API

    CSS:

    • 选择器
    • 浏览器兼容性及常见的hack处理
    • CSS布局的方式和原理(盒子模型、BFC、IFC等等)
    • CSS 3,如animation、gradient、等等

    HTML:

    • 语义化标签
    进阶

    JavaScript:

    • 异步控制(Promise、ES6 generator、Async)
    • 模块化的开发方式(AMD、CMD、KMD等等)
    • JavaScript解释器的一些相关知识
      • 异步IO实现
      • 垃圾回收
      • 事件队列
    • 常用框架使用及其原理
      • jQuery:基于选择器的框架,但个人认为不能叫框架,应该算工具库,因为不具备模块加载机制,其中源码很适合阅读钻研
      • AngularJS/Avalon等MVVM框架:着重理解MVVM模式本身的理念和双向绑定的实现,如何解耦
      • underscore:优秀的工具库,方便的理解常用工具代码片段的实现
      • polymer/React: 组件化开发,面向未来,理解组件化开发的原理

    CSS和HTML:主要是CSS3的特性和HTML5的特性,以及浏览器处理的流程和绘制原理

    • DOM树、CSSOM树、渲染树的构建流程及页面渲染的过程
    • 解析HTML、CSS、JavaScript时造成的阻塞
    • HTML5相关
      • SVG及矢量图原理
      • Canvas开发及动画原理(帧动画)
      • Video和Audio
    • flex box布局方式
    • icon fonts的使用

    常用NodeJs的package:

    • koa
    • express
    • underscore
    • async
    • gulp
    • grunt
    • connect
    • request

    一些理念:

    • 响应式Web
    • 优雅降级、渐进增强
    • don`t make me think
    • 网页可用性、可访问性、其中的意义
    • SEO搜索引擎优化,了解搜索引擎的原理
    • SPA的好处和问题

    性能优化:

    • 减少请求数量(sprite、combo)
    • 善用缓存(application cache、http缓存、CDN、localstorage、sessionstorage,备忘录模式)
    • 减少选择器消耗(从右到左),减少DOM操作(DOM和JavaScript解释器的分离)
    • CSS的回流与重绘
    项目
    • 版本管理:首推Git,用过Git都不会想用SVN了
      • Git:本地版本管理的机制
      • SVN:远程中心的版本管理机制
    • 自动化构建:主要就是less、模板、coffee等的预处理以及对代码压缩和合并
      • Gulp:基于流构建,速度快、模块质量好
      • Grunt:独立任务构建,速度慢,配置蛋疼,灵活性高
    • 预处理和模板引擎
      • less:语法简单,但功能有限
      • jade、ejs、velocity等模板引擎,各有各的长处
      • coffee:python工程师最爱,我没用过
    • 环境搭建:主要是将线上代码映射到本地,并在本地启动一个demo服务器,至于模拟数据的mock,见仁见智了
      • 本地代理:ihosts
    • 自动化测试:在业务较为稳定的情况下,可以通过自动化测试来减少测试的事件,但需求较多的时候,维护测试用例的成本会很高,可能用自动化测试会起到反效果
      • jasmine
      • mocha
    • 生态系统
      • npm
      • bower
      • spm
    • 搭建一个属于自己的博客
      • git pages
      • hexo
      • jekyll
    未来
    • Web Componets:面向未来的组件化开发方式
      • HTML模板
      • Shadow DOM
      • Custom Elements
      • HTML Import
    • 移动端Native开发:这也是需要了解的,以后前端工程师会经常地和webview打交道,也要了解native开发
    其他

    有些东西不是考敲码就能弄好的,我参与实习的时候感受到了很多,这些是我遇到的也是我感觉自己做的不好的地方

    • 对于业务的思考:我个人这方面非常欠缺,所以放在最前面,在敲码前要多思考业务
    • 交流和沟通能力:这个非常重要,前端同时需要与项目经理、产品、交互、后台打交道,沟通不善会导致很多无用功,延缓项目
    • 知识管理、时间管理:input和output的平衡,output是最好的input。如何做好分享,参与社区,做好交流,作好记录
    • 对新技术的渴望,以及敢于尝试

    入门书

    入门可以通过啃书,但书本上的东西很多都已经过时了,在啃书的同时,也要持续关注技术的新动态。这里推几本我觉着不错的书:

    • 《JavaScript高级编程》:可以作为入门书籍,但同时也是高级书籍,可以快速吸收基础,等到提升再回来重新看
    • 《JavaScript权威指南》:不太适合入门,但是必备,不理解的地方就去查阅一下,很有帮助
    • 《编写可维护的JavaScript》和:
    • 《Node.js开发指南》:不错的Nodejs入门书籍
    • 《深入浅出Node.js》:Nodejs进阶书籍,必备
    • 《JavaScript异步编程》:理解JS异步的编程理念
    • 《JavaScript模式》和《JavaScript设计模式》:JavaScript的代码模式和设计模式,将开发思维转变到JavaScript,非常好的书
    • 《JavaScript框架设计》:在用轮子同时,应当知道轮子是怎么转起来的,讲解很详细,从源码级别讲解框架的各个部分的实现,配合一个现有框架阅读,可以学到很多东西
    • 《Don`t make me think》:网页设计的理念,了解用户行为,非常不错
    • 《CSS禅意花园》:经久不衰的一部著作,同样传递了网页设计中的理念以及设计中需要注意的问题
    • 《高性能JavaScript》和《高性能HTML5》:强调性能的书,其中不只是性能优化,还有很多原理层面的东西值得学习
    • 《HTML5 Canvas核心技术》:我正在读的一本书,对于canvas的使用,动画的实现,以及动画框架的开发都非常有帮助
    • 《HTTP权威指南》:HTTP协议相关必备,前端开发调试的时候也会经常涉及到其中的知识
    • 《响应式Web设计》:技术本身不难,重要的是响应式网页的设计理念,以及移动先行的思想
    • 《JavaScript语言精粹》:老道的书,也是普及JavaScript的开发思维的一本好书,非常适合入门

    一些不错的网站

    • github:没啥好说的,多阅读别人的源码,多上传自己的源码,向世界各地的大牛学习
    • codepen:感受前端之美的必选之地,里面有很多酷炫的效果和优秀的插件
    • echojs:快速了解js新资讯的网站
    • stackoverflowsegmentfault:基本上各种问题都能在上面获得解答
    • google web fundamentals:每篇文章都适合仔细阅读
    • static files:开放的CDN,很好用
    • iconfont:阿里的矢量图标库,非常不错,支持CDN而且支持项目
    • html5 rocks: 一个不错的网站,很多浏览器的新特性以及前沿的技术,都能在这上面找到文章
    • css tricks:如何活用CSS,以及了解CSS新特性,这里可以满足你
    • JavaScript 秘密花园 JavaScript初学必看,非常不错
    • w3cplus:一个前端学习的网站,里面的文章质量都挺不错的
    • node school:一个不错的node学习网站
    • learn git branch:一个git学习网站,交互很棒
    • 前端乱炖:一个前端文章分享的社区,有很多优秀文章
    • 正则表达式:一个正则表达式入门教程,非常值得一看
    • 阮一峰的博客张鑫旭的博客:快速了解某些知识的捷径,但是如果需要深挖,还需要其他的资源
    • 各路大牛的博客:这个太多了,就不贴了,知乎上有很全的
    • 各种规范的官方网站,不懂得时候读规范

    历程

    以前是做Java SSH的,半路出家做的前端,所以水平比较弱,遇到问题也比较多。基本上入门靠看书和W3C School上的教程,以及一些前端博客,如汤姆大叔的博客。以前也只是使用jQuery,原生js也没有太多的钻研,后来逐渐看了很多本动物书,比如老道的语言精粹等等。从这些书中学到了很多语言层面的知识。但这显然是不够的,所以我经常会去社区上看看大家在谈论什么,然后去看看相关的资料,感兴趣就会多找些资料看看,或者写一写demo。学CSS主要就是通过这种方式。后来开始更多的关注各路大牛的博客和一些比较深的书籍,以及关注一些新的知识和框架,并且不断地练手提交代码到github,这样也学到了很多知识。在实习的过程中,切身参与到实际项目开发之中,能学到很多在学校学不到的理念和思维,这点也有很大的帮助。不说了,我要去搬砖求offer了...

    MrRaindrop的学习经历

    qiu神的邀请分享一下前端学习经验,这里对前端知识体系架构就不做总结了,各位大神们的总结已经相当到位了,我就贡献几个个人认为还比较有用的链接大家研究研究就好,然后主要分享一下我在前端学习过程中遇到的问题和总结的经验教训吧,如果能帮到想要入门的FE初学者(我就姑且假定为本文的读者受众类型了),让他们少走点弯路,每走一步都知道自己下一步的方向,这是最好了。各位大神的总结和分享详见qiu神整理的FE-learning

    先说下,前端这个东西每个人都可以有适合自己的学习方法,这篇仅作参考,写的有点乱,各位凑合看。

    缘起

    我是属于误打误撞进了前端,之前一直往做游戏的方向去来着,搞过游戏网站,玩过游戏引擎,比如unity,unreal这种商业引擎,捣鼓了几个游戏原型,不过自打研一进了实验室,直接就被导师派去写了js,导师给了我半个月时间让我写个基于百度地图api的数据展示页面,虽然这个时间还是相当宽裕的,不过之前没怎么写过js,也不会用地图api,于是我就一边啃着《Javascript权威指南》(犀牛书)一边参考实验室前人留下的“代码”,总算是把功能都写出来了。那个页面算我的js入门作了,也是我前端学习路线的开始。

    现在想来,虽然指派了去做前端,但是一直做下去并做好还是得靠兴趣维持,当然前端是一个趣味性十足的技术领域,而且社区每天都很“热闹”。

    项目,下一个项目

    我个人认为前端的学习,初学阶段你可以完全脱离开书本,以项目驱动。虽然我个人是从犀牛书开始啃的,不过如果你没有充足的时间,或者觉得啃大部头乏而无味的话,还是别像我这样。当然了如果决定啃书最好是把书里的例子都跟着敲一遍的。我上研之前没接触过js,4月份还没开学呢就被直接被导师甩了个百度地图api的项目到脸上,接着就是各种ERP,地图数据展示,虽然换着花样来一点不重样,不过基本上都是前端的活,SSH和android开发也打过酱油,整个实验室就我一个人写前端敢信?富客户端SPA时代的后端就是一个restful接口,代码量基本都在前端啊,写的我一个人怎一个爽字了得...期间跟着导师感受了一把创业,每天从7点搞到晚上10点,也算是经历了一段快速成长期。

    掌握一门技术先掌握它的大体框架,想一个能实现的点子,做一个能跑就行的demo,再去完善它的细节,等到demo完成了,对这门技术有了一个感性的认识,再去啃书,收获会大很多。我从开始原生js写到jquery,再到extjs,再到angularjs,从导师指定技术,到自己做技术选型,一个项目接着一个项目的练,就跟打怪升级似的。当然没有项目就去自己创造项目,动手实现自己的想法是件有乐趣和成就感的事。

    收集癖和知识管理

    前端学习有个特点,很多东西都很零碎,分散,需要你自己去整理、归纳和总结。在微博、知乎上follow了众多的大神,你不仅仅是为了听八卦,大神们的只言片语有时候留下的是无尽的余味,很有可能一个不经意提到的一个词就成为你下一个学习的目标。收集这些信息,善用google,提问,思考。就像游戏里的收集要素,前端学习也是充满搜集要素的一个“游戏”,只不过你需要一个知识管理工具来充当物品栏和仓库,我所知道的大牛们无一不是知识管理工具的重度使用者。以前用的oneNote,那时候还没绑定到云存储,现在基本上用evernote,笔记已经累计到1200+篇。书签一直打算用delicious,因为它是基于tag管理的,但一直没用起来。当然重点不在于这些工具,但是趁手的工具可以提高你的学习效率。最关键当然是随时保持旺盛的学习欲望,你的目标是了解有关前端的一切(当然不是所有都要掌握,因为毕竟你的精力有限,而且现实的说这也不太可能)。

    跟对神

    这个可控性貌似不大...跟对老大这个就不多说了,一定程度要看造化。不过话说回来,多跟身边的高手交流是王道,这个高手不一定要多高,但是一定要对技术有热情。研一的时候热情高涨,每天7点进实验室门,然后发现有个家伙居然比我还早到。后来发现这家伙上午就走了,下午又来了,而且导师对此习以为常,原来这家伙晚上不睡觉通宵写代码,上午才跑回去睡。后来经常和这位神讨论问题,每次感觉经验值蹭蹭蹭的往上涨。然后实验室还有一位神,被前面这位通宵神形容为“只能望其项背,一直在追赶,从来没赶上”,两位神的特点都是什么都了解一点,所以什么都能跟你讨论得起来,我有段时间做了个读书计划,从c/c++到vc/mfc再到unix网络编程,最后一路看到java核心技术和MSDN上的C#编程指南,和神们也能扯得很high了。

    总之就是这两位神把我拉进了坑,或者说从一个坑跳进另一坑,虽然两位神都不是搞前端的,不过技术之间总有相通之处。

    读书

    读书,多读书,读好书。在刘未鹏的博客里看到过一个公式,你第一个月的工资等于之前买过(读过)的技术书价格总和(这里说的技术书指那些经典的公认的好书)。讨论这个公式的正确性似乎没什么意义,然而它的合理性是毋庸置疑的,那就是多读经典技术书。最极端的一个例子,google的徐宥在我的大学里面说他扫荡了图书馆的整个TP312书架...对于前端的经典书籍,后面列了一个我收集的前端书列(如果有遗漏的前端经典好书,还请留言告诉我),有条件可以尝试刷一遍这些书,我也是在找完整的时间去啃完它们。之前说的,前端知识点松散,收集零散的知识点,从博客里快速学习等,这些只是前端学习的一个方面,如果你要想深入理解一个知识体系,了解它的来龙去脉,对它建立系统认识,读经典书还是必不可少的。

    我从最开始啃完犀牛书,然后接着去看了其他一些和前端干系不大的经典技术书,再后来通过实验室的项目和自己弄的一些小项目逐渐对前端领域比较上路以后,又看了《Javascript模式》、《Javascript设计模式》、《编写可维护的Javascript》,后来了解到node并开始用node搞点小玩意儿,又看了本《NodeJS up and run》和《Mongodb权威指南》,不过感觉前者略坑。那会儿朴灵那本深入浅出(晒书么么哒)还没出,后来出了就去图书馆借来看完,这么看下来感觉还不错,不过感觉看的还是偏少了,还需要继续刷(参照上面的书列)。

    前端的定位

    前端的定位关乎到你需要吸收什么样的知识和技能,决定在技术世界里你对什么需要格外敏感。如果你认为前端仅仅停留在切页面,实现交互和视觉的要求,那你对前端的认识还停留在初级阶段。阿里终面的时候我问了考官这么个问题:前端技术日新月异,范围越扩越宽,标准越来越丰富,似乎任何一个触角都能伸出很远。怎么给前端一个合适的定位?考官给我分析了半天,然后总结成一句话,就是用户和网站的联结者,用户体验的创造者(原话不是这样,但大体是这个意思)。也就是说前端的终极目标其实就是创造用户体验,提升用户体验,以用户体验为中心。不管你是从交互设计上下手,还是从性能优化出发,或者改进工作流提升工作流效率,最终都是为了创造和提升用户体验,最终都要体现到用户体验这一点上来。我认为这个总结非常有道理(当然“用户体验”这个词太宽泛了,并且不仅仅是前端工程师的范畴,比如开发后台的时候对一个数据处理过程进行优化,提升了整体性能,这也是对用户体验的一个提升)。

    现在的前端工程师做到一定阶段不可避免会接触到很多比切页面、实现视觉要求、实现交互等更深入的问题,比如前端自动化、图像编程、性能优化等等,再往后推一点就是PHP/JSP/ASP/nodeJs,过去后端模板一般属于后端的范畴,现在随着前端架构的演进,可能会让你去写后端模板的代码,需要用到后端语言(PHP/Java/C#等),这就是所谓大前端(然而这与前端的定位并不是相背离的,大前端处理的依然是与用户接触的部分,仍然是对用户体验的优化)。可能最常见或者被谈论最多的就是node,其实这几种技术选型都可以,bat三家据说百度用PHP比较多,阿里用node比较多。

    玉伯在他的博客里提过所谓全端是横向的,全栈是纵向的。全端即所有的终端说白了都是前端,因为都关乎到用户体验,直接和用户接触。适应多终端的开发,要求你在web前端的基础上,可能还要去扩展android开发和ios开发的知识,好在由于hybrid开发方式的流行,对使用native语言开发的技能会要求的不那么深入。

    全栈可以说是最适合初创公司的一种发展类型,广义上认为是从前端干到后端,从开发干到运维,这种就不说了,一般人应该不会想要去往这个方向发展,想要成为这种意义上的full-stack dev的,可能用不着来看我这篇文章了;而狭义上的全栈特指使用js语言从前端写到架设在nodeJs上的后端,前后端统一语言,统一编程模型,甚至公用同一套代码。更多了解全栈开发可以看看玉伯这篇说说全栈工程师

    以上是我对前端以及衍生出来的技术路线的一些浅薄理解,学习一个领域掌握它的整体上的走向和趋势还是挺重要的。另外如果想要对前端学习方向、职业成长路径有一个整体的认识,推荐看看拔赤总结的这篇前端开发十日谈

    最后

    贡献几个对前端学习、面试有帮助的链接:

    byr论坛yiyizym的建议

    与grunt相比,学习gulp会比较简单

    做SPA的话,推荐backbone.js和 backbone.marionette.js

    翻墙不用折腾,花十块钱买一个月的 红杏。

    把基础打扎实了再学这些都没问题。

    html 没什么好说的,有空学学html5。

    css 尽量看文档 ,因为很多中文资料都各执一辞,看多了反而会糊涂。

    有个网站可以查找html/css标签、属性在各个浏览器中的支持情况,挺好用的。

    javascript 就看 javascript高级程序设计 。不过这么厚的书看过就会忘。对javascript核心概念的讲解:对象/原型链/ 构造函数/执行上下文/作用域链/闭包/this,这里有篇不错的文章。

    有闲情可以看看 ecmascript 6,计划明年6月就发布啦。阮一峰的网站有入门资料。

    jquery 有很多 API,这个网站可以方便查到。有时间弄清楚jquery deferred 的用法。

    多给 sublimetext 装插件,比如说检查代码错误的,新建目录文件的,整理代码的。

    展开全文
  • 快速入门Web前端开发

    万次阅读 多人点赞 2018-09-30 09:06:40
    入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平。请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/JavaScript 这三大基础技术栈肯定是需要掌握的,但要能参与实际...

    入门标准

    入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平。请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/JavaScript 这三大基础技术栈肯定是需要掌握的,但要能参与实际项目开发,肯定还要掌握其他一些主流的框架体系。

    几年前, jQuery + Bootstrap 可以说是一统江湖,是前端领域的绝对霸主。而这几年,随着 AngularReactVue 等框架的兴起,变成了百家争鸣的局面。这几年,Web 前端的技术发展真是太快了,相应地,技术栈也就变得非常多,除了最基本的HTML/CSS/JavaScript,以及 Vue/React/Angular 等这些 JavaScript 框架和各自的生态体系,还有 CSS 预处理器 Sass/Less/Stylus,还有 TypeScript,还有 grunt/webpack/gulp 等各种打包构建工具,还有其他一大堆技术栈。

    这么多技术栈,我们不可能全都掌握,就算是资深的前端工程师,也只是精通其中一部分,比如,有些精通 Angular,有些掌握 React,有些则熟悉 Vue,很少有人对三种框架生态体系都非常了解。因此,我们入门也没必要每种框架都学习,只要挑选一种就够了。而且,作为全栈,我们学习一门技术更重要的是要学习技术背后的编程思想、设计思想、架构思想等。而不管是 Angular、React 还是 Vuew,其背后的核心设计思想都是组件化的设计,因此只要掌握一种框架,我们也就能学习到前端技术的核心思想了。

    那么,我们应该学哪种框架体系呢?我的建议是从 Vue 开始,因为 Vue 的学习成本是最低的,入门简单,而且这两年 Vue 可以说是出现了爆发式的增长,已经直逼 React。React 的主要学习成本在于要掌握 JSX 语法,而且文档还大多都是英文。Vue 因为是国人开发和维护的,自然对国内的开发者更友好。Angular 则是个大而全的框架,显得太重,学习成本自然最高。至于 jQuery + Bootstrap 这套,已经过时了,建议没必要去学习了,毕竟我们的时间很宝贵,还有一大堆更有价值的东西等着我们去学。

    因此,我们要入门 Web 前端开发的话,除了要学习 HTML/CSS/JavaScript 三大基础技术栈,还要了解 Vue 体系。而 Vue 体系,除了 Vue 框架本身,还包括其他技术栈,这个后面再说。

    HTML/CSS/JavaScript

    HTML、CSS、JavaScript 是前端的核心基础,所以必须要掌握。HTML 主要就是HTML5,相比之前的版本,新增了很多新特性。CSS 则主要是 CSS3 了,相比以前的版本,主要就是作了模块化的拆分。JavaScript 其实分为三部分:ECMAScriptDOMBOM。ECMAScript 简称 ES,是 JavaScript 的核心,目前最新版本已经是ES2017,是 ES6 的第三个小版本。DOM 是文档对象模型,其实就是一套访问和操作 HTML 所有元素的 API。BOM 则是浏览器对象模型,用于访问和操作浏览器的一些特性。

    HTML/CSS/JavaScript 的学习资源比较多,我推荐几个。首先是 w3school 的系列教程:

    • HTML:该教程也包括了 HTML5 新增的内容,但讲得没下面专门讲解 HTML5 的细,所以该教程我建议只看 HTML 基础教程和表单部分即可
    • HTML5:该教程讲解了 HTML5 的新特性
    • CSS:该教程并不包括 CSS3 新增的特性,所以还需要学习下面的 CSS3 的教程
    • CSS3:该教程内容比较少,只包含 CSS3 新增的特性
    • JavaScript:该教程只是讲解了非常基础的语法

    不过,我更推荐菜鸟的教程,内容虽然也是来自 w3school,但部分内容比 w3school 的更详细,以下是教程地址:

    • HTML:http://www.runoob.com/html/html-tutorial.html
    • CSS:http://www.runoob.com/css/css-tutorial.html
    • JavaScript:http://www.runoob.com/js/js-tutorial.html

    HTML 和 CSS 只要根据以上教程学习就足够了,但 JavaScript 则是不够的,以上教程缺少了 ES6 及更高版本的内容,后面我再推荐其他学习资源进行补充。

    视频教程方面,慕课网、极客学院等都有基础课程,但都是收费的,而且价格不菲,性价比实在太低。比如慕课网的《前端小白入门》+《前端进阶:响应式开发与前端框架》两套课程的组合套餐就要 988 元了,而内容还没有上面免费教程的齐全。如果真要看视频,那我会推荐网易云课堂的一些免费课程:

    • 从零玩转HTML5前端+跨平台开发
    • H5/web前端开发|HTML5+CSS3
    • 李炎恢JavaScript教程 第一季

    书籍方面,HTML 和 CSS 基础方面的,首推《Head First HTML与CSS》,编排设计通俗易懂,就连完全零基础的非 IT 人员都适合学习。不过,Head First 这本书没有涉及到 HTML5 和 CSS3 的更新内容。不过,Head First 有另一本书讲解了 HTML5,叫《Head First HTML5 Programming》,不过,要熟悉 HTML5 的用法,还是要先掌握一点 JavaScript 基础。CSS3 方面 Head First 则没有相应的书籍,因此,我推荐另一本《CSS3实用指南》

    JavaScript 方面,我首推《JavaScript高级程序设计》这本书,书中内容由浅入深,也是写得通俗易懂,适合入门。另外,有些人会推荐《JavaScript权威指南》,但这本书主要还是一本字典书,略显晦涩,其实不适合入门。不过《JavaScript高级程序设计》还是基于 ES5 的,为了补充 ES6 的内容,推荐阮一峰的《ES6标准入门》,目前是第3版,内容已经覆盖了最新版本的 ES2017。另外,因为这是一本开源教材,所以也可以直接去阮一峰的官网免费阅读,以下是链接地址:

    • ECMAScript 6 入门:http://es6.ruanyifeng.com/

    另外,有一套系列书叫《You Don't Know JS》也要推荐给大家,也是开源教材,这套书会让你对 JavaScript 知其然也知其所以然,也包含了 ES6 的内容,不过这套书面向初学者的,只适合用来进阶。也出版了中文翻译的书籍,叫《你不知道的JavaScript》,目前只有上卷和中卷两本,据评价,上卷的翻译还不错,但中卷的翻译则一般般,下卷不知道什么时候才出版。以下是系列书的github地址:

    • You Don't Know JS:https://github.com/getify/You-Dont-Know-JS

    那么,这么多学习资源,我们应该如何学习才高效呢?其实,和前面学习 Android 和 iOS 时一样,我们主要还是为了了解各种核心概念,我们不可能在短期内熟悉所有知识点,因此,我还是和前面的文章一样,也罗列出一些核心的知识点吧。

    • HTML基础:以 w3school 或菜鸟的 HTML 教程为主,熟悉各种常用标签的用法,尤其是标题、段落、链接、图像、表格、列表、表单、区块、布局、CSS、脚本等
    • CSS基础:同样以 w3school 或菜鸟的 CSS 教程为主,熟悉 CSS 语法和选择器、样式、框模型、定位等模块的内容
    • JavaScript基础:首先作为一门编程语言,语言本身的基础肯定要熟悉,包括数据类型、变量、运算符、控制流、函数、对象等;另外,也要熟悉 DOM;BOM 简单了解下就可以了,使用场景不多
    • HTML5:HTML5 的新特性肯定要了解,内容其实也不是很多,核心的就是 canvas、svg、对多媒体的支持、Web 存储、应用缓存、WebSocket等
    • CSS3:CSS3 也是要熟悉那些新特性,最核心的就是弹性盒子
    • ES6:ES6 自然也是要熟悉的,学好阮一峰的《ECMAScript 6 入门》教程就足够了

    Vue 体系

    在开始正式学习 Vue 之前,我们先来了解几个概念,这样才能更好理解 Vue 的一些设计理念。第一个概念是「单页应用程序」,就是只有一个 Web 页面的应用,是只加载单个 HTML 页面并在用户与应用程序交互式动态更新该页面的 Web 应用程序。第二个概念是「Virtual DOM」,即虚拟 DOM,简单说就是一个模拟 DOM 树的 JavaScript 对象,是为了避免大面积操作真实 DOM 而导致的性能问题。第三个概念是「响应式系统」,通过数据模型和 View 的数据绑定,系统可以对数据模型的修改自动响应到视图上。第四个概念则是「组件化」,Vue 和 React 都是通过组合各种组件组成应用程序的。理解了这些概念,你才能更好的理解 Vue/React 这些前端框架体系。

    还有,开发工具方面,我推荐 Visual Studio Code,一款免费开源的轻量级代码编辑器,macOS、Windows、Linux 都支持,有人评价说比sublime开源,比atom更快,比webstorm更轻,所以说,你值得拥有。

    Vue 体系包含了很多技术栈,一套完整的 Vue 项目一般包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack,其中,vue + vue-router + vuex 又称为 Vue 全家桶,因为这三套技术栈都是 Vue 官方推出的,其他框架和工具则是第三方的。那么,就让我们来一个个了解这些技术栈吧。

    • vue:vue 即是 Vue.js 框架本身,是一套采用了 MVVM 模式的 JavaScript 框架,它和 React 一样使用了 Virtual DOM,也提供了响应式和组件化的视图组件。不过与 React 不同的是,Vue 更推荐使用基于 HTML 的模板,这也是它相比 React 等其他框架更容易入门的原因。
    • vue-router:因为现在大多数 Web 应用都是单页应用,那要实现单个页面里的不同视图的跳转,就要用到路由,vue-router 库就是用来实现单页应用的路由功能。
    • vuex:vuex 是一个类 Flux 的状态管理库,它采用集中式存储管理应用的所有组件的状态。关于什么是 Flux,可以参考阮一峰写的一篇文章《Flux 架构入门教程》。
    • vue-cli:vue-cli 是官方提供的命令行工具,用它可以快速创建 vue 项目。
    • axios:axios 是 vue 官方推荐的一个第三方 HTTP 库,它是基于 promise 的,promise 是 ES6 的新增特性。
    • sass:CSS 的一款预处理器,简单入门可以看看阮一峰的一篇文章《SASS用法指南》。预处理器另外还有 less 和 stylus,不过不少大牛最推荐的还是 sass。
    • webpack:webpack 是打包构建工具,可以类比为 Java 的 Gradle。不过 webpack 是基于 node.js 的,所以要用熟 webpack,还要学点 node.js 的基础知识,至少要懂得配置 node.js 的运行环境以及了解 node.js 的包管理工具 npm 的常用命令。

    对于刚接触当代前端的人员来说,存在太多陌生的概念需要了解,一时可能难以消化,Vue 的作者尤雨溪写过一篇《新手向:Vue 2.0 的建议学习顺序》,可以按照他的建议去学习。

    学习资源方面,最好的应该就是官方文档了。另外,《Vue.js实战》这本书有尤雨溪作推荐序,也可以买来看看,可以作为官网的补充资源。对于一些概念如果还不是很理解,也可以暂时先放一放,后面在做项目开发的过程中可能你就会理解了。

    实战入门

    最关键的还是要通过项目实战才能真正入门,这也是我一贯推崇的。也是和 Android、iOS 实战一样的建议,如果条件允许,你可以向上司申请参与自己公司的前端项目开发,然后开始去熟悉代码和实现一些简单的工作任务,建议先从完成一些简单的UI界面开始。同样,开源项目自然也是少不了,Vue 这块的开源项目我推荐两个:

    • vue2-happyfri:很简单的一个小项目,很适合入门练习
    • vue2-elm:用 vue 模仿饿了么的一个完整项目,重点推荐

    另外,也附上一个汇总了众多 vue 开源项目的 github 地址:https://github.com/opendigg/awesome-github-vue。

    对于开源实战项目的操作上,我依然还是建议先给应用改皮肤开始,之后尝试着自己做出一个类似的App。以上面的 vue 版饿了么项目为例,你先给它所有页面先换个皮肤,包括背景、按钮、文字等等,通通换掉一遍,然后尝试自己做一个百度外卖或美团外卖,当你做完,应付一般的 vue 项目开发就应该没有问题了。之后也根据需要可以再去学下 React 体系,这时候学起来绝对不会吃力。

    总结

    前端开发入门,要学的技术栈真的很多,除了最基础的 HTML/CSS/JavaScript,还包括 HTML5、CSS3、ES6,还要学习目前流行的 JavaScript 框架,我的建议是从 Vue 开始,容易入门,要掌握的技术栈包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack,另外,node.js 也要了解点基础。最后,实战项目我推荐了一个简单的小项目和一个完整的 vue 版饿了么项目。

    思考和实践

    前端开发的编程思想和移动开发有什么不同?如何将前端的架构思想应用到移动开发上?最后,还是要独立完成一款 Web 应用。

    展开全文
  • web前端零基础该怎么学习呢?

    万次阅读 多人点赞 2018-10-28 17:29:16
    前端开发领域是IT技术语言领域唯一一个男女老少都可以快速入门并快速提升兴趣的领域,今天就来聊聊前端到底该怎么学~ 话不多说,让我们直接进入今天的主题。 web前端的基本工作职责和基础技能(要清楚) web前端的...

    由于前端开发的火热和一些IT巨头公司对 web前端开发人员的需求旺盛,让越来越多的人转入前端。前端开发领域是IT技术语言领域唯一一个男女老少都可以快速入门并快速提升兴趣的领域,今天就来聊聊前端到底该怎么学~

    话不多说,让我们直接进入今天的主题。

    web前端的基本工作职责和基础技能(要清楚)

    web前端的分类和门派(简要概述,武林实在是太大啦)。

    前端开发必看的书籍资料(干货重点)。

    如果你已经了解清楚以上前2点并思路清晰,那就跳到后面的 “前端开发 :必看的书籍资料 ” 。

    web前端的基本工作职责

    推荐一个web前端学习 QQ群606721798,欢迎大家加入,每天晚上在腾讯课堂都有一个技术学习课,会有老师分享干货,帮助大家分析解答问题

    “入一行,要先知一行 ”;我们来看看Web前端开发职位无论什么门派都要做到的一些基本工作职责。

    首先,你必须是一个合格的“页面仔”,这个叫法不好听,但很生动。

    我们都知道,所有呈现的内容都是基于HTML网页的。

    如果你的HTML、CSS(包括现在的HTML5+CSS3)基础不会,或者不够扎实,都很难在有大的进步,或者你的JS很好,但布局基础不行,还是不能算合格的web前端。

    其次,前端主要负责实现视觉和交互功能,以及与后端服务器通信,完成业务逻辑。现在前端的核心价值在于对用户体验的极致追求。

    那么我们靠什么来提升用户体验和人性化操作,让用户觉得体验牛x、舒服呢?(当然细分厉害的公司,会有专门的用户体验攻城狮)当然是我们自始自终的主角JavaScript了,毕竟它最初就是为浏览器而生的脚本语言。

    然而,JS这门语言并不是一种强类型语言,更像是一种解释型语言,所以很多属性,在不同的浏览器环境解释有很大不同导致,效果和性能千差万别,而且很多属性之长,之多,之巨都很有工作量。

    之后,就出现了jQuery这种的框架神器,由于其好用,简单,效果多样,兼容完美,高效率等特性,迅速席卷全世界,所以如果想入门,jQuery这个东西你是逃不掉的,而且利用它简单的语法,你会很快将一些效果实现出来,迅速提升兴趣。

    再后,既然涉及到视觉和用户体验,那么UI设计知识,你肯定要涉及或者懂一些设计方面的技能和基本素养,比如PS的一些基本操作,切图,和颜色值(比如会改个字,隐藏个图层,改个尺寸,变个颜色什么滴),屏幕适配方案等,讲道理说:平时并不需要我们做,但技能包里绝对要有。

    最后,服务器知识+后端语言基础,这个职责和话题就比较hight了,到后面我们会一一解释。

    总之,web前端同样是程序员,由于前端是位于后端程序和界面设计师之间的岗位,相当于中间桥梁,要完成三者的对接,涉及到广泛的知识,规模大到工程级,也就有了前端工程师的说法(某人总结,很是到位)。

    Web前端工程师,是一个要精通本职HTML、CSS、JavaScript,也要了解后端编程,了解界面设计,了解软件工程的综合人才。

    看到这一大篇的职责和技能,你也别害怕,因为这些就像小孩子,会走路,会说话。只要你有兴趣,只要有人领路,有教程自然而然就能掌握的技能,至于一些设计素养,反正你不是UI,有最好,没有又有什么所谓呢?

    web前端的分类和门派

    根据Web前端的细分工种和业务不同,我无耻的把她比拟出来几个门派,供大家参考,也让无比庞大的前端划分变得有趣一些,不然下面我放一张图,你看了会晕菜。

     

    Web前端0基础该怎么学呢?

    Web前端知识体系实在是太庞大,先不感慨了,我们赶紧去看干货!

    web前端开发:必看的书籍资料

    HTML + CSS这部分建议在在线教程上学习,边学边练,每个属性后还有在线测试。然后过一遍之后可以模仿一些网站做些页面。记住这个一定要多练、多练、多练 ,最重要的事儿还得我说三遍?

    JavaScript要学的内容实在很多,如果没有其他编程语言的基础的话,学起来可能要费些力,还是建议先通过在线教程学习一些基本语法和定义。

    然后你必须要看书,然后实践(好多人问有没有快速捷径,我只能告诉你:如果有捷径,码农们就不用天天如此苦逼了吧)。

    记住:忍得住寂寞枯燥,才能拿得到高薪!

    Web前端0基础该怎么学呢?

    对于习惯看视频学习的同学,以上内容也可以在在线学习网站上去搜,现在大部分基础课程讲解都还不错。跟着敲一起学,确实可以避免看书查资料的枯燥。

    以下内容都是结合我自己的学习路线与经验,再整理汇总了网络各路大神的资料,希望能帮助源源不断入坑的新人更好的学习。

    web前端书籍必读、必买

    最好按照我给的顺序入门,这样不会让你枯燥,想放弃,如果先推荐经典的厚的,满篇定义,我估计是害你们放弃。

    1 . JavaScript

    先说 JavaScript,因为前面说了,CSS最好跟着视频练习,毕竟都是可视化的,像做艺术。

    《JavaScript DOM编程艺术》

    Web前端0基础该怎么学呢?

     

    最好的JS入门书籍,最让人有兴趣读完的那种书。

    它通过一个幻灯片案例,从头到尾教你实现出来,最后效果实现的同时,基本的JS常用属性,你也就滚瓜烂熟了,很有成就感。(个人很偏向这种风格书籍,此书让我彻底爱上前端js)

    一目了然地告诉你如何用JS操作DOM(这是浏览器端编程的基本功),还灌输了最符合标准的编程理念。可惜有点老,最新一版是2010年的。不过不影响阅读和实现,全部按照最新ES5属性就行了。

    《JavaScript高级程序设计》

    Web前端0基础该怎么学呢?

     

    又称红宝书,雅虎首席前端架构师,YUI的作者Zakas出品。虽然书名带了“高级”二字,但是讲得都很基础的属性内容,事无巨细。关键一点是翻译的也很到位,并不是如嚼蜡一般,这很重要。看此书,我建议配着下面的犀牛书一起看效果更佳。

    《JavaScript权威指南》

    Web前端0基础该怎么学呢?

     

    著名的淘宝前端团队翻译的,看译者列表都是一堆前期大神。

    这本书又叫犀牛书,被国人誉为:JavaScript开发者的圣经。网上对此书评价很多很好,大概意思是说这本书是一本JavaScript文档手册,更适合当作字典和备忘录查询来使用。

    我也是对这本书有很厚的感情和依赖(忘了属性就拿来翻翻,总有收获),个人感觉这本书还是写得枯燥了些,毕竟是工具性质,不适合当作第一本入门来看,不过内容绝对是五颗星,无可挑剔!神书

    《JavaScript语言精粹》

    Web前端0基础该怎么学呢?

     

    作者是大名鼎鼎的 【老道】,我的JS偶像,我github第一个关注的就是这个大胡子叔叔。他是 JSON格式的发明和维护者,也有很多著作和对JS这门语言的超多贡献,可见此人功力绝对顶级!

    这本书,属于稍微入门以后看的,了解了一些中高级概念比如:闭包、原型链、作用域链、继承封装等以后,看此书有如神助,看一页相当于犀牛书几十页的讲解(不吹牛逼,当时我是这感觉的)

    2 . CSS

    CSS类,如果视频看完了,练习的熟练了,你还需要一些书的推荐和查询,也是有必要的,我再来给你罗列几本经典的收藏书,买不买均可的。。

    《Head first HTML&CSS》

     

     

    好的入门书。看两遍就对HTML & CSS有个大概印象了。

    此时把w3cschool作为备查手册收藏起来,结合此书,事半功倍,成就感爆棚。

    《CSS权威指南(第三版)》

    Web前端0基础该怎么学呢?

     

    最权威的CSS书籍,除了阅读W3C的文档外的不二选择(就是翻译太操蛋,可能有的词你以为是火星语,不过不影响阅读)。有时间可以反复看,有css3内容,并当做字典随时查。类似犀牛书。

    《图解CSS3:核心技术与案例实践》

    Web前端0基础该怎么学呢?

     

    这本书讲解的是最新的CSS3(前几本书停留在CSS2.1时代,2.1是基础),CSS3也是必学的,不然真的跟不上时代了。

    《CSS禅意花园》

    Web前端0基础该怎么学呢?

     

    这本书很值得期待,我看过PDF版本的,那时候还没翻译出来,翻译的也一般,不过作者是巨牛逼的,听说对css理解的就像自己的左右手,光靠写CSS他年薪就轻松百万了。。汗颜!思路清晰,图文并茂,还解决一些疑难杂症和高级技巧,类似于JS的语言精粹了,大神级别。

    好了,差不多就推荐到这里,CSS这基本是基于情怀,罗列一下,买不买都没必要,想当年我学CSS是靠着几个仅有的视频,一个属性一个属性的练习,还有IE6各种兼容问题,虐到爆,那酸爽(现在你们是幸运的,基本不用兼容IE6这个老东西了)。

    真正起到决定作用的,还是JS语言的掌握和实践,JS能力越强基础越稳固,你的前端能力就会越好,自然薪资越高,所以现实点说大家,大家一起努力吧,让money都到碗里来!

    有些童鞋认为:从来不需要买纸质书,我全程PDF就行了嘛,不过我建议有些书还是要纸质的,这样有感觉,也可以做笔记,甚至随时当工具书字典来查询,由于前端的特殊性和js语言的属性之繁多庞杂,我建议你还是要买纸质的书,帮助很大。

    展开全文
  • 前端入门之路

    2019-05-12 16:13:49
    正式接触前端应该是在2017年7月份,到现在差不多已经有两年的时间。我很庆幸,在入门的过程中我是处在一个技术资源还算有保障的环境中,遇到什么问题,都可以从身边的前辈身上找到答案。但是回想起来,仍觉得入门之...
  • Web前端开发入门

    千次阅读 2019-02-18 15:48:22
    浏览器工作原理 浏览器的工作原理:新式网络浏览器幕后揭秘 ...智能社:JavaScript-从入门到精通 JavaScript教程-廖雪峰 进阶 学一些可以装逼的名词 JS 函数式编程指南 js版本 兼容浏览器和移动端设备(如iOS9.x不支...
  • 题外话 昨日,微博一条热搜:华为外包公司程序员倒地。这种息息相关的消息,我肯定要第一时间关注,毕竟我也是小小程序员,也怕不知不觉的倒地不醒,留下我丰富的财产&女人,多么伤悲。事后,中软国际回应:该...
  • Web前端基础知识整理(一)

    万次阅读 2019-06-24 00:00:57
    1. typeof返回的数据类型 typeof返回的数据类型包括undefined、string、number、boolean、symbol、Object、Function类型。 2. 检查数组的方式 isArray()方法、toString.call()、instanceof Array ...
  • 大四学生一枚,正在实习中(前端开发),一只小菜鸟 在掘金和github上读过 冴羽大大 的很多文章,我询问他如何打牢JS基础,他建议我最起码高程看完前一半,那么fighting! 附上 pdf版下载地址 链接: ...
  • 前端自学路线--入门

    千次阅读 多人点赞 2019-11-08 16:12:13
    但是后来和自己自学对比了一下,放弃了继续去上培训班,在网络如此发达的今天,网络上的免费视频和各种知识网站,完全可以满足前端的一个基础入门,至于更深层次的就是要自己动手做项目,去学习一些更好的框架 ...
  • 前端入门书籍已经很多了,从《JavaScript 高级程序设计》到《精通 CSS:高级 Web 标准解决方案》 前端的框架书籍已经很多了,从《深入浅出 Node.js》(笑~)到《JavaScript 框架设计》 所以,两年前当我想总结我...
  • 前端小白入门学习javascript练手项目合集

    万次阅读 多人点赞 2017-06-10 16:43:20
    前端小白入门学习javascript练手项目全集
  • 三大主流前端框架与项目开发

    万次阅读 2017-05-11 08:13:05
    三大主流前端框架与项目开发 想成为高薪web前端工程师,只掌握HTML /CSS /JS已远远不够 带你入门Vue2.0及学习实战项目 • 学习Vue.js2.0的基本功能接口,带你快速入门Vue2.0 • ...
  • 在我学习前端的时候,最烦恼的是看了书却不知道通过做什么项目来实践,从而把理论知识变成真正的看得见的“东西”。 直到我接触了百度前端技术学院(IFE),里面有很多小任务,都是针对前端的某一个知识点的小任务。...
  • 1、说明 最近想学习一下Web前端知识,本着理论 + 实践的学习... Web前端入门和进阶学习笔记 React 学习资料总结 HTML Reference type CSS Reference type 3、开源项目 js项目练习 前端小白入门学习javascript...
  • 程序员做前端好还是做后台好?

    万次阅读 2019-05-24 10:21:01
    从事嵌入式开发多年,最近在做后台相关相关的开发,现在很多程序员在学校或者入行之前都会考虑是选择前端开发还后台研发,很多女生或者基础不是很好的学生一般会选择前端开发,现在的前端算是比较火,也是很多培训...
  • 有很多人问我说作为一个前端开发人员都需要看一些什么书籍,尤其是刚入门的新手,今天我整理了一下推荐给大家,大佬绕过。 HTML+CSS+JavaScript 网页设计 从入门到精通 作为一个前端新手,强烈推荐先看这本书,...
  • 前端和后端的区别?

    万次阅读 多人点赞 2019-07-30 02:36:16
    有的人认为,前端很好学,后端不好学。 也有的人认为,前端不好学,后端好学,归根到底还得看个人兴趣。 前端和后端做简单的叙述 后端:入门难,深入更难,枯燥乏味,没有太大成就感,看一堆业务逻辑代码。 ...
  • 前端资源分享(从入门到精通)

    千次阅读 2018-11-05 11:16:23
    上个博客分享了我这一段时间来学习前端的方法以及春招秋招的经历。话不多说,上一波干货。 很多人说以下资源失效了。最近重新写了一篇文章,收集了这些资源  https://mp.weixin.qq.com/s/vnzApo412HWLXrQfBcZQzA ...
  • 前端资源教程大总结

    万次阅读 2017-12-01 16:55:03
    前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通...
1 2 3 4 5 ... 20
收藏数 102,693
精华内容 41,077
关键字:

前端入门