194 Chapters
Certificate on completion
Takeaway Skills
- Basic HTML and HTML5
- Basic CSS
- Applied Visual Design
- Applied Accessibility
- Responsive Web Design Principles
- CSS Flexbox
- CSS Grid
- Responsive Web Design Projects
Course Content
1. BASIC HTML AND HTML5
- Say Hello to HTML ElementsPreview
- 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
- 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
2. BASIC CSS
- Change the Color of TextPreview
- 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
3. APPLIED VISUAL DESIGN
- Create Visual Balance Using the text-align PropertyPreview
- 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
4. APPLIED ACCESSIBILITY
- Add a Text Alternative to Images for Visually Impaired AccessibilityPreview
- 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
5. RESPONSIVE WEB DESIGN PRINCIPLES
6. CSS FLEXBOX
- Use display: flex to Position Two BoxesPreview
- 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
7. CSS GRID
- Create Your First CSS GridPreview
- 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