Build modern responsive websites and UIs with Sass, and get started with exploring Flex and CSS Grid
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 All code files are placed at https://github.com/PacktPublishing/Modern-HTML-and-CSS-from-the-Beginning-Including-Sass
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.
Approach
This course is designed in such a way that each section will cover new scenarios and a step-by-step approach will help you learn and understand the concepts better.
Key Features
Build multiple high-quality website and UI projects * Discover HTML5 semantic layout and CSS fundamentals
Github Repo
https://github.com/packtpublishing/modern-html-and-css-from-the-beginning-including-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.
Course Outline
1. Introduction

1. Welcome To The Course
Introduction: Welcome To The Course
2. How The Web Works (Summarized)
Introduction: How The Web Works (Summarized)
3. The Roles Of HTML & CSS In Web Development
Introduction: The Roles Of HTML & CSS In Web Development
4. Getting Setup With Visual Studio Code
Introduction: Getting Setup With Visual Studio Code
2. HTML Basics

1. Section Intro
HTML Basics: Section Intro
2. Create & Open HTML Pages
HTML Basics: Create & Open HTML Pages
3. Doctype & Basic Layout
HTML Basics: Doctype & Basic Layout
4. Setting Up Live Server (VSCode Extension)
HTML Basics: Setting Up Live Server (VSCode Extension)
5. Meta Tags & Search Engines
HTML Basics: Meta Tags & Search Engines
6. Headings, Paragraphs & Typography
HTML Basics: Headings, Paragraphs & Typography
7. Links, Images & Attributes
HTML Basics: Links, Images & Attributes
8. Lists & Tables
HTML Basics: Lists & Tables
9. Forms & Input
HTML Basics: Forms & Input
10. Block & Inline Level Elements
HTML Basics: Block & Inline Level Elements
11. Divs & Spans, Classes & Ids
HTML Basics: Divs & Spans, Classes & Ids
12. HTML Entities
HTML Basics: HTML Entities
13. HTML5 Semantic Tags & Challenge
HTML Basics: HTML5 Semantic Tags & Challenge
14. HTML5 Semantics Solution & Wrap Up
HTML Basics: HTML5 Semantics Solution & Wrap Up
3. CSS Basics

1. Section Intro
CSS Basics: Section Intro
2. Implementing CSS
CSS Basics: Implementing CSS
3. Basic CSS Selectors
CSS Basics: Basic CSS Selectors
4. Dev Tools Introduction
CSS Basics: Dev Tools Introduction
5. Fonts In CSS
CSS Basics: Fonts In CSS
6. Color Types
CSS Basics: Color Types
7. Backgrounds & Borders
CSS Basics: Backgrounds & Borders
8. Box Model, Margin & Padding
CSS Basics: Box Model, Margin & Padding
9. Float & Alignment
CSS Basics: Float & Alignment
10. Link State & Button Styling
CSS Basics: Link State & Button Styling
11. Navigation Menu Styling
CSS Basics: Navigation Menu Styling
12. Inline, Block & Inline-Block Display
CSS Basics: Inline, Block & Inline-Block Display
13. Positioning
CSS Basics: Positioning
14. Form Style Challenge
CSS Basics: Form Style Challenge
15. Form Style Solution
CSS Basics: Form Style Solution
16. Aside: Visibility, Order & Negative Margin
CSS Basics: Aside: Visibility, Order & Negative Margin
4. Hotel Website

1. Project Intro
Hotel Website: CSS basics - link tag, selectors and comments
2. Aside: Design & Ideas
Hotel Website: Aside: Design & Ideas
3. File Structure & Navbar
Hotel Website: File Structure & Navbar
4. Showcase & Home Info
Hotel Website: Showcase & Home Info
5. Features & Footer
Hotel Website: Features & Footer
6. About Page
Hotel Website: About Page
7. Contact Page
Hotel Website: Contact Page
5. Intro To Responsive Layouts

