Skip to content

Fix #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 27, 2018
Merged

Fix #29

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 0 additions & 46 deletions 01-responsive-web-design/applied-accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,49 +11,3 @@


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
105 changes: 0 additions & 105 deletions 01-responsive-web-design/applied-visual-design.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,108 +6,3 @@ At a basic level, most web content provides a user with information. The visual

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
87 changes: 0 additions & 87 deletions 01-responsive-web-design/basic-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,90 +16,3 @@ There are three main ways to apply CSS styling. You can apply inline styles dire

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.

# Upcoming Lessons #

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

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

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

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

Cascading CSS variables

Change a variable for a specific area

Use a media query to change a variable
58 changes: 1 addition & 57 deletions 01-responsive-web-design/basic-html-and-html5.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,60 +31,4 @@ The HyperText part of HTML comes from the early days of the web and its original

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.

# Upcoming Lessons #

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 External Pages with Anchor Elements

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
This section introduces how to use HTML elements to give structure and meaning to your web content.
36 changes: 0 additions & 36 deletions 01-responsive-web-design/css-flexbox.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,3 @@
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.

# Upcoming Lessons #

Use display: flex to Position Two Boxes

Add Flex Superpowers to the Tweet Embed

Use the flex-direction Property to Make a Row

Apply the flex-direction Property to Create Rows in the Tweet Embed

Use the flex-direction Property to Make a Column

Apply the flex-direction Property to Create a Column in the Tweet Embed

Align Elements Using the justify-content Property

Use the justify-content Property in the Tweet Embed

Align Elements Using the align-items Property

Use the align-items Property in the Tweet Embed

Use the flex-wrap Property to Wrap a Row or Column

Use the flex-shrink Property to Shrink Items

Use the flex-grow Property to Expand Items

Use the flex-basis Property to Set the Initial Size of an Item

Use the flex Shorthand Property

Use the order Property to Rearrange Items

Use the align-self Property
Loading