Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Ultimate Front-End Design Bundle HTML, CSS, Bootstrap, Sass, Tailwind, and Visual Studio Code
Welcome
About this Bundle (4:27)
Visual Studio Code
Course Overview (5:21)
01-Intro (4:36)
01-What is Visual Studio Code & Why us it (4:08)
02-Download and Install VS Code on Mac & PC (4:04)
01-Basic UI Orientation (5:46)
02-Creating Opening Editing Deleting Project Folders and Files (4:40)
03-Save and Auto Save (4:21)
04-Changing the Display Language (1:26)
05-Grid System - Splitting up the Editor (4:40)
Resources
06-Mini Map, Word Wrap, Zoom and Font Size (6:26)
07-Updates (2:25)
01-IntelliSense (4:23)
02-Emmet HTML & CSS Shortcuts (17:47)
03-Find and Replace (5:02)
04-Navigate the Code (8:48)
02-Esentioal Extensions (14:12)
03-Optional Extensions (15:35)
04-Enviermental Sepcific Extensions (13:45)
Snippets (20:04)
01-Essential Keyboard Shortcuts (5:17)
02-Create you own Keyboard Shortcuts & New File Extension (1:28)
03-Import other Keymap extensions (1:13)
01-VS Code own Color Themes (4:45)
02-Extensions for Custom Themes and Icons (3:52)
03-Customizing your own Theme (1:07)
The Terminal (6:18)
Setting up Sync (6:44)
Setting up Node JS (5:08)
01-What is React (1:24)
02-Instaling React (2:21)
01-What is Angular (0:39)
02-Instaling Angular (3:36)
01-What is Vue (1:00)
02-Instal Vue (2:15)
What is Python (1:02)
Setting up Python (6:13)
HTML and CSS Fundamentals - Build a Blog Website
About this section
Source Code Repository and Live Blog Website
What is HTML and how to create a HTML file (3:44)
HTML Elements (6:26)
HTML Comments
HTML Headings
HTML Paragraphs & Dummy Text
HTML Horizontal Rules & Line Breaks
0107-HTML div Element (2:00)
0108-HTML Styling (4:44)
0109-HTML Lists (2:59)
1010-HTML Links (3:00)
1011-HTML img (6:17)
1012-HTML Semantic Elements (2:41)
1013-HTML Header (1:07)
1014-Create a Navigation for your Website (2:11)
1015-HTML Section (1:58)
1016-HTML Main & Article Tag (4:36)
1017-HTML Audio and iframe (4:06)
1018-HTML Footer Element (2:00)
1019-HTML Symbols and Icons (7:13)
1020-What is CSS and how to create and link CSS to HTML (6:27)
1021-CSS Selectors (3:56)
1022-HTML Elements ID and there CSS selection (7:02)
1023-HTML Classes and there CSS selection (5:34)
1024-CSS Colors and Backgrounds (4:27)
1025-CSS Backgrounds (6:42)
1026-CSS Borders (5:13)
1027-CSS Margins and Paddings (9:03)
1028-CSS Selects All and General Reset (5:30)
1029-Text Formatting (2:44)
1030-CSS Fonts (6:26)
1031-CSS Height, Width and Max-width (4:37)
1032-CSS Pseudo-class (10:10)
1033-CSS Pseudo-element (1:49)
1034-CSS Layout - The position Property (6:06)
1035-CSS Flexbox Layout Modual (7:06)
1036-CSS Grid Layout Module (6:33)
1037-Create Multiple Webpages (4:25)
1038-Shared Web Page Structure (1:01)
1039-Navigate between web pages (7:01)
1040-HTML Forms inputs labels and contact informationand (13:08)
1041-CSS Forms inputs labels and contact informationand (8:12)
1042-CSS Transitions (6:57)
1043-CSS Image Reflection (3:21)
1044-CSS Transforms (9:31)
1045-CSS Animations (4:06)
1046-CSS Media Queries (8:49)
1047-Responsive About Page (10:46)
1048-Responsive Blog Page (9:29)
1049-Responsive Post (11:46)
1050-What is GitHub (3:15)
1051-Make your website public (9:53)
1052-Conclusion (1:53)
Examples with CSS calc() (6:17)
How to use CSS calc() (3:23)
Using CSS Variables (9:00)
What are CSS Variables (6:41)
CSS Flexbox Project
CSS Flexbox Project - Crypto Matket place Website - 00 - Project Overview (1:58)
CSS Flexbox Project - Crypto Matket place Website - 01 - Starter Files (2:16)
CSS Flexbox Project - Crypto Matket place Website - 02 - Website Settings & Variables (3:46)
CSS Flexbox Project - Crypto Matket place Website - 03 - Website Navigation (4:31)
CSS Flexbox Project - Crypto Matket place Website - 04 - Website Header (6:48)
CSS Flexbox Project - Crypto Matket place Website - 05 - Website Services (3:48)
CSS Flexbox Project - Crypto Matket place Website - 06 - Responsive Design (3:23)
CSS Grid Project
CSS Grid Project - Photography Portfolio Website - 00 - Project Overview (3:52)
CSS Grid Project - Photography Portfolio Website - 01 - Starter Files (3:35)
CSS Grid Project - Photography Portfolio Website - 02 - Website Settings & Variables (3:00)
CSS Grid Project - Photography Portfolio Website - 03 - Website Header & Navigation (5:25)
CSS Grid Project - Photography Portfolio Website - 04 - Image Collections Section (10:37)
CSS Grid Project - Photography Portfolio Website - 05 - Summer Spring Fall Winter Image Collections (6:26)
Sass Fundamentals
Sass and Scss - 01 - What is Sass and Why learn it (4:04)
Resources
Sass and Scss - 02 - How does Sass work (1:20)
Sass and Scss - 03 - Features of Sass (4:31)
Sass and Scss - 04 - Visual Studio Code Live Sass Compiler (9:25)
Sass and Scss - 05 - Working with Scss Partials & @import rule (5:38)
Sass and Scss - 06 - Scss Nesting & Parent selector (6:32)
Sass and Scss - 07 - Scss Variables (4:48)
Sass and Scss - 08 - Scss Data Types - Lists (4:08)
Sass and Scss - 09 - Scss @each rule (6:06)
Sass and Scss - 10 - Scss maps (8:10)
Sass and Scss - 11 - Scss @function rule (3:59)
Sass and Scss - 12 - Scss @mixin & @include rules (7:12)
Sass and Scss - 13 - Scss @if & @else rules (4:40)
Sass and Scss - 14 - Scss @extend rule (6:15)
Sass Utilities
Resources
Sass and Scss Utilities - 01 - Sandbox and Global Settings (4:53)
Sass and Scss Utilities - 02 - Global Variables (2:58)
Sass and Scss Utilities - 03 - Global Maps (3:17)
Sass and Scss Utilities - 04 - Utility functions (3:40)
Sass and Scss Utilities - 05 - Utility Classes (2:58)
Sass and Scss Utilities - 06 - Utility Text Alignment Classes (1:04)
Sass and Scss Utilities - 07 - Utility Font Size Classes (4:11)
Sass and Scss Utilities - 08 - Utility Padding Classes (3:50)
Sass and Scss Utilities - 09 - Utility Margin Classes (1:35)
Sass and Scss Utilities - 10 - Utility Title and Subtitle Classes (5:02)
Sass and Scss Utilities - 11 - Utility Text and Background Color Classes (4:06)
Project - Button Component
Project - Button Component - 01 - Project overview (1:10)
Project - Button Component - 02 - Create a main .btn class (7:18)
Project - Button Component - 03 - Create multiple btn types (3:08)
Project - Button Component - 04 - Create multiple btn sizes (6:56)
Project - Button Component - 05 - Create closing btn (3:42)
Project - Alert Component
Project - 02 - Alert Component - 01 - Project overview (0:59)
Project - 02 - Alert Component - 02 - Create the main alert class (2:41)
Project - 02 - Alert Component - 03 - Create muliple alert types (2:41)
Project - 02 - Alert Component - 04 - Create a closing alert class with animation (4:32)
Project - 02 - Alert Component - 05 - Ex Form submission (2:59)
Project - Card Component
Project - 03 - Card Component - 01 - Project overview (0:38)
Project - 03 - Card Component - 02 - Create the main .card class (6:04)
Project - 03 - Card Component - 03 - Create card header and footer (5:06)
Project - 03 - Card Component - 04 - Create multiple card types (2:25)
Project - Navbar Component
Project - 04 - Navbar Component - 01 - Project overview (1:04)
Project - 04 - Navbar Component - 02 - Create main navbar class (7:47)
Project - 04 - Navbar Component - 03 - Show and hide the nav items (6:08)
Project - eLearning Platform
Project - 05 - eLearning Platform - 01 - Project overview (5:59)
Project - 05 - eLearning Platform - 02 - Project setup (7:04)
Project - 05 - eLearning Platform - 03 - Project variables and general settings (4:48)
Project - 05 - eLearning Platform - 04 - Create website navbar (8:23)
Project - 05 - eLearning Platform - 05 - Create header section (5:58)
Project - 05 - eLearning Platform - 06 - Create categories section (11:07)
Project - 05 - eLearning Platform - 07 - Create offers section (4:25)
Project - 05 - eLearning Platform - 08 - Create testimonials section (11:52)
Project - 05 - eLearning Platform - 09 - Global Footer (3:58)
Project - 05 - eLearning Platform - 10 - Log In Form (7:37)
Project - 05 - eLearning Platform - 11 - Registration Form (3:42)
Project - 05 - eLearning Platform - 12 - Welcome page (8:27)
Project - 05 - eLearning Platform - 13 - Responsive design (11:43)
Project - 05 - eLearning Platform - 14 - Deploy the website to Netify (6:26)
Project - 05 - eLearning Platform - 15 - UPDATE Add fade in-out animation on scroll to testimonials (8:59)
Project - Cryptocurrency Profit Calculator Mobile App
Project - 06 - Crypto Profit Calculator - 02 - Create a GitHub Repository for the project (2:08)
Project - 06 - Crypto Profit Calculator - 01 - Project overview (1:49)
Project - 06 - Crypto Profit Calculator - 03 -Starter Files & HTML description (4:25)
Project - 06 - Crypto Profit Calculator - 04 - Project Setup & Variables (6:22)
Project - 06 - Crypto Profit Calculator - 05 - Form Component (9:18)
Project - 06 - Crypto Profit Calculator - 06 - Results Component & Mobile Design (3:23)
Project - 06 - Crypto Profit Calculator - 07 - Publish application to GitHub Pages (3:17)
Master Tailwind CSS
Introduction to Tailwind CSS Course (2:25)
Course Outline and Structure (5:34)
How to learn (3:31)
What is Tailwind CSS (4:22)
Why use Tailwind CSS VS Bootstrap VS Regular CSS (5:59)
Tailwind CSS - Environmental setup and Resources
S02-01-Basic Environment Setup (2:32)
S02-02-Install Visual Studio Code (4:54)
S02-03-Install Node.js (2:43)
S02-04-Install Tailwind CSS Extensions (2:20)
S02-04-Install Tailwind CSS Extensions.mp4 (0:20)
S02-05-Sandbox Repository (3:17)
Tailwind CSS - Understanding utility classes and best practices
S03-01-About this section (2:36)
S03-02-How to get the Tailwind CDN (5:41)
S03-03-Font Typography (6:33)
S03-04-Text Typography (4:17)
S03-05-Widt Sizing (4:30)
S03-06-Height Sizing (3:06)
S03-07-Margin Spacing (6:42)
S03-08-Padding Spacing (3:20)
S03-09-Colors and color palette (6:39)
S03-10-Display elements (4:40)
S03-11-Positioning elements (5:33)
S03-12-Backgrounds (10:08)
S03-13-Borders (6:27)
S03-14-Box-Shadow Effect (3:16)
S03-15-Opacity Effect (4:22)
S03-16-Filters (2:05)
S03-17-Transitions (5:32)
S03-18-Animations (2:12)
S03-19-Customising Animations (5:06)
S03-20-Transforms (5:38)
S03-21-Tables (1:51)
S03-22-Columns (3:03)
S03-23-Flexbox (7:16)
S03-24-Grid System (5:37)
S03-25-Properties of Grid and Flexbox (10:21)
S03-26-Dark Mode (4:20)
Simple and Fast Tailwind CSS with CLI
S04-01-Get started with Tailwind CSS (3:34)
S04-02-Fast website build with Tailwind CLI (10:07)
S04-03-Create a Simple Tailwind CSS Website (3:46)
Tailwind Project - Simple Calculator
calc-01-Intro (1:20)
calc-02-Project setup (3:01)
calc-03-Create Calculator body and Display (4:19)
calc-04-Create Calculator buttons (5:06)
calc-05-Add same classes to all buttons using JS (5:17)
calc-06-Add click effect to buttons (4:42)
calc-07-Calculate values (6:09)
Tailwind Project - To-Do List with interchangeable positions in JavaScript
S6-01-Intro (1:36)
S6-02-Project-setup (2:35)
S6-03-Create the Container, Input and Add button (6:04)
S6-04-Create the list item content inkl. Actions (8:54)
S6-05-To-Do list explaind (3:29)
Tailwind Project - Booking Website
S7-01-Intro (4:06)
S07-02-Project Setup and page structure (3:50)
S7-03-Page Header with responsive navigation (9:34)
S7-04-Create Hero Section (4:25)
S7-05-Create Image Carousel (5:50)
S7-06-Create testimonial section (4:32)
S7-07-Create Newsletter subscription form (6:50)
S7-08-Create a Sticky Footer (3:40)
Tailwind Project - Your Portfolio Website
S8-01-Intro (2:10)
S8-02-General Setup & Project outline (3:58)
S8-03-Configure the Dark Mode (4:15)
S8-04-Create Header Section with Navigation and toggle Dark Mode (10:42)
S8-05-Create About Section (5:52)
S8-06-Create Projects Section and link your projects (9:26)
S8-07-Create Contact Section with details and Form (11:10)
S8-08-Implement smooth scroling got to top and footer (5:07)
Tailwind CSS in React.js and Vite - Create Reusable Components
S09-01-About this section (1:41)
S09-02-How to install Tailwind CSS in React with Vite (5:04)
S09-03-Project Setup (4:22)
S09-04-Create Custom Primary Button Component (13:06)
S09-05-Create Custom Scondary Button Component (4:11)
S09-06-Create Custom Outline Button Component (4:18)
S09-07-Create Custom Card Component (11:12)
S09-08-Create 2 Custom Alert Components (9:16)
Tailwind Project - ShopKing Website
S10-01-Intro (3:33)
S10-02-Project Setup (4:11)
S10-03-Create Heade and Implement Button Component (10:18)
S10-04-Create Products and implement Card component (7:19)
S10-05-Create the Shopping Cart component (7:04)
S10-06-Create the Shopping Cart Item component (10:12)
S10-07-Add products to the Cart (7:54)
S10-08-Update product quantity in cart (3:55)
S10-09-Remove product from cart (3:08)
S10-10-Add Alert Components to User Actions (6:43)
S10-11-Calculate Total Price in the Cart (5:06)
S10-12-Add Dark Mode Toggle to the App (3:58)
S10-13-Publish your build Project to the web (2:02)
Tailwind Project - Admin Panel with custom configuration
S11-01-Introduction to the project-1 (2:33)
S11-02-App Structure setup (3:43)
S11-03-Custom Configuration for Tailwind CSS (3:13)
S11-04-Top Navigation with dark mode toggle (7:58)
S11-05-Main Cards component (7:37)
S11-06-Loading component on data fetching (6:43)
S11-07-Analysis Component (7:48)
S11-08-Aside Navigation component (9:51)
S11-09-Implement Aside Navigation (3:41)
S11-10-Implement Restriction (5:42)
Master Boostrap
Course presentation (5:43)
About this course (1:21)
Course overview ! (2:34)
What is Bootstrap ? (3:36)
What will you learn in this course ? (0:35)
Bootstrap Typography and the basics
Section overview (1:17)
How to use bootstrap. (6:58)
Typography (9:54)
Text (14:38)
Colors (6:19)
Spacing with Margins and Padding (7:13)
Sizing (2:20)
Positioning (10:53)
Breakpoints and Containers (7:34)
Flexbox and The Grid System
Section overview (0:54)
Flexbox (11:42)
Grid system (17:59)
More CSS3 flexbox & grid system
Components
Section overview (1:02)
Accordion (11:20)
Alerts (7:15)
Badges & Breadcrumbs (12:39)
Buttons & Button Groups (16:06)
Cards (18:58)
Carousel (14:04)
Close Button & Collapse (8:23)
Dropdown (10:50)
List & List Groups (9:36)
Model (3:49)
Navs, Tabs & Navigations (8:53)
Popovers (8:55)
Offcanvas (9:39)
Pagination (4:48)
Progresbars (6:55)
Scrollspy (5:43)
Spinners (6:02)
Tooltips (5:32)
Bootstrap & Font Awesome Icons
Working with Bootstrap icons (8:22)
Useful Links for Bootstrap & Font Awesome Icons
Bootstrap Icons VS Font Awesome Icons (5:07)
Create a webpage footer using bootstrap icons (10:22)
Bootstrap Project - Bio website theme
Project introduction (4:15)
Project setup (5:25)
Webpage Navigation section (11:42)
Header subsection Profile & Email button groups (5:05)
Header subsection Dropdown Content for About and Contact (10:57)
Profile img (2:57)
Portfolio offcanvas content (10:47)
Mail offcanvas content (10:30)
Webpage Footer section (7:17)
Bootstrap Project - Business Directory Website Themes
Project introduction (4:58)
Project setup (5:15)
Website Navigation (11:32)
Website Header (8:24)
Website Header get offer Modal (11:21)
Website About (10:39)
Website About History Modal (10:39)
Website Team section (10:19)
Website Services section (10:49)
Website Footer and Contact (11:07)
Bootstrap Project - Resume Website Themes
Project introduction (4:40)
Project setup (3:56)
Website Said Navigation (11:11)
Website Header (6:07)
Website Main section (5:11)
Website About section (14:29)
Website Services section (6:37)
Web development service (15:34)
SEO service (4:38)
Data base service (8:05)
Data security service (7:41)
Website Contact section (4:56)
Website footer and conclusion (3:41)
Bootstrap Project - Photo website theme
Project introduction (4:59)
Project setup (5:31)
Website navigation (6:29)
Website header section (13:38)
Header contact form (19:12)
Contact form terms of services (5:50)
Website main section (7:27)
Portrait photo gallery (20:18)
Travel photo gallery (14:05)
Wedding photo gallery (8:52)
Nature photo gallery (3:32)
Portfolio section (14:40)
Footer section and conclusion (5:54)
NodeJS - Basics only
Section disclaimer!
What is NodeJS (3:49)
How to install NodeJS (4:59)
Project - eCommerce Website using Bootstrap locally + SASS
Project overview (11:34)
Implement Bootstrap 5 in to the website (5:48)
Sass setup (5:41)
index.html setup (8:00)
Sass Assets: Configuration, Variables & Utilities (15:23)
Top info bar - support (11:46)
Top info bar - carousel (4:48)
Top info bar - Language & Currency (7:52)
Top info bar - Cart button (4:24)
Top info bar - Cart content (20:51)
Header Navigation (12:47)
Header Carousel (18:21)
Categories & technologies (29:31)
Products section (17:42)
Products section - First product (11:37)
Products section - Product content (24:44)
Customer reviews section (28:25)
Collaborate section (11:44)
Footer & Contact section (26:09)
Advanced CSS & SASS: Framework, Flexbox, Grid, Animations
Starter Project _00 -Intro (1:29)
Starter Project_01_Introduction (1:27)
Starter Project_02_laing plans (14:25)
Starter Project_03_Nav (11:04)
Starter Project_04-Main (13:01)
Starter Project_05-Footer (9:17)
Starter Project_06-Responsive (11:26)
Starter Project_07_SASS (4:57)
Starter Project_08-Partioals and Config (6:56)
Starter Project_09-Variables (7:44)
Starter Project_10-Nav (8:31)
Starter Project_11-Main (9:00)
Starter Project_12-Footer (6:34)
Starter Project_13-Responsivenes (14:20)
Starter Project_14-Conclusion (1:28)
SASS Explained
01-SASS Sintax (20:24)
02-SASS Variables (8:55)
03-SASS Default Value (10:58)
04-SASS Scope (4:36)
05-SASS Shadowing (7:29)
06-SASS Flow Control (10:28)
07-SASS Advance Variable Funtions (8:18)
08-0-SASS Deta Types (0:58)
08-1-SASS Deta Types-Numbers (8:18)
08-2-SASS Deta Types-Strings (10:13)
08-3-SASS Deta Types-Colors (6:28)
08-4-SASS Deta Types-Lists (8:35)
08-5-SASS Deta Types-Maps (9:30)
08-6-SASS Deta Types-Booleans (5:49)
08-7-SASS Deta Types-Null (6:54)
09-SASS Operators (5:04)
10-SASS Functionss (31:09)
11-SASS Mixin (27:23)
12-0-SASS Flow Controle (1:10)
12-1-SASS Flow Controle @if and @else (33:51)
12-2-SASS Flow Controle @each (12:30)
12-3-SASS Flow Controle @for (5:33)
12-4-SASS Flow Controle @while (4:21)
Responsive design @media
Responsive design @media (24:38)
Flex Box in CSS and SASS
FlexBox-01-StarterFiles (2:36)
FlexBox-00-Intro (1:49)
FlexBox-03-Display Flex & Flex Direction (3:24)
FlexBox-04-Flex Wrap (1:32)
FlexBox-05-Justify Content (2:53)
FlexBox-06-Align Items (3:28)
FlexBox-07-Align Content (2:23)
FlexBox-08-Order (3:49)
FlexBox-09-Flex Grow (2:22)
FlexBox-10-Flex Shrink (2:07)
Project - Food Blog Template - Using Flex Box
Food Blog Template-01-Intro (2:37)
Food Blog Template-02-StarterFiles (3:04)
Food Blog Template-03-Config (14:54)
Food Blog Template-04-Navigation (10:39)
Food Blog Template-05-Main (14:00)
Food Blog Template-06-About (3:38)
Food Blog Template-07-Footer (15:38)
Food Blog Template-08-Responsive (23:56)
Display Grid in CSS and SASS
CSS Grid -01 Intro (1:56)
CSS Grid -02 Starter Files (4:30)
CSS Grid -03 Display Grid - Grid Template Column & Row (8:46)
CSS Grid -04 Grid Template Area (6:59)
CSS Grid -05 Grid Template (3:41)
CSS Grid -06 Grid Gap (2:25)
CSS Grid -07 Aling Items (0:59)
CSS Grid -08 Justify Items (1:47)
CSS Grid -09 Justify Content (2:57)
CSS Grid -10 Align Content (2:08)
CSS Grid -11 Grid Auto Columns & Rows (4:16)
CSS Grid -12 Grid Auto Flow (4:29)
CSS Grid -13 Children Properties (2:32)
Project - Photo Template using CSS Grid
Photo Template - 01 Intro (2:25)
Photo Template - 02 Starter Files (4:30)
Photo Template - 03 Config Partial (13:03)
Photo Template - 04 Text Component (6:55)
Photo Template - 05 Grid Layout (12:50)
Photo Template - 06 Navigation (7:17)
Photo Template - 07 Header (4:01)
Photo Template - 08 Main (7:33)
Photo Template - 09 Aside (3:44)
Photo Template - 10 Section (15:55)
Photo Template - 11 Form (20:43)
Photo Template - 12 Footer (6:36)
Photo Template - 13 Responsiveness (12:20)
CSS Transitions & Rotations
Transitions -01 Intro (0:59)
Transitions -02 Starter Files (1:34)
Transitions -03 What is a Transition (2:40)
Transitions -04 Transition Timing Function Property (4:34)
Transitions -05 Transition Delay (1:43)
Transitions -06 Transition Transform (2:08)
Transitions -07 Transition Shorthand (2:36)
CSS Animations
CSS Animation - 00 Intro (0:49)
CSS Animation - 00 Animation Strater Files (1:19)
CSS Animation - 00 Animations using Colors (3:16)
CSS Animation - 00 Animations Fill Mode (6:08)
CSS Animation - 00 Animations Short Hand (5:35)
CSS Animation - 00 Animations Directions (5:30)
CSS Animation - 00 Speed Curve (7:12)
CSS Animation - 00 What is a Animation and @keyframe (4:12)
Project - Animated Buttons
Project - Animated Buttons-02-Starter Files (1:34)
Project - Animated Buttons-01-Intro (0:46)
Project - Animated Buttons-03 using CSS (15:41)
Project - Animated Buttons-04 using SASS (14:18)
Sass First Components
Components -01 Starter Files (1:27)
Components -00 Intro (1:24)
Components -02 Variables (11:53)
Components -03 Typography (20:26)
Sass Button Components
Components Buttons -00 Intro (1:26)
Components Buttons -01 Buttons Partial Component (2:32)
Components Buttons -02 Main Buttons Class (5:38)
Components Buttons -03 Background Colors Class (16:50)
Components Buttons -04 Outline Colors Class (11:29)
Components Buttons -05 Buttons Dimension Class (4:39)
Components Buttons -06 Checkbox and Radio Buttons (4:44)
Components Buttons -07 Neon Buttons (22:59)
Sass Card Component
Componets Cards -01 Starter Files and Settup (2:01)
Componets Cards -02 Simple Cards (12:03)
Componets Cards -03 Img Cards (6:31)
Componets Cards -04 Background and Outline Colord Cards (9:29)
Sass Navigation Component
Navigation Components -00 Intro (1:50)
Navigation Components -01 Starte Files (1:54)
Navigation Components -02 Basic Setup (3:36)
Navigation Components -03 Simple Navigation Bar (9:15)
Navigation Components -04 Simple Navigation Bar with background color (9:09)
Navigation Components -05 Navigation with Logo (5:20)
Navigation Components -06 Navigation with Menu Button (4:15)
Navigation Components -07 Navigation with Logo and Menu Button (3:48)
Navigation Components -08 Navigation Item-s Position Switcher (8:01)
Navigation Components -09 Navigation Positioning Top Right Bottom Left (12:51)
Sass Project - Marketing Template using Buttons and Cards
Project - Marketing Template using Buttons and Cards -00 Intro (2:24)
Project - Marketing Template using Buttons and Cards -01 Starter Files (3:13)
Project - Marketing Template using Buttons and Cards -02 Config and File Structure (7:18)
Project - Marketing Template using Buttons and Cards -03 Header (2:55)
Project - Marketing Template using Buttons and Cards -04 Main (4:42)
Project - Marketing Template using Buttons and Cards -05 Plans (8:47)
Project - Marketing Template using Buttons and Cards -06 Pricing (16:23)
Project - Marketing Template using Buttons and Cards -07 About (9:47)
Project - Marketing Template using Buttons and Cards -08 Footer (6:00)
Project - Marketing Template using Buttons and Cards -09 Responsiveness (11:18)
Sass Project - Simple CV Template
Project Simple CV Template-00 Intro (1:52)
Project Simple CV Template-01 Starter Files (3:16)
Project Simple CV Template-02 Config and File Structure (7:29)
Project Simple CV Template-03 Main Area (10:15)
Project Simple CV Template-04 Aside Area-Languages (6:28)
Project Simple CV Template-04 Aside Area-Skills (17:48)
Project Simple CV Template-04 Aside Area (13:56)
Project Simple CV Template-05 Section Area (18:37)
Project Simple CV Template-06 Footer Area & Switch Color (12:26)
Project Simple CV Template-07 Responsivenes (4:58)
Sass Project - Simple CV Template
Project - Simple CV Template - With Navigation -00 Intro (2:22)
Project - Simple CV Template - With Navigation -01 Basic Setup (3:10)
Project - Simple CV Template - With Navigation -02 Reponsive Repositioning (8:05)
Project - Simple CV Template - With Navigation -03 Navigation Color Switcher (3:26)
Sass Form Component
Component Forms -00 Intro (0:38)
Component Forms -01 Starter Files (2:17)
Component Forms -02 Simple Form (7:30)
Component Forms -03 Grid Form (14:47)
Project - Hotel Booking Template
Project - Hotel Booking Template - 00 Intro (2:29)
Project - Hotel Booking Template - 01 Starter Files (2:07)
Project - Hotel Booking Template - 02 Basic Setup (7:16)
Project - Hotel Booking Template - 03 Config (3:56)
Project - Hotel Booking Template - 04 Nav (3:45)
Project - Hotel Booking Template - 05 Header (13:42)
Project - Hotel Booking Template - 06 Rooms (15:34)
Project - Hotel Booking Template - 07 Hotels (7:55)
Project - Hotel Booking Template - 08 Contact and Subscription (8:34)
Project - Hotel Booking Template - 09 Footer (4:54)
Project - Hotel Booking Template - 10 Responsive (20:14)
Project - Hotel Booking Template - 10 Responsive (17:24)
Sass Project - Profile Template
Project - My Portfolio -00 Intro (6:22)
Project - My Portfolio -00 Starter Files (15:16)
Project - My Portfolio -02 Main Page (31:52)
Project - My Portfolio -03 Navigation (17:18)
Project - My Portfolio -04 Main Page Responsive (10:39)
Project - My Portfolio -05 Portfolio - Part 2 (15:28)
Project - My Portfolio -05 Portfolio (30:23)
Project - My Portfolio -06 Service Page (20:54)
Project - My Portfolio -07 Blog Page (15:44)
Project - My Portfolio -08 Contact Page (14:13)
Sass Project - Parallax Template with Animations
Project - Parallax Template - 00 Intro (2:45)
Project - Parallax Template - 01 Starter Files (1:45)
Project - Parallax Template - 02 Dev Setup (4:58)
Project - Parallax Template - 03 Basic Config and Sections (7:20)
Project - Parallax Template - 04 Nav (11:02)
Project - Parallax Template - 05 Header (10:54)
Project - Parallax Template - 06 About & Parallax Effect (5:01)
Project - Parallax Template - 07 Service (4:33)
Project - Parallax Template - 08 Contact & Footer (4:48)
Sass Project - Profile Template
Project - Profile Template using Nav- 00 Intro (4:27)
Project - Profile Template using Nav- 01 Starter Files (3:04)
Project - Profile Template using Nav- 02 Basic config and file structure (11:49)
Project - Profile Template using Nav- 03 Navigation Section (10:09)
Project - Profile Template using Nav- 04 Header section (4:44)
Project - Profile Template using Nav- 05 Skills section (5:05)
Project - Profile Template using Nav- 06 Statements section (4:58)
Project - Profile Template using Nav- 07 Service section (7:52)
Project - Profile Template using Nav- 08 Photo section (9:34)
Project - Profile Template using Nav- 09 Footer section (5:17)
Project - Profile Template using Nav- 10 Contact section (10:40)
Project - Profile Template using Nav- 11 Responsive section (9:09)
Course Outline and Structure
Complete and Continue