Modern HTML and CSS from the Beginning (Including Sass)

Modern HTML and CSS from the Beginning (Including Sass)

by Brad Traversy
Released April 2019
Publisher(s): Packt Publishing
ISBN: 9781838822828

Explore a preview version of Modern HTML and CSS from the Beginning (Including Sass) right now.

O’Reilly members get unlimited access to live online training experiences, plus books, videos, and digital content from 200+ publishers.

Start your free trial

Video description

Build modern responsive websites and UIs with Sass! Learn Flex and CSS Grid

About This Video

  • Build Multiple High-Quality Website and UI Projects
  • HTML5 Semantic Layout & CSS Fundamentals

In Detail

This course is for both beginners and seasoned developers that want to learn to build responsive websites and user interfaces with modern HTML5 and CSS3+ technologies like Flexbox and CSS Grid as well as the Sass pre-compiler. This course includes hours of both learning & studying sections along with real-life projects. Stop having to rely on frameworks like Bootstrap for your user interface and learn to create your own layouts and utility classes to build custom responsive websites and app UIs.

The first few sections are tailored for beginners so even if you have never built anything before, you will learn all of the basics. If you already have experience with basic HTML & CSS, just move to section 3 or 4 and get started.

Topic Covered:

  • How Websites Work
  • Visual Studio Code Setup, Shortcuts, Live Server & Emmet
  • HTML5 Semantic Layout
  • CSS Fundamentals
  • Responsive Design With Media Queries
  • CSS Units - rem, em, vh, vw, etc
  • Flexbox
  • CSS Grid
  • Animation with Keyframes & Transitions
  • CSS Variables
  • Sass Pre-compiler with portfolio project
  • Full Projects & Mini Projects
  • Website Deployment to Shared Hosting & Netlify With Git

Learn to build your own web SASS solutions.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Introduction
    1. Welcome To The Course
    2. How The Web Works (Summarized)
    3. The Roles Of HTML CSS In Web Development
    4. Getting Setup With Visual Studio Code
  2. Chapter 2 : HTML Basics
    1. Section Intro
    2. Create Open HTML Pages
    3. Doctype Basic Layout
    4. Setting Up Live Server (VSCode Extension)
    5. Meta Tags Search Engines
    6. Headings, Paragraphs Typography
    7. Links, Images Attributes
    8. Lists Tables
    9. Forms Input
    10. Block Inline Level Elements
    11. Divs Spans, Classes Ids
    12. HTML Entities
    13. HTML5 Semantic Tags Challenge
    14. HTML5 Semantics Solution Wrap Up
  3. Chapter 3 : CSS Basics
    1. Section Intro
    2. Implementing CSS
    3. Basic CSS Selectors
    4. Dev Tools Introduction
    5. Fonts In CSS
    6. Color Types
    7. Backgrounds Borders
    8. Box Model, Margin Padding
    9. Float Alignment
    10. Link State Button Styling
    11. Navigation Menu Styling
    12. Inline, Block Inline-Block Display
    13. Positioning
    14. Form Style Challenge
    15. Form Style Solution
    16. Aside: Visibility, Order Negative Margin
  4. Chapter 4 : Hotel Website
    1. Project Intro
    2. Aside: Design Ideas
    3. File Structure Navbar
    4. Showcase Home Info
    5. Features Footer
    6. About Page
    7. Contact Page
  5. Chapter 5 : Intro To Responsive Layouts
    1. What Is Responsive Design?
    2. Getting Started With Media Queries
    3. Em Rem Units
    4. Vh Vw Units
    5. Making The Hotel Website Fully Responsive
  6. Chapter 6 : Intro To Flexbox
    1. What Is Flexbox?
    2. Flex Basics
    3. Flex Alignment Order
  7. Chapter 7 : EdgeLedger Website (Flexbox)
    1. Project Intro
    2. File Structure Flex Navbar
    3. Showcase Header
    4. What We Do Section
    5. Who We Are Clients Sections
    6. Contact Form, Map Footer
    7. Smooth Scrolling With JS
    8. Widescreen Tablet View
    9. Smartphone View
  8. Chapter 8 : Website Deployment - Shared Host
    1. Types Of Web Hosting
    2. Setting Up Email
    3. Showcase Header
    4. Upload Your Site via FTP
    5. BONUS: Contact Form Submission (PHP Script)
  9. Chapter 9 : More CSS Concepts - Advanced Selectors, Animation More
    1. Targeted Selectors
    2. nth-child Pseudo Selectors
    3. before after Pseudo Selectors
    4. Box Shadows
    5. Text Shadows
    6. CSS Variables (Custom Properties)
    7. Keyframe Animation 1
    8. Keyframe Animation 2
    9. CSS Transitions
    10. BONUS: Transform Property
  10. Chapter 10 : Mini Projects With Keyframes, Transitions, etc
    1. Presentation Website [1] - Intro HTML
    2. Presentation Website [2] - Page CSS
    3. Presentation Website [3] - Text Animation
    4. Hamburger Menu Overlay [1] - HTML Base CSS
    5. Hamburger Menu Overlay [2] - Creating The Hamburger
    6. Hamburger Menu Overlay [3] - Animating The Hamburger Lines
    7. Hamburger Menu Overlay [4] - Menu Overlay
    8. Knowledge Timeline [1] - HTML Base CSS
    9. Knowledge Timeline [2] - Boxes Arrows
    10. Knowledge Timeline [3] - Responsive Media Queries
    11. Knowledge Timeline [4] - Scroll In Animation
    12. Quick Dropdown Menu Project
  11. Chapter 11 : CSS Grid
    1. What Is CSS Grid?
    2. Grid Basics Columns
    3. Grid Rows
    4. Spanning Columns Rows
    5. Auto-Fit Minmax
    6. Grid Template Areas
    7. Media Queries The Grid
  12. Chapter 12 : NewsGrid Website
    1. Project Intro
    2. Setup Favicon
    3. Core Styles, Variables Navbar
    4. Showcase With Overlay Button Styles
    5. Home Articles Grid
    6. Footer With Grid
    7. About Page Page Container
    8. Article Page
    9. Responsive Media Queries
    10. Bonus: Intro To Photoshop (NewsGrid Logo)
  13. Chapter 13 : Website Deployment With Netlify (FREE)
    1. How It Works
    2. Git Pushing To Github
    3. Netlify Deploy Form Submission
    4. Custom Domain Name
  14. Chapter 14 : Learning Sass
    1. What Is Sass?
    2. Environment Setup With Node-Sass
    3. Koala Sass Compiler - GUI Alternative
    4. Variables Partials
    5. Nesting Structuring
    6. Inheritance Contrast
    7. Functions, Mixins More
  15. Chapter 15 : Portfolio Website With Sass
    1. Project Intro
    2. Project Setup
    3. Header Main Nav
    4. Specialize Stats Section
    5. Process Section Footer
    6. About Page Info Section
    7. About Page Logos Testimonials
    8. Work Gallery With Transitions
    9. Contact Page
    10. Responsive Media Queries
    11. Deploy Contact Form With Spam Filter
  16. Chapter 16 : Where To Go From Here
    1. Where To Go From Here

Product information

  • Title: Modern HTML and CSS from the Beginning (Including Sass)
  • Author(s): Brad Traversy
  • Release date: April 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781838822828