1. What Is Responsive Design?
[Intro To Responsive Layouts: What Is Responsive Design?
2. Getting Started With Media Queries
[Intro To Responsive Layouts: Getting Started With Media Queries
3. Em & Rem Units
[Intro To Responsive Layouts: Em & Rem Units
4. Vh & Vw Units
[Intro To Responsive Layouts: Vh & Vw Units
5. Making The Hotel Website Fully Responsive
[Intro To Responsive Layouts: Making The Hotel Website Fully Responsive
6. Intro To Flexbox

1. What Is Flexbox?
Intro To Flexbox: What Is Flexbox?
2. Flex Basics
Intro To Flexbox: Flex Basics
3. Flex Alignment & Order
Intro To Flexbox: Flex Alignment & Order
7. EdgeLedger Website (Flexbox)

1. Project Intro
EdgeLedger Website (Flexbox): Project Intro
2. File Structure & Flex Navbar
EdgeLedger Website (Flexbox): File Structure & Flex Navbar
3. Showcase Header
EdgeLedger Website (Flexbox): Showcase Header
4. What We Do Section
EdgeLedger Website (Flexbox): What We Do Section
5. Who We Are & Clients Sections
EdgeLedger Website (Flexbox): Who We Are & Clients Sections
6. Contact Form, Map & Footer
EdgeLedger Website (Flexbox): Contact Form, Map & Footer
7. Smooth Scrolling With JS
EdgeLedger Website (Flexbox): Smooth Scrolling With JS
8. Widescreen & Tablet View
EdgeLedger Website (Flexbox): Widescreen & Tablet View
9. Smartphone View
EdgeLedger Website (Flexbox): Smartphone View
8. Website Deployment - Shared Host

1. Types Of Web Hosting
Website Deployment - Shared Host: Types Of Web Hosting
2. Setting Up Email
Website Deployment - Shared Host: Setting Up Email
3. Showcase Header
Website Deployment - Shared Host: Showcase Header
4. Upload Your Site via FTP
Website Deployment - Shared Host: Upload Your Site via FTP
5. BONUS: Contact Form Submission (PHP Script)
Website Deployment - Shared Host: BONUS: Contact Form Submission (PHP Script)
9. More CSS Concepts - Advanced Selectors, Animation & More

1. Targeted Selectors
More CSS Concepts - Advanced Selectors, Animation & More: Targeted Selectors
2. nth-child Pseudo Selectors
More CSS Concepts - Advanced Selectors, Animation & More: nth-child Pseudo Selectors
3. before & after Pseudo Selectors
More CSS Concepts - Advanced Selectors, Animation & More: before & after Pseudo Selectors
4. Box Shadows
More CSS Concepts - Advanced Selectors, Animation & More: Box Shadows
5. Text Shadows
More CSS Concepts - Advanced Selectors, Animation & More: Text Shadows
6. CSS Variables (Custom Properties)
More CSS Concepts - Advanced Selectors, Animation & More: CSS Variables (Custom Properties)
7. Keyframe Animation 1
More CSS Concepts - Advanced Selectors, Animation & More: Keyframe Animation 1
8. Keyframe Animation 2
More CSS Concepts - Advanced Selectors, Animation & More: Keyframe Animation 2
9. CSS Transitions
More CSS Concepts - Advanced Selectors, Animation & More: CSS Transitions
10. BONUS: Transform Property
More CSS Concepts - Advanced Selectors, Animation & More: BONUS: Transform Property
10. Mini Projects With Keyframes, Transitions, etc

1. Presentation Website [1] - Intro & HTML
Mini Projects With Keyframes, Transitions, etc: Presentation Website [1] - Intro & HTML
2. Presentation Website [2] - Page CSS
Mini Projects With Keyframes, Transitions, etc: Presentation Website [2] - Page CSS
3. Presentation Website [3] - Text Animation
Mini Projects With Keyframes, Transitions, etc: Presentation Website [3] - Text Animation
4. Hamburger Menu Overlay [1] - HTML & Base CSS
Mini Projects With Keyframes, Transitions, etc: Hamburger Menu Overlay [1] - HTML & Base CSS
5. Hamburger Menu Overlay [2] - Creating The Hamburger
Mini Projects With Keyframes, Transitions, etc: Hamburger Menu Overlay [2] - Creating The Hamburger
6. Hamburger Menu Overlay [3] - Animating The Hamburger Lines
Mini Projects With Keyframes, Transitions, etc: Hamburger Menu Overlay [3] - Animating The Hamburger Lines
7. Hamburger Menu Overlay [4] - Menu Overlay
Mini Projects With Keyframes, Transitions, etc: Hamburger Menu Overlay [4] - Menu Overlay
8. Knowledge Timeline [1] - HTML & Base CSS
Mini Projects With Keyframes, Transitions, etc: Knowledge Timeline [1] - HTML & Base CSS
9. Knowledge Timeline [2] - Boxes & Arrows
Mini Projects With Keyframes, Transitions, etc: Knowledge Timeline [2] - Boxes & Arrows
10. Knowledge Timeline [3] - Responsive Media Queries
Mini Projects With Keyframes, Transitions, etc: Knowledge Timeline [3] - Responsive Media Queries
11. Knowledge Timeline [4] - Scroll In Animation
Mini Projects With Keyframes, Transitions, etc: Knowledge Timeline [4] - Scroll In Animation
12. Quick Dropdown Menu Project
Mini Projects With Keyframes, Transitions, etc: Quick Dropdown Menu Project
11. CSS Grid

1. What Is CSS Grid?
CSS Grid: What Is CSS Grid?
2. Grid Basics & Columns
CSS Grid: Grid Basics & Columns
3. Grid Rows
CSS Grid: Grid Rows
4. Spanning Columns & Rows
CSS Grid: Spanning Columns & Rows
5. Auto-Fit & Minmax
CSS Grid: Auto-Fit & Minmax
6. Grid Template Areas
CSS Grid: Grid Template Areas
7. Media Queries & The Grid
CSS Grid: Media Queries & The Grid
12. NewsGrid Website

1. Project Intro
NewsGrid Website: Project Intro
2. Setup & Favicon
NewsGrid Website: Setup & Favicon
3. Core Styles, Variables & Navbar
NewsGrid Website: Core Styles, Variables & Navbar
4. Showcase With Overlay & Button Styles
NewsGrid Website: Showcase With Overlay & Button Styles
5. Home Articles Grid
NewsGrid Website: Home Articles Grid
6. Footer With Grid
NewsGrid Website: Footer With Grid
7. About Page & Page Container
NewsGrid Website: About Page & Page Container
8. Article Page
NewsGrid Website: Article Page
9. Responsive Media Queries
NewsGrid Website: Responsive Media Queries
10. Bonus: Intro To Photoshop (NewsGrid Logo)
NewsGrid Website: Bonus: Intro To Photoshop (NewsGrid Logo)
13. Website Deployment With Netlify (FREE)

1. How It Works
Website Deployment With Netlify (FREE): How It Works
2. Git & Pushing To Github
Website Deployment With Netlify (FREE): Git & Pushing To Github
3. Netlify Deploy & Form Submission
Website Deployment With Netlify (FREE): Netlify Deploy & Form Submission
4. Custom Domain Name
Website Deployment With Netlify (FREE): Custom Domain Name
14. Learning Sass

1. What Is Sass?
Learning Sass: What Is Sass?
2. Environment Setup With Node-Sass
Learning Sass: Environment Setup With Node-Sass
3. Koala Sass Compiler - GUI Alternative
Learning Sass: Koala Sass Compiler - GUI Alternative
4. Variables & Partials
Learning Sass: Variables & Partials
5. Nesting & Structuring
Learning Sass: Nesting & Structuring
6. Inheritance & Contrast
Learning Sass: Inheritance & Contrast
7. Functions, Mixins & More
Learning Sass: Functions, Mixins & More
15. Portfolio Website With Sass

1. Project Intro
Portfolio Website With Sass: Project Intro
2. Project Setup
Portfolio Website With Sass: Project Setup
3. Header & Main Nav
Portfolio Website With Sass: Header & Main Nav
4. Specialize & Stats Section
Portfolio Website With Sass: Specialize & Stats Section
5. Process Section & Footer
Portfolio Website With Sass: Process Section & Footer
6. About Page Info Section
Portfolio Website With Sass: About Page Info Section
7. About Page Logos & Testimonials
Portfolio Website With Sass: About Page Logos & Testimonials
8. Work Gallery With Transitions
Portfolio Website With Sass: Work Gallery With Transitions
9. Contact Page
Portfolio Website With Sass: Contact Page
10. Responsive Media Queries
Portfolio Website With Sass: Responsive Media Queries
11. Deploy & Contact Form With Spam Filter
Portfolio Website With Sass: Deploy & Contact Form With Spam Filter
16. Where To Go From Here

1. Where To Go From Here
Where To Go From Here: Where To Go From Here

Packt

Web Development

HTML

Web Design

Build modern responsive websites and UIs with Sass, and get started with exploring Flex and CSS Grid

Emmet courses in Crawley

Online Options

Modern HTML and CSS From The Beginning (Including Sass)

By Packt

Search By Location