Responsive Web Design

Overview

In this Responsive Web Design Certification, you’ll learn the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.

First, you’ll build a cat photo app to learn the basics of HTML and CSS. Later, you’ll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.

Finally, you’ll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid.

Major Topics:

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

Syllabus

• Say Hello to HTML Elements
• Headline with the strong 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
• Use the value attribute with Radio Buttons and 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
• 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
• Improve Compatibility with Browser Fallbacks
• Inherit CSS Variables
• Change a variable for a specific area
• Use a media query to change a variable
• 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 Heading Element Versus a Paragraph Element
• 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
• 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 Navigable 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
• Create a Media Query
• Make an Image Responsive
• Use a Retina Image for Higher Resolution Displays
• Make Typography Responsive
• 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
• Create Your First CSS Grid
• Add Columns with grid-template-columns
• Add Rows with grid-template-rows
• Use CSS Grid units to Change the Size of Columns and Rows
• Create a Column Gap Using grid-column-gap
• Create a Row Gap using grid-row-gap
• Add Gaps Faster with grid-gap
• Use grid-column to Control Spacing
• Use grid-row to Control Spacing
• Align an Item Horizontally using justify-self
• Align an Item Vertically using align-self
• Align All Items Horizontally using justify-items
• Align All Items Vertically using align-items
• Divide the Grid Into an Area Template
• Place Items in Grid Areas Using the grid-area Property
• Use grid-area Without Creating an Areas Template
• Reduce Repetition Using the repeat Function
• Limit Item Size Using the minmax Function
• Create Flexible Layouts Using auto-fill
• Create Flexible Layouts Using auto-fit
• Use Media Queries to Create Responsive Layouts
• Create Grids within Grids
• Build a Tribute Page
• Build a Survey Form
• Build a Product Landing Page
• Build a Technical Documentation Page
• Build a Personal Portfolio Webpage