English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 318 lectures (37h 12m) | 25.54 GB
Brand New Course! Covers Flexbox, CSS Grid, Animations, Responsive Design and More! Tons of Exercises & Projects.
This course will teach you everything you need to know about HTML, CSS, and web design to build your own stunning websites from scratch. Instead of just watching me code, you’ll learn how to structure and build any website you can think of.
My background is in teaching in-person bootcamp programs around the world, where I work directly with students to help them learn web development and change careers. This course is based on all my experience in the classroom. Unlike most Udemy courses, this course includes dozens of exercises and challenges which ask you to recreate components, build layouts, and practice HTML and CSS. Practice is the most important tool I have to help you learn, and this course includes lots of it!
This course covers a huge amount of information, but it’s designed to be approachable for complete beginners and intermediate developers alike.
We start with the basics of HTML: structuring documents, creating text elements, tables, and forms. Then we learn about semantic markup and creating accessible webpages
Next, we cover the basics of CSS: working with selectors, color systems, and styling text elements.
From there, we cover critical CSS concepts including the box model, specificity, the cascade, and CSS units.
Next you’ll learn all about backgrounds, gradients, filters, positioning elements, working with transitions and transformations, and many other more intermediate CSS properties.
We then spend nearly 10 hours learning how to create complex CSS layouts using Flexbox and CSS Grid. We then build multiple projects with complicated layouts.
You’ll learn how to build responsive layouts that look good on all screen sizes, from large desktops to tablets and mobile devices.
Finally, we wrap up the course with our massive final project that we build together from scratch. This project combines everything we’ve learned in the course into one huge website built with thousands of lines of HTML & CSS. Check out the promo video to learn more about the final project.
What you’ll learn
- Master HTML & CSS and build massive real-world projects, with no prior knowledge needed!
- Build complex, responsive layouts using Flexbox and CSS Grid
- How to write well-structured and semantic HTML documents
- Master tricky CSS concepts including the cascade, inheritance, and specificityr
- Work with CSS animations, transitions, pseudo-elements, gradients, and more
- Get practice with dozens of exercises, quizzes, and challenges
- Design beautiful websites from the ground up that look good on all screen sizes
- Build reusable components, work with CSS variables, and write modern and clean CSS code
Table of Contents
Introduction
Welcome Curriculum Overview
Join Our Chat Community
Important Note On Leaving Feedback
A First Taste of HTML CSS
How The Web Works
The Roles of HTML CSS and JS
Installing The Tools We Need
Configuring VSCode
Important Note On The Course Exercises
HTML Basics
Introducing HTML
The Basic HTML Workflow
The Paragraph Element
paragraphs
Mozilla Developer Network
Chrome Developer Tools
Document Structure
documentStructure
Creating HTML Comments
Creating Headings
headings
HTML Basics Exercise
More HTML
Working With HTML Lists
lists
The Em Strong B and I Elements
em-strong-and-text-elements
Nesting Elements
Superscript and Subscript
Inline Vs Block Elements
Creating Links
links-basics
Other Types of Links
Creating Images
Pasta Recipe Exercise
Working With Forms
Creating Text Inputs and Buttons
inputs-buttons
The Form Element
Name and Placeholder Attributes
name-placeholder
Properly Labelling Form Controls
labels
Other Types of Inputs
other-input-types
Checkboxes Textareas and Range Inputs
checkboxes-ranges
Selects and Radio Button Groupings
radios-selects
Course Landing Page Form Exercise
FormsExerciseSolution
Other Elements
Spans
Divs
divs
Tables
tables
Semantic Markup
Semantic Elements
CSS Basics
Getting Our Starter Code
Working Within Inline Styles
Writing Internal Styles
External Styles The Best Way To Write Styles
Quick Note on Codepen
Anatomy of CSS
The Element Selector
CSS Basics Exercise
The World of CSS Colors
Working with backgroundcolor
Quick Tip MDN Comments
Named Colors
Understanding RGB Colors
Hexadecimal Colors
RGBA Colors and Opacity
Colors Quiz
CSS Inheritance
CSS Colors Exercise
Styling Text
Changing Fonts with FontFamily
Fontsize fontweight and fontstyle
Changing Text Alignment
Lineheight letterspacing and wordspacing
Adding Custom Fonts With Google Fonts
Styling Text Exercise
Creating Text Shadows
Our First Mini Project Cantilever
More Text Styling
Texttransform textdecoration
The ID Selector
The Class Selector
Styling Lists
Styling Links and hover PseudoClass
The Font Shorthand Property
Leafy Seadragon Exercise
Selectors Pt 1
The Universal Selector
The Attribute Selector
Grouping Selectors
Descendant Child Combinators
Compound Selectors
CSS Selectors Exercise
The Box Model
Introducing The Box Model
Working With Borders
Width Height and Percentages
Adding Padding to Elements
Working With Margins
The Alternate Box Model
The Display Property
Display None
Negative Margin Margin Auto
Margin Collapsing WTF
A Common Layout Pattern
Min and Max Width
Rounding Elements With Border Radius
Box Shadows
Working With Overflow
Ski Resort Exercise
Artist Portfolio Project
Introducing Our Project
Basic Project Setup
Writing The Navbar Markup
Styling The Navbar
Finishing Up The Navbar
Creating The Photo Grid
Continuing The Photo Grid
Finishing The Photo Grid
Adding The Footer Content
Specificity and The Cascade
Section Introduction
The Sibling Combinator
Working With PseudoClasses
Styling PseudoElements
CSS Selectors Pt 2 Exercise
The Basics of Specificity
Inline Styles and Specificity
Calculating Specificity Values
important and The Cascade
Wrapping Up The Cascade
Blog Post Project
Introducing Our Blog Post Project
Centering The Main Content
Working on Typography
Creating the Headline Section
Implementing Our Headings
Adding In Code Styles
Creating the Footer
Writing The Full Size Hero
CSS Units
Absolute Units Pixels Centimeters and More
Working With Percentages
The Joy of Rem Units
Understanding The Em Unit
Vw and Vh Units
Which Units Should You Use
Working With Floats
Hazel CV Project
Introducing The Project
Setting Up The Navbar
Finishing The Navbar
Starting The Hero Content
Making The Skills Section
Creating The Blog Section
Adding The Events Section
Making A Simple Footer
Backgrounds Gradients Filters
Working With Background Images
Controlling BackgroundRepeat
Sizing Our Background
Positioning Background
Working With BackgroundClip
Background Exercise
An Important Note About Gradients
Creating Linear Gradients
Radial Conic and Repeating Gradients
The Background Shorthand Property
Fancy CSS Filters
Positioning
Introducing Positioning
Relative Positioning
Controlling Layers With ZIndex
Absolute Positioning Pt 1
Absolute Positioning Pt 2
Creating A Button Badge
Fixed Positioning
Positioning Exercise 1
Positioning Exercise 2
Positioning Exercise 3
Transitions and Transforms
Introducing Transitions
The Basic Transition Syntax
Working With Multiple Transitions
Transition Timing Functions
Transition Delays
Understanding Animation Performance
Introducing Transforms
Other Types of Transformations
Transform Origin
Building Fancy Button Hover Effects
Flexbox Part 1
Introducing Flexbox
Display Flex and Flex Axis
Working With FlexDirection
Flexbox Exercise 1
FlexWrap
JustifyContent
Flexbox Exercise 2
AlignItems
Flexbox Exercise 3
AlignContent
Flexbox Exercise 4
AlignSelf
Flexbox Exercise 5
Flexbox Pt 2 Flex Items Patterns
The FlexGrow Property
Controlling Shrinkage With FlexShrink
FlexBasis Important Confusing
The Flex Shorthand Property
The Order FlexItem Property
Flexbox Patterns Building A Simple Navbar
Flexbox Patterns Nested Flex Containers
Flexbox Patterns Centering Content
Flexbox Patterns Building A Card Layout
Cost Estimator Project
Introducing The Cost Estimator Project
Building Our Container
Creating The Top Tabs
Positioning The Tabs Underline
Creating The Active Tab Styles
Adding The Toggle Section
Building The Sessions Card
Creating The Slider
Creating The Two Price Cards
Finishing Up The Price Cards
Making Responsive Websites With Media Queries
Introducing Responsive Design
Our First Media Query
More On Media Queries
Working With Media Features
Media Query Logical Operators
Media Queries Exercise
Media Queries Level 4 5
Common Responsive Breakpoints
Creating a Simple Responsive Navbar
Responsive Flexbox Grid Demo
Mobile First vs Desktop First Design
Building a Simple MobileFirst Layout
Making Our Projects Responsive
Making Cantilever Responsive
Making Potter Portfolio Responsive
Making Hazel CV Project Responsive
Making Cost Estimator Responsive
CSS Grid Part 1
Introducing CSS Grid
Enabling CSS Grid
GridTemplateColumns
GridTemplateRows
Grid Exercise 1
GridTemplate Shorthand Property
The Minmax Function
Working With Repeat
FitContent
Controlling Grid Gaps
Grid Exercise 2
CSS Grid Part 2
Working with Grid Lines
Positioning Grid Items
The Span Keyword
The GridArea Shorthand Property
Naming Our Grid Lines
GridTemplateAreas
Using GridTemplateAreas With Rows Cols
GridAutoFlow
Grid Auto Columns Rows
Autofit and Autofill
Grid Project
Introducing Our Grid Project
Creating Image Overlay Pt 1
Creating Image Overlay Pt 2
Adding In Our Images
Positioning Our Images On The Grid
Making Our Grid Layout Responsive
Fixing Our Image Overlays
Building The Navbar
Finalizing The Navbar and Footer
Creating The Hamburger Button
Building Animations
Introducing Keyframes Animations
Defining keyframes
More Practice With Keyframes
Animation Delay Repeat and More
Reusing Animations
Animation Shorthand Property
Building A Simple Spinner Animation
Creating a More Complex Loader
The Animation Fill Mode Property
Building A Mobile Drawer Navbar
Introducing Our Animated Drawer
Writing The Individual Bar Animations
A Lightspeed Crash Course In JavaScript
Making Our Hamburger Button Work
Creating The Mobile Drawer Menu
Animating The Drawer SlideOut
before and after PseudoElements
Introducing Before and After
Creating Decorative Quotes With PseudoElements
Gradient Borders With PseudoElements
Fancy Animated Buttons With PseudoElements
Super Fancy Animated Spinner With PseudoElements
Custom Form Controls With PseudoElements
Modern CSS
Introducing CSS Variables
Writing CSS Variables
The root pseudoclass
Variables and Media Queries
Using Variables For Sizes
Introducing Calc
The Rules of Calc
Another Example of Using Calc
Swipe Mega Project
Introducing Swipe
Setting Up Our Font Variables
Defining Basic Heading Styles
Writing General Link Styles
Defining Body Styles
Creating our Text Classes Subtitle Secondary Text
Defining Our Button Styles Primary Secondary Buttons
Creating Our Buttons With Animated Icons
Swipe Project Pt 2
Building The Navbar
Defining Our TwoColumn Layout Classes
Writing The Hero Markup
Styling The Page Hero
Building The Partners Grid Section
Adding The Unified Platform Section
Creating Our Graphic Photos Grid
Writing Our Reusable Card Class
Adding The Integrations Section
Defining The Why Swipe Section
Swipe Pt 3
Creating The Global Section
Positioning The Globe Image
Adding The Virtual Events Section Markup
Styling The Virtual Events Section
Building The Getting Started Section
Writing The Page Footer Markup
Styling The Page Footer
Adding The First Angled Stripe
Finishing The Angled Stripes
Creating The Animated Gradient Hero Background
Fixing An Issue With Our Angled Stripes
Swipe Pt 4 Making It Responsive
Starting To Make Swipe Responsive
Making The Partners Grid Responsive
Making The Unified Platform Section Responsive
Making The Integrations Section Responsive
Making The Why Swipe Section Responsive
Making The Global Section Responsive
Making The Virtual Events Section Responsive
Making The Bottom of The Page Responsive
Making The Page Hero Responsive
Adding Our Responsive Navbar
Responsive Tweaks To Background Stripes
Cleaning Up Our CSS
Fixing A Minor Issue With Border Radius
Fixing Another Minor Issue With Partners Grid
Resolve the captcha to access the links!