Cactlog

• Basic HTML and HTML5
• Basic CSS
• Applied Visual Design
• Applied Accessibility
• Responsive Web Design Principles
• CSS Flexbox
• CSS Grid
• Responsive Web Design Projects

---

Basic HTML and HTML5

• HTML介绍
• 标题、问题和注释
• 链接
• 表单
• 区块和头尾

---

HTML介绍

• Introduction to Basic HTML & HTML5

标题、问题和注释

• Say Hello to HTML Elements
• Headline with the h2 Element
• Inform with the Paragraph Element
• Fill in the Blank with Placeholder Text
• Uncomment HTML
• Comment out HTML
• Delete HTML Elements
• Introduction to HTML5 Elements
• Add Images to Your Website

链接

• Link to Internal Sections of a Page with Anchor Elements
• Nest an Anchor Element within a Paragraph
• Make Dead Links Using the Hash Symbol
• Turn an Image into a Link

表单

• Create a Bulleted Unordered List
• Create an Ordered List
• Create a Text Field
• Add Placeholder Text to a Text Field
• Create a Form Element
• Add a Submit Button to a Form
• Use HTML5 to Require a Field
• Create a Set of Radio Buttons
• Create a Set of Checkboxes
• Check Radio Buttons and Checkboxes by Default

区块和头尾

• Nest Many Elements within a Single div Element
• Declare the Doctype of an HTML Document
• Define the Head and Body of an HTML Document

---

Basic CSS

• 介绍
• 文本颜色、CSS选择器、Class选择器
• 文字大小、字体、字体降级
• 图片大小 、边框、边角、背景颜色
• id选择器、内边距、外边距
• 属性选择器、body样式、继承样式
• 样式的优先级
• 颜色设置
• CSS变量

---

介绍

• Introduction to Basic CSS

文本颜色、CSS选择器、Class选择器

• Change the Color of Text
• Use CSS Selectors to Style Elements
• Use a CSS Class to Style an Element
• Style Multiple Elements with a CSS Class

文字大小、字体、字体降级

• Change the Font Size of an Element
• Set the Font Family of an Element
• Import a Google Font
• Specify How Fonts Should Degrade

图片大小 、边框、边角、背景颜色

• Size Your Images
• Add Borders Around Your Elements
• Add Rounded Corners with border-radius
• Make Circular Images with a border-radius
• Give a Background Color to a div Element

Id选择器、内边距、外边距

• Set the id of an Element
• Use an id Attribute to Style an Element
• Adjust the Padding of an Element
• Adjust the Margin of an Element
• Add a Negative Margin to an Element
• Add Different Padding to Each Side of an Element
• Add Different Margins to Each Side of an Element
• Use Clockwise Notation to Specify the Padding of an Element
• Use Clockwise Notation to Specify the Margin of an Element

属性选择器、body样式、继承样式

• Use Attribute Selectors to Style Elements
• Understand Absolute versus Relative Units
• Style the HTML Body Element
• Inherit Styles from the Body Element

样式的优先级

• Prioritize One Style Over Another
• Override Styles in Subsequent CSS
• Override Class Declarations by Styling ID Attributes
• Override Class Declarations with Inline Styles
• Override All Other Styles by using Important

颜色设置

• Use Hex Code for Specific Colors
• Use Hex Code to Mix Colors
• Use Abbreviated Hex Code
• Use RGB values to Color Elements
• Use RGB to Mix Colors

CSS变量

• Use CSS Variables to change several elements at once
• Create a custom CSS Variable
• Use a custom CSS Variable
• Attach a Fallback value to a CSS Variable
• Improve Compatibility with Browser Fallbacks
• Cascading CSS variables
• Change a variable for a specific area
• Use a media query to change a variable

---

Applied Visual Design

• 介绍
• 字体排版
• 布局
• 颜色
• 变形
• 动画
• 制图

---

介绍

• Introduction to the Applied Visual Design Challenges

字体排版

• Create Visual Balance Using the text-align Property
• Adjust the Width of an Element Using the width Property
• Adjust the Height of an Element Using the height Property
• Use the strong Tag to Make Text Bold
• Use the u Tag to Underline Text
• Use the em Tag to Italicize Text
• Use the s Tag to Strikethrough Text
• Create a Horizontal Line Using the hr Element
• Adjust the background-color Property of Text
• Adjust the Size of a Header Versus a Paragraph Tag
• Add a box-shadow to a Card-like Element
• Decrease the Opacity of an Element
• Use the text-transform Property to Make Text Uppercase
• Set the font-size for Multiple Heading Elements
• Set the font-weight for Multiple Heading Elements
• Set the font-size of Paragraph Text
• Set the line-height of Paragraphs
• Adjust the Hover State of an Anchor Tag

布局

• Change an Element's Relative Position
• Move a Relatively Positioned Element with CSS Offsets
• Lock an Element to its Parent with Absolute Positioning
• Lock an Element to the Browser Window with Fixed Positioning
• Push Elements Left or Right with the float Property
• Change the Position of Overlapping Elements with the z-index Property
• Center an Element Horizontally Using the margin Property

颜色

• Learn about Complementary Colors
• Learn about Tertiary Colors
• Adjust the Color of Various Elements to Complementary Colors
• Adjust the Hue of a Color
• Adjust the Tone of a Color
• Create a Gradual CSS Linear Gradient
• Use a CSS Linear Gradient to Create a Striped Element
• Create Texture by Adding a Subtle Pattern as a Background Image

变形

• Use the CSS Transform scale Property to Change the Size of an Element
• Use the CSS Transform scale Property to Scale an Element on Hover
• Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
• Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
• Create a Graphic Using CSS
• Create a More Complex Shape Using CSS and HTML

动画

• Learn How the CSS @keyframes and animation Properties Work
• Use CSS Animation to Change the Hover State of a Button
• Modify Fill Mode of an Animation
• Create Movement Using CSS Animation
• Create Visual Direction by Fading an Element from Left to Right
• Animate Elements Continually Using an Infinite Animation Count
• Make a CSS Heartbeat using an Infinite Animation Count
• Animate Elements at Variable Rates
• Animate Multiple Elements at Variable Rates
• Change Animation Timing with Keywords

制图

• Learn How Bezier Curves Work
• Use a Bezier Curve to Move a Graphic
• Make Motion More Natural Using a Bezier Curve

---

Responsive Web Design Principles

• Create a Media Query

来源

Welcome to learn.freeCodeCamp!

CHANGEGLOG

20180929补充Basic CSS