Skip to content

Commit b2953c5

Browse files
huluoyangSSShooter
authored andcommitted
* fix some typo error * remove upcoming fileds * resolve conflicts
1 parent 2399ae5 commit b2953c5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+5
-2973
lines changed

01-responsive-web-design/applied-accessibility.md

Lines changed: 0 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -11,49 +11,3 @@
1111

1212

1313
Having accessible web content is an ongoing challenge. A great resource for your projects going forward is the W3 Consortium's Web Content Accessibility Guidelines (WCAG). They set the international standard for accessibility and provide a number of criteria you can use to check your work.
14-
15-
# Upcoming Lessons #
16-
17-
Add a Text Alternative to Images for Visually Impaired Accessibility
18-
19-
Know When Alt Text Should be Left Blank
20-
21-
Use Headings to Show Hierarchical Relationships of Content
22-
23-
Jump Straight to the Content Using the main Element
24-
25-
Wrap Content in the article Element
26-
27-
Make Screen Reader Navigation Easier with the header Landmark
28-
29-
Make Screen Reader Navigation Easier with the nav Landmark
30-
31-
Make Screen Reader Navigation Easier with the footer Landmark
32-
33-
Improve Accessibility of Audio Content with the audio Element
34-
35-
Improve Chart Accessibility with the figure Element
36-
37-
Improve Form Field Accessibility with the label Element
38-
39-
Wrap Radio Buttons in a fieldset Element for Better Accessibility
40-
41-
Add an Accessible Date Picker
42-
43-
Standardize Times with the HTML5 datetime Attribute
44-
45-
Make Elements Only Visible to a Screen Reader by Using Custom CSS
46-
47-
Improve Readability with High Contrast Text
48-
49-
Avoid Colorblindness Issues by Using Sufficient Contrast
50-
51-
Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
52-
53-
Give Links Meaning by Using Descriptive Link Text
54-
55-
Make Links Navigatable with HTML Access Keys
56-
57-
Use tabindex to Add Keyboard Focus to an Element
58-
59-
Use tabindex to Specify the Order of Keyboard Focus for Several Elements

01-responsive-web-design/applied-visual-design.md

Lines changed: 0 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -6,108 +6,3 @@ At a basic level, most web content provides a user with information. The visual
66

77
This section covers some of the basic tools developers use to create their own visual designs.
88

9-
# Upcoming Lessons #
10-
11-
Create Visual Balance Using the text-align Property
12-
13-
Adjust the Width of an Element Using the width Property
14-
15-
Adjust the Height of an Element Using the height Property
16-
17-
Use the strong Tag to Make Text Bold
18-
19-
Use the u Tag to Underline Text
20-
21-
Use the em Tag to Italicize Text
22-
23-
Use the del Tag to Strikethrough Text
24-
25-
Create a Horizontal Line Using the hr Element
26-
27-
Adjust the background-color Property of Text
28-
29-
Adjust the Size of a Header Versus a Paragraph Tag
30-
31-
Add a box-shadow to a Card-like Element
32-
33-
Decrease the Opacity of an Element
34-
35-
Use the text-transform Property to Make Text Uppercase
36-
37-
Set the font-size for Multiple Heading Elements
38-
39-
Set the font-weight for Multiple Heading Elements
40-
41-
Set the font-size of Paragraph Text
42-
43-
Set the line-height of Paragraphs
44-
45-
Adjust the Hover State of an Anchor Tag
46-
47-
Change an Element's Relative Position
48-
49-
Move a Relatively Positioned Element with CSS Offsets
50-
51-
Lock an Element to its Parent with Absolute Positioning
52-
53-
Lock an Element to the Browser Window with Fixed Positioning
54-
55-
Push Elements Left or Right with the float Property
56-
57-
Change the Position of Overlapping Elements with the z-index Property
58-
59-
Center an Element Horizontally Using the margin Property
60-
61-
Learn about Complementary Colors
62-
63-
Learn about Tertiary Colors
64-
65-
Adjust the Color of Various Elements to Complementary Colors
66-
67-
Adjust the Hue of a Color
68-
69-
Adjust the Tone of a Color
70-
71-
Create a Gradual CSS Linear Gradient
72-
73-
Use a CSS Linear Gradient to Create a Striped Element
74-
75-
Create Texture by Adding a Subtle Pattern as a Background Image
76-
77-
Use the CSS Transform scale Property to Change the Size of an Element
78-
79-
Use the CSS Transform scale Property to Scale an Element on Hover
80-
81-
Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
82-
83-
Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
84-
85-
Create a Graphic Using CSS
86-
87-
Create a More Complex Shape Using CSS and HTML
88-
89-
Learn How the CSS @keyframes and animation Properties Work
90-
91-
Use CSS Animation to Change the Hover State of a Button
92-
93-
Modify Fill Mode of an Animation
94-
95-
Create Movement Using CSS Animation
96-
97-
Create Visual Direction by Fading an Element from Left to Right
98-
99-
Animate Elements Continually Using an Infinite Animation Count
100-
101-
Make a CSS Heartbeat using an Infinite Animation Count
102-
103-
Animate Elements at Variable Rates
104-
105-
Animate Multiple Elements at Variable Rates
106-
107-
Change Animation Timing with Keywords
108-
109-
Learn How Bezier Curves Work
110-
111-
Use a Bezier Curve to Move a Graphic
112-
113-
Make Motion More Natural Using a Bezier Curve

01-responsive-web-design/basic-css.md

Lines changed: 0 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -16,90 +16,3 @@ There are three main ways to apply CSS styling. You can apply inline styles dire
1616

1717
In this section, you'll see how adding CSS styles to the elements of your CatPhotoApp can change it from simple text to something more.
1818

