前端学习路线：从小白到大神的一步之遥

基础学习顺序
- 用一套图展现
- 详细学习内容
基础扩展
node.js
框架
- vue
- React
参考资料

基础学习顺序

HTML、CSS、JavaScript
这三个是前端开发中最基本也是最必须的三个技能。
对于小白来学习Web前端开发的话，门槛还是很低的，主要体现在HTML和CSS上，前者只是结构标签，定义网页的内容，后者是样式配置，规定网页的布局，入门是非常简单的，然后稍微有些难度的将是JavaScript，对网页行为进行编程。
看到这里对一些Web前端开发依然感兴趣的小伙伴可能会觉得一头雾水的话，那简单通俗的来讲：HTML 是一种标记语言，是网页的骨架；CSS 就是网页的美容师，用来给 HTML 添加样式（如字体、颜色、大小等）；而JavaScript就是让HTML和css编写的内容动起来。

用一套图展现

HTML 诞生一个初步形象

CSS 经过一些修饰显得更美观

JavaScript 赋予其生命让它可以按照自己的思想动起来

注：图片来源于网络，仅供参考，如有侵权可联系删除。

详细学习内容

（一）、HTML
（二）、css

（三）、HTML5
1、浏览器与浏览器内核
2、语法及使用
3、常用标签
4、语义化
5、表单元素
6、HTML
7、新增标签

（四）、CSS3基础
1、CSS基本语法规范
2、常用的选择器用法与技巧
3、复合选择器使用
4、数值与单位
5、文字文本样式
6、CSS3新增选择器

（五）、 CSS3进阶
1、CSS盒子模型
2、CSS背景技巧
3、圆角/阴影/过渡
4、定位和浮动
5、伪类和伪元素
6、chrome调试工具
7、CSS高级技巧（精灵图、CSS三角、图标字体等）
8、CSS常见布局技巧大全
9、网页开发规范以及流程
10、CSS企业级网页开发
11、网页开发常见问题以及解决方案
12、CSS常见兼容性问题以及解决方案
13、CSS3新增属性

（六）、JavaScript*

基础扩展

Photoshop

学习前端的同时我们需要扩展一些自己的只是储备，要学会一些简单的PS功能，来满足自己日常工作中的需求，例如：

1：如何打开图片
文件——打开
将图片直接拖入到ps中

2：取色
在ps的左侧工具栏里前景色图标，单机调出拾色器面板，将鼠标放置在你想要知道颜色的位置即可

3：测量
在ps的左侧工具栏里找到矩形选框工具，用鼠标将你想要知道尺寸的位置框出来，w代表宽，h代表高，如果不存在可以去窗口里找到信息面板（f8），如果你的值不少整数，说明你的单位不对，可以在信息面板上找到加号位置点击小三角将单位更改成像素，或者在标尺上右击
如果你的ps里没有标尺按ctrl+r可以显示或隐藏标尺
测量时选择多了：在ps的上面工具面板里找到地三项在选区中减去
图片打开的越大，选择的越精准，按住alt键滑动鼠标滚轮，向上放大，向下缩小
如何去掉选区 ctrl+d

4：抓手工具可以随意拖动图片
快捷键h 或者按住空格键

5：切图

方法一：（只能一个个截图，新建一个图片，不会破坏原图）
用选框工具将你想要切的图片框出来，ctrl+c复制——ctrl+n新建——enter——ctrl+v粘贴——ctrl+shift+alt+s存储为web所用格式
方法二：（只能一个个裁切，在原图基础上裁切，会破坏原图）
用裁切工具将你想要裁切出来的图片框出来——双击确定即可——ctrl+shift+alt+s存储为web所用格式
如何还原——用历史记录面板（窗口——历史记录）
方法三：（批量截图）
在裁切工具上右击选择切片工具——将你想要裁切的图片一个个框出来——ctrl+shift+alt+s存储为web所用格式——选择所有用户切片——存储

6：如何更改图片大小
用选框工具选中——ctrl+t——在对角线位置缩放

node.js

如果有精力可以多了解，扩展自己的知识层面

框架

vue

Vue官网：https://cn.vuejs.org/

React

React官网：https://react.docschina.org/

参考资料

书籍：
《ECMAScript 6入门》
《JavaScript高级程序设计》(第4版)
《Vue.js实战》梁灏
《React开发实战》

前端学习路线：从小白到大神的一步之遥相关推荐

Web前端学习路线分享，初学者不要错过！
在技术岗中,前端开发一直是薪资比较高的岗位. ▲北京前端工程师月均薪20.7K(职友集) 前端技术的更新迭代,导致大部分技术人员跟不上.因此越来越多的人想转型做前端开发了.毕竟想要驰骋职场,想要拿年薪 ...
靠在校所学的前端知识，你可能连实习都找不到，附【大前端学习路线】
又是一年毕业季,又有万千学子开始涌入社会这片汪洋. 前些日子有个大学生小伙问了我关于前端开发找工作的问题,他说他很迷茫,大家都找到了工作,自己的简历投了却杳无音信,于是来问我是不是哪些环节没有做好. ...
大数据人工智能学习路线（小白都可以看懂-从入门到精通）
大数据&人工智能学习路线先来看一个大数据网站所需用到的技术图学习技术 Linux:大数据基础,hadoop.hive.hbase.spark等大数据软件的运行环境和网络环境配置,通常都是搭 ...
2020年最新前端学习路线
这段日子在 B 站上收到小伙伴最多的要求就是出一个前端学习路线,我能够充分的感受到大家抓耳挠腮加挠墙的迷茫~所以在这里给大家总结了一套前端学习路线.先从初级前端工程师所需的技能开始,然后一路升级到高级 ...
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 [导读]:初学web前端的小伙伴经常会遇到的问题,1.没方法 2.没资源 3.没经验,不知道从何开始 ,代码哥(D ...
WEB前端学习路线2023完整版（附视频教程+学习资料）
下面小编为web前端学习爱好者汇总了一条完整的自学线路,适合初学者的WEB前端学习路线汇总! 需要更多教程,文末扫码即可别忘了扫码领资料哦[高清Java学习路线图] 和[全套学习视频及配套资料] 1 ...
“计算机之子”winter：我的前端学习路线与方法
你好,我是winter.今天我们一起来聊聊前端的学习路线与方法. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更 ...
这款NLP神器火了！关键词一键提取、结果高度可视化，堪称「小白进阶大神」的实用工具包 | 开源...
点击上方,选择星标或置顶,不定期资源大放送! 阅读大概需要15分钟 Follow小博主,每天更新前沿干货转载自:量子位如何快速优雅地处理你的NLP数据集? 试试这款号称「从小白到大神」的Texth ...
黑马程序员：从零基础到精通的前端学习路线
黑马程序员:从零基础到精通的前端学习路线随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上 ...

前端学习路线：从小白到大神的一步之遥

前端学习路线：从小白到大神的一步之遥

基础学习顺序

用一套图展现

详细学习内容

基础扩展

node.js

框架

vue

React

参考资料

前端学习路线：从小白到大神的一步之遥相关推荐

最新文章

热门文章