Learn Responsive Web Design 101 from scratch

Learn how to create a responsive website from scratch! 

In this course you will learn a lot, and everything is included, meaning you'll learn HTML and page structure, along with some CSS and how to attach .css and .js files to your web page. 

In this course you will learn about HTML5, CSS3, and responsive web design (how to make mobile friendly websites!)

Some of the things you will learn in this beginner-friendly course are:

• How to create an HTML page and view it (within the first 3 minutes of this course)
• How HTML page structure works
• How to import .css and .js files properly 
• How to nest HTML elements inside of each other
• How to write HTML entities 
• How to add custom HTML classes and ID's for custom styling in CSS

You'll learn a lot about CSS, including:

• Basic styling, such as background colors, text colors, font sizes and more
• How CSS specificity works, and how to override it
• How to style elements, ID's and classes
• Nesting and grouping CSS selectors 
• Responsive Media Queries 
• Mobile-first, and desktop-first styling methods 
• Style modifiers 
• How to center elements horizontally and vertically 
• The Box Model
• CSS Gradients
• How to use and write Flexbox 
• Transitioning styles (light animations)

And of course you'll learn a tonne of miscellaneous tips, tricks and skills, including:   

• How to add custom icons to your page
• How to check if .css and .js files are imported into your page properly
• How to change your styles directly in the browser
• How to debug CSS directly in the browser 
• How to execute very basic JavaScript in the browser 
• How to add custom icons to your website 

In this course, the class project is creating a very small and simple fully responsive website. 

• Introduction Video
• Welcome
• Getting Started
• Page Structure
• Adding CSS
• Styling Our Page
• Inspector Tool
• A Quick Message From Yours Truly
• Parents and Children
• Adding a Gradient
• Viewport Height
• Content Section
• Adding Content Spacing
• Top To Bottom Styling
• Grouping Styles Together
• Fixing The Nav
• Specificity And Nesting
• Block Elements
• Vertically Centering Elements
• Box Sizing
• Headers
• Modifier Classes
• Responsive Testing
• Responsive CSS
• Mobile First Responsive Design
• Desktop vs Mobile First
• Max Width and Container Sizes
• Adding JavaScript
• Adding Icons
• Summary