Unit Objectives
Bottega Support Application Overview
HTML CSS Course Introduction
What are HTML and CSS?
The Website We're Going to Build in the HTML/CSS Course
Tools We'll Use in the Course and Basic HTML Structure Overview
How to Install the devCamp VS Code Extension
Introduction to Using CSS Styles
How the CSS Cascading Process Works
Guide to HTML Links
Working with the div Tag in HTML
Guide to HTML Classes and IDs
Introduction to Flexbox
Guide to Padding in CSS
Guide to Margin in CSS
Course Update: New Import for Font Awesome
Integrating Icons with Font Awesome
How to Select and Style Child Tag Elements
Introduction to CSS Grid
How to Import and Use Custom Fonts in HTML
How to Import and Style Images in HTML
Refactoring the CSS Code to Use More Specific Selectors
Integrating Flexbox Inside of a CSS Grid Container to Align Items
Introduction to CSS Animations
Styling the Right Column of the Navigation Bar
Finalizing the Navigation Bar and Organizing the Style Files to Conform with Development Best Practices
How to Build a Parallax Scrolling Feature
Adding Text Overlays On Top of the Parallax Image
Adding the HTML Structure and Icons for the Feature Section of the Homepage
How to Create Columns with Animated Hover Effects in CSS
Working with nth Child Selectors in CSS
How to Work with Box Shadows in CSS
How to Embed a Google Map into a Website
Building the Footer's HTML Structure
Controlling the Flex Direction to Layout the Footer Styles
How to Apply Filters and Control an Image's Opacity with CSS
Finalizing the Footer Styles
Building the HTML Structure for the About Page Header
How to Skew Images in CSS
Using the CSS Float Property to Have Text Flow Around an Image
Building the Square Grid HTML Structure
Creating a Two Column Layout with CSS Grid and Flexbox
Finalizing the About Page Styles and Review of Code Organization Best Practices
Populating the Menu Page with the Two Column Grid
Guide to HTML Bullet Point and Numbered Lists
How to Implement Anchor Tags in HTML
Overview of the Before and After Pseudo Selectors in CSS
Creating the Initial Structure for the Contact Page
Building the Contact Page Layout with CSS Grid
Introduction to HTML Form Elements
How to Style Text Inputs with CSS
Styling the Form Textarea and Button
Building the Label and Form Element Drop Shadow Styles
Integrating Custom Form Placeholder Text Styles
How to Animate Form Labels
Finalizing Contact Page Styles
Introduction to CSS Media Queries
Finalizing the Homepage Responsive Styles
Implementing Responsive Styles to the Square Grid, Image Skew, and Form Elements
HTML Concept Quiz
CSS Concept Quiz