web前端开发需要学什么(包含前端学习路线)
前端开发,做到后面,是可以走很多方向的;
但是要保证后期的平滑过度,前期还是要把一些必须的知识搞扎实的;
web前端开发需要学什么
环境搭建
前端环境很好搭建,编辑器
+浏览器
即可。
浏览器推荐使用 Chrome
行业内主流的编辑器有下面三个
webstorm
也有人用IDEA,属于一个妈的工具,没有啥大区别;WebStorm是针对前端开发优化过的,比较推荐这个;
vscode
sublime
初学者随便找一个就好,喜欢轻量级的使用vscode
,喜欢工业风一样的使用webstorm
;
我个人是两个工具都有使用;
还有一个说明的,VScode是开源免费的,webstorm是收费的;
代码类
html标签
css属性
JavaScript
这个是重中之重
ECMAScript
DOM
BOM
jquery
随便了解下UI框架
bootstrap
mv*框架选择一个学习
React
Vue
Angular
Nodejs
上面的这些就足够了,剩下需要学习的就是方向性质的东西了,就没有办法推荐了,要根据你自己的工作性质来选择;
根据后期方向学习
如果想做非WEB前端的工作(不是用户浏览器渲染的场景),那么 Nodejs是必须要研究的,除此之外,再根据不同语言来特定选择。
做PC桌面端方向
需要多了解 Electron
做手机端
可能要学习下 react-native
做WEB后端开发
可能要学习 Express , Koa ,Nest,Egg
还有就是要学习下一种关系型数据库和非关系型的
MySql / postgreSQL 随便选择一个
Mongodb
前端学习路线
首先学习的时候,不要想着大而全;
很多知乎上包括网上列举的学习路线都是想着大而全,什么都去搞,恨不得把前面5年的学习路线都安排好的;
我觉得新手不应该这么做,新手学习的时候应该有自己的主要方向;
不要贪心,不要想着大而全,前端是很繁荣,是新技术层出不穷,但是新手的大部分时间应该死磕核心部分;
01.环境搭建
前端环境很好搭建,编辑器
+浏览器
即可
浏览器推荐使用 Chrome
行业内主流的编辑器有下面三个
webstorm
也有人用IDEA,属于一个妈的工具,没有啥大区别;WebStorm是针对前端开发优化过的,比较推荐这个;
vscode
sublime
初学者随便找一个就好,喜欢轻量级的使用vscode
,喜欢工业风一样的使用webstorm
;
我个人是两个工具都有使用;
还有一个说明的,VScode是开源免费的,webstorm是收费的;
更多的前端开发环境的效率工具,可以参考我分享了一个 搭建WEB前端开发环境,有哪些常用软件需要安装呢,感兴趣的可以看看,了解前端开发中都使用什么软件;
02.HTML
如果要做网页,HTML是基础骨架,必须要掌握的;
1.先通过 HTML 教程 学习大概
2.再通过 HTML5 教程 学习哪些新属性,这在做浏览器兼容低版本的时候特别有用
3.最后通过 HTML 标签 加深对每个标签的印象
到这里,你的HTML就算可以熟练掌握了,注意本篇文章说的,都是你一步一步跟着动手敲代码的基础上说的;如果你只是大概浏览下,没有真正动手敲代码,那是不行的;
这是一段非常枯燥无味的阶段,如果你感觉枯燥无味,不要紧的,你可以学完 HTML 教程 和 HTML5 教程 后直接进入CSS的学习阶段,这样会让你学习的乐趣增加不少;
等以后合适的时候,再回头看逐个研究 html 标签也是一个不错的选择;
03.CSS
做网页,如果光有HTML会感觉好像一个半成品一样,加上适当的CSS美化,会更符合用户体验;
1.先通过 CSS 教程 学习大概
2.再通过 CSS 教程 学习哪些新属性,这在做浏览器兼容低版本的时候特别有用
3.最后通过 CSS 样式表参考手册 加深对每个属性的印象
这个阶段,你会稍微有点成就感,毕竟是可以做出一些看起来高档上的网页了;
如果你以后打算做出漂亮的网页,那么你最好老老实实把上面三个都按部就班的学习一遍;
如果你是打算更加偏重于JS的方向,那么第三个 CSS 样式表参考手册 可以稍微浏览就好,等遇到不会写的样式,百度搜索下问题,然后再重点看下当时场景用到的CSS属性也是可以的;
04.仿一个你经常浏览的网站,最少重复3次
学习玩HTML和CSS之后,你写的代码,都是这一部分,那一部分的,没有一个整体的概念;
这个时候,非常推荐你仿制一个你经常浏览的网站,只用HTML和CSS去实现,遇到JS效果,直接不做;
在动手之前,我强烈推荐你一定要开通一个自己的技术博客
开通一个技术博客
可以使用第三方的博客,比如 cnbolg/CSDN/简书/掘金/知乎,这些都是国内不错的博客平台;
开通博客的是用来把你容易忘记和有体会的技术都记录下来,不要感觉有些知识点特别low,所有的技术大牛,也都是一点点的积累才能脱变的;
学会Github的简单使用(如果影响学习兴趣了,可以直接跳过)
注册一个Github账号:https://github.com/
注册这个是用来管理你的代码,因为你下面要模仿一个常去的网站,并且不止实现一遍,如果有一个版本控制还是非常赞的;
注意:使用Github,需要学习基本的Git使用。
如果这一步影响你对WEB前端的学习兴趣了,那么就直接跳过不要做了,这一步是锦上添花的,不要强求;但是你仿站的代码一定要保存好;
如果通过练习仿站来提高技术
推荐你把整个网页截图下来,然后根据图片来实现;一般的网页都最低会有 首页 和 详情页 这两个页面;
然后用你学会的知识,根据截图来写出这些网页
注意:同一个网站最少做3遍!!!!
注意:同一个网站最少做3遍!!!!
注意:同一个网站最少做3遍!!!!
我个人认为,写东西不是越多越好的,而是通过敲代码,能总结出来的东西越多越多!可以逐渐提高自己的技术才是最终目的;
比如你把小米,京东,腾讯网等等都写了一边,我认为这样是很傻的行为,真的就是纯粹搬砖的了,对技术的提高并不是很好!
最好的方式,是一个网站,你重复的写,重复的写,然后每一遍都有不错的心得体会
第一遍,你只需要仿制的和原来完全一样就可以!
注意:这里说的是完全一样!!!最好的是1Px的误差都没有
不会写的HTML标签,和不会用的CSS属性,可以回头查查
然后总结出这次写的内容中,有哪些可以优化的,哪些可以重复使用的元素,那些设计的不合理,需要重新布局
第二遍:总结你第一遍的不合理和思路重新设计
一般初学者第一遍写的东西,基本都是面目全非的;避免掉一些不合理的地方,抽出一些复用的元素,重新设计你的实现思路
这一步能不查资料,就尽量不要查资料
注意这一步是从0开始,一定不要在你第一遍的内容上修改来实现
实现完成以后,记得总结下这一边还有哪些瑕疵
第三遍:断网并且关掉智能提示再实现一遍
这一遍再对第二遍的优化,并且需要断网和关闭智能提示来实现,可以增强记忆;
通过上面的3次练习,你对静态网页的书写,一般会有自己的心得了,最好每次都用博客的形式记录下来;
05.JavaScript
通过前面4步的情况下,你对静态网页,基本算是略有小成了,这时候不要骄傲,你的水平可能刚刚够得着”切图仔”的水平,前端的大杀器是JavaScript,你前面学的那些只能算个热身运动;
作为一个web前端工程师,js是很核心的部分,也是相对来说很难的一部分(其实你写着写着会发现,JS其实和CSS一样,基本就是那些事情,做项目的时候重点反而是复杂场景下的逻辑处理)。
这时候我推荐你买2本书,一本是 JavaScript 高级程序设计 ,一本是 JavaScript 权威指南
这两本书是结合下面一起看的,这两本书买来后并不是让你都读完的;我推荐你各取一部分的阅读;
JavaScript 权威指南 有用的部分
这本书只读前面一些章节,主要是语法和方法部分;就是语法,表达式,语句判断,对象类型,数字类型,字符串类型,数组,函数,这些读完以后这本书的对你的学习意义就没有了
JavaScript 高级程序设计
这本书总体还是不错的,语法和方法部分也可以读下,看看和权威指南的表述区别,重点是读函数/闭包,对象,原型,原型链基础,DOM二级事件,AJAX 这些部分
提示:JavaScript 权威指南这本书在函数/闭包和原型链继承一块写的非常的普通,而高级程序设计就写的非常到位;这就是为什么两本都推荐买的原因,是推荐你有选择的进行阅读;
JS的学习思路
有一个不错的JS入门教程,也推荐下,是智能社的Blue老师做的 JavaScript教程
地址是:
https://www.bilibili.com/video/av30494570
入门使用,仅仅是热身,智能社这个教程学完其实你的JS处在已经会用,但是真正做东西又不知道怎么做的水平;
我现在正在慢慢整理为一个深度的 JS 教程, 推荐你看看这个教程学习;
学JS的时候一定要跟着敲;
学习的目的并不是把教程看完,而是慢慢学,遇到不会的第一遍不行就第二遍写;上面2个教程全部学完以后,记得再回头看一遍巩固一下,中间把推荐的2本书也多翻翻;
上面两个教程看完以后,你的原生JS已经算可以的了;
这时候推荐你看看 ECMAScript文档,因为前端一直在发展,书上和教程上并没有后面新增的JS标准(比如2020年出的ES11这些标准);ECMAScript文档还可以帮助你定点研究上面如果是一步一步代码写到现在的话,全部搞完,时间最好是在4个月-5个月的样子完成,不要追求快;按部就班的搞,你后面会越学越兴奋的;如果这之前学的不牢固,后面容易凉;
06.用原生JS写一个带AJAX获取信息的项目
有些网站会提供对外的API,比如天气预报啊,便民查询之类的东西;
你可以用公开的API做一个项目,你可以自己选择下;不要担心自己的技术,这时候你已经很厉害了;
我推荐你用V2EX的API做一个V2EX的网站,API地址是:
https://v2ex.com/p/7v9TEc53
因为有上面第四部的基础,写静态页当然是没有问题的了;第五步的JS也是为你做了充分的JS基础;这时候应该是可以实现自己想要的效果的;
买盗版视频学习
虽然不推荐,但是买培训班的盗版视频来学习,确实是非常不错的方法;培训班的内部视频,在淘宝,咸鱼上都可以买得到!
如果本文对你有帮助,记得点赞收藏呦!
web前端开发需要学什么(包含前端学习路线)相关推荐
- Web前端开发要学多久?需要学些什么?
对于很多没有接触过web前端的小白来说,只知道前端就是网页,前端就是大家看到的页面,可对于想要转行或者进入前端的同学,他们更关心web前端学什么,要学多久,下面和千锋广州小编一起来看看吧! 1.前端开 ...
- 前端开发先学css还是html,Web前端开发需要学什么?
web前端开发主要学什么?web前端开发主要学习html.css.js.jquery等等,除了学习开发语言,还要为网站上提供的产品和服务实现一流的Web界面,优化代码并保持良好兼容性; Web前端表现 ...
- 小白想学web前端开发需要学什么?
随着互联网的应用越来越广泛,html5前端的作用越来越显著.有html5意向学习的人越来越多.Html5学习难不难?从事html5前端开发需要学习什么?是大家最为关心的话题.前端基础学那哪些知识,才能 ...
- 前端开发需要学什么(数据可视化)
前端开发需要学什么?在大数据的带领下,数据可视化的使用越来越广泛.那么实现HTML5的数据可视化技术有哪些? 数据可视化就是采用计算机图形处理技术将数据转换成图形或图像显示出来.图像是最直观的东西,人 ...
- 前端开发需要学多长时间?
近几年前端发展迅猛,很多行业需要前端工程师,从而学习前端的人群越来越壮大.但在学习前端上大部分人会选择系统学习,这样才能达到企业的要求.学习前端的时间深受大家的重视,怎么能学的好又快的学会前端格外重要 ...
- web前端开发工作描述_2019年前端开发前景如何?前端开发会被淘汰吗?
近十年以来,IT行业发展火热,衍生了很多新职业,例如UI设计师.开发工程师.软件测试工程师等等,在众多备受瞩目的新生职业中,Web前端工程师是其中的一员. Web前端在IT行业真正受到重视大概也就六七 ...
- 入行前端开发需要学什么?有哪些知识点? 程序员的青春
术掌握到什么程度才可以找工作呢?作为聪明的求学者,总是会带着问题学习,相对于其他后台编程语言来说,Web前端开发确实要更容易学习.但是随着互联网平台的多端发展以及前后端融合技术的要求下,前端开发工程师 ...
- web前端需要学什么?附学习路线!
第一阶段:专业核心基础 此阶段需要掌握以下内容: 1.Web 前端开发环境的配置,HTML 常用的标签,常用表单元素,Table 布局,CSS 样式表,DIV+CSS 布局.可以熟练运用 HTML 和 ...
- 《HTML5+CSS3+JavaScript前端开发从零开始学(视频教学版)》简介
#好书推荐##好书奇遇季#<HTML5+CSS3+JavaScript前端开发从零开始学(视频教学版)>,京东当当天猫都有发售.定价69元.本书配套本书配套示例源代码.PPT课件与同步教学 ...
最新文章
- 在FC7上安装xmms
- Python语言的特点
- 关卡设计快速入门P_4. 放置Actor
- 网络慢是带宽不足?—Vecloud微云
- 孝敬父母 天经地义 |有人这么疑问?
- 主机overlay和网络overlay_Docker网络篇之overlay模式
- volatile 关键字解析
- HTML转义字符大全(转)
- 29.日志路由组件(2)
- 拓端tecdat|R语言时间序列数据指数平滑法分析交互式动态可视化
- 写了一套优雅接口之后,领导让我给大家讲讲这背后的技术原理
- android自定义view案例,Android自定义View,你摸的透透的了?
- Qlocker勒索病毒 7Z勒索病毒 7Z压缩包密码破解
- laravel 图片流_laravel 做图片的缩略图 踩坑
- 最近做的一些文件破解的结果
- 让样本不一样重要-A Dual Weighting Label Assignment Scheme for Object Detection
- SSM+jsp整合步骤(注解开发)
- 使用SC 修改服务启动账户
- python getattrribute_Python学习——面向对象高级之反射
- 详解AD(Altium Designer)中的机械层 - 2
热门文章
- 急,电脑开机自检过不去,(急在线等),
- PHP开启magic扩展,php.ini中Magic_Quotes_Gpc开关设置
- FCRP-D---帆软官网模拟题,tomcat模块
- 咨询顾问长啥样儿?——北漂18年(88)
- 连接无限·协同无界|融云首届全球企业通信云大会 WECC 来了
- 数学建模之SPSS的使用
- 左手坐标系 + 右手坐标系
- 阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
- C++ Win32 删除文件夹(非空)
- Mathematica常用操作