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

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

Discover an interactive learning experience that combines study sections and interesting real-life projects with this course. With this learning guide, you’ll no longer need to rely on frameworks such as Bootstrap for your user interface and instead be able to create your own layouts and utility classes to build custom responsive websites and app UIs.

This course is for beginners as well as experienced developers who want to learn how to build responsive websites and user interfaces with modern HTML5 and CSS3+ technologies such as Flexbox and CSS Grid, as well as the Sass pre-compiler.The first few sections in particular are tailored for beginners. So even if you haven’t built anything before, this course covers the basics to help you develop a strong foundation.

However, if you already have experience with basic HTML and CSS, you can simply move on to section 3 or 4. Get started on this course and develop the skills you need to build your own web Sass solutions.

The course covers the following topics:

• How websites work

• Visual Studio code setup, shortcuts, live server and Emmet

• HTML5 semantic layout

• CSS fundamentals

• Responsive design with media queries

• CSS units - rem, em, vh, vw, etc.

• Flexbox

• CSS Grid

• Animation with keyframes and transitions

• CSS variables

• Sass pre-compiler with portfolio project

• Full projects and mini projects

• Website deployment to shared hosting and Netlify with Git

What You Will Learn

  • Work through Flexbox and CSS Grid projects
  • Explore CSS variables, transitions, dropdowns, overlays, and more
  • Get up to speed with website hosting and deployment with FTP and Git

Audience

This course is for anyone who wants to learn web development. You will also find this course useful if you are looking to pursue a career in coding or simply want to learn Sass.

About The Author

Brad Traversy: Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad’s courses.

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