English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 21 Hours | 5.15 GB
Build modern responsive websites and UIs with Sass! Learn Flex and CSS Grid
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.
This course is designed in such a way that each section will cover new scenarios and a step by step approach to help you learn and understand the concept.
What You Will Learn
- Flexbox & CSS Grid Projects
- CSS Variables, Transitions, Dropdowns, Overlays & More
- Website Hosting & Deployment With FTP & Git
- All Skill Levels
Table of Contents
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
HTML Basics
5 Section Intro
6 Create & Open HTML Pages
7 Doctype & Basic Layout
8 Setting Up Live Server (VSCode Extension)
9 Meta Tags & Search Engines
10 Headings, Paragraphs & Typography
11 Links, Images & Attributes
12 Lists & Tables
13 Forms & Input
14 Block & Inline Level Elements
15 Divs & Spans, Classes & Ids
16 HTML Entities
17 HTML5 Semantic Tags & Challenge
18 HTML5 Semantics Solution & Wrap Up
CSS Basics
19 Section Intro
20 Implementing CSS
21 Basic CSS Selectors
22 Dev Tools Introduction
23 Fonts In CSS
24 Color Types
25 Backgrounds & Borders
26 Box Model, Margin & Padding
27 Float & Alignment
28 Link State & Button Styling
29 Navigation Menu Styling
30 Inline, Block & Inline-Block Display
31 Positioning
32 Form Style Challenge
33 Form Style Solution
34 Aside – Visibility, Order & Negative Margin
Hotel Website
35 Project Intro
36 Aside – Design & Ideas
37 File Structure & Navbar
38 Showcase & Home Info
39 Features & Footer
40 About Page
41 Contact Page
Intro To Responsive Layouts
42 What Is Responsive Design
43 Getting Started With Media Queries
44 Em & Rem Units
45 Vh & Vw Units
46 Making The Hotel Website Fully Responsive
Intro To Flexbox
47 What Is Flexbox
48 Flex Basics
49 Flex Alignment & Order
EdgeLedger Website (Flexbox)
50 Project Intro
51 File Structure & Flex Navbar
52 Showcase Header
53 What We Do Section
54 Who We Are & Clients Sections
55 Contact Form, Map & Footer
56 Smooth Scrolling With JS
57 Widescreen & Tablet View
58 Smartphone View
59 COMMON ISSUES & FIXES
Website Deployment – Shared Host
60 Types Of Web Hosting
61 Setting Up Email
62 Shared Hosting Setup
63 Upload Your Site via FTP
64 BONUS – Contact Form Submission (PHP Script)
65 Hosting Company Links
More CSS Concepts – Advanced Selectors, Animation & More
66 Targeted Selectors
67 nth-child Pseudo Selectors
68 before & after Pseudo Selectors
69 Box Shadows
70 Text Shadows
71 CSS Variables (Custom Properties)
72 Keyframe Animation 1
73 Keyframe Animation 2
74 CSS Transitions
75 BONUS – Transform Property
Mini Projects With Keyframes, Transitions, etc
76 Presentation Website [1] – Intro & HTML
77 Presentation Website [2] – Page CSS
78 Presentation Website [3] – Text Animation
79 Hamburger Menu Overlay [1] – HTML & Base CSS
80 Hamburger Menu Overlay [2] – Creating The Hamburger
81 Hamburger Menu Overlay [3] – Animating The Hamburger Lines
82 Hamburger Menu Overlay [4] – Menu Overlay
83 Knowledge Timeline [1] – HTML & Base CSS
84 Knowledge Timeline [2] – Boxes & Arrows
85 Knowledge Timeline [3] – Responsive Media Queries
86 Knowledge Timeline [4] – Scroll In Animation
87 Quick Dropdown Menu Project
CSS Grid
88 What Is CSS Grid
89 Grid Basics & Columns
90 Grid Rows
91 Spanning Columns & Rows
92 Auto-Fit & Minmax
93 Grid Template Areas
94 Media Queries & The Grid
NewsGrid Website
95 Project Intro
96 Setup & Favicon
97 Core Styles, Variables & Navbar
98 Showcase With Overlay & Button Styles
99 Home Articles Grid
100 Footer With Grid
101 About Page & Page Container
102 Article Page
103 Responsive Media Queries
104 Bonus – Intro To Photoshop (NewsGrid Logo)
Website Deployment With Netlify (FREE)
105 How It Works
106 Git & Pushing To Github
107 Netlify Deploy & Form Submission
108 Custom Domain Name
109 Git Commands & Links
Learning Sass
110 What Is Sass
111 Environment Setup With Node-Sass
112 Koala Sass Compiler – GUI Alternative
113 Variables & Partials
114 Nesting & Structuring
115 Inheritance & Contrast
116 Functions, Mixins & More
Portfolio Website With Sass
117 Responsive Media Queries
118 Project Intro
119 Project Setup
120 Header & Main Nav
121 Specialize & Stats Section
122 Process Section & Footer
123 About Page Info Section
124 About Page Logos & Testimonials
125 Work Gallery With Transitions
126 Contact Page
127 Deploy & Contact Form With Spam Filter
Where To Go From Here
128 Where To Go From Here
Resolve the captcha to access the links!