Merge pull request #9 from huluoyang/translate

修正了之前的错误，增加了新的需要翻译的 md 文档，先 Merge 进仓库，更新 Wiki。

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

@@ -0,0 +1,61 @@
+# Introduction to the Applied Accessibility Challenges #
+
+"Accessibility" generally means having web content and a user interface that can be understood, navigated, and interacted with by a broad audience. This includes people with visual, auditory, mobility, or cognitive disabilities. Websites should be open and accessible to everyone, regardless of a user's abilities or resources. Some users rely on assistive technology such as a screen reader or voice recognition software. Other users may be able to navigate through a site only using a keyboard. Keeping the needs of various users in mind when developing your project can go a long way towards creating an open web. Here are three general concepts this section will explore throughout the following challenges:
+
+
+
+1、have well-organized code that uses appropriate markup
+
+2、ensure text alternatives exist for non-text and visual content
+
+3、create an easily-navigated page that's keyboard-friendly
+
+
+
+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.
+
+# Upcoming Lessons #
+
+Add a Text Alternative to Images for Visually Impaired Accessibility
+
+Know When Alt Text Should be Left Blank
+
+Use Headings to Show Hierarchical Relationships of Content
+
+Jump Straight to the Content Using the main Element
+
+Wrap Content in the article Element
+
+Make Screen Reader Navigation Easier with the header Landmark
+
+Make Screen Reader Navigation Easier with the nav Landmark
+
+Make Screen Reader Navigation Easier with the footer Landmark
+
+Improve Accessibility of Audio Content with the audio Element
+
+Improve Chart Accessibility with the figure Element
+
+Improve Form Field Accessibility with the label Element
+
+Wrap Radio Buttons in a fieldset Element for Better Accessibility
+
+Add an Accessible Date Picker
+
+Standardize Times with the HTML5 datetime Attribute
+
+Make Elements Only Visible to a Screen Reader by Using Custom CSS
+
+Improve Readability with High Contrast Text
+
+Avoid Colorblindness Issues by Using Sufficient Contrast
+
+Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
+
+Give Links Meaning by Using Descriptive Link Text
+
+Make Links Navigatable with HTML Access Keys
+
+Use tabindex to Add Keyboard Focus to an Element
+
+Use tabindex to Specify the Order of Keyboard Focus for Several Elements

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

@@ -0,0 +1,112 @@
+# Introduction to the Applied Visual Design Challenges #
+
+Visual Design in web development is a broad topic. It combines typography, color theory, graphics, animation, and page layout to help deliver a site's message. The definition of good design is a well-discussed subject, with many books on the theme.
+
+At a basic level, most web content provides a user with information. The visual design of the page can influence its presentation and a user's experience. In web development, HTML gives structure and semantics to a page's content, and CSS controls the layout and appearance of it.
+
+This section covers some of the basic tools developers use to create their own visual designs.
+
+# Upcoming Lessons # 
+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 del 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

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

@@ -0,0 +1,17 @@
+# Introduction to Basic CSS #
+
+Cascading Style Sheets (CSS) tell the browser how to display the text and other content that you write in HTML.
+
+Note that CSS is case-sensitive so be careful with your capitalization. CSS has been adopted by all major browsers and allows you to control:
+
+* color
+* fonts
+* positioning
+* spacing
+* sizing
+* decorations
+* transitions
+
+There are three main ways to apply CSS styling. You can apply inline styles directly to HTML elements with the `style` attribute. Alternatively, you can place CSS rules within `style` tags in an HTML document. Finally, you can write CSS rules in an external style sheet, then reference that file in the HTML document. Even though the first two options have their use cases, most developers prefer external style sheets because they keep the styles separate from the HTML elements. This improves the readability and reusability of your code. The idea behind CSS is that you can use a selector to target an HTML element in the DOM (Document Object Model) and then apply a variety of attributes to that element to change the way it is displayed on the page.
+
+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.