19-
# Upcoming Lessons #
20-
21-
Change the Color of Text
22-
23-
Use CSS Selectors to Style Elements
24-
25-
Use a CSS Class to Style an Element
26-
27-
Style Multiple Elements with a CSS Class
28-
29-
Change the Font Size of an Element
30-
31-
Set the Font Family of an Element
32-
33-
Import a Google Font
34-
35-
Specify How Fonts Should Degrade
36-
37-
Size Your Images
38-
39-
Add Borders Around Your Elements
40-
41-
Add Rounded Corners with border-radius
42-
43-
Make Circular Images with a border-radius
44-
45-
Give a Background Color to a div Element
46-
47-
Set the id of an Element
48-
49-
Use an id Attribute to Style an Element
50-
51-
Adjust the Padding of an Element
52-
53-
Adjust the Margin of an Element
54-
55-
Add a Negative Margin to an Element
56-
57-
Add Different Padding to Each Side of an Element
58-
59-
Add Different Margins to Each Side of an Element
60-
61-
Use Clockwise Notation to Specify the Padding of an Element
62-
63-
Use Clockwise Notation to Specify the Margin of an Element
64-
65-
Use Attribute Selectors to Style Elements
66-
67-
Understand Absolute versus Relative Units
68-
69-
Style the HTML Body Element
70-
71-
Inherit Styles from the Body Element
72-
73-
Prioritize One Style Over Another
74-
75-
Override Styles in Subsequent CSS
76-
77-
Override Class Declarations by Styling ID Attributes
78-
79-
Override Class Declarations with Inline Styles
80-
81-
Override All Other Styles by using Important
82-
83-
Use Hex Code for Specific Colors
84-
85-
Use Hex Code to Mix Colors
86-
87-
Use Abbreviated Hex Code
88-
89-
Use RGB values to Color Elements
90-
91-
Use RGB to Mix Colors
92-
93-
Use CSS Variables to change several elements at once
94-
95-
Create a custom CSS Variable
96-
97-
Use a custom CSS Variable
98-
99-
Attach a Fallback value to a CSS Variable
100-
101-
Cascading CSS variables
102-
103-
Change a variable for a specific area
104-
105-
Use a media query to change a variable

01-responsive-web-design/basic-html-and-html5.md

Lines changed: 1 addition & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -31,60 +31,4 @@ The HyperText part of HTML comes from the early days of the web and its original
3131

3232
As web pages and web applications grow more complex, the W3 Consortium updates the HTML specification to ensure that a webpage can be shown reliably on any browser. The latest version of HTML is HTML5.
3333

34-
This section introduces how to use HTML elements to give structure and meaning to your web content.
35-
36-
# Upcoming Lessons #
37-
38-
Say Hello to HTML Elements
39-
40-
Headline with the h2 Element
41-
42-
Inform with the Paragraph Element
43-
44-
Fill in the Blank with Placeholder Text
45-
46-
Uncomment HTML
47-
48-
Comment out HTML
49-
50-
Delete HTML Elements
51-
52-
Introduction to HTML5 Elements
53-
54-
Add Images to Your Website
55-
56-
Link to External Pages with Anchor Elements
57-
58-
Link to Internal Sections of a Page with Anchor Elements
59-
60-
Nest an Anchor Element within a Paragraph
61-
62-
Make Dead Links Using the Hash Symbol
63-
64-
Turn an Image into a Link
65-
66-
Create a Bulleted Unordered List
67-
68-
Create an Ordered List
69-
70-
Create a Text Field
71-
72-
Add Placeholder Text to a Text Field
73-
74-
Create a Form Element
75-
76-
Add a Submit Button to a Form
77-
78-
Use HTML5 to Require a Field
79-
80-
Create a Set of Radio Buttons
81-
82-
Create a Set of Checkboxes
83-
84-
Check Radio Buttons and Checkboxes by Default
85-
86-
Nest Many Elements within a Single div Element
87-
88-
Declare the Doctype of an HTML Document
89-
90-
Define the Head and Body of an HTML Document
34+
This section introduces how to use HTML elements to give structure and meaning to your web content.

01-responsive-web-design/css-flexbox.md

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,3 @@
33
A website's User Interface ("UI") has two components. First, there are the visual elements, such as colors, fonts, and images. Second, there is the placement or positioning of those elements. In Responsive Web Design, a UI layout must accommodate many different browsers and devices accessing the content.
44

55
CSS3 introduced Flexible Boxes, or flexbox, to create page layouts for a dynamic UI. It is a layout mode that arranges elements in a predictable way for different screen sizes and browsers. While somewhat new, all popular modern browsers support flexbox. This section covers how to use flexbox and the different layout options it offers.
6-
7-
# Upcoming Lessons #
8-
9-
Use display: flex to Position Two Boxes
10-
11-
Add Flex Superpowers to the Tweet Embed
12-
13-
Use the flex-direction Property to Make a Row
14-
15-
Apply the flex-direction Property to Create Rows in the Tweet Embed
16-
17-
Use the flex-direction Property to Make a Column
18-
19-
Apply the flex-direction Property to Create a Column in the Tweet Embed
20-
21-
Align Elements Using the justify-content Property
22-
23-
Use the justify-content Property in the Tweet Embed
24-
25-
Align Elements Using the align-items Property
26-
27-
Use the align-items Property in the Tweet Embed
28-
29-
Use the flex-wrap Property to Wrap a Row or Column
30-
31-
Use the flex-shrink Property to Shrink Items
32-
33-
Use the flex-grow Property to Expand Items
34-
35-
Use the flex-basis Property to Set the Initial Size of an Item
36-
37-
Use the flex Shorthand Property
38-
39-
Use the order Property to Rearrange Items
40-
41-
Use the align-self Property

0 commit comments

Comments
 (0)