Translate ES6

.gitignore

@@ -0,0 +1,27 @@
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Vim
+[._]*.s[a-v][a-z]
+[._]*.sw[a-p]
+[._]s[a-rt-v][a-z]
+[._]ss[a-gi-z]
+[._]sw[a-p]
+Session.vim
+
+# VSCode
+.vscode/*
+.vscode*.json
+
+# Jetbrains
+.idea/
+
+# Sublime
+*.sublime-workspace
+

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

@@ -0,0 +1,13 @@
+# 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:
+
+
+* have well-organized code that uses appropriate markup
+
+* ensure text alternatives exist for non-text and visual content
+
+* 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.

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

@@ -0,0 +1,8 @@
+# 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.
+

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

@@ -0,0 +1,18 @@
+# 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.
+

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

@@ -0,0 +1,34 @@
+# Introduction to Basic HTML & HTML5 # 
+
+HTML, or HyperText Markup Language, is a markup language used to describe the structure of a web page. It uses a special syntax or notation to organize and give information about the page to the browser. Elements usually have opening and closing tags that surround and give meaning to content. For example, there are different tag options to place around text to show whether it is a heading, a paragraph, or a list.
+
+For example:
+
+```
+<h1>Top level heading: Maybe a page title</h1>
+
+<p>A paragraph of text. Some information we would like to communicate to the viewer. This can be as long or short as we would like.</p>
+
+<ol>
+  <li>Number one on the list</li>
+  <li>Number two</li>
+  <li>A third item</li>
+</ol>
+```
+
+Becomes:
+
+# Top level heading: Maybe a page title #
+
+A paragraph of text. Some information we would like to communicate to the user. This can be as long or short as we would like.
+
+1、Number one on the list
+2、Number two
+3、A third item
+
+
+The HyperText part of HTML comes from the early days of the web and its original use case. Pages usually contained static documents that contained references to other documents. These references contained hypertext links used by the browser to navigate to the reference document so the user could read the reference document without having to manually search for it.
+
+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.
+
+This section introduces how to use HTML elements to give structure and meaning to your web content.

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

@@ -0,0 +1,5 @@
+# Introduction to the CSS Flexbox Challenges #
+
+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.
+
+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.