分类
商品
商品
店铺
资讯
分类
商品
商品
店铺
资讯

如何帮助前台web新人入门和提高?

  • 时间:2018-10-10 23:31 作者:holiday沁儿 来源:holiday沁儿 阅读:394
  • 扫一扫,手机访问
摘要:前言:需要学习资料的关注私信小编“A”或者者转发评论“领取”可免费取得干货学习资料。正文很多人刚开始学习前台的时候会看非常多的文章,找非常多的资料,但其实并不知道从哪里开始。这里告诉大家如何分阶段学习前台,以及更加有效地利用资源。新人前台学习的话可以分两大模块,一是HTML和CSS,二是Javasc

前言:需要学习资料的关注私信小编“A”或者者转发评论“领取”可免费取得干货学习资料。

正文

很多人刚开始学习前台的时候会看非常多的文章,找非常多的资料,但其实并不知道从哪里开始。

如何帮助前台web新人入门和提高?

这里告诉大家如何分阶段学习前台,以及更加有效地利用资源。

新人前台学习的话可以分两大模块,一是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构建网站的入门级教程。

如何帮助前台web新人入门和提高?

练习

在掌握基础概念后,就要把知识变现了,接下来就要做点有意思的事。

下面详情推荐几个试验,帮助你进一步理解 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等网格框架提供了管理布局中行和列的样式表。

网格系统的主要目的之一是为网站增加响应能力。响应性意味着网站会根据窗口宽度调整大小。

练习

掌握了最佳实践后就要进行实际检验。接下来的两个试验的目标是练习编写干净的代码并观察最佳实践对可读性和可维护性的长期影响。

能够有效地重构代码是前台开发人员的一项重要技能。创立质量代码是一个迭代过程。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应用程序开发。

如何帮助前台web新人入门和提高?

三、综合练习

  • 瀑布流加载图片墙
  • 基于 HTML5 实现本地图片裁剪__试验楼 - 试验楼
  • 基于HTML5 Canvas实现小游戏
  • 基于 Canvas 实现放大镜效果
  • 校花评比排名项目
  • Java和WebSocket开发网页聊天室

以上就是关于前台新人学习的内容。

需要学习资料的关注私信小编“A”或者者转发评论“领取”可免费取得干货学习资料。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
手机二维码手机访问领取大礼包
返回顶部