GitHub Pages
  • Setting up your free GitHub account and creating a public repository
  • Install GIT and Configure Visual Studio Code
  • Creating a really basic page
Basic Start File with Media Queries
  • Dude Ranch Introduction
  • Dude Ranch Start
  • Dude Ranch Design
  • Dude Ranch Navigation
  • Dude Ranch Images
  • Dude Ranch Wrapup
  • Common Mistakes
  • Adding Wrappers to a Basic Template
Preparing images for the Web
  • Preparing an Image for the Web Using Photoshop
  • Preparing an Image for the Web Using Pixlr
  • Creating a Logo with Transparency (PNG)
  • Cropping Images for a Gallery
  • How to Avoid a Too BIG Image
Building a Multiple Page Site
  • Overview of Multiple Pages Site
  • Adding a Responsive Logo
  • Updating the Navigation Items
  • Uploading to GitHub
Fonts for Websites
  • Typography
  • Font Awesome
Responsive Images
  • Overview of Responsive Images
  • Adding a Standard Image to a Web Page
  • Scaling an Image using CSS
  • When a Pixel is not a Pixel
  • Responsive Logo using Photoshop Layer Names
  • Responsive Logo using srcset and Pixel Density
  • Responsive Image using srcset and Width
  • Responsive Images using the Picture Tag and Media Queries
  • Art Direction for Responsive Images
Responsive Columns using Float, Flexbox and Grid
  • Responsive Columns using Float
  • Using CSS Grid for Multiple Columns in the Header
  • Using CSS Flexbox for an Image Gallery
Responsive Navigation
  • Overview of Responsive Navigation
  • Styling the Small Screen Navigation
  • Styling the Medium and Large Screen Navigation
  • Adding JavaScript for the Small Screen Hamburger Icon
  • Two Level Deep Navigation - Introduction
  • Two Level Deep Navigation - Project
Web Forms
  • Overview of Web Forms
  • Best Practices for Web Forms
  • Building a Web Form
  • Styling a Web Form
  • Checking for Best Practices
  • Common Form Problems
Using AJAX to access JSON data with an API
  • Overview of Local JSON data
  • Loading Local JSON Data
  • Introduction to Remote JSON Data
  • Inserting Weather Data into a Webpage
  • Building a Five Day Weather Forecast Part 1
  • Building a Five Day Weather Forecast Part 2
Using JavaScript to Enhance your Web Page
  • Using JavaScript to Display a Message on a Specific Day of the Week
  • Calculating Wind Chill
  • Wind Chill Example part 1
  • Wind Chill Example part 2
CSS Preprocessors
  • SASS Introduction
  • SASS Partials and Imports
  • SASS Variables
  • SASS Nesting
  • SASS Lighten() and Darken()
Responsive Background Images
  • Responsive Images using CSS Background Image
  • Creating Header Images using Photoshop
  • Coding a Responsive Image
CSS Animations
  • CSS Animations
  • CSS Animations on Hover
Shapes and Text Wrapping
  • Shapes and Text Wrapping
Lazy Loading
  • Lazy Load Introduction
  • Lazy Load Implementation
Learn CSS Grid
  • CSS Grid for Text and Images
  • CSS Named Grid Areas Introduction
  • CSS Named Grid Areas Small Screens
  • CSS Named Grid Areas Large Screens
  • Using Grid to build a Five Day Forecast
Touch Enabled Image Slider
  • Image Slider using Slick Slider code
Building Information Cards
  • Building Information Cards
  • Cards From Scratch Part 1
  • Cards From Scratch Part 2
Build a Mobile App with JSON data
  • Mobile Application Design
  • Mobile Application JSON