Description

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

Course Images

Modern HTML and CSS From The Beginning (Including Sass)

By Packt

Booking options

Highlights

Description

Course Content

About The Provider

Tags

Reviews