【Udemy中英字幕】Frontend web developer Modern HTML CSS JavaScript

前端 Web 开发人员现代 HTML CSS JavaScript

Web 设计快速入门指南，涵盖 HTML、CSS、JavaScript 和 JavaScript DOM 的所有现代编码语法

讲师：Laurence Svekis

双语IT资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

您将学到什么

如何使用 HTML 和 CSS 创建网页
使用 JavaScript 创建交互式 Web 内容
JavaScript 编码基础知识
使用代码让您的网页栩栩如生
现代响应式网站
交互式动态网页

探索相关主题

要求

基本计算机技能
基本互联网技能
如何安装和设置应用程序

描述

初学者的网页设计现代 HTML CSS JavaScript 编码

了解如何

如何使用 HTML 和 CSS 创建网页
使用 JavaScript 创建交互式 Web 内容
JavaScript 编码基础知识
使用代码让您的网页栩栩如生
现代响应式网站
交互式动态网页

您是否对创建网站感兴趣，本课程是您的最佳起点。

立即注册即可获得：

9+小时优质课程
16 页可下载的工作簿 HTML 源代码、提示、资源和挑战
32 页可下载的工作簿 CSS 包括源代码、提示、资源和挑战
10 + 17 页可下载的 JavaScript 工作簿，包括源代码、技巧、资源和挑战
高级教练支持，帮助您学习
终身访问课程更新

学习现代网页设计的所有核心基础知识，涵盖所有常用的 HTML 和 CSS 语法。本课程旨在帮助您快速轻松地开始创建网页。

课程涵盖所有基础知识，助您快速开启创建精美网站之旅。添加 JavaScript，让您的网页栩栩如生。

涵盖 JavaScript 的核心概念，让您可以尝试代码并熟悉其功能。使用 JavaScript，您可以访问浏览器中的 HTML DOM，从而与网页内容进行交互和操作。JavaScript 可以创建当今所有主流现代网页中常见的交互式动态内容。

探索如何快速开始编码并专注于设计包含源代码和示例的网页。

每个部分都附带一个 PDF 指南，其中包含有用的部分资源和课程的源代码，以便您可以亲自尝试代码。

学习 HTML –如何创建 HTML 文件，以及如何以现代格式构建 HTML 代码，使其易于样式化。本部分的课程涵盖如何开始编码和创建网页。

设置编辑器并创建 HTML 文件

调试代码

页面结构的 HTML 标签

HTML元素由什么组成

什么是自闭合标签

如何使用元素属性

使用超链接将页面链接在一起

将图像添加到您的网页

可读内容的列表和表格

语义页面元素

如何创建一个简单的网页

使用 Github 页面和 HTML 网站上线

学习 HTML 涵盖以下代码。

编辑器和设置来编写 HTML – 创建一个 html 文件
HTML 元素的解剖——开始标签、内容、元素、结束标签
4. HTML页面必须添加的标签 html, head, title, body
代码中的注释
创建基本模板
常见HTML标签介绍
自闭合标签
标签属性（id、style、class）
锚标签超链接连接页面
添加图像-自闭合标签
列表
表格
HTML 语义元素

学习 CSS

什么是 CSS？如何使用层叠样式表 (CSS) 来设计网页样式？HTML 为网页提供结构，CSS 则允许您设置网页样式。您可以使用自己的样式设计页面，设置页面布局、添加颜色、字体等等。您可以按照自己想要的方式呈现网页，无需依赖 HTML，即可让网页内容按照您的想法进行外观和样式设计。

探索如何将 CSS 添加到 HTML 页面

如何为页面元素背景和文本添加颜色

什么是盒子模型以及如何将边框、边距和填充应用于任何页面元素。

设置文本样式、更新字体并自定义文本输出。

更新链接，向页面元素添加伪类

如何应用显示属性、位置和浮动来设置页面布局。

探索真正有用的 CSS 属性

用于选择元素的 CSS 组合器。

如何使用 CSS 浮动、CSS 网格和 CSS 弹性框构建响应式网页。

使用本节介绍的 CSS 层叠样式表常用语法。

Google Chrome 开发者工具
将样式添加到 HTML 标签样式链接到 CSS 文件
CSS 规则 CSS 语法 (选择器) (声明) {属性:值}
通过标签名称、ID、类别选择元素
代码中的注释
颜色 – 颜色类型命名为 HEX RGB RGBA
背景 – 颜色 – 图像 – 重复 – 附件 – 位置 – 背景简写
盒子模型 – 边框 – 边距 – 填充 – 高度和宽度
文本 – 文本对齐文本装饰文本转换
字体 – 字体样式 Google 字体
链接状态 – a:link a:visited a:hover a:active
显示属性 – 内联 – 无 – 块
位置：静态相对固定绝对粘性
浮动并清除左侧、右侧和无
用于选择的 CSS 组合器 – 空间子选择器 >
伪类 – :hover、:first-child、last-child、:nth-child(2)
伪元素 – ::first-line、::first-letter、::after
网页设计浮动 – 响应式设计
CSS 网格 – 显示：网格；网格模板区域：
CSS Flexbox – 轴行和轴列

学习 JavaScript 基础知识

JavaScript 代码会在您的 HTML 页面加载时运行您的浏览器。在代码中添加 JavaScript 可以提升网页的用户体验。使用 JavaScript 可以将静态网页转换为交互式网页。本节将介绍 JavaScript 的基础知识以及编写 JavaScript 代码的语法。JavaScript 是一组指令，您可以将其添加到代码中，以便让浏览器知道下一步要做什么。

变量是编码的核心

JavaScript 的不同数据类型以及 JavaScript 如何设置数据类型。

对象和数组的强大功能以及如何使用它们在一个变量中存储多个值。

在代码中提供计算的运算符

根据需要运行预定义代码块的函数。

代码中的逻辑条件

循环以节省时间并迭代代码块

学习 JavaScript 以使您的网页更具交互性。

JavaScript 简介 alert 提示
变量 Let 和 Const
运算符
数组和对象
数据类型
功能
状况
循环执行 While、For、While、for each

学习 JavaScript DOM

JavaScript 和 DOM

文档对象模型 (DOM) 是 HTML 文档的编程接口，它定义了页面的逻辑结构以及访问和操作页面内容的方式。使用 JavaScript 为您的网页注入活力，并连接网页元素。创建能够响应用户的完全交互内容。创建无需刷新页面即可更改的动态网页内容，并向用户呈现新元素和更新的内容。使用 JavaScript 和 DOM 提升您的 Web 用户体验。

什么是 DOM 文档对象模型

如何使用 JavaScript 从网页中选择元素

使用 JavaScript 操作和更改页面元素

如何设置元素的样式属性

使它们与事件监听器进行交互

使用 JavaScript 的 DOM 事件和页面事件

如何使用代码创建元素并将其添加到您的网页

移动元素和元素的动画。