Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Learn How To Build Amazing Websites w/ HTML, CSS and Sass
Training Overview
Description of Training
Video Overview (2:30)
Introduction
HTML and CSS Course Overview (8:30)
Who is this for (4:09)
Web Developer Marketplace (2:51)
Web Developer Job Opportunities (3:55)
4 Skills of Successful Web Developer (4:57)
Different Types of Web Developers (5:46)
The Course Projects (3:05)
Introduction to HTML
HTML Quick Section Overview (0:35)
What is HTML (2:39)
Environment Setup - installing Sublime Text (2:00)
Structure of an HTML Document (5:13)
HTML Heading and Paragraph Elements (12:44)
HTML Imaged and Attributes (5:39)
HTML Links (4:07)
HTML Quiz
Styling with CSS
CSS Quick Section Overview (1:09)
Intro to CSS (4:26)
Inserting CSS into Code (14:30)
Colors in CSS (10:50)
CSS Selectors (14:31)
CSS Properties (10:07)
CSS Box Model (8:10)
Making Simple Box Model Layouts - using div elements (22:04)
Incorporating Box Model into a Blog page (26:32)
Relative vs. Absolute Positioning (8:06)
Debugging your Code using Browser Tools (4:48)
CSS Quiz
Basics of Web Design
Working with Fonts and Icons (8:08)
Working with Colors (9:21)
Working with Images (3:56)
Whitespaces, layout and user experience (2:12)
Secret to Making Great Websites (2:40)
About Us Page (18:56)
Quiz on Basics of Web Design
Building a Website from Scratch
Rules to Design a Good Website (2:24)
Project Requirements - Making Digital Services Agency Website (6:08)
Overview of the Digisolve Project (4:26)
Digisolve Project - Getting Started (8:18)
Setting Up Fluid Grid (11:43)
Building the Webpage Header (19:47)
Building the More Info Button (9:28)
Building the Logo + Menu (12:03)
Building the About Us Page (10:52)
Building the Portfolio Section (26:12)
Building the Services Page (25:11)
Building the Featured Clients Page (7:26)
Building the Testimonials Section (21:36)
Building the Popular Packages Page (20:10)
Popular Packages Continued (8:44)
Building the Contact Form (28:25)
Webpage Footer (23:18)
Making The Page Responsive
Using Media Queries - Part 1 (25:17)
Using Media Queries - Part 2 (32:37)
Browser Compatibility (12:10)
Adding Effects and Animations with JQuery
Intro to JQuery (5:27)
Creating Sticky Navigation (13:56)
Scrolling to target elements (9:17)
Adding Animations without coding! (17:19)
Adding Animations Continued (12:54)
Optimizing and Launching the Website
Optimizing Website Performance (6:52)
Image Optimization (10:26)
Minifying the Code (5:53)
Launching the WebPage (11:34)
SEO Mini Course (109:37)
CSS Under the Hood
How CSS works (Part 1) (3:09)
How CSS works (Part 2) (9:48)
How the Cascade Works (12:33)
How CSS Calculates pixel values and renders a website (17:50)
Intro to SASS and NPM
What is SASS (3:44)
SASS Basic Principles - variables, nesting (31:05)
SASS Basic Principles - mixins, extends, functions (17:36)
Command line basics (5:59)
What is NPM (4:21)
Installing and Setting up SASS and NPM (11:54)
Good CSS Practices
How to Plan out your CSS (4:55)
The BEM Model (6:25)
An Ideal Folder and File Structure for a CSS Project (10:12)
Different Types of Layouts (3:28)
Project Country Club Site
Lakeview Project Overview (6:42)
Setting Up The Project (12:50)
Creating Background Image for Header (27:20)
Automatic page reload with NPM and live-server (7:19)
Typography for Header (20:33)
Creating Buttons for Header (13:59)
Creating a Fluid Grid from Scratch (7:22)
Building the About Section Part 1 (20:05)
Building the About Section Part 2 (12:43)
Building the About Section Part 3 (14:42)
Building The Club Amenities Part 1 (22:31)
Building The Club Amenities Part 2 (21:41)
Building The Contact Form Part 1 (26:32)
Building The Contact Form Part 2 (33:24)
Building The Contact Form Part 3 (25:52)
Building Membership Plan Part 1 (20:12)
Building Membership Plan Part 2 (32:30)
Building Membership Plan Part 3 (11:01)
Building The Testimonials Section Part 1 (19:22)
Building The Testimonials Section Part 2 (38:50)
Building Testimonials Section Part 3 (20:51)
Advanced Responsive Design
Mobile First vs. Desktop First Design (11:46)
Media Queries with SASS Part 1 (25:13)
Media Queries with SASS Part 2 (17:55)
Media Queries with SASS part 3 (18:08)
Media Queries with SASS part 4 (16:41)
Making images responsive and optimized (38:24)
Density Switching Using CDN (14:22)
Ensuring Browser Support (33:10)
Flexbox
Intro To Flexbox Part 1 (30:56)
Intro To Flexbox Part 2 (16:13)
Project Overview for _Bizwizz_ website (9:16)
Setting up the _Bizwizz_ Project (10:35)
Creating the Header Section (40:59)
Creating the Animated Button (9:30)
Creating SVG Waves (10:29)
Creating the Services Section (20:24)
Downloading and using SVG icons (27:06)
Creating the Meet Our Team Section (38:28)
Creating an Image Gallery (19:06)
Creating the Testimonials Section Part 1 (26:46)
Creating the Testimonials Section Part 2 (39:19)
Creating the Testimonials Section Part 3 (42:19)
Creating the Contact Section (48:09)
Creating the CTA Section (4:05)
Creating the Footer (12:25)
Making the Page Responsive (46:44)
JavaScript Crash Course
VS Code & Extensions (7:28)
Browser Dev tools & JS Conso (4:29)
Common Console Errors - Syntax, Type, Referen (11:45)
Intro to Terminal (8:29)
Crash course on GitHub (10:05)
Online Resources (11:22)
Coding Challenge Hello World in JS (1:50)
Coding Basics (4:32)
SingleMulti Line Coding (11:54)
Variable (14:29)
Hoisting (5:32)
Declaration & Assignment (7:27)
Operators (10:48)
Operator Precedence (13:48)
Coding Challenge (1:58)
Coding Challenge Solution (4:50)
Primitive Data Types (4:32)
String Manipulation (13:01)
Number (5:57)
Number Manipulation (9:29)
Symbol (3:48)
Null and Undefined (4:24)
Boolean Logic (6:21)
TruthyFalsy values and Equality Operators (6:59)
IfElse Statements, nesting ifelse (9:05)
Ternary Operator (4:09)
Switch Statements (4:53)
Code Challenge (1:27)
Code Challenge Solution (6:59)
Web Design Business Crash Course
Web Design Business Model (6:08)
2 Main Types of Web Design (4:11)
Additional Services You Can Upsell (6:06)
Upsell Outsourcing Resource
Your Daily Workstation
How To Get Web Design Clients
Get Clients from Facebook
Pricing and Packaging
Booking Software Walkthrough (11:09)
How To Collect Payments (5:49)
Productivity Tools (6:11)
WordPress Crash Course
WordPress Mini-Course (27:41)
Career Section
Creating an Web Developer Resume (8:18)
Contacting Recruiters (6:02)
Getting Started with Freelancing (5:33)
Top Freelance Websites (11:08)
Personal Branding (5:40)
Networking (5:27)
Audio Version of the Training
Audio Download
Making Simple Box Model Layouts - using div elements
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock