Sass Complete Guide, Create Responsive Portfolio Website

Course Curriculum

Chapter 1: Download Resources/Tools

Lecture 1: Download Project Source Code

Lecture 2: Download Node JS & Text Editor

Lecture 3: Install VS Code Extensions

Chapter 2: Flexbox Basics

Lecture 1: Section Intro

Lecture 2: What is Flexbox?

Lecture 3: Flex Container & Flex Items

Lecture 4: Flex Direction

Lecture 5: Flex Basis

Lecture 6: Flex Grow

Lecture 7: Flex Shrink

Lecture 8: Flex Property

Lecture 9: Order Property

Lecture 10: Flex Wrap Property

Lecture 11: Justify Content

Lecture 12: Align Items

Chapter 3: Sass Basics

Lecture 1: Section Intro

Lecture 2: What is Sass ?

Lecture 3: Create New Folder Structure

Lecture 4: Install Sass Package

Lecture 5: Run Sass Script From Package.json File

Lecture 6: What are Sass Variables ?

Lecture 7: Sass @debug Rule

Lecture 8: Sass Modules

Lecture 9: Sass vs Scss

Lecture 10: Access Sass Variables in Sass Modules

Lecture 11: Sass Nesting

Lecture 12: BEM Methodology

Lecture 13: Sass Lists

Lecture 14: Sass Maps

Lecture 15: Sass For Loop

Lecture 16: IF Else Statements

Lecture 17: Sass Functions

Lecture 18: Sass Extends

Lecture 19: Sass Mixins

Chapter 4: Project Setting

Lecture 1: Section Intro

Lecture 2: Create Project Folder

Lecture 3: Create Files and Create Sass Script

Lecture 4: Choose Font Family

Lecture 5: Set Default Line Height

Lecture 6: Default Font Size

Lecture 7: Convert Pixel to Percentage in HTML Selector

Lecture 8: Reset Default Margin & Padding

Lecture 9: Add Favicon

Lecture 10: Setup Colors

Chapter 5: Navbar

Lecture 1: Navbar Demo

Lecture 2: Navbar HTML Code

Lecture 3: Style Navbar

Lecture 4: Style Links

Lecture 5: Style Logo

Lecture 6: Create Mixins

Lecture 7: Let's Implement @forward rule

Lecture 8: Navbar Wrapper Padding

Chapter 6: Responsive Grid System

Lecture 1: Responsive Grid Demo

Lecture 2: Create Container Class

Lecture 3: What Are Rows & Columns

Lecture 4: What Are Media Queries

Lecture 5: Create Columns For Extra Large Screens (Extra Large Desktop & Laptop)

Lecture 6: Use Extra Large Columns in HTML

Lecture 7: Create Columns For Large Screens (Large Desktops & Laptop)

Lecture 8: Create Columns For Medium Screens (Small Laptops & Large Tablets)

Lecture 9: Create Columns For Small & Extra Small Screens (Tablets & Mobile Phones)

Lecture 10: Create Map For Breakpoints

Lecture 11: Loop Breakpoints Map

Lecture 12: Refactor Loop

Chapter 7: Responsive Navbar

Lecture 1: Responsive Navbar Demo

Lecture 2: Nest Media Query in CSS Class

Lecture 3: Create Mixin For Media Queries

Lecture 4: Make Navbar Responsive on Mobile Screen

Lecture 5: Style Navbar Links on Mobile Screen

Lecture 6: Toggle Icon

Lecture 7: Click Event Listener

Lecture 8: Toggle Class

Lecture 9: Navbar Transitions

Chapter 8: Header Section

Lecture 1: Header Demo

Lecture 2: HTML Code for Header

Lecture 3: Style Header Headings

Lecture 4: Style Buttons

Lecture 5: Name Typewrite Effect

Lecture 6: Header Image

Lecture 7: Make Header More Stylish

Lecture 8: Make Header Responsive

Lecture 9: Responsive Buttons

Lecture 10: Center Contents on Medium Screen

Chapter 9: Create Modal

Lecture 1: Modal Demo

Lecture 2: Modal HTML Code

Lecture 3: Style Modal

Lecture 4: Modal Close Icon

Lecture 5: Make Modal Responsive

Lecture 6: Open and Close Modal

Lecture 7: Animate Modal

Chapter 10: About Section