How To Create A Website: An Html Tutorial And Css Tutorial

Learn How To Make Websites - HTML - CSS - Flexbox - Transitions - Animations - SVGs - The Box Model - CSS Specificity

What you'll learn
Build beautiful webpages using today's best practices
Understand the importance of performance and build performant websites
Acquire an outstanding foundation in the fundamentals of web programming
Taught by a professor with 20 years of experience teaching individuals of all abilities
Achieve mastery in the understanding and application of HTML & CSS
Apply cutting-edge techniques such as Flexbox and SVGs
Requirements
No prerequisite knowledge is required to take this course. This course starts at the very beginning and will teach you everything you need to know to be an outstanding web developer.
Description
You can learn to build websites quickly and easily if it is taught correctly.This course will show you how to build websites. It will give you a solid foundation in building websites. By the end of this course, you will have strong skills in creating websites with HTML & CSS. As with any craft, the fundamentals are essential. If you have a strong foundation in the fundamentals, you will be poised to grow and develop professionally as a craftsperson who knows their craft.My name is Todd McLeod and I began creating websites in 1997. I began teaching how to create websites in 2001. I am tenured faculty in California and I have taught individuals of all ability levels how to create websites. After completing this course, you will have mastered the fundamentals of creating websites with HTML & CSS. Here are the highlights of what you will receive in this class:32 hours of on-demand videoExtensive hands-on exercisesSolutions to the hands-on exercisesAccess to all of the code used in the course74 exclusive resources which you can download286 page book on the fundamentals of HTML and CSSLifetime access to everything in this course100% money-back satisfaction guaranteeA certificate of completionHere are the highlights of what you will learn in this course:Learn the art of building websitesUnderstand what it takes to succeedDiscover Google's Teapot, how to change the news, and how to play the Dinosaur video gameGain insight into the history of the Internet and the World Wide WebLearn about the best documentation for building websitesUnderstand how the World Wide Web worksDiscover new ways to use your web browserAcquire the ability to highlight webpagesLearn all about developer toolsGain the ability to use an IDE (integrated development environment)Acquire the ability to use git and github for version controlLearn how to code in HTML and CSSGain a solid foundation in HTML and CSSAcquire the ability to use emmetUnderstand relative and absolute URLsLearn about CSS rule-sets and CSS selectorsLearn how to link CSS documents to HTML documentsLearn all about the layout of webpages including the box-model and flexboxGain the ability to work with older layout modalities such as position and floatMaster the nuances of CSS specificityGain the ability to correctly structure HTML documentsAcquire mastery over media-queriesLearn the "above the fold" design patternMaster using SVG's to optimize your images and make your sites more performantAcquire the ability to work with advanced techniques such as transitions and animationsIf you want to learn how to create websites, the first place to begin is with the fundamentals of HTML & CSS. The first place to begin is with this course. This class is guaranteed to teach you how to build websites. Once enrolled, you will have access to this Excel course for the rest of your life. Described as “fun” and “amazing” and “life changing,” Todd McLeod’s website course will forever transform your life. Try this course for yourself and see how quickly and easily you too can learn to build websites.

Overview

Section 1: Introduction

Lecture 1 Welcome

Lecture 2 Course outline

Lecture 3 Code resources

Lecture 4 How To Succeed

Lecture 5 The Art of Building Websites

Section 2: Getting Started

Lecture 6 Having Fun #1 - HTTP Status Codes

Lecture 7 Having Fun #2 - Making The News

Lecture 8 Having Fun #3 - The Dinosaur Video Game

Section 3: Understanding The Internet & World Wide Web

Lecture 9 History of the Internet

Lecture 10 History of the World Wide Web

Lecture 11 Who Controls the Internet & WWW?

Lecture 12 Web Documentation

Lecture 13 Highlighting Webpages & Chrome Extensions

Lecture 14 How The Web Works

Section 4: An Introduction to HTML

Lecture 15 Your First Webpage

Lecture 16 Anatomy of an HTML Page

Lecture 17 HTML Terminology

Section 5: An Introduction to CSS

Lecture 18 A Separation of Concerns

Lecture 19 CSS Rule-sets

Lecture 20 Linking CSS to HTML

Lecture 21 Multiple CSS Selectors

Section 6: Configuring Your Environment

Lecture 22 Integrated Development Environments

Lecture 23 WebStorm

Lecture 24 Atom.io

Lecture 25 Sublime

Lecture 26 Dreamweaver

Section 7: Becoming Skilled with Github

Lecture 27 Github Overview

Lecture 28 Git & Github - The Story

Lecture 29 Setting up git and github on Windows

Lecture 30 Setting up git and github on Mac

Lecture 31 Terminal Essentials

Lecture 32 Creating a “Master” Local Git Repository

