Sass Complete Guide, Create Responsive Portfolio Website

In this video, I will give you an overview of this section, that what we will learn in this section.

In this video, we will learn what is flexbox actually? flex is a layout module, with the help of flexbox we can align items very easily vertically or horizontaly.

In this video, we are going to talk about what is flex container and what are flex items, flex container is a row class or parent element and flex items are child classes or child columns.

In this video, we will talk about flex-direction property, flex-direction property basically change the flex-direction.

In this video, we are going to flex-basis property, the flex-basis property we can use instead CSS width property.

In this video, we are going to talk about flex-grow property, flex-grow means if we have free space in a row then flex-grow will distribute the space between columns.

In this video, we will talk about flex-shrink property, flex-shrink property is the opposite of flex-grow property, it shrink flex items.

In this video, we will talk about the flex property, flex property basically combine three properties in a single line all of them are flex-grow, flex-shrink and flex-basis.

In this video, we are going to talk about flexbox order property, we the help of order property we can change the order of flex items.

In this video, we are going to talk about flex-wrap property, flex-wrap property move items into the next row if we don't have any free available space in a row.

In this video, we are going to align items horizontally and to align items horizontally we have to use the justify-content property.

In this video, we are going to align items vertically, and to align items vertically we have to use align-items property.

In this video, I will give an overview of this section, that, what we will learn in this section.

In this video, we are going to learn what is sass and what are the main features of sass.

In this video, we are going to create a new folder for sass inside there we will do the sass code.

In this video, we are going to install the sass package which will compile our sass or scss code to pure CSS.

In this video, we are going to run the Sass script from the pacakage.json file.

In this video, we are going to talk about sass or scss variables, variables are containers that store values in the computer memory.

In this video, we are going to talk about @debug rule using debug rule we can debug any sass variables value or expression results.

In this video, we are going to talk about sass modules, with the help of sass modules we can divide our code into different modules.

In this video, we are going to talk about what is the basic difference between Sass and Scss.

In this video, we are going to access Sass variables in Sass modules with the help of the @use rule.

In this video, we are going to talk about Sass nesting, nesting means we can nest children inside the parent class.

In this video, we are going to talk about BEM methodology, BEM stands for Block Element Modifiers, with the help of the BEM methodology we can create clear relation between parent and child classes.

In this video, we are going we are going to talk about sass lists, in lists we can keep more than one values same as JavaScript arrays.

In this video, we are going to talk about Sass maps, maps that keep data in key-value pairs same as JavaScript arrays.

In this video, we are going to talk about Sass for loop, for example, if you want to run a loop up to a specific point in that case you can use for loop.

In this video, we are going to talk about sass If Else statements, with the help of Else Statements we can check different conditions.

In this video, we are going to talk about sass functions, that how to use functions in sass, in functions we can put some peace of logic and after we can reuse that function in deffenret places.

In this video, we are going to talk about sass extends, with the help of sass extends we can reuse the CSS classes.

In this video, we are going to talk about sass mixins, Mixins and Extends both are the same things but Mixin functions accept parameters.

In this video, I will give you an overview of this section.

In this video, we are going to create a project folder and we will also install the Sass package locally in our project.

In this video, we are going to create three files, first, we will create index.html second we will create an app.scss, and third we will create app.css and finally, we will create a script for sass.

In this video, we are going to choose google font for our website, in this course I will use Poppins font.

In this video, we are going to set the default line height, line-height means space between inline elements.

In this video, we are going to set the default font size.

In this video, we are going to convert pixel to percentage value because pixel creates some issues in the root element.

In this video, we are going to reset the default padding and margin because all HTML tags have some default padding and margin.

In this video, we are going to create a favicon and for that, we will use the third part website.

In this video, we are going to set up colors and we will have different colors and all of them will store in variables.

In this video, I will give you an overview of the navigation will we will build in this section.

In this video, we are going to create the HTML code for navbar.

In this video, we are going to style the navigation bar using Scss.

In this video, we are going to style the navigation links.

In this video, we are going to style the logo.

In this video, we are going to create mixins for code reuse ability.

In this video, we are going to implement the sass @forward rule with the help of the @forward rule we can combine many sass modules in a single place and from there we can access sass modules

In this video, we are going to assign padding-left and padding-right to the navbar wrapper.

In this video, I will give you an overview of the final responsive navbar so you will see that what will build in this section.

In this video, we are going to create a container class that will wrap all our website all contents.

In this video, we are going to talk about rows and columns.

In this video, we are going to talk about CSS media queries, what are media queries and how they work?

In this video, we are going to create columns for extra-large columns, extra-large columns will run only on extra large screens.

In this video, we are going to use extra-large columns in the HTML file.

In this video, we are going to create columns for large screens.

In this video, we are going to create columns for medium screens.

In this video, we are going to create columns for small screens and extra small screens.

In this video, we are going to create a map for breakpoints and after we will loop that map

In this video, we are going to loop the breakpoints map.

In this video, we are going to refactor the each loop because in each loop we have for loop two times.

In this video, I will give you an overview of this section that what we will build in this section actually.

In this video, we are going to learn about how to nest media query in css classes.

In this video, we are going to create a mixin for media queries and we will reuse that mixin throughout all scss files.

In this video, we are going to make the navbar responsive on mobile screens.

In this video, we are going to style the navbar links on mobile screens.

In this video, we are going to add a toggle icon on the right side of the navbar.

In this video, we are going to add click on the event on the toggle icon if some click on toggle icon then we will toggle a class.

In this video, we are going to toggle the CSS class as we click on the toggle icon.

In this video, we are going to add transitions to the navbar at the time of opening and closing.

In this video, I will give you an overview about the hero section that what we will build in this section.

In this video, we are going to do the html code for header section.

In this video, we are going to style the heading section.

In this video, we are going to style the buttons.

In this video, we are going to apply to typewrite effect on the name heading.

In this video, we are going to add the header or hero image.

In this video, we are going to make the header image more stylish.

In this video, we are going to make the header section responsive.

In this video, we are going to make the buttons responsive.

In this video, we are going to bring header contents to the center on the medium screen.

In this video, I will give you an overview of modal which we will build in this section.

In this video, we are going to do the modal HTML code.

In this video, we are going to style the modal which we have had created in the previous video.

In this video, we are going to add close icon in the modal.

In this video, we are going to make the modal responsive on all screens.

In this video, we are going to open and close the modal through JavaScript.

In this video, we are going to animate the modal using css.

In this video, I will give the overview of the about section that what we will create in the about section.

In this video, we are going to do the HTML code for the user images, in the about section on the left side we will have the user images.

In this video, we style the user images which we have added in the previous video.

In this video, we are going to add the user biography on the right side of about section.

In this video, we are going to add more information about the User, like user name, email, date of birth, nationality, etc.

In this video, we will style the user information which we have added in the previous video.

In this video, we are going to add social media icons, where users can add their social links.

In this video, we will style the social media icons with scss.

In this video, we will make the about section responsive, so the about section will be responsive on all different devices. 

In this video, we are going to open the website links in a new tab so, simply we will use the target="_blank" attribute.