|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/startcss/
课程评论：没有评论
**成为网页设计师：HTML & CSS 入门课程总结** 本课程专为编程新手设计，即使不喜爱编程，也能轻松入门网页设计。HTML 语言相比 Python、Java、C# 等编程语言更容易学习。课程提供细致的步骤，帮助任何人快速上手。 **HTML 部分将涵盖：** * **基础结构：** 标题 (Heading)、段落 (Paragraph) * **内容元素：** 链接 (Links)、图片 (Images) * **列表与表格：** 列表 (Lists)、表格 (Tables) * **用户交互：** 表单 (Forms)、表单验证 (Form Validation) * **语义化标签：** 理解并使用各种语义化标签创建结构清晰的网页。 * **数据捕获：** 学习创建能够从用户收集数据的表单。 **CSS 部分将深入讲解：** * **样式应用：** 内联样式（Inline）、内部样式（Internal）和外部样式（External）的应用。 * **选择器：** 元素选择器 (Element Selector)、ID 选择器 (Id Selector) 和类选择器 (Class Selector) 的理解与运用。 * **字体样式：** * 字体的分类 (Serif, Sans Serif, Monospace)。 * 字体文件类型 (TTF, OTF, WOFF, WOFF2)。 * 使用桌面已安装字体或通过 `@font-face`、`@import` 加载网络字体。 * 字体大小（绝对值、相对值、长度单位、百分比）和字重 (Font Weight)。 * **颜色应用：** * RGB、十六进制、RGBA、HSL、HSLA、`currentcolor` 等多种颜色值表示方法。 * 使用颜色选取器。 * **盒模型与布局：** * 理解盒模型 (Box Model) 及 `border-box` 盒模型。 * 应用内边距 (Padding) 和外边距 (Margin) 来控制元素间距。 * 使用 `float` 和 `clear` 进行元素定位和布局。 * `width` 属性的应用。 * **显示属性：** `display` 属性的 `none`，`inline`，`block`，`inline-block` 等值的应用。 * **高级布局：** * Flexbox 布局。 * Grid 布局及分数单位 (fractional unit) 的理解。 * **元素定位：** * 相对定位 (Relative)、绝对定位 (Absolute)、固定定位 (Fixed)、粘性定位 (Sticky) 的应用。 * 利用定位进行页面布局。 * **列表与表格样式：** 为列表和表格添加样式。 * **第三方库：** 使用第三方库中的图标。 * **响应式设计：** 使用 CSS 实现响应式网页设计。 * **部署：** 将学习过程中开发的网页通过 GitHub Pages 发布。 本课程旨在帮助学员掌握构建现代网页所需的核心 HTML 和 CSS 技能，并了解如何将作品部署到线上。
New to programming?Don't like programming, but you want to get started?You are in the right place. HTML is easier to learn than programming languages like Python, Java, C#.This course contains fine grained steps for anybody to get started.HTMLHeadingParagraphLinksImagesListsTablesFormsForm ValidationCreate web pages that capture data from users using formsUnderstand the purpose of semantic tagsCSSApplying styles using Inline, Internal and ExternalUnderstand Element Selector, Id Selector and Class SelectorUnderstanding and Applying FontsFont Classification - Serif, Sans Serif, MonospaceFont File Types - TTF, OTF, WOFF, WOFF2Understanding fonts installed in your desktopFinding fonts from internetApply font using @font-faceApply font using @importFont Size - Absolute Size Keywords, Relative Size Keywords, Length, PercentageFont WeightUnderstanding and applying colorsRed, Green and BlueApply color using RGBApply color using Hexadecimal valuesOther color applying options - RGBA, HSL, HSLA, currentcolorColor PickerCreate Borders with various styles and apply border radiusApply Spacing using Width, Padding and MarginPosition elements using float and clearUnderstanding the Box ModelUnderstanding Border Box Box ModelDesign page layout using Float and ClearDisplay propertyApply display property as none, inline, block, inline-blockDesign page layout using flexDesign page layout using grid and understand about fractional unitApply styles to Form ElementsStyle LabelsStyle Input TextStyle PasswordStyle Drop DownStyle Text AreaAlign Radio Buttons and CheckboxesApply border to Input TextStyle Buttons with hover effectPosition ElementsRelativeAbsoluteFixedStickyLayout Design using PositionStyling List and TableUsing Third Party Library Icons using CSSApply Responsive Web Design using CSSLaunch the screens developed during this course into GitHub Pages