Lecture 33 Creating an “Origin/Master” Remote Github Repository

Lecture 34 Using Github - Basic Commands

Lecture 35 Using Github - Deleting A Repo

Section 8: HTML Essentials

Lecture 36 Section Overview

Lecture 37 FIle Naming Conventions

Lecture 38 Folder Naming Conventions

Lecture 39 Opening A Project in Webstorm

Lecture 40 Essential Tags

Lecture 41 Emmet.io

Lecture 42 Modifying Webstorm Formatting

Lecture 43 Tag Attributes

Lecture 44 Relative URLs

Lecture 45 Absolute URLs

Lecture 46 Comments

Lecture 47 Hands-On Exercises

Lecture 48 Hands-On Exercises - Solutions

Section 9: CSS Essentials

Lecture 49 Section Overview

Lecture 50 All HTML Tags & Attributes, All CSS Selectors & Properties

Lecture 51 border Property

Lecture 52 border-radius Property

Lecture 53 display Property

Lecture 54 padding & margin Properties

Lecture 55 Box Model

Lecture 56 box-Sizing Property

Lecture 57 Review

Lecture 58 Hands-On Exercises

Lecture 59 Hands-On Exercises - Solutions

Section 10: CSS Selectors

Lecture 60 Section Overview

Lecture 61 CSS Resets

Lecture 62 CSS Selectors: element, class, id

Lecture 63 Selectors: attribute

Lecture 64 Selectors: pseudo-classes

Lecture 65 Selectors: pseudo-class :focus

Lecture 66 Selectors: pseudo-class nth child - part I

Lecture 67 Selectors: pseudo-class nth child - part II

Lecture 68 Selectors: pseudo-class typography

Lecture 69 Selectors: nested selectors

Lecture 70 margin: 0 auto & The Display Property

Lecture 71 Hands-On Exercise - The Surfer Page

Lecture 72 Hands-On Exercise - The Surfer Page - Solution

Lecture 73 Hands-On Exercises

Lecture 74 Hands-On Exercises - Solutions I

Lecture 75 Hands-On Exercises - Solutions II

Lecture 76 Review

Section 11: CSS Order & Specificity

Lecture 77 Section Overview

Lecture 78 The Browser’s Application of CSS

Lecture 79 Challenge & Solution #1

Lecture 80 Challenge & Solution #2, 3, 4

Lecture 81 Challenge & Solution #5, 6

Lecture 82 Hands-On Exercise

Lecture 83 Hands-On Exercises - Solutions

Lecture 84 Review

Section 12: Formatting Text

Lecture 85 Section Overview

Lecture 86 font Property

Lecture 87 font-family Property

Lecture 88 font-size Property

Lecture 89 font-weight & font-style Properties

Lecture 90 font-variant & text-transform Properties

Lecture 91 line-height Property

Lecture 92 letter-spacing, word-spacing, & color Properties

Lecture 93 Google Fonts

Lecture 94 text-align & text-shadow Properties

Lecture 95 text-decoration Property &

Lecture 96 text-indent Property

Lecture 97 Hands-On Exercises

Lecture 98 Hands-On Exercises - Solutions

Lecture 99 Review

Section 13: Structuring Documents

Lecture 100 Section Overview

Lecture 101 Document Structure - Terminology

Lecture 102 Semantic HTML

Lecture 103 Hands-On Exercises - Semantic HTML

Lecture 104 Hands-On Exercises - Semantic HTML - My Solutions

Lecture 105 Semantic HTML - header, nav, main

Lecture 106 Semantic HTML - article, section

Lecture 107 Semantic HTML - aside & footer

Lecture 108 Semantic HTML - Examples

Lecture 109 Semantic HTML - headings - h1 - h6

Lecture 110 Semantic HTML - figure, figcaption

Lecture 111 Hands-On Exercises

Lecture 112 Hands-On Exercises - Solutions

Lecture 113 Hands-On Exercises - Learning HTML Elements - My Solutions

Lecture 114 Review

Section 14: Layout Fundamentals - Box Model & Display

Lecture 115 Section Overview

Lecture 116 Layout Resources & Review

Lecture 117 Display Property Review

Lecture 118 Hands-On Exercise - Page of Divs

Lecture 119 Hands-On Exercise - Page of Divs - Solution

Lecture 120 Hands-On Exercise - Horizontal Menu

Lecture 121 Hands-On Exercise - Horizontal Menu - Solution

Lecture 122 Taco Shop - Display Property

Lecture 123 Review

Section 15: Layout with Flexbox

Lecture 124 Section Overview

Lecture 125 Understanding Flexbox - Container & Items

Lecture 126 Containers & Creating A Flex Container

Lecture 127 Container Property: flex-wrap

Lecture 128 Container Property: flex-direction (primary-axis & cross-axis)

Lecture 129 Container Property: flex-flow

Lecture 130 Container Property: justify-content

Lecture 131 Container Property: align-items

Lecture 132 Container Property: align-content

Lecture 133 Item Property: align-self

Lecture 134 Item Property: order

Lecture 135 Item Property: flex-grow

Lecture 136 Item Property: flex-shrink

Lecture 137 Item Property: flex-basis

Lecture 138 Item Property: flex

Lecture 139 Hands-On Exercise - Flexbox Froggy

Lecture 140 Hands-On Exercises

Lecture 141 Hands-On Exercises - Solutions - 8 Pages

Lecture 142 Hands-On Exercises - Solutions - 6 Pages

Lecture 143 Review

Section 16: Media Queries

Lecture 144 Section Overview

Lecture 145 Understanding Media Queries

Lecture 146 Min-Width & Max-Width

Lecture 147 Print Media Query

Lecture 148 Media Type & Expressions

Lecture 149 Taco Shop & Scaling Font - Examples

Lecture 150 Responsive Design & Mobile First Design

Lecture 151 Hands-On Exercises

Lecture 152 Hands-On Exercises - Solutions

Lecture 153 Review

Section 17: Flexbox Design Patterns

Lecture 154 Section Overview

Lecture 155 Google’s Flexbox Design Pattern #1

Lecture 156 Google’s Flexbox Design Pattern #2

Lecture 157 Google’s Flexbox Design Pattern #3

Lecture 158 Hands-On Exercises

Lecture 159 Hands-On Exercises - Solutions

Lecture 160 Flexbox Example #1 - Responsive Menu

Lecture 161 Flexbox Example #2 - Above The Fold

Lecture 162 Flexbox Example #3 - Holy Grail Example

Lecture 163 Flexbox Example #4 - Holy Grail Redux

Lecture 164 Hands-On Exercises

Lecture 165 Review

Section 18: Layout with Position

Lecture 166 Section Overview

Lecture 167 Layout Essentials - A Quick Reference

Lecture 168 Position Overview

Lecture 169 Position Fixed

Lecture 170 Position Relative

Lecture 171 Position Absolute

Lecture 172 Taco Shop - Position Property

Lecture 173 Hands-On Exercises

Lecture 174 Hands-On Exercises - Solutions

Lecture 175 Review

Section 19: Layout with Float

Lecture 176 Section Overview

Lecture 177 Float Images & Overflow: Auto

Lecture 178 Float Layout & Clearing Floats

Lecture 179 Float Example - Holy Grail

Lecture 180 Taco Shop - Float Property

Lecture 181 Hands-On Exercises

Lecture 182 Hands-On Exercises - Solutions

Lecture 183 Review

Section 20: Background

Lecture 184 Section Overview

Lecture 185 Background Color

Lecture 186 background-image, background-repeat, background-size

Lecture 187 background-position, background-origin

Lecture 188 background-attachment

Lecture 189 background

Lecture 190 Hands-On Exercises

Lecture 191 Hands-On Exercises - Solutions

Lecture 192 Review

Section 21: Refactor Challenge

Lecture 193 Section Overview

Lecture 194 Analyzing The Starting Files

Lecture 195 inline-block Refactor

Lecture 196 flexbox Refactor

Section 22: Full-Page Above-The-Fold

Lecture 197 Section Overview

Lecture 198 Step #1: HTML Structure

Lecture 199 Step #1: HTML Structure - Solution

Lecture 200 Step #2: Layout

Lecture 201 Step #2: Layout - Solution

Lecture 202 Step #3: background image

Lecture 203 Step #3: background image - Solution

Lecture 204 Step #4: Format Text

Lecture 205 Step #4: Format Text - Solution

Lecture 206 Step #5: Style The Button

Lecture 207 Step #5: Style The Button - Solution

Lecture 208 Step #6: Mobile

Lecture 209 Step #6: Mobile - Solution

Lecture 210 Review

Section 23: Expanding Your Skillset

Lecture 211 Section Overview

Lecture 212 q, blockquote, & cite elements; cite attribute

Lecture 213 pre, samp, code, kbd, abbr elements

Lecture 214 HTML Entities

Lecture 215 Linking Images & Bookmarks

Lecture 216 box-shadow Property

Lecture 217 vertical-align property

Lecture 218 mobile devices - mobile history & font-boosting

Lecture 219 mobile devices - meta viewport width=device-width

Lecture 220 mobile devices - meta viewport initial-scale=1

Lecture 221 meta viewport - picture example

Lecture 222 Review

Section 24: Graphics

Lecture 223 Section Overview

Lecture 224 Colors

Lecture 225 Picking Color Combinations - Adobe Color ( Kuler )

Lecture 226 Image Types - Raster/Bitmap & Vector

Lecture 227 Font Awesome

Lecture 228 Font Awesome - Performance

Lecture 229 Font Awesome - Instructions on Use Review

Lecture 230 Font Awesome to SVG - Adobe Illustrator

Lecture 231 Understanding SVG - Basic SVG Shapes

Lecture 232 SVG Terminology

Lecture 233 SVG Path Element

Lecture 234 SVG Path - More Examples

Lecture 235 SVG Stroke & Fill

Lecture 236 SVG - Notes & Resources

Lecture 237 SVG - Viewbox

Lecture 238 Styling SVGs with CSS

Lecture 239 SVG - Symbol & Use Elements

Lecture 240 Symbol, Use, & CSS

Lecture 241 Symbol with Multiple Paths

Lecture 242 Leave Room For Strokes

Lecture 243 Stroke %

Lecture 244 symbol & use vs img

Lecture 245 Review

Section 25: Full-Page Background

Lecture 246 Section Overview

Lecture 247 Fixed Header

Lecture 248 Fixed Header - Solution

Lecture 249 Header Containers

Lecture 250 Header Containers - Solution

Lecture 251 Make SVG’S

Lecture 252 Make SVG’S - Solution

Lecture 253 Insert SVGs

Lecture 254 Insert SVGs - Solution

Lecture 255 Style SVGs - Solution

Lecture 256 Dev Tools Styling & Company Naming - Solution

Lecture 257 Adding Links & Style - Solution

Lecture 258 Responsive, Mobile-First

Lecture 259 Responsive, Mobile-First - Solution

Lecture 260 Mobile Menu

Lecture 261 Mobile Menu - Solution

Lecture 262 Review

Section 26: Favicon

Lecture 263 Section Overview

Lecture 264 Create An Image

Lecture 265 Generate Favicon

Lecture 266 Generate Favicon - Subfolder

Lecture 267 Generate Favicon - Clears Cache

Lecture 268 Generate Favicon - Compression

Lecture 269 Favicon Essentials

Lecture 270 Full Page Background - Favicon

Lecture 271 Review

Section 27: Flexbox Practicum - Part 1

Lecture 272 Section Overview

Lecture 273 Counter

Lecture 274 Counter - Solution

Lecture 275 Tab Menu

Lecture 276 Tab Menu - Solution

Lecture 277 Header Menu

Lecture 278 Header Menu - Solution

Lecture 279 Review

Section 28: Transitions & Animations

Lecture 280 Section Overview

Lecture 281 Transitions

Lecture 282 Transition Examples

Lecture 283 Animations

Lecture 284 Animation Examples & Hands-On Exercise

Lecture 285 Hands-On Exercise Solution & Another Hands-On Exercise

Lecture 286 Hands-On Exercise Solution

Lecture 287 Transform & Animations

Section 29: Flexbox Practicum - Part 2

Lecture 288 Section Overview

Lecture 289 Footer Saving - Solution

Lecture 290 Sidebar Menu - Solution

Lecture 291 Welcome Page - Solution

Lecture 292 Dial Icon - Solution

Lecture 293 Feature List - Solution

Lecture 294 Card - Solution

Lecture 295 Card Group - Solution

Section 30: You Are A Hero

Lecture 296 Section Overview

Lecture 297 Above-The-Fold Flexbox Practice

Lecture 298 Side-Bar Fly-Out

Lecture 299 Linear-Gradient

Lecture 300 Audio & video

Lecture 301 Markdown

Lecture 302 Vendor Prefixes, AutoPrefixer, Task-Runners Gulp & Grunt

Lecture 303 Publishing Your Site - An Overview

Lecture 304 Publishing Your Site - Buying A Domain

Lecture 305 Publishing Your Site - Google Cloud

Lecture 306 Publishing Your Site - Google Cloud II

Lecture 307 Review

Section 31: Forms

Lecture 308 Section Overview

Lecture 309 The Form Element

Lecture 310 The Input Element

Lecture 311 The Label Element

Lecture 312 The Input Element - Types

Lecture 313 textarea, select, option, optgroup

Lecture 314 fieldset & legend

Lecture 315 Form Examples, progress, meter

Lecture 316 Review

Section 32: Now Go Build It

Lecture 317 Overview of Three Projects

Lecture 318 Game Plan - Contractor Website

Lecture 319 Starting Files - Contractor Website

Lecture 320 Game Plan - Travel Website

Lecture 321 Starting Files - Travel Website

Section 33: Farewell & Next Steps

Lecture 322 Congratulations!

Lecture 323 Bonus lecture

This is a first semester university level course.,This course is ideal for beginners wanting to learn how to build websites.,This course is perfect for experienced developers wanting a thorough introduction to current best-practices.,This course is perfect for experienced developers wanting to fill in gaps in their knowledge.