Sass Complete Guide, Create Responsive Portfolio Website

Sass Complete Guide, Create Responsive Portfolio Website, available at $64.99, has an average rating of 4.88, with 156 lectures, based on 8 reviews, and has 1216 subscribers.

You will learn about You will learn Flexbox You will learn Sass features You will learn latest Sass features (@use, @forward) You will learn responsive grid system same as Bootstrap grid system You will learn how to create clean UI You will learn CSS best practices This course is ideal for individuals who are Anyone that wants to supercharge their Sass skills It is particularly useful for Anyone that wants to supercharge their Sass skills.

Enroll now: Sass Complete Guide, Create Responsive Portfolio Website

Summary

Title: Sass Complete Guide, Create Responsive Portfolio Website

Price: $64.99

Average Rating: 4.88

Number of Lectures: 156

Number of Published Lectures: 156

Number of Curriculum Items: 156

Number of Published Curriculum Objects: 156

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will Learn

You will learn Flexbox

You will learn Sass features

You will learn latest Sass features (@use, @forward)

You will learn responsive grid system same as Bootstrap grid system

You will learn how to create clean UI

You will learn CSS best practices

Who Should Attend

Anyone that wants to supercharge their Sass skills

Target Audiences

Anyone that wants to supercharge their Sass skills

Do you want to supercharge your CSS skills?

If yes? then welcome to “HTML, Sass & JavaScript Create Responsive Portfolio Website“, In this course, you will learn modern Sass or Scss. In This course will not learn only Sass you will also learn CSS Flexbox from scratch step by step, the only thing you just need the basic knowledge of HTML and CSS.  Now, what you will learn?

You will learn

CSS Flexbox from scratch

Sass features from scratch

Sass modern features (@use, @forward)

CSS responsive grid system same like bootstrap (col-xlg, col-lg, col-md, col-sm, col-xsm)

Fancy looking UI

JavaScript with toggle menu and modal

After completing this course you will be able to create responsive modern-looking websites with HTLM, Flexbox, and Sass. Most importantly you will learn how to create a responsive grid system same as Bootstrap responsive grid system, and that’s my favorite section in this course. In this course you will not learn only the code, you will also learn how to create a professional developer portfolio website, and you can see the website demo in the promo video. Now if you are ready just enroll in the course and will be happy after taking this course, so why do you wait?

Fast support!

I reply to each student (If you are stuck just message me or post your issue in the Q/A section)

quick response

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: Lets 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

Instructors

Shakil Khan
Software Engineer & Instructor

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 0 votes

4 stars: 2 votes

5 stars: 6 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!