很多人刚开始学习前端的时候会看非常多的文章, 找非常多的资料, 但其实并不知道从哪里开始.
这里告诉大家如何分阶段学习前端, 以及更加有效地利用资源.
新人前端学习的话可以分两大板块, 一是 html 和 CSS, 二是 JavaScript, 框架和设计模式. 这里又把它们两个的学习步骤细分了, 接下来就详细讲一下:
一, HTML 和 CSS 部分
1,HTML 和 CSS 基础知识
在前端开发中, 一切都从 HTML 和 CSS 开始. HTML 和 CSS 控制你在网页上看到的内容. 当 CSS 处理样式和布局时, HTML 指示内容, 这些内容可以是文字, 图片, 视频等.
入门书籍推荐
《Head first HTML&CSS》
《CSS 权威指南(第三版)》
《精通 CSS》
在线课程学习:
HTML 基础入门
CSS 速成教程
HTML5 基础入门
Bootstrap3.0 入门学习
完成上面的教程后可以看一看 CodeAcademy 的建立网站这门课 Create a website - Structure, CSS, Boundaries and Bootstrap , 是使用 HTML 和 CSS 构建网站的入门级教程.
练习
在掌握基础概念后, 就要把知识变现了, 接下来就要做点有意思的事.
下面介绍推荐几个实验, 帮助你进一步了解 HTML 布局, CSS 构建对象样式.
纯 CSS 打造网页版「大白」
编写组件, 实验重点不是重新创建整个页面.
找了几个包含易于阅读的源代码的网站, 选择几个关键组件, 如导航栏或页脚进行编码可以帮助更好理解 HTML 和 CSS.
AirBnB : 复制他们的页脚
PayPal : 复制他们的导航栏
Invision : 复制页面底部的注册部分
另外, 对于任何网站都是可以看到它的 HTML 和 CSS 只需右键单击页面或页面上的组件, 单击 "检查", 弹出面板的左侧是 HTML, 右侧是 CSS.
2,HTML 和 CSS 最佳实践
1)语义标记
HTML 和 CSS 的最佳实践之一是编写语义标签. 良好的 Web 语义意味着使用适当的 HTML 标记和有意义的 CSS 类名来传达结构意义. 比如
header
标签定义文档的页眉(介绍信息).
HTML5 语义标签
语义化 HTML: 有含义的标记
What Makes For a Semantic Class Name?
2)CSS 命名规范
具体内容可以参考 如何规范 CSS 的命名和书写?
3)CSS 重置
在 HTML 标签在浏览器里有默认的样式, 例如 p 标签有上下边距, strong 标签有字体加厚样式, em 标签有字体倾斜样式. 不同浏览器的默认样式之间也会有差别. 在切换页面的时候, 浏览器的默认样式往往会给我们带来麻烦, 影响开发效率. 所以解决的方法就是一开始就将浏览器的默认样式全部去掉, 也就是把浏览器提供的默认样式覆盖掉.
MeyerWeb 是一种流行的重置. 如果你想深入挖掘, 还可以阅读 Create Your Own Simple Reset.CSS File.
4)跨浏览器兼容
跨浏览器支持意味着你的代码支持大多数最新的浏览器. 某些 CSS 属性 (如转换) 需要供应商前缀才能在不同的浏览器中正常工作. 需要在多个浏览器上测试网站, 包括 Chrome,Firefox 和 Safari 等.
跨浏览器兼容的技巧可以看看这篇文章 跨浏览器兼容的重要性技巧
5)CSS 预处理器和后处理器
CSS 预处理器用一种专门的编程语言, 进行 Web 页面样式设计, 然后再编译成正常的 CSS 文件. 两个主要的 CSS 预处理器是 Sass 和 Less.
CSS 后处理器在由预处理器手写或编译后对 CSS 应用更改. 例如, 像 PostCSS 这样的一些后处理器具有自动添加浏览器供应商前缀的插件.
6)网格系统与响应
网格系统提供了快速构造网页内容布局的方法, 设计师可以根据预制结构进行布局, 节省了大量的时间和精力.
Bootstrap,Skeleton 和 Foundation 等网格框架提供了管理布局中行和列的样式表.
网格系统的主要目的之一是为网站添加响应能力. 响应性意味着网站会根据窗口宽度调整大小. 大家在入门学习前端的过程当中有遇见任何关于学习, 行业方面的问题, 都可以申请加入我的前端技术顾问秋秋裙, 前面输入是 282 中间 549 后面 184 最后连起来是. 缺乏相关的基础教程也可以直接来找我要, 我这里整理了一套最新的前端基础教程, 学习前端的这个过程当中我也收集了很多前端学习手册, 面试题, 开发工具, PDF 文档书籍教程, 可以直接分享给你们.
练习
掌握了最佳实践后就要进行实际检验. 接下来的两个实验的目标是练习编写干净的代码并观察最佳实践对可读性和可维护性的长期影响.
能够有效地重构代码是前端开发人员的一项重要技能. 创建质量代码是一个迭代过程. CSS 体系结构: 重构您的 CSS 是重构代码的良好起点.
在重构代码时, 有几个问题要弄清楚:
浏览代码时, 你能够快速辨别结构和关系意义吗?
你是否不断重复使用相同的十六进制颜色代码? 将它重构为 Sass 变量是否会更有意义?
你的代码在 Safari 上的工作方式与在 Chrome 上一样吗?
你能用像 Skeleton 这样的网格系统替换你的一些布局代码吗?
你经常使用 !important 标签吗? 你怎么解决这个问题?
二, JavaScript 部分
1,JavaScript 基础知识
1)JavaScript
JavaScript 一种直译式脚本语言, 是一种动态类型, 弱类型, 基于原型的语言, 内置支持类型. 它的解释器被称为 JavaScript 引擎, 为浏览器的一部分, 广泛用于客户端的脚本语言.
JavaScript 基础(新版)
2)交互
现在你已经基本了解了 JavaScript, 下一步就是将它应用到 Web 上. 要了解 JavaScript 如何与网站交互, 首先必须了解文档对象模型 (DOM) .DOM 是 W3C(万维网联盟) 的标准, 它能够在所有浏览器上提供一种一致的方式, 通过代码访问 HTML 的结构和内容.
在浏览器加载一个页面时, 浏览器会解析 HTML, 并创建文档的一个内部模型, 其中包含 HTML 标记的所有元素.
JavaScript 可以与 DOM 交互(JavaScript 使用 DOM 创建或删除元素等等)
JavaScript 修改了 DOM 时, 浏览器会随着动态更新页面.
JavaScript 与 DOM 交互以改变和更新它. 以下是我们选择 HTML 元素并更改其内容的示例:
- var container = document.getElementByIdx_x("container");
- container.innerHTML = 'New Content!';
有关常见 JavaScript DOM 交互的列表, 请查看 JavaScript 函数和帮助
高性能 JS-DOM
3)检查器
要调试 JavaScript, 我们使用浏览器内置的开发人员工具. 大多数浏览器都提供了检查器面板, 可以查看网页的来源.
Chrome 开发人员工具
Firefox 开发者工具
练习
基于 JavaScript 实现玫瑰花
基于 JavaScript 实现打地鼠游戏
基于 JavaScript 按键控制坦克移动
网页版别踩白块游戏
2, 更多 JavaScript 部分
1)命令与陈述
JavaScript 与 DOM 交互的方式有两种: 命令式和声明式. 一方面, 声明式编程的重点是什么情况. 另一方面, 命令式编程关注的是什么以及如何.
2)Ajax
Ajax 是一种允许网页使用 JavaScript 与服务器连接的技术.
PHP 之 Ajax 实例讲解
- Ajax(Ajax 开发)
- the front page of the internet
- 3)jQuery
事实是, 有很多 DOM 操作库提供 API 简化代码. 最流行的 DOM 操作库之一是 jQuery.
基于 jQuery 实现图片轮播
4)ES5 与 ES6
理解 JavaScript 的另一个重要概念是 ECMAScript 以及它与 JavaScript 的关系. ES5 和 ES6 是 JavaScript 使用的 ECMAScript 标准.
练习
基于 jQuery 实现图片轮播
网页版 2048_HTML5
jQuery 在购物车的使用
3,JavaScript 框架
JavaScript 框架列表:
- Angular
- React + Flux
- Ember
- Aurelia
- vue
- Meteor
2)设计模式
JavaScript 框架不会重新发明轮子. 他们中的大多数都依赖于设计模式.
- Decorator
- Factory
- Singleton
- Revealing module
- Facade
- Observer
理解并能够实现其中一些设计模式不仅可以使你成为更好的工程师, 还可以帮助你了解一些框架在幕后的工作.
3)AngularJS
AngularJS 是一个 JavaScript MVC, 有时是 MVVM 框架. 它由 Google 维护, 并在 2010 年首次发布时风靡 JavaScript 社区.
4)React + Flux
React 是一个用于构建用户界面的库.
Facebook 设计了 React 和 Flux 来解决 MVC 及其大规模问题的一些缺点. 看看他们着名的演示文稿 Hacker Way: 在 Facebook 重新思考 Web 应用程序开发.
三, 综合练习
瀑布流加载图片墙
基于 HTML5 实现本地图片裁剪__实验楼 - 实验楼
基于 HTML5 Canvas 实现小游戏
基于 Canvas 实现放大镜效果
校花评比排名项目
Java 和 WebSocket 开发网页聊天室
以上就是关于前端新人学习的内容.
来源: http://www.jianshu.com/p/065aca6a2e5a