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