DEV Community: Joy Shaheb

Learn JavaScript Form Validation || JavaScript project for beginners✨

Joy Shaheb — Thu, 23 Sep 2021 11:54:06 +0000

Today we're gonna learn how to do form validation using JavaScript. And we're gonna add images and media queries to build the entire project to keep it as a portfolio. Here's the project demo that we're gonna build 👇

Here's a small sample of how the form will work 👇

You can watch this tutorial on YouTube as well if you like:

Source code

You can get the source code, including the images from here

Setup

follow these steps 👇

Create a new folder named "Project" & Open VS code
create index.html, style.css, main.js
link the files inside the HTML
Download images from my GitHub repository
paste this font-awesome link inside the head tag. Then, we can access Font-awesome icons 👇

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
      crossorigin="anonymous"
    />

Table of Contents -

writing the HTML
Adding the CSS
JavaScript
Social Media Btn
Adding the images
Media query for mobile version

HTML

Create a class named .container inside the body tag and host the form tag which will have an id of form 👇

<div class="container">

    <form id="form"></form>

</div>

And inside the form tag, create 4 div. Like this 👇

<form id="form">

    <div class="title">Get Started</div>

    <div></div>
    <div></div>
    <div></div>

</form>

Inside those 3 empty div tags, let's create 3 inputs [Username, Email & password] along with the icons and labels. Like this 👇

Note : we are creating a .error class name. We will inject the error message here using JavaScript.

Username Input

<!-- User Name input -->

<div>
    <label for="username">User Name</label>
    <i class="fas fa-user"></i>

    <input
        type="text"
        name="username"
        id="username"
        placeholder="Joy Shaheb"
     />

    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>

    <div class="error"></div>

</div>

Email Input

<!-- Email input -->

<div>
    <label for="email">Email</label>
    <i class="far fa-envelope"></i>

    <input
        type="email"
        name="email"
        id="email"
        placeholder="abc@gmail.com"
     />

    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>

    <div class="error"></div>

</div>

Password Input

<!--   Password input -->

<div>
    <label for="password">Password</label>
    <i class="fas fa-lock"></i>

    <input
        type="password"
        name="password"
        id="password"
        placeholder="Password here"
     />

    <i class="fas fa-exclamation-circle failure-icon"></i>
    <i class="far fa-check-circle success-icon"></i>

    <div class="error"></div>

</div>

Button

Finally, add the button before the form closing tag

<form>
    <!-- other codes are here -->

    <button id="btn" type="submit">Submit</button>

</form>

The result so far 👇

Congrats for completing the HTML Part 🍾🎉🥂

Adding the CSS

Let's add the CSS to style our form. First, let's remove the default styles of our browser including the font-family👇

/**
* ! changing default styles of brower
**/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

Now, apply these styles for the form tag

/**
* ! style rules for form section
**/

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  padding: 50px;
}

make these changes for our title text 👇👇

.title {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 20px;
}

Your result so far 👇👇

Now, add margin to bottom of our label text

label {
  display: block;
  margin-bottom: 5px;
}

make these styles to change the look & feel of our input tags 👇👇

form div input {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  outline: none;
  border: 2px solid #c4c4c4;
  padding: 0 30px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

Add these to add some space & color changing effects

form div {
  position: relative;
  margin-bottom: 15px;
}

input:focus {
  border: 2px solid #f2796e;
}

The result so far 👇👇

Styling the icons

now, we're gonna style the icons which we imported from font-awesome. Follow along ✨✨

/**
* ! style rules for form icons
**/

form div i {
  position: absolute;
  padding: 10px;
}

The result of adding those 2 line 👇👇

Now, add these styles to style the error class, success & failure icons 👇👇

.failure-icon,
.error {
  color: red;
}

.success-icon {
  color: green;
}

.error {
  font-size: 14.5px;
  margin-top: 5px;
}

Result so far 👇👇

Look, the success & failure icons are overlapping each other. don't worry, we will manipulate those in JavaScript. for now, hide them 👇👇

.success-icon,
.failure-icon {
  right: 0;
  opacity: 0;
}

Now, style our submit button, like this 👇

/* Style rules for submit btn */

button {
  margin-top: 15px;
  width: 100%;
  height: 45px;
  background-color: #f2796e;
  border: 2px solid #f2796e;
  border-radius: 8px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.1s ease;
}

if you want some hover effect, then sure, add these styles 👇👇

button:hover {
  opacity: 0.8;
}

Take a Break !

So far so good ! take a break, you deserve it !

Adding the JavaScript

first, target all our classes and id from HTML, inside the JavaScript. To do this task efficiently, make these 2 functions 👇👇

let id = (id) => document.getElementById(id);

let classes = (classes) => document.getElementsByClassName(classes);

Then, store our classes & id inside these variables 👇

let username = id("username"),
  email = id("email"),
  password = id("password"),
  form = id("form"),

  errorMsg = classes("error"),
  successIcon = classes("success-icon"),
  failureIcon = classes("failure-icon");

Note : Try not to make spelling mistakes. Otherwise, our JavaScript will not work.

Now, we're gonna target our form & add the submit event listener 👇

form.addEventListener("submit", (e) => {
  e.preventDefault();
});

Now, we will create a function named engine which will do all sorts of form validation work for us. it will have 3 arguments. Follow along 👇

let engine = (id, serial, message) => {}

the arguments represents these -

id = it will target our id
serial = this will target our classes [error class, success & failure icons]
message = this will print message inside our .error class

Now create an if, else statement like this 👇

let engine = (id, serial, message) => {

  if (id.value.trim() === "") {
  }

  else {
  }
}

Note : the id.value.trim() will remove all the extra white spaces from the value which the user inputs. You can get a practical idea by looking at this illustration 👇

now, look at our objectives 👇

we want the JavaScript to print a message inside the error class whenever the user submits the form blank. At the same time, we want the failure icons to highlight as well.
But, if the user writes all the inputs and submits it, we want the success icon to get visible.

To accomplish this, write this logic 👇 To print the message

let engine = (id, serial, message) => {

  if (id.value.trim() === "") {
    errorMsg[serial].innerHTML = message;
  }

  else {
    errorMsg[serial].innerHTML = "";
  }
}

For the icons to work properly, add these 👇👇

let engine = (id, serial, message) => {

  if (id.value.trim() === "") {
    errorMsg[serial].innerHTML = message;
    id.style.border = "2px solid red";

    // icons
    failureIcon[serial].style.opacity = "1";
    successIcon[serial].style.opacity = "0";
  }

  else {
    errorMsg[serial].innerHTML = "";
    id.style.border = "2px solid green";

    // icons
    failureIcon[serial].style.opacity = "0";
    successIcon[serial].style.opacity = "1";
  }
}

Time to implement our newly created function. Write these inside the place where we added the submit event listener 👇

here, we are passing the id names, serials of our class names and passing the message which should be printed when we find an error when the user submits the form.

form.addEventListener("submit", (e) => {
  e.preventDefault();

  engine(username, 0, "Username cannot be blank");
  engine(email, 1, "Email cannot be blank");
  engine(password, 2, "Password cannot be blank");
});

The results so far 👇

Adding social media Buttons

so far so good, let's add the social media sign up options. Follow along 👇 Inside the form tag, create a new div with the class name social.

<form id="form">

    <div class="social">

      <div class="title">Get Started</div>

      <div class="question">
        Already Have an Account? <br />
        <span>Sign In</span>
      </div>

      <div class="btn"></div>

      <div class="or">Or</div>
    </div>

    <!-- other codes are here-->
</form>

inside the .btn class, we create 2 more div with class names .btn-1, .btn-2 with the images & text as well

<div class="btn">
  <div class="btn-1">
     <img src="https://img.icons8.com/color/30/000000/google-logo.png" />
     Sign Up
  </div>

  <div class="btn-2">
    <img src="https://img.icons8.com/ios-filled/30/ffffff/facebook-new.png" />
     Sign Up
   </div>
</div>

The result so far 👇👇

Now, let's style the .btn-1 & .btn-2 first, let's change direction of the buttons to row from column direction 👇

/**
* ! style rules for social section
**/

.btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 15px;
}

Result so far

now, add styles for the button. follow along 👇

.btn-1,
.btn-2 {
  padding: 10px 5px;
  width: 100%;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  border: 2px solid #c4c4c4;
  border-radius: 8px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

Change the icon color and text color of .btn-2 like this 👇

.btn-2 {
  background-color: #4f70b5;
  color: white;
}

And then, add these small changes to make the component look better

.or {
  text-align: center;
}

.question {
  font-size: 15px;
}

span {
  color: #f2796e;
  cursor: pointer;
}

The result so far

Adding the Images

Now, let's add images to our project. First, let's write the HTML 👇

<div class="container">

      <div class="content">
        <div class="logo">
          <img src="https://svgshare.com/i/_go.svg" alt="" />
        </div>

        <div class="image"></div>

        <div class="text">
          Start for free & get <br />
          attractive offers today !
        </div>
      </div>

   <form id="form">
   <!--other codes are here -->
   </form>

</div>

The result so far 👇

we need to change the orientation of our content from column to row. follow along 👇

.container {
  display: flex;
  flex-direction: row;
}

Add these style rules for the content section

/**
* ! style rules for content section
**/

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: #f2796e;
  width: 55%;
  min-height: 100vh;
  padding: 10px 20px;
}

form {
   width: 45%;
   max-width: none;
}

The result so far 👇

add the main illustration in CSS

.image {
  background-image: url("https://svgshare.com/i/_gZ.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* border: 2px solid black; */
  height: 65%;
}

and make these styles for the .text class

.text {
  text-align: center;
  color: white;
  font-size: 18px;
}

form {
   width: 45%;
   max-width: none;
}

The result so far 👇

Adding media queries for mobile version

from 900px, we will add these styles. Follow along 👇👇

@media (max-width: 900px) {
  .container {
    flex-direction: column;
  }

  form,
  .content {
    width: 100%;
  }

  .btn {
    flex-direction: column;
  }
  .image {
    height: 70vh;
  }
}

From 425px, we will have these minor changes 👇

@media (max-width: 425px) {
  form {
    padding: 20px;
  }
}

The final result 👇👇

Conclusion

Congratulations for reading till the end. Now you can easily & efficiently use JavaScript to handle form validation. Not only that, You also have a project to show your local recruiter !

Here's Your Medal For reading till the end ❤️

Suggestions & Criticisms Are Highly Appreciated ❤️

Learn callbacks, promises, Async/Await by Making Ice Cream 🍧🍨🍦

Joy Shaheb — Tue, 22 Jun 2021 14:42:53 +0000

Today we're gonna run an ice cream shop and learn asynchronous JS. Along the way, we'll understand how to use

Callbacks
Promises
Async / Await

Table of Contents -

What's Asynchronous JavaScript
Synchronous Vs Asynchronous JavaScript
Callbacks
Promises
Async / Await
Conclusion

You can watch this tutorial on YouTube as well if you like

What's Asynchronous JavaScript ?

If you want to efficiently build projects, Then this is for you.

The theory of async javascript helps you to break down complex & big project into smaller tasks.

And then, using any 1 of these 3 techniques (callbacks, promises or Async/await) we are running those small tasks in a way that we get the final result

Let's Dive in !🎖️

Synchronous VS Asynchronous ->

Synchronous System

In this system, tasks are completed 1 after another.

Think of this like, you have just 1 hand to accomplish 10 tasks. So, you have to complete 1 task at a time.

Take a look at the GIF 👇

You can notice that, without loading the 1st image completely, the 2nd image doesn't load.

Note :

By default JavaScript is Synchronous [single threaded] Think like this, 1 thread means 1 hand

Asynchronous System

In this system, tasks are completed independently.

Here, Imagine that For 10 tasks, you're given 10 hands. So, each hand can do the task independently.

Take a look at the GIF 👇

You can notice that, All the images are loading on their own pace. Nobody is waiting for anybody.

To summarize -

When 3 images are on a marathon, in ->

Synchronous : 3 images are on the same lane. Overtaking the other is not allowed. The race is finished one by one. If image number 3 stops, everyone stops.

Asynchronous: 3 images are on different Lanes. They'll finish the race on their own pace. Nobody stops for anybody

Examples

Before starting our project, Let's look at examples and clear our doubts.

Synchronous

To test The synchronous system, Write these on JavaScript

console.log(" I ");

console.log(" eat ");

console.log(" Ice Cream ");

The result on console 👇

Asynchronous

Let's say it takes 2 seconds to eat ice cream,
Now, let's test The Asynchronous system, Write these on JavaScript.

Note : Don't worry, we'll discuss setTimeout() function in this article.

console.log("I");

// This will be shown after 2 seconds

setTimeout(()=>{
  console.log("eat");
},2000)

console.log("Ice Cream")

The result on console 👇

Setup

For This project you can just open Codepen.io and start coding. Or, you can do it on VS code.
Open The JavaScript section
Once done, open your Developer console window. We'll write code and see the results on the console.

What are Callbacks?

Nesting a function inside another function as an argument are called callbacks.

An illustration of callback ->

Note : Don't worry, Examples are coming.

Why do we use callbacks?

When doing a complex task, we break that task down into small steps. To establish relationship between these steps according to time(Optional) & order, we use callbacks.

Take a look at this 👇

These are the small steps needed to make ice cream. Also note, order of the steps and timing are crucial. You can't just chop the fruit and serve ice cream.

At the same time, if previous step is not completed, we can't move to the next step.

To explain that in more details, let's start our ice cream shop business

But Wait....

We're gonna have 2 sides.

The store room will have ingredients [Our Backend]
We'll produce ice cream on our kitchen [The frontend]

Let's store our data

Now, we're gonna store our ingredients inside an object. Let's start !

store ingredients inside objects Like this 👇

let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"]
 }

Our other ingredients are here 👇

Store them in JavaScript Object like this 👇

let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"],
    liquid : ["water", "ice"],
    holder : ["cone", "cup", "stick"],
    toppings : ["chocolate", "peanuts"],
 };

The entire business depends on the order of our customers. Then, starts production and then we serve ice cream. So, we'll create 2 functions ->

order
production

See this illustration 👇

Let's make our functions.

Note : We'll use arrow functions

let order = () =>{};

let production = () =>{};

Now, Let's establish relationship between these 2 functions using a callback. see this 👇

let order = (call_production) =>{

  call_production();
};

let production = () =>{};

Let's do a small test

we'll use the console.log() function to conduct tests to clear our doubts regarding how we established the relationship between the 2 functions.

let order = (call_production) =>{

console.log("Order placed. Please call production")

// function 👇 is being called 
  call_production();
};

let production = () =>{

console.log("Production has started")

};

To run the test, we'll call the order function. And we'll place the 2nd function named production as it's argument.

// name 👇 of our second function
order(production);

The result on our console 👇

Take a break

So far so good, Take a break !

Clear our console.log

Keep these code and remove everything [don't delete our stocks variable]. On our 1st function, pass another argument so that we can receive the order [Fruit name]

// Function 1

let order = (fruit_name, call_production) =>{

  call_production();
};

// Function 2

let production = () =>{};


// Trigger 👇

order("", production);

Here's Our steps, and time each step will take to execute.

to establish the timing part, The function setTimeout() is excellent as it is also uses a callback by taking a function as an argument.

Now, Let's select our Fruit.

// 1st Function

let order = (fruit_name, call_production) =>{

  setTimeout(function(){

    console.log(`${stocks.Fruits[fruit_name]} was selected`)

// Order placed. Call production to start
   call_production();
  },2000)
};

// 2nd Function

let production = () =>{
  // blank for now
};

// Trigger 👇
order(0, production);

The result on our console 👇

Note: Result displayed after 2 seconds.

If you're wondering how we picked the strawberry from our stock variable. Here's the code with format 👇

Don't delete anything. start writing on our production function.
Write these 👇

Note: We'll use arrow functions.

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
  },0000)

};

The result 👇

we'll nest another setTimeout function in our existing setTimeout function to chop the fruit. Like this 👇

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")


    setTimeout(()=>{
      console.log("The fruit has been chopped")
    },2000)


  },0000)
};

The result 👇

If you remember, this is the list of our steps.

Let's complete our ice cream production by nesting a function inside another [Also known as Callbacks ]

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
    setTimeout(()=>{
      console.log("The fruit has been chopped")
      setTimeout(()=>{
        console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} Added`)
        setTimeout(()=>{
          console.log("start the machine")
          setTimeout(()=>{
            console.log(`Ice cream placed on ${stocks.holder[1]}`)
            setTimeout(()=>{
              console.log(`${stocks.toppings[0]} as toppings`)
              setTimeout(()=>{
                console.log("serve Ice cream")
              },2000)
            },3000)
          },2000)
        },1000)
      },1000)
    },2000)
  },0000)

};

Our result on console 👇

Feeling confused ?

This is called a callback hell. It looks something like this 👇

What's the solution to this?

Promises

This was invented to solve the callback hell problem and to better handle our tasks.

Take a break

But first, Take a break !

This is how a promise looks like.

Let's Dissect Promises together !

There're 3 states of a promise

Pending : This is the initial stage. Nothing happens here. Think like this, your customer is taking his time to give an order. But, hasn't ordered anything.
Resolve : This means that your customer has received his food and is happy.
Reject : This means that your customer didn't receive his order and left the restaurant.

Let's adopt promises to our ice cream production.

But wait......

We need to understand 4 more things ->

Relationship between time & work
Promise chaining
Error handling
.finally handler

Let's start our ice cream shop and understand them one by one by taking small baby steps.

Relationship of time & work

If you remember, these are our steps & time each takes to make ice cream.

For this to happen, Let's create a variable in JavaScript 👇

let is_shop_open = true;

now create a function named [ order ] and pass 2 arguments named [ work, time ]

let order = ( time, work ) =>{

  }

Now, we're gonna make a promise to our customer, "We will serve you ice-cream" Like this ->

let order = ( time, work ) =>{

  return new Promise( ( resolve, reject )=>{ } )

  }

Note : Our promise has 2 parts ->

Resolve [ ice cream delivered ]
Reject [ customer didn't get ice cream ]

let order = ( time, work ) => {

  return new Promise( ( resolve, reject )=>{

    if( is_shop_open ){

      resolve( )

    }

    else{

      reject( console.log("Our shop is closed") )

    }

  })
}

Let's add the time & work factor inside our Promise using a [ setTimeout() ] function inside our [ if statement ]. Follow me 👇

Note : In real life, you can avoid the time factor as well. This is completely dependent on the nature of your work.

let order = ( time, work ) => {

  return new Promise( ( resolve, reject )=>{

    if( is_shop_open ){

      setTimeout(()=>{

       // work is 👇 getting done here
        resolve( work() )

// Setting 👇 time here for 1 work
       }, time)

    }

    else{
      reject( console.log("Our shop is closed") )
    }

  })
}

Now, we're gonna use our newly created function to start ice-cream production. Let's start !

// Set 👇 time here
order( 2000, ()=>console.log(`${stocks.Fruits[0]} was selected`))
//    pass a ☝️ function here to start working

The result 👇 after 2 seconds

good job !

Promise chaining

In this method, we are defining what to do when 1st task is complete using the [ .then handler ]. It looks something like this 👇

The [ .then handler ] returns a promise when our original promise was resolved.

Example :

Let me make it more simple, It's similar to giving instruction to someone. You're telling someone to " First do This, Then do this, then this, then...., then...., then...., etc.

The first task is our [ original ] promise.
The rest are returning our promise once 1 small work is completed

Let's implement this on our project. At the bottom write these. 👇

Note : don't forget to write the [ return ] word inside our [ .then handler ] Otherwise, it won't work properly. If you're curious, try removing the [ return ] word once we finish the steps

order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))

.then(()=>{
  return order(0000,()=>console.log('production has started'))
})

The result 👇

using the same system, let's finish our project 👇

// step 1
order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))

// step 2
.then(()=>{
  return order(0000,()=>console.log('production has started'))
})

// step 3
.then(()=>{
  return order(2000, ()=>console.log("Fruit has been chopped"))
})

// step 4
.then(()=>{
  return order(1000, ()=>console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`))
})

// step 5
.then(()=>{
  return order(1000, ()=>console.log("start the machine"))
})

// step 6
.then(()=>{
  return order(2000, ()=>console.log(`ice cream placed on ${stocks.holder[1]}`))
})

// step 7
.then(()=>{
  return order(3000, ()=>console.log(`${stocks.toppings[0]} as toppings`))
})

// Step 8
.then(()=>{
  return order(2000, ()=>console.log("Serve Ice Cream"))
})

The result 👇

Error handling

This is used to handle our errors when something goes unexpected. But first, understand the promise cycle

To catch our error, let's change our variable to false.

let is_shop_open = false;

Which means our shop is closed. We're not selling ice cream to our customers.

To handle this, we use the [ .catch handler] . Just like the [ .then handler ], It also returns a promise, only when our original promise is rejected.

A small reminder here -

[.then] works when promise is resolved
[.catch] works when promise is rejected

come at the very bottom and write 👇

Note : There should be nothing between your previous .then handler and the .catch handler

.catch(()=>{
  console.log("Customer left")
})

The result 👇

Note :

1st message is coming from the reject() part of our promise
2nd message is coming from .catch handler

.finally() handler

There's something called the finally handler which works regardless whether our promise was resolved or rejected.

For an example : Serve 0 customer or 100 customers, Our shop will close at the end of the day

If you're curious to test this, come at very bottom and write these 👇

.finally(()=>{
  console.log("end of day")
})

The result 👇

Everyone ! Please welcome Async / Await !

Async / Await

This is Claimed to be the better way to write promises and helps to keep our code simple & clean.

All you have to do is, write the word [ async ] before any regular function and it becomes a promise.

But first, Take a break

Let's have a look 👇

Before

To make a promise we wrote

function order(){
   return new Promise( (resolve, reject) =>{

    // Write code here
   } )
}

Now [ using Async / Await ]

In Async / Await method, we make promise like this 👇

//👇 the magical keyword
 async function order() {
    // Write code here
 }

But wait......

You need to understand ->

try, catch usage
How to use the Await keyword

Try, Catch usage

[ Try ] keyword is used to run our code [ catch ] is used to catch our errors. It's the same concept as of the one we saw on promises.

Let's see a comparison

Note : We'll see a small demo of the format, then we'll start coding

Promises -> Resolve, reject

We used resolve & reject in promises like this ->

function kitchen(){

  return new Promise ((resolve, reject)=>{
    if(true){
       resolve("promise is fulfilled")
    }

    else{
        reject("error caught here")
    }
  })
}

kitchen()  // run the code
.then()    // next step
.then()    // next step
.catch()   // error caught here
.finally() // end of the promise [optional]

Async / Await -> try, catch

Here we work like this format

//👇 Magical keyword
async function kitchen(){

   try{
// Let's create a fake problem      
      await abc;
   }

   catch(error){
      console.log("abc does not exist", error)
   }

   finally{
      console.log("Runs code anyways")
   }
}

kitchen()  // run the code

Note : don't panic, we'll discuss about the [await keyword] next

you can notice, the difference between promises, Async / Await

The Await keyword usage

The keyword [ await ] makes JavaScript wait until that promise settles and returns its result.

A practical example

We don't know which topping customer prefers, Chocolate or peanuts?
We need to stop our machine, go and ask our customer, "Sir, which topping would you love ?"

Notice here, only Our kitchen is stopped, but our staff outside the kitchen will still work like

doing the dishes
cleaning the tables
taking orders, etc.

A Code Example

Let's create a small promise, to ask which topping to use. The process takes 3 seconds.

function toppings_choice (){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{

      resolve( console.log("which topping would you love?") )

    },3000)
  })
}

now, let's create our kitchen function with the async keyword at first.

async function kitchen(){

  console.log("A")
  console.log("B")
  console.log("C")

  await toppings_choice()

  console.log("D")
  console.log("E")

}

// Trigger the function

kitchen();

Let's add other works below the kitchen() call.

console.log("doing the dishes")
console.log("cleaning the tables")
console.log("taking orders")

The result

We are literally going outside our kitchen to ask our customer, "what is your toppings choice?" In the mean time, other works are done.

Once, we get the toppings choice, we enter the kitchen and finish the job.

Small note

When using Async/ Await, you can also use the [ .then, .catch, .finally ] handlers as well which are a core part of promises.

Let's Open our Ice cream shop Again

We're gonna create 2 functions ->

kitchen : to make ice cream
time : assigning amount of time each small task will need to accomplish.

Let's start ! First, create the time function ->

let is_shop_open = true;

function time(ms) {

   return new Promise( (resolve, reject) => {

      if(is_shop_open){
         setTimeout(resolve,ms);
      }

      else{
         reject(console.log("Shop is closed"))
      }
    });
}

Now, Let's create our kitchen ->

async function kitchen(){
   try{

     // instruction here
   }

   catch(error){
    // error management here
   }
}

// Trigger
kitchen();

Let's give small instructions and test if our kitchen function is working or not

async function kitchen(){
   try{

// time taken to perform this 1 task
     await time(2000)
     console.log(`${stocks.Fruits[0]} was selected`)
   }

   catch(error){
     console.log("Customer left", error)
   }

   finally{
      console.log("Day ended, shop closed")
    }
}

// Trigger
kitchen();

The result, When shop is open 👇

The result when shop is closed 👇

So far so good !

Let's complete our project.

Here's the list of our task again 👇

first, open our shop

let is_shop_open = true;

Now write the steps inside our kitchen() function following the steps 👇

async function kitchen(){
    try{
    await time(2000)
    console.log(`${stocks.Fruits[0]} was selected`)

    await time(0000)
    console.log("production has started")

    await time(2000)
    console.log("fruit has been chopped")

    await time(1000)
    console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`)

    await time(1000)
    console.log("start the machine")

    await time(2000)
    console.log(`ice cream placed on ${stocks.holder[1]}`)

    await time(3000)
    console.log(`${stocks.toppings[0]} as toppings`)

    await time(2000)
    console.log("Serve Ice Cream")
    }

    catch(error){
     console.log("customer left")
    }
}

The result 👇

Conclusion

Here's Your Medal For reading till the end ❤️

Suggestions & Criticisms Are Highly Appreciated ❤️

YouTube / Joy Shaheb
LinkedIn / JoyShaheb
Twitter / JoyShaheb
Instagram / JoyShaheb

Credits -

Every CSS Background Property illustrated 2021 || CSS 2021

Joy Shaheb — Sat, 03 Apr 2021 01:25:22 +0000

Today we're gonna learn all CSS background properties with every possible value along with short-hand. Let's Go !🏅

Table of Contents -->

All Properties
background-image
background-size
background-repeat
background-position
background-origin
background-clip
background-attachment
background-color
Short hand
Conclusion

YouTube :

All Properties

This is a list of All properties we're gonna discuss today. The red colored text at last is the shorthand

What are background properties?

CSS Background properties allows us to control the size & properties of images in a way that we can make responsive images for both smaller & larger screens. Thus, we can easily create responsive websites.

For an example,

The property background-size allows us to reset width & height of our image according to screen size.
background-position allows us to tell the browser, where to put the image on the screen.
And many more !

Steps to follow

Before coding, you need to know little bit of HTML,CSS & how to use VS code.

To do all sorts of test with the properties & its values, follow these steps 👇

Create a new folder named 'BACKGROUND-PROJECT'. Open it on VS code.
Create index.html & style.css files.
install 'live server' on VS code.
start live server.

HTML

create one div with class name 'container' inside the body tag on the HTML file.

   <div class="container"></div>

CSS

On CSS, you MUST include a height for our container, otherwise we can't see the image. For our case, we will set it to 100vh, like this ->

.container{
  height : 100vh;
}

download images for the project.

Images are on my GitHub repository
Visit & copy the link ☝️
Go to downgit & paste the link you copied
Follow the steps on the video 👇 ->

And..... we're all set !

Let's start coding 😊

background-image

Using this property, we can add images through our stylesheet.

We can use background-image by 2 ways ->

By locating image path on directory
By specifying image URL

By Directory Path

The syntax when using the directory path 👇

We will have 3 cases when specifying an image path on our CSS ->

image & style.css are on same folder
image is on the next folder
image is on the previous folder

When image & style.css is on Same Folder, it looks something like this 👇 Notice that kitty.png & style.css are on same parent folder named Background-project

To locate the file path of the kitty.png, write on style.css ->

 .container{
   background-image : url("kitty.png");

   height: 100vh;
// set size & stop image repetition 
   background-repeat : no-repeat;
   background-size : contain;
 }

When image is on Next Folder, the style.css is on previous folder. Notice on the image 👇 the kitty.png is on Assets folder while style.css is on previous folder

To Go forward & to locate the file path of the kitty.png, we write one dot & slash (./) after quote on style.css. Then we write name of folder then slash(/) then write name of image, like this 👇 ->

 .container{
   background-image : url("./Assets/kitty.png");

   height: 100vh;
// set size & stop image repetition 
   background-repeat : no-repeat;
   background-size : contain;
 }

If image is on Previous Folder, then we need to go back. Notice on the image 👇 style.css is on src folder & kitty.png is outside src folder.

To Go back & to locate the file path of the kitty.png, we write two dot & slash (../) after quote on style.css. Then we write name of image, like this 👇

 .container{
   background-image : url("../kitty.png");

   height: 100vh;
// set size & stop image repetition 
   background-repeat : no-repeat;
   background-size : contain;
 }

By Direct Link

This is pretty easy. Write the property & insert the link inside url(). The syntax 👇

To work with an image which is a direct link we write ->

//example ->
 .container{
    background-image : url("https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szxp3jqyjyksrep1ep82.png");

  height: 100vh;
// set size & stop image repetition 
   background-repeat : no-repeat;
   background-size : contain;
 }

Take a Break

background-size

We can adjust size of an image using this property.

You can use background-size by 3 ways ->

use Cover / Contain value
set image width & height
use auto

Let's start discussing the cover & contain values
Bear size : [718px X 614px]

Cover

For this to work, we must include an image, set height & stop the image repetition. Like this on css 👇

.container{
  background-image : url('cute-bear.png');
  background-repeat: no-repeat;
  background-size : cover;

// Must include the height
  height : 100vh;
}

When we use this property, it will stretch the image to the whole screen even when we resize the window. Watch the video 👇

Contain

Same steps here, we must include an image, set height & stop the image repetition. Like this on css👇

.container{
  background-image : url('cute-bear.png');
  background-repeat: no-repeat;
  background-size : contain;

// Must include the height
  height : 100vh;
}

This value will preserve the image size [Responsive Image] even when we resize the window. See this video below 👇

Image width & height

We can set width & height of image using background-size property.

The syntax 👇

.container{
// here, we see  width👇  &  👇 height
  background-size : 200px   200px;
}

Also, don't forget to insert the image, set height and stop the image repetition. The code snippet ->

.container{
  background-image : url('cute-bear.png');
  background-repeat: no-repeat;

// here, we see  width👇 &  👇 height
  background-size : 200px  200px;

// Must include the height
  height : 100vh;
}

Auto

When using this value, the image will stay on it's original size. It won't change when we resize the window. See the video :

background-repeat

This property allows us to repeat the same image multiple times.

There're 6 values of this property :

repeat
repeat-x
repeat-y
no-repeat
space
round

Result of every 6 value at a glance :
Note: kitty size : [200px X 200px]

Now, Let's investigate what's happening with each value. BUT, before that note that we need to insert an image using background-image. Like this :

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat :  ; //we will play with values here 

   height : 100vh;
}

repeat

By using this value, we can repeat the same image multiple times along BOTH X & Y Axis as long as the screen space doesn't end. Kitty size : 200px X 200px

repeat-x

This value allows us to repeat the same image multiple times along the X-Axis as long as the screen space doesn't end. Kitty size : 200px X 200px

repeat-y

works the same way like "repeat-x", but works along the Y-Axis as long as the screen space doesn't end. Kitty size : 200px X 200px

no-repeat

We can have our original image without repetition using this value. Kitty size : 200px X 200px

space

This works both along the X & Y Axis. We can see The main difference between values : space & round when we resize the window. Notice that we have empty spaces when we resize the window

round

This works both along the X & Y Axis. Notice that the image is stretching when we resize the window.

background-position

This property is used to change position of an image on the screen

The syntax 👇

.container{
// This is       X-Axis👇  &  👇 Y-Axis
background-position : 300px  200px;
}

Also, don't forget to insert the image, set height, & stop image repetition. We've set the kitty size to 200px X 200px using background-size property

.container{
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;

// This is         X-Axis👇  & 👇 Y-Axis
  background-position : 300px 200px;
  height: 100vh;
}

The Result ->

You can also use combination of these values ->

top
left
right
bottom
percentage values

For an example, let's set our kitty at the very bottom right. The code snippet for this ->

.container{
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;

// This is         X-Axis👇  & 👇 Y-Axis
  background-position : bottom right;
  height: 100vh;
}

The Result ->

Calculating the available space of the screen, the % values determine the position of the image. The code snippet ->

.container{
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;

// This is         X-Axis👇  & 👇 Y-Axis
  background-position : 25% 15%;
  height: 100vh;
}

The Result ->

background-origin

This property allows us to set the origin of our image across the CSS box model.

The 4 values are :

border-box
padding-box
content-box
inherit

In the standard CSS box model, the outermost part is the border, then comes the padding and finally we have the content itself at the center.

The result of every property at a glance ->

To recreate these results,

First we need an image, stop image repetition, set height & width of both container & image.
Once done, we will insert 40px padding, otherwise we can't see the difference between padding-box & content box.
Then, insert 25px red colored border. set, border-style to dashed to see dashed border on screen.
set background-size to 400px & 400px;

The code snippet ->

.container{
  background-image: url('cute-girl.png');
  background-repeat: no-repeat;
  background-size: 400px 400px;

// Change  values here  👇  to see difference 
  background-origin: border-box;
  padding: 40px;
  border: 25px solid red;
  border-style: dashed;

// Width & height for container 👇
  width : 400px;
  height : 400px;
}

Take A Break

background-clip

This is the same as background-origin property. The main difference is, background-clip CUTS the image to fit inside the Box & background-origin PUSHES the content inside the box to fit.

The 4 values are :

border-box
padding-box
content-box
inherit

The result of every property at a glance ->

To recreate these results,

First we need an image, stop image repetition, set height & width of both container & image.
Once done, we will insert 40px padding, otherwise we can't see the difference between padding-box & content box.
Then, insert 25px red colored border. set, border-style to dashed to see dashed border on screen.
set background-size to 400px & 400px;

The code snippet ->

.container{
  background-image: url('cute-girl.png');
  background-repeat: no-repeat;
  background-size: 400px 400px;

// Change  values here  👇  to see difference 
  background-clip: border-box;
  padding: 40px;
  border: 25px solid red;
  border-style: dashed;

// Width & height for container 👇
  width : 400px;
  height : 400px;
}

background-attachment

This property allows us to control the behavior of our content & image when we scroll.

The 3 values are :

scroll
fixed
local

when we use scroll, image is fixed, we can freely scroll our content. fixed value gives us a parallax effect on mouse scroll & local produces multiple images as long as our content doesn't end.

See the results live here 👇

I got this pen from

background-color

This is used to fill your background with colors

Out of many options, popular ones are ->

solid color by name or hex value
using RGB() color function
using linear-gradient() function

solid color by name or hex value

You can use color names to set background color, like this ->

.container{
   background-color : red;

   height : 100vh;
}

or, you can use hex color code like this ->

.container{
   background-color : #ff0000; //red color

   height : 100vh;
}

Visit these resources for more colors ->

coolors.co
flatuicolors.com

RBG() color function

you can use RGB() color function to set background color ->

.container{
// color name is "American River"
   background-color : rgb(99, 110, 114);

   height : 100vh;
}

or, you can use RGBA() to set both color & opacity->

.container{
// The 0.5 at last represents        50% 👇 opacity 
   background-color :  rgba(99, 110, 114, 0.5);

   height : 100vh;
}

This is an experiment with the color named 'Eton blue' with various opacity levels 👇

linear-gradient() function

this is used to create a gradient color of more than 1 color. Example of gradient colors ->

You can visit this website for more color resources with css code snippets ->

uigradients.com

To recreate this background color ->

'#22c1c3' represents the color on left, '#fdbb2d' represents color on right. '90deg' is telling how the 2 colors will be angled to create a gradient.
The code snippet ->

.container{

   background: linear-gradient(90deg, #22c1c3, #fdbb2d);  

   height : 100vh;
}

Short-Hand

This is the order of the shorthand named background

For this experiment, let's put the kitty.png on our browser with a blue background at 200px on X-Axis & 200px on Y-axis. The code snippet ->

.container{

   background-color : skyblue;
   background-image : url('kitty.png);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: 200px 200px;

   height : 100vh;
}

The code snippet using the shorthand ->

.container{

   background: skyblue url('kitty.png) no-repeat fixed 200px 200px;

   height : 100vh;
}

If you want to skip one value, you can do it as long as maintain the order of these properties.

Credits

Cute Girl I have a crush on 🥰

kitty Avatar

Cute panda

cute cat with duck

cute girl illustration

Rabbit with duck

CSS-Tricks

Conclusion

Here's Your Medal For reading till the end ❤️

Suggestions & Criticisms Are Highly Appreciated ❤️

YouTube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb

CSS Grid Cheat Sheet Illustrated in 2021🎖️

Joy Shaheb — Thu, 04 Mar 2021 09:53:30 +0000

Today we're gonna learn CSS Grid properties so that you can make your own responsive sites. I'll explain how each of Grid's properties work along with a CheatSheet that covers everything you can do with Grid. Let's Go 🎖️

Grid Architecture
Parent Properties
- grid-template-columns
- grid-template-rows
- grid-template-areas
- column & row gap
- justify-items || align-items
- justify-content || align-content
Children Properties
- grid-column : start/end
- grid-row : start/end
- grid-area
- justify-self || align-self
Short Hands
Conclusion

You can watch this tutorial on YouTube as well if you like:

First, What is Grid?

Grid is a blueprint for making websites.

The Grid model allows us to layout the content of our website. Not only that, it helps us create the structures needed for creating responsive websites for multiple devices.

Here's a simple demo which I created using Grid as the main blueprint.

Desktop View

Mobile View

Grid Architecture

So how does Grid architecture work? The Grid items [Contents] are distributed along the main axis and cross axis. Using various Grid properties, we manipulate the items to create our website layouts.

By the way, we can join multiple rows and columns, just like Excel software, which gives us more flexibility and options than Flexbox.

Here's a CheatSheet I made for Flexbox

Grid Chart --

This chart contains every possible property you can use when using grid. Grid properties are divided into -

Parent properties
Children Properties

Note : The red colored text are the shorthand properties

At the end of this tutorial, You'll have a clear understanding of how to use all of those properties

How to Set Up the Project

For this project, you need to know little bit of HTML, CSS, and how to work with VS code. Follow along with me as we complete the following tasks:

Create a folder named "Project-1" & Open VS Code
Create index.html and style.css files
Install Live Server and run it.

Or, you can just open Codepen and start coding.

At the end of this tutorial, you will be able to make accurate and beautiful website layouts.

And...we're all set! Let's start coding. 😊

HTML

create 3 boxes inside our body tag. Like this 👇

<div class="container">
  <div class="box-1"> A </div>
  <div class="box-2"> B </div>
  <div class="box-3"> C </div>
</div>

CSS

Step-1

Let's clear our default browser styles. Follow me 👇

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

Step-2

Inside the body selector, do these adjustments

body {
  font-family: sans-serif;
  font-size: 40px;
  width: 100%;
  min-height: 100vh;
}

Step-3

Now, Let's style our boxes by selecting all of them together ->

[class^="box-"] {
  background-color: skyblue;

/* To place the letter at the center */
  display: grid;
  place-items: center;
}

Note : Don't worry, we'll discuss about those grid properties in details.

Step-4

Now, place some gap between our boxes like this 👇

.container {
  display: grid;
  gap: 20px;
}

But Wait....

Before starting, you need to understand the relationship between parent & child classes.

For the Grid Parent property, we will write inside .container class. For the Grid Children Property, we will write on .box-* classes

Grid Parent Properties

First, Let's learn The grid Parent properties !

grid-template-columns

This is used to define the Number & Width of columns. You can either individually set the width of each column, or set an uniform width for all columns using "repeat()" function.

To recreate these results, Write on CSS These lines ->

.container {
  display: grid;
  gap: 20px;

/*  Change the values     👇 to experiment */
  grid-template-columns: 200px auto 100px;
}

Note :

The pixel values will be an exact measurement. The "auto" keyword will cover available space.
if you use fr (fraction unit) measurement, all the boxes will be equal in size

grid-template-rows

This is used to define the Number & Height of rows. You can either individually set the height of each row, or set an uniform height for all rows using "repeat()" function.

To test these results, Write on CSS These lines ->

.container {
  display: grid;
  gap: 20px;
  height: 100vh;

/* Change the values  👇 to experiment */
  grid-template-rows: 200px auto 100px;
}

grid-template-areas

This is used to specify the amount of space a grid cell should carry in terms of column & row across the parent container. Life's Quite Easier With this as it allows us to see visually what we're doing.

Call it, the blueprint(template) of our layout👇

To experiment with this, you need to understand both the parent and children property -

grid-template-areas : The parent property who will create the blueprint
grid-area : the children property who will follow the blueprint.

First, create the blueprint

Like this 👇 inside the parent .container class

.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-areas: 
    "A A A A   A A A A   A A A A"
    "B B B B   B B B B   B B C C"
    "B B B B   B B B B   B B C C";
}

Implement the blueprint

Target all our children .box-* classes and set the values like this ->

.box-1{
  grid-area: A;
}
.box-2{
  grid-area: B;
}
.box-3{
  grid-area: C;
}

Note : The grid-area property will be discussed again on the grid children property section

column-gap :

This property is used to place gap between Columns inside the grid 👇

To test This, write 👇

.container {
  display: grid;
  height: 100vh;

  grid-template-columns: 100px 100px 100px;
//Change values👇 to experiment
  column-gap:  50px;
}

Note : column-gap works with grid-template-columns

row-gap :

This property is used to place gap between Rows inside the grid 👇

let's test This 👇

.container {
  display: grid;
  height: 100vh;

  grid-template-rows: 100px 100px 100px;
// Change   👇  values to experiment
  row-gap:  50px;
}

Note : row-gap works with grid-template-rows

justify-items :

This is used to position grid-items (children) inside grid container along the X-Axis[Main Axis]. The 4 values are 👇

If you want to test this, then add 1 more box inside HTML ->

<div class="container">

  <!--Other boxes - A, B, C are here-->

  <div class="box-4"> D </div>
</div>

and in css ->

.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// each box is 200px by 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Change values 👇  to experiment
  justify-items : end;
}

align-items :

This is used to position grid-items (children) inside grid container along the Y-Axis[Cross Axis]. The 4 values are 👇

Don't change anything on HTML, write in css ->

.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// each box is 200px by 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Change values 👇  to experiment
  align-items: center;
}

justify-content :

This is used to position our grid [Basically everything] inside grid container along the X-Axis[Main Axis]. The 7 values are 👇

Don't change anything on HTML, write in css ->

.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// each box is 200px by 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Change  values  👇  to experiment
  justify-content: center;
}

align-content :

This is used to position our grid [Basically everything] inside grid container along the Y-Axis[Cross Axis]. The 7 values are 👇

Don't change anything on HTML, write in css ->

.container {
  display: grid;
  gap: 50px;
  height: 100vh;

// each box is 200px by 200px
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;

//  Change  values 👇  to experiment
  align-content : center;
}

Take a Break

So far so good! Take a break, You deserve it !

Grid Children Properties

Now, Let's look at grid children properties

The Grid Scale

I made this grid scale to demonstrate the calculations of how rows and columns are joined together. We can use any 1 of the 2 types of measurement -

The digit [1,2,3,4, etc...]
the span keyword

You'll get a clear picture of this guide ☝️ when we write code in just a short moment

The illustration below 👇 shows the start & end points of row and column of a single cell.

HTML

To experiment with the grid scale and understand the following properties, make 4 boxes inside body tag -

<div class="container">
  <div class="box-1"> A </div>
  <div class="box-2"> B </div>
  <div class="box-3"> C </div>
  <div class="box-4"> D </div>
</div>

We're gonna utilize the repeat() function. What it does is, it repeats our code to a certain time. Here's an example 👇

grid-template-columns : repeat(5,1fr);

This is ☝️ equivalent to writing this 👇

grid-template-columns : 1fr 1fr 1fr 1fr 1fr ;

A Quick Note :

When we use the fr [ Fraction ] unit, we are dividing the screen area into equal proportions.

  grid-template-columns: repeat(5, 1fr);

this ☝️ code is dividing our screen width into 5 equal parts.

We're set, let's start !

grid-column : start/end

THESE 2 properties are used to join multiple COLUMNS together. It is a shorthand of 2 properties -

grid-column-start
grid-column-end

Write these on CSS

.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

The result -

Here, we are dividing our screen [ both width & height ] into 12 equal parts. 1 box is occupying 1 part or you can call it 1fr [ 1 fraction ]. the remaining 8 fractions along the width are empty.

As we are dealing with children properties, we need to target our .box-* classes like this -

.box-1{}
.box-2{}
.box-3{}
.box-4{}

You can experiment with any 1 or all of these boxes, I'll stick with .box-1

Let's bring our grid scale. we are dealing with columns, just focus on the columns, not rows.

The default scale of every .box-* classes are

grid-column-start : 1;
grid-column-end : 2;

/* The shorthand -> */
 grid-column : 1 / 2

We can write this ☝️ in the span unit as well, like this 👇

grid-column : span 1;

Let's assign the empty 8 fractions to .box-1 like this 👇

.box-1{
grid-column : 1/10
}

The result 👇

A Quick note :

How did i do the calculation? The box-1 occupies 1 box itself. And over that, we are adding more 8 boxes. At the last, must add 1 to indicate the end so, 8+1+1 = 10

Using the Span keyword

If You're confused by the 1st one, you can use this as it is easy to understand.

We need to add 8 boxes to .box-1 which is already occupying 1 box. So, we have to do 8+1 = 9

.box-1{
  grid-column : span 9;
}

This is gonna output the same result

grid-row : start/end

THESE 2 properties are used to join multiple ROWS together. It is a shorthand of 2 properties -

grid-row-start
grid-row-end

Let's experiment with it ! Here, I'll stick with .box-1
here's our grid guide. Now, only focus on the row scale, not column.

let's join 9 boxes to .box-1 along the row

Write these 👇

.box-1{
  grid-row : 1/11;
}

The calculation -> .box-1 holds 1 box, and add 9 more boxes, add mandatory 1 at last to indicate the end 9+1+1=11

The alternative 👇 using the span keyword

.box-1{
  grid-row : span 10;
}

The calculation -> .box-1 holds 1 box, and add 9 more boxes
9+1=10

The result so far 👇

grid-area :

At first, we need to setup grid-template-areas ☝️ Once done, we have to specify the names used in parent class inside the children classes, like this👇

Specifying grid-template-areas inside parent container 👇

Like this 👇 inside parent class

.container {
  display: grid;
  gap: 20px;
  height: 100vh;

  grid-template-areas: 
    "A A A A   A A A A   A A A A"
    "B B B B   B B B B   B B C C"
    "B B B B   B B B B   B B C C";
}

specifying the names used in parent container inside children classes with grid-areas👇

Like this 👇 inside children classes

.box-1{
  grid-area: A;
}
.box-2{
  grid-area: B;
}
.box-3{
  grid-area: C;
}

Justify-self :

This is used to position 1 individual grid-item (children) inside grid container along the X-Axis[Main Axis]. The 4 values are 👇

Write these to experiment with the values 👇

.container {
  display: grid;
  gap :25px;
  height: 100vh;

/* // each box has equal size */
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

Remember ! This only works on the children classes. So, target any .box-* class. I'll target the 1st box

.box-1 {
/*  Change values 👇  to experiment */
  justify-self : start;  
}

align-self :

This is used to position 1 individual grid-item (children) inside grid container along the Y-Axis[Cross Axis]. The 4 values are 👇

Let's Experiment with the values 👇

.container {
  display: grid;
  gap :25px;
  height: 100vh;

/* // each box has equal size */
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

Remember ! This only works on the children classes. So, target any .box-* class. I'll target the 1st box

.box-1 {
/*  Change values 👇  to experiment */
  align-self : start;  
}

Short Hands

Let's look at these Grid Short-Hand Properties -

place-content
place-items
place-self
grid-template
gap / grid-gap

place-content :

this is the shorthand of 2 properties -

align-content
justify-content

An example

align-content : center;
justify-content : end;

/* The shorthand */
place-content : center / end ;

place-items :

this is the shorthand of 2 properties -

align-items
justify-items

An example

align-items : end;
justify-items : center;

/* The shorthand */
place-items : end / center ;

place-self :

this is the shorthand of 2 properties -

align-self
justify-self

An example

align-self : start ;
justify-self : end ;

/* The shorthand */
place-self : start / end ;

grid-template :

this is the shorthand of 2 properties -

grid-template-rows
grid-template-columns

An example

grid-template-rows : 100px 100px;
grid-template-columns : 200px 200px;

/* The shorthand */
grid-template : 100px 100px / 200px 200px;

gap/grid-gap :

gap & grid-gap are the same thing and does the same work. You can use any 1 of them.

this is the shorthand of 2 properties -

row-gap
column-gap

An example

row-gap : 20px ; 
column-gap : 30px ;

/* The shorthand */
gap : 20px  30px;

Credits

Unicorns
Corgis, kat

Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021

Joy Shaheb ・ Feb 4 '21

#css #tutorial #beginners #webdev

Acing CSS Grid Model in 2021 with 5 Exercises || CSS 2021 🔥

Joy Shaheb ・ Dec 22 '20

#tutorial #beginners #webdev #css

Conclusion

Here's Your Medal For reading till the end ❤️

Suggestions & Criticisms Are Highly Appreciated ❤️

YouTube / Joy Shaheb
LinkedIn / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb

Responsive Navigation Menu for 2021🎖️|| CSS JS

Joy Shaheb — Sat, 13 Feb 2021 21:58:09 +0000

Let's Build a Responsive Navigation Hamburger Menu in 2021 from Scratch for both desktop & mobile screen🎖️

Table of Contents -

Codepen
Setup
HTML
SCSS
JavaScript
Conclusion

Codepen

Youtube

Setup

Come over to Codepen.io or any code editor and write these in scss 👇

// Changing default styles
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  body{
    font-family: sans-serif;
    width: 100%;
    min-height: 100vh;
    font-size: 25px;
    overflow-x: hidden;
  }
}

// Managing all our breakpoints in this map

$bp : (
  mobile : 480px,
  tablet : 768px,
  desktop : 1440px,
);

// Conditional Media query Mixins
// To save time 

@mixin query($screen){
  @each $key, $value in $bp{
    @if ($screen == $key){
      @media (max-width : $value){@content;}
    }
  }
}

HTML

Let's start Coding. Write these in HTML 👇

<!-- Using the BEM naming system  -->
<!-- The Parent holding everything -->
<div class="container">

  <!-- This section carries our header   -->
  <div class="header">

    <!--  Logo here    -->
    <div class="header__logo">LOGO</div>

    <!--  Button Managemnet    -->
    <div class="header__btn">

      <i id="open" class='header__btn-open bx bx-menu' ></i>

      <i id="close" class='header__btn-close bx bx-x hide'></i>

    </div>

    <!--  menu Items here    -->
    <div id="menu" class="header__menu slide">
      <div class="item-1">
        <!--  Using Radio buttons to toggle back & forth        -->
        <input type="radio" checked name="A" id="a">
        <label for="a">Home</label>
      </div>
      <div class="item-2">
        <input type="radio" name="A" id="b">
        <label for="b">About</label>
      </div>
      <div class="item-3">
        <input type="radio" name="A" id="c">
        <label for="c">Services</label>
      </div>
      <div class="item-4">
        <input type="radio" name="A" id="d">
        <label for="d">Contacts</label>
      </div>

    </div>



  </div>

  <!--  This section carries our content  -->
  <div class="main">
    <div class="main__header">Welcome !</div>
    <div class="main__text">
      Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

SCSS


// Style rules for desktop screen
.header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #c1c1c1;
  height: 10vh;
  padding: 0px 10px;

  &__logo{
    cursor: pointer;
  }

  &__btn{
    display: none;
  }

  &__menu{
    display: flex;
    flex-direction: row;
    [class ^="item-"]{
      padding-left: 15px;
      cursor: pointer;
    }

  }

}

// Style rules for .main class

.main{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80vh;
  text-align: center;
}


// Style Rules for Label 

label:hover{
  color : white;
  cursor: pointer;
}

input[type = "radio"]{
  display: none;
}

input[type = "radio"]:checked + label{
  color: white;
  text-decoration: underline;

}



// Media query rules for mobile screen

@include query(mobile){
  .header{
    justify-content:center;

    &__logo{}

    &__btn{
      display: flex;
      position: absolute;
      right : 10px;
      font-size: 40px;
      cursor: pointer;
    }

    &__menu{
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      position: absolute;
      z-index: 1;
      right: 0px;
      top: 10vh;
      background-color: #c1c1c1;
      width: 100%;
      height: 90vh;
      transition: all 0.4s ease;
    }
  }
}


// Style rules when btn is clicked

.hide{
  display: none;
}

.slide{
  right : -100%;
}

JavaScript

// Selecting id from HTML in JS
let open = document.getElementById("open"),
    close = document.getElementById("close"),
    menu = document.getElementById("menu");


// Creating a reuseable function

common = (x,y,z) =>{
  x.addEventListener("click",()=>{
    x.classList.toggle("hide");
    y.classList.toggle("hide");

// defining conditions on if statements
    if(z== "slide-in"){
      menu.classList.toggle("slide");
    }
    if(z == 'slide-out'){
      menu.classList.toggle("slide");
    }

  })
}

// Calling functions here
common(open,close,"slide-in");
common(close,open,'slide-out');

Credits

Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021

Joy Shaheb ・ Feb 4 '21

#css #tutorial #beginners #webdev

Acing CSS Grid Model in 2021 with 5 Exercises || CSS 2021 🔥

Joy Shaheb ・ Dec 22 '20

#tutorial #beginners #webdev #css

Conclusion

Here's Your Medal For reading till the end ❤️

Suggestions & Criticisms Are Highly Appreciated ❤️

YouTube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb

Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021

Joy Shaheb — Thu, 04 Feb 2021 16:34:25 +0000

Here's a practical guide to learn CSS Flexbox in 2021 by Building 5 Responsive Layouts. Let's Go Guys🥇

Check The Figma Design Here

Table of Contents --

Flex-Box Architecture
Setup
Level-1
Level-2
Level-3
Level-4
Level-5
Conclusion

More layout Designs here

Youtube

Flex-Box Architecture

Flex-Box Chart

Here's the complete flexbox cheat sheet

Complete Flexbox Tutorial w/ Cheat Sheet

Joy Shaheb ・ Jan 10 '21

#css #webdev #beginners #tutorial

Setup

Open CodePen / any code editor and place these 👇

SCSS

// defining border color, gap, padding in variables 

$gap : 4vh;
$padding : 4vh;
$color : #48CAE4;

// Defining Break-Points

$bp : (
  mobile : 480px,
  tablet : 768px,
  desktop : 1440px,
);

//Defining our Conditional Media query Mixins.
//To save Time & Coffee.

@mixin query($display){
  @each $key, $value in $bp{

    //  defining max-width
    @if ($display == $key){
      @media (max-width: $value){@content;}
    }
  }
}

Again.........

//Changing The Default Settings..

*{
  margin:0px;
  padding: 0px;
  box-sizing: border-box;
  body{
    width: 100%;
    min-height: 100vh;
    font-family: sans-serif;
    font-size: 45px;
  }
}

Level-1

HTML

<!-- container class holds 3 children
block-1, block-2, block-3 -->

<div class="container">

<!--block-1 has 3 children, box-1,box-2,box-3 -->

  <div class="block-1">
    <div class="box-1">A</div>
    <div class="box-2">B</div>
    <div class="box-3">C</div>
  </div>

<!--similar to block-1, values are changed -->

  <div class="block-2">
    <div class="box-4">D</div>
    <div class="box-5">E</div>
    <div class="box-6">F</div>
  </div>

<!--similar to block-1, values are changed -->

  <div class="block-3">
    <div class="box-7">G</div>
    <div class="box-8">H</div>
    <div class="box-9">I</div>
  </div>
</div>

SCSS

// Style rules for container class

.container{
  display: flex;

//to lay .block-* classes in a column
  flex-direction: column;

//Setting gap between the .block-* classes
  gap: $gap;
// to set some padding & border inside
  padding: $padding;
  border: 1vh solid $color;
}

// To select all the .block-* classes

[class ^="block-"]{
//To lay the boxes in a row.
  display: flex;
  flex-direction: row;

//Removing border(1vh+1vh), gap, & padding from the height
// And then equally distributing spaces between the 
// .block-* classes by dividing it by 3
  height: (100vh-2vh -$gap*2-$padding*2) / 3;

// putting gap between .box-* classes
  gap: $gap;

// Style rules for mobile display
  @include query (mobile){
    flex-direction: column;
// you can pick any value you wish.
    height: 500px;
  }

}

// To select all the .box-* classes

[class ^="box-"]{

// To set the text at center of every box
  display: flex;
  justify-content: center;
  align-items: center;

// To divide spaces among the boxes
// try flex-gap:1; you can see the difference.
// flex-grow: 1; // 1+1+1 =3 => 1/3 X 100% => 33.33% each

  flex-basis: (100%)/3; // 33.33% each
  border : 2px solid black;
  border-radius: 10px;
  background-color: #c1c1c1;
}

Level-2

HTML

<div class="container">
  <div class="item-1">Home</div>
  <div class="item-2">About</div>
  <div class="item-3">Services</div>
  <div class="item-4">Contact</div>
</div>

SCSS

.container{
// Change the Font-size 
  font-size: 35px;
  display: flex;

//To set orientation of the items
  flex-direction: row;

// To distribute available space
  justify-content: space-evenly;
  padding: $padding;
  border : 1vh solid $color;

// style rules starts from Tablet Screens
  @include query(tablet){
//Changing orientation of the items
    flex-direction: column;
    align-items: center;

//Setting gap for items Vertically
    gap: $gap 
  }
}

Level-3

HTML

<div class="container">
  <div class="block-1">Left</div>
  <div class="block-2">Right</div>
</div>

SCSS

.container{
  display: flex;
  flex-direction: row;
  gap: $gap;
  padding: $padding;

// Style Rules for Mobile Display
  @include query(mobile){
    flex-direction: column;
  }
}


//Selecting & styling 2 classes altogether
[class ^="block-"]{

//To put the left, right text at center
  display: flex;
  justify-content: center;
  align-items: center;

  border : 4px solid $color;
//Setting height of each block
  height: 100vh -$padding*2;

// Style Rules for Mobile Display
  @include query(mobile){
    height: 50vh -$padding*2;
  }
}

// Style Rules Left Block
.block-1{
//will occupy 20% of the Available width
  flex-grow: 2;
}

// Style Rules Right Block
.block-2{
//will occupy 80% of the Available width
  flex-grow: 8;
}

Level-4

HTML

<div class="container">
  <div class="block-1">
    <div class="box-1">A</div>
  </div>
  <div class="block-2">
    <div class="box-2">B</div>
    <div class="box-3">E</div>
  </div>
    <div class="block-3">
    <div class="box-4">C</div>
    <div class="box-5">D</div>
  </div>
</div>
</div>

SCSS

// Style rules for .container
.container {
  display: flex;
  flex-direction: column;
  padding: $padding;
  gap: $gap;
}

// Style rules for all .block-*
[class ^="block-"]{
  display: flex;
  flex-direction: row;
  gap: $gap;
// Removing Padding, Gap & divide by 3
  height: (100vh -$gap*2 -$padding*2)/3;

// Style Rules for Mobile Version  
  @include query(mobile){
    flex-direction: column;
  }
}

// Style rules for all .box-*
[class ^="box-"]{
// To place the letter at center
  display: flex;
  justify-content: center;
  align-items: center;

// Border, Border-radius & background-color
  border : 1vh solid $color;
  border-radius: 10px;
  background-color: #c1c1c1;
}


//A
.box-1{
  flex-basis: 100%;
}

//B & D
.box-2, .box-5{
  flex-basis: 70%;
}
//E  & C
.box-3,.box-4{
  flex-basis: 30%
}

// Style Rules for Mobile Version 

@include query(mobile){
  .block-2{
    height: (100vh*2)/3; // 66.66vh
  }
  .block-3{
    flex-direction: row;
  }
//   Selecting B, E, C, D
  .box-2,.box-3,.box-4,.box-5{
    flex-basis: 50%;
  }
}

Are You winning Son? Let's Turn Up the heat 🥵

Level-5

HTML

<div class="container">
  <div class="block-1">
    <div class="box-1">A</div>
  </div>
  <div class="block-2">
    <div class="box-2">B</div>
    <div class="box-3">C</div>
    <div class="box-4">D</div>
  </div>
  <div class="block-3">
    <div class="box-5">E</div>
  </div>
</div>

SCSS

// Style rules for .container
.container{
  display: flex;
  flex-direction: column;
  gap: $gap;
  padding: $padding;
}

// Style rules of all .block-*
[class ^="block-"]{
  display: flex;
  flex-direction: row;
  gap: $gap;
}

// Style rules of all .box-*
[class ^="box-"]{
  display: flex;
  justify-content: center;
  align-items: center;
  border : 1vh solid $color;
  border-radius: 10px;
}

// Defining A & E Together
.box-1,.box-5{
  flex-basis: 100%;
  height: 20vh;
}

// Defining C here
.box-3{
  flex-basis: 60%;
//   Removing Gap & padding
  height: 60vh -$gap*2-$padding*2;
}

// Defining B & D Together
.box-2,.box-4{
  flex-basis: 20%;
}

// Media query for mobile Screen

@include query(mobile){
  .block-2{
    flex-direction: column;
    height: 60vh;
  }
// Hiding our B block
  .box-2{
    display: none;
  }
// Increasing Height of C  
  .box-3{
    flex-basis: 80%;
  }
}

Credits

Acing CSS Grid Model in 2021 with 5 Exercises || CSS 2021 🔥

Joy Shaheb ・ Dec 22 '20

#tutorial #beginners #webdev #css

Conclusion

Here's Your Medal For reading till the end ❤️

Suggestions & Criticisms Are Highly Appreciated ❤️

YouTube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb

Complete Flexbox Tutorial w/ Cheat Sheet

Joy Shaheb — Sun, 10 Jan 2021 16:09:20 +0000

Let's refresh Our CSS Flexbox Memory. Here's a Tutorial & Cheat Sheet of everything you can do with CSS flexbox. Let's Go 🎖️

The original Article at FreeCodeCamp

Table of Contents --

FlexBox Architecture
flex-direction
justify-content
align-content
align-items
align-self
flex - grow | shrink | wrap | basis
Short Hands
Conclusion

You can watch this tutorial on YouTube as well if you like:

FlexBox Architecture

So how does Flexbox architecture work? The flex-items [Contents] are distributed along the Main Axis and Cross Axis. And, depending on the flex-direction property, the layout position changes between rows and columns.

FlexBox Chart --

This chart contains every possible property and value you can use when using flexbox. You can reference it while doing the project and experiment with different values.

How to Set Up the Project

For this project, you need to know little bit of HTML, CSS, and how to work with VS code. Follow along with me ->

Create a folder named "Project-1" & Open VS Code
Create index.html & style.css files
Install Live Server & Run Live Server.

Or, you can just open Codepen & start coding.

At the end of this tutorial, you can make website layouts more accurately.

HTML

In HTML, write these lines of code inside the body tag 👇

<div class="container">
    <div class="box-1"> A </div>
    <div class="box-2"> B </div>
    <div class="box-3"> C </div>
</div>

CSS

target the .container class & all the boxes. Then style the boxes so that all of them looks similar. Like this 👇

Note : don't forget to put the height of the container.

.container{
   height : 100vh;
}

[class ^="box-"]{
    width: 140px;
    height: 140px;
    background-color: skyblue;
    border: 2px solid black;

// To view the letter better
    font-size: 65px;
}

But Wait....

Before starting, you need to understand the relationship between parent & child classes.

Flexbox works on the parent class, not on the children classes.

Here, the .container class is the parent & our .box-* classes are our children.

so, apply the display: flex inside .container class. And place the letters at the center of the box like this ->

.container{
    display : flex;
    height : 100vh;

// To place some gap between boxes
    gap : 25px;
}
[class ^="box-"]{
// Code from previous step are here

// Placing text at center 
    display : flex;
    justify-content : center;
    align-items : center;
}

And.... we're all set! Let's start coding. 😊

flex-direction

The Direction/Orientation in which flex-items are distributed inside flex-container.

To recreate these results, Let's write on CSS These lines ->

Note : We'll write inside .container class

.container{
//code from setup stage are here

// Change the value  👇 here to see results
    flex-direction : row;
}

justify-content

This property arranges flex-items along the MAIN AXIS inside the flex-container

To recreate these results, Write on CSS These lines ->

.container{
//code from setup stage are here

//  Change the value  👇 here to see results
    justify-content: flex-start;
}

align-content

This property arranges flex-items along the CROSS AXIS inside the flex-container. This is similar to justify-content

Please note that, without the flex-wrap property, this property doesn't work, here's the demo ->

.container{

//  Change the value  👇 here to see results
    align-content: center;

// without this line, align-content won't work
    flex-wrap: wrap;
}

align-items

This property distributes Flex-items along the Cross Axis

To recreate these results, Let's write on CSS ->

.container{
//code from setup stage are here

// Change the value 👇 here to see results
    align-items: flex-end;
}

align-self

This property works on the children classes. It positions the selected item along the Cross Axis

In total we have 6 values

flex-start
flex-end
center
baseline
stretch
auto

To recreate the results, select any .box-* & write

.box-2{
// Change the value 👇 here to see results
     align-self : center;
}

flex - grow | shrink | wrap | basis

The properties that we're discussing right now will work when we resize the window. Let's dive right in.

flex-grow : grows the size of a flex-item based on width of the flex-container.
flex-shrink : The ability for a flex item to shrink based on width of the flex-container. Opposite of flex-grow.

To achieve these results, follow me ->

Please Note : flex-grow & flex-shrink works on children classes. So, we will target all our boxes ->

.box-1{
    flex-grow: 1;
}
.box-2{
    flex-grow: 5;
}
.box-1{
    flex-grow: 1;
}

Resize the window & see the results.

To duplicate result of flex-shrink, write ->

Please note : Delete the flex-wrap property, otherwise it won't work.

.box-1{
    flex-shrink: 1;
}
.box-2{
    flex-shrink: 5;
}
.box-1{
    flex-shrink: 1;
}

Now, Resize the window & see the results.

flex-wrap : Amount of Flex-item you want in a line/row.

This works on the .container parent class. So, write ->

.container{
    //other codes are here 

// Change value 👇 here to see results
    flex-wrap : wrap;

flex-basis : This is similar to adding width to a flex-item, but only more flexible. flex-basis: 10em; it will set the initial size of a flex-item to 10em. Its final size will be based on available space, flex-grow, and flex-shrink.

Short Hands

flex : It is a shorthand to flex-grow, flex-shrink and flex-basis combined.

You can try this by writing ->

Please Note : It only works on the children classes

.box-2{
    flex : 2 1 30em;
}

flex-flow : Short hand to flex-direction & flex-wrap

You can try this by writing ->

Please Note : It only works on the parent class

.container{
    flex-flow : row wrap;
}

place-content

This is the shorthand of justify-content & align-content

Let's duplicate the results

Note : It works on the parent class

.container{
    place-content : center flex-end;
}

Credits

Kitty Avatars

Master CSS Flexbox 2021 🔥- Build 5 Responsive Layouts🎖️|| CSS 2021

Joy Shaheb ・ Feb 4 '21

#css #tutorial #beginners #webdev

Acing CSS Grid Model in 2021 with 5 Exercises || CSS 2021 🔥

Joy Shaheb ・ Dec 22 '20

#tutorial #beginners #webdev #css

Conclusion

Here's Your Medal For reading till the end ❤️

Suggestions & Criticisms Are Highly Appreciated ❤️

YouTube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb

Acing CSS Grid Model in 2021 with 5 Exercises || CSS 2021 🔥

Joy Shaheb — Tue, 22 Dec 2020 14:03:27 +0000

Here's a practical guide to learn the CSS Grid System/Model with High Efficiency in 2021 by Building 5 Responsive Layouts across all screen sizes.

Check The Figma Design Here

Table of Contents --

Level-1
Level-2
Level-3
Level-4
Level-5
Conclusion

Youtube

If this is difficult for you then see Step by step Tutorial on Youtube 🔥

Setup 🔥

Open Codepen / any code editor and place these 👇

SCSS

// Defining Break-Points

$bp : (
  mobile  : 480px,
  tablet  : 768px,
  desktop : 1440px,
);

//Defining our Conditional Media query Mixins.
//To save Time & Coffee.

@mixin query($screen){
  @each $key,$value in $bp{

    //  defining max-width

    @if ($screen == $key) {
      @media (max-width : $value){@content};
    }
  }
}

Again .......

//Changing The Default Settings..

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  body{
    font-family: sans-serif;
    font-size:30px;
  }
}

//Defining settings of all .box- classes with
//Border color & placing text at Center.

[class ^="box-"]{
  display: grid;
  place-items: center;

//Set any color you wish for testing purposes.
  border : 3px solid red;
}

We're All Set Boys 😆👌

Level-1

A beginner Friendly Level XD

HTML


<div class="container">
  <div class="box-1">Header</div>
  <div class="box-2">Main</div>
  <div class="box-3">Footer</div>
</div>

SCSS

.container{
  display: grid;
  height: 100vh;

// The Main Sauce. It means, define --
// [.box-1 auto] [.box-2 1fr unit] & [.box-3 auto]

  grid-template-rows: auto 1fr auto;

//Defining gap between rows.
  grid-gap: 10px;
}

level-2

HTML

<div class="container">
  <div class="box-1">Left</div>
  <div class="box-2">Right</div>
</div>

SCSS

For Large Screen


.container{
  display: grid;
  height: 100vh;

// Dividing the Width of screen
// in 12 equal fractions.

  grid-template-columns: repeat(12,1fr);
  grid-gap: 10px;
}

There's confusion in picking number of columns to cover with grid-columns. No need to panic. Just add 1. For this case, we want .box-1 to cover 4 columns. so, we write 1/5. Like this 👇

.box-1{

// Cover 4 columns. 
//So, start = 1 || end = 4+1 = 5;
// grid-column : start/end; 👈 Short-Hand

  grid-column: 1/5;
}

.box-2{

// Cover remaining columns. 
//This value 👇 is taken from .box-1 ☝️
//So, start = 5 || end = 12+1 = 13;
// grid-column : start/end; 👈 Short-Hand

  grid-column: 5/13;
}

For Mobile Screen

// The Media query mixin we defined at start.
//Took (mobile) 👇 from $bp;
@include query(mobile){
  .container{

// Defining that, make the column 1 piece/100%;
    grid-template-columns : 100%; //or, write 1fr

//Defining that, make 2 rows, 1fr (fraction) each,
    grid-template-rows : repeat(2,1fr);
  }

// To remove the previously defined values 
  .box-1,.box-2{
//inherit defines the original value.
    grid-column: inherit;
  }

}

Let's Change the Game with Grid-template areas 😎

Life's Quite Easier With Grid-Template-Areas tbh. It allows us to see visually what we're doing.

Level-3

HTML

<div class="container">
  <div class="box-1">A</div>
  <div class="box-2">B</div>
  <div class="box-3">C</div>
</div>

SCSS

For Larger Screen


.container{
  display: grid;
  height: 100vh;

// Creating a 12 column X 3 row grid 👇

// Defining that 'a' takes 12 columns & 1 row ||'b' takes 8 columns, 2rows || 'c' takes 4 columns, 2rows,
// There is a high chance to get lost here,
// so, divide the areas in 3 columns with blank spaces 👇

  grid-template-areas:
    "a a a a    a a a a    a a a a"
    "b b b b    b b b b    c c c c"
    "b b b b    b b b b    c c c c";
  grid-gap: 10px;
}

.box-1{
  grid-area: a;
}
.box-2{
  grid-area: b;
}
.box-3{
  grid-area: c;
}

For Mobile Screen

@include query(mobile){
  .container{
  grid-template-areas:

    "a a a a    a a a a    a a a a"
    "a a a a    a a a a    a a a a"

    "b b b b    b b b b    b b b b"
    "b b b b    b b b b    b b b b"
    "b b b b    b b b b    b b b b"
    "b b b b    b b b b    b b b b"

    "c c c c    c c c c    c c c c";
  }
}

Level-4

HTML

<div class="container">
  <div class="box-1">A</div>
  <div class="box-2">B</div>
  <div class="box-3">C</div>
  <div class="box-4">D</div>
  <div class="box-5">E</div>
</div>

SCSS

For Larger Screens

.container{
  display: grid;
  height: 100vh;
  grid-template-areas: 
    "a a a a    a a a a    a a a a"

    "b b b b    b b b b    e e e e"
    "b b b b    b b b b    e e e e"

    "c c c c    d d d d    e e e e";

  grid-gap: 20px;
}

.box-1{
  grid-area: a;
}
.box-2{
  grid-area: b;
}
.box-3{
  grid-area: c;
}
.box-4{
  grid-area: d;
}
.box-5{
  grid-area: e;
}

For Mobile Screens :

@include query(mobile){
  .container{
      grid-template-areas: 

    "a a a a    a a a a    a a a a"

    "b b b b    b b b b    b b b b"
    "b b b b    b b b b    b b b b"

    "c c c c    c c d d    d d d d"
    "e e e e    e e e e    e e e e";
  }
}

Are You winning Son? Let's Turn Up the heat 🥵

Level-5

HTML

<div class="container">
  <div class="box-1">A</div>
  <div class="box-2">B</div>
  <div class="box-3">C</div>
  <div class="box-4">D</div>
  <div class="box-5">E</div>
  <div class="box-6">F</div>
</div>

SCSS

For Desktop


.container{
  display: grid;
  height: 100vh;
  grid-gap:10px;
  grid-template-areas: 
    "a a a a   a a a a   a a a a"
    "c c b b   b b b b   b b e e"
    "c c d d   d d d d   d d e e"
    "c c d d   d d d d   d d e e"
    "c c d d   d d d d   d d e e"
    "f f f f   f f f f   f f f f";
}

.box-1{
  grid-area: a;
}
.box-2{
  grid-area: b;
}
.box-3{
  grid-area: c;
}
.box-4{
  grid-area: d;
}
.box-5{
  grid-area: e;
}
.box-6{
  grid-area: f;
}

For Tablet


@include query(tablet){
  .container{
      grid-template-areas: 
    "a a a a   a a a a   a a a a"
    "b b b b   b b b b   b b b b "
    "c c d d   d d d d   d d d d"
    "c c d d   d d d d   d d d d"
    "c c d d   d d d d   d d d d"
    "e e f f   f f f f   f f f f";
  }
}

For Mobile Screen


@include query(mobile){
  .container{
  grid-template-areas: 
    "a a a a   a a a a   a a a a"
    "b b b b   b b b b   b b b b "
    "d d d d   d d d d   d d d d"
    "d d d d   d d d d   d d d d"
    "d d d d   d d d d   d d d d"
    "c c c c   c c c c   c c c c"
    "e e e e   e e e e   e e e e"
    "f f f f   f f f f   f f f f";
  }
}

Complete Flexbox Tutorial w/ Cheat Sheet

Joy Shaheb ・ Jan 10 '21

#css #webdev #beginners #tutorial

Credits :

Inspired from Thu Nghiem Check here

Conclusion

Here's your medal 🎖️ for successfully completing CSS Grid Model/System. ❤️

Suggestions & Criticisms are Highly Appreciated ❤️️

Youtube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb

A Loop can Save 60% Code on Conditional Media Query Mixins || 2021🔥

Joy Shaheb — Thu, 17 Dec 2020 20:43:31 +0000

If other developers are having a difficult time reading your code, then, my Friend, You're doing it Wrong.

In this Blog, I'll share a way to save as much as 60% of code & time in conditional media query mixins using loops So that, Making Responsive Websites becomes as easy as Drinking Coffee in 2021❤️️

Table of contents 🔥

CodePen
Setup
Conclusion

CodePen 🔥

You can find the full code on Codepen

Setup 🔥

HTML :

Copy the code below 👇

<div id="width"></div>
<div class="box"></div>
<div class="text">Resize window to see changes</div>

JavaScript :

To see the screen width in real time, Copy this code 👇

window.onresize = screen;
window.onload = screen;

function screen() {
  myWidth = window.innerWidth;
  document.getElementById("width").innerHTML = "Width : " + myWidth + " px" 
    };

SCSS :

In order to make the loops work, we're gonna place all the screen sizes on a map, and create a color palette for various screen sizes. Like This 👇


// Defining Values in map variables
// If you need to change screen size or color,
// Change it in the $bp, $color map.

$bp : (
  mobile  : 480px,
  tablet  : 768px,
  laptop  : 1024px,
  desktop : 1440px,
  four-k  : 1441px,
);

$color : (
  //   Always write the largest Display First
  //  When using a map with @each loops
  four-k  : red,
  desktop : blue,
  laptop  : purple,
  tablet  : orange,
  mobile  : green,
);

Now, Let's Create the Main Sauce 🤯 ****


@mixin query($screen){
  @each $key,$value in $bp{

    //  defining max-width

    @if ($screen == $key and $screen !=four-k) {
      @media (max-width : $value){@content};
    }

    //  defining min-width

    @if ($screen == four-k){
      @media (min-width : $value){@content};
    }
  }
}

Paste the default Settings on SCSS file

// Changing Default Settings 
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  body{
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: center;
    font-family: sans-serif;
    background-color: black;
    color: white;
    font-size:30px;
  }
}

.text{
  font-size: 17px;
}

Time to drop the Bomb 💣💥🤯

// Implementing the code here with loops
// If you need to change screen size or color,
// Change it in the $bp, $color map.


.box{
  //   Size of the box
  width: 120px;
  height: 120px;
  //   To Place the text at the center
  display: grid;
  place-items: center;
  //   Loop
  @each $key, $value in $color{

    //  *** Remember, Largest Screen First ***

    @include query($key){
      background-color: $value;

      //  Putting screen size names inside the box **(Optional)**

      &:after{
        content: '#{$key}';
      }

    } 
  }
}

BUT.....

What if, you just need to change 1 property in 1 media query?
In this case, do this 👇

.box{
  width: 120px;
  height: 120px;

    //  *** Remember, Largest Screen First ***
    // *** pick any screen size name from $bp

    @include query(mobile){
      background-color: pink;
    } 
}

Conclusion :

Suggestions & Criticisms are Highly Appreciated ❤️️

Youtube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb

Light/Dark Mode Toggle Button Using 1 variable 2021 || CSS JS

Joy Shaheb — Sun, 06 Dec 2020 08:01:10 +0000

If you really want your Readers to Read All of your contents, then having a dark mode is a must on your website.

Because, A dark theme reduces the irritation on readers eyes compared to light mode.

Today, we'll make a Scalable dark/light mode toggler button, & we'll do all the calculation's using 1 scss variable.

Table Of Contents 🔥

Codepen
YouTube Tutorial

Codepen 🔥

You can find the full code on Codepen

Youtube Tutorial 🔥

If the codepen is difficult for you then see Step by step Tutorial on Youtube 🔥

Suggestions & Criticisms are Highly Appreciated ❤️️

Youtube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb

Content Organization with Animated FAQ Accordion in 2021 !🔥|| CSS JS

Joy Shaheb — Tue, 17 Nov 2020 19:54:38 +0000

If Users can't find what they want in a website in the First 3 Seconds, then they're Leaving.

In order to prevent this misfortune, we can organize our FAQ/contents in an Animated Accordion. Like this one below 👇

This Blog is About Building A FAQ Accordion in 2021 using CSS & JS. So, Let's start the Journey 💪

Codepen 🔥

You can find the full code on Codepen

Youtube Tutorial 🔥

If this post is difficult for you then see Step by step Tutorial on Youtube 🔥

Table Of Contents 🔥

HTML
Rules Setup
SCSS
JavaScript
Conclusion

HTML :

We're gonna create 4 div inside a parent div with class name container. Let's start small with 1 item.
Like this 👇

<div class="container">
  <h1>Frequently Asked Questions</h1>

  <div class = "item-1">  </div>

</div>

Next up, setup 2 siblings with class-name .accordion & .panel inside .item-1 class

<div class="container">
  <h1>Frequently Asked Questions</h1>

  <div class = "item-1">
    <div class="accordion">  </div>
    <div class="panel">  </div>
  </div>

</div>

Inside .accordion, create 2 siblings- .title & .icon
Inside .icon, write "+"
Inside .title, write your content, *anything u wish.
Inside .panel, set some dummy text.

<div class="container">
  <h1>Frequently Asked Questions</h1>

  <div class = "item-1">
    <div class="accordion">
      <div class="title">How to Install?</div>
      <div class="icon">+</div>
    </div>
    <div class="panel">
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. 
         Rem commodi provident modi eligendi consequuntur esse 
         consequatur quis corrupti delectus quas.
       </p>
    </div>
  </div>

</div>

Like this, create 4 sibling div, and end up the HTML Part.

<div class="container">
  <h1>Frequently Asked Questions</h1>

  <div class="item-1">
    <div class="accordion">
      <div class="title">How To Install ?</div>
      <div class="icon">+</div>
    </div>
    <div class="panel">
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. 
         Rem commodi provident modi eligendi consequuntur esse 
         consequatur quis corrupti delectus quas.
      </p>
    </div>
  </div>


  <div class="item-2">
    <div class="accordion">
      <div class="title">How To Uninstall ?</div>
      <div class="icon">+</div>
    </div>
    <div class="panel">
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. 
         Rem commodi provident modi eligendi consequuntur esse 
         consequatur quis corrupti delectus quas.
      </p>
    </div>
  </div>


  <div class="item-3">
    <div class="accordion">
      <div class="title">How To Upgrade ?</div>
      <div class="icon">+</div>
    </div>
    <div class="panel">
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. 
         Rem commodi provident modi eligendi consequuntur esse 
         consequatur quis corrupti delectus quas.
      </p>
    </div>
  </div>


  <div class="item-4">
    <div class="accordion">
      <div class="title">Refund Policy ?</div>
      <div class="icon">+</div>
    </div>
    <div class="panel">
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. 
         Rem commodi provident modi eligendi consequuntur esse 
         consequatur quis corrupti delectus quas.
      </p>
    </div>
  </div>


</div>

Rules Setup :

In this part,
We're gonna pick "Poppins" as the font-family,
Create a template using a mixin,
Create some commonly used variables, and
Change default styles by the * selector.


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

//*** Template of the CSS Flexbox Model******

@mixin flex($jus,$ali){
  display: flex;
  justify-content:$jus;
  align-items:$ali;
}

// Commonly used Values/colors as variables

$bgc: #000;
$color-1: #fff;
$color-2: red;

*{
  margin:0px;
  padding:0px;
  box-sizing:border-box;
  body{
    @include flex(center,null);
    width:100%;
    min-height:100vh;
    background-color: $bgc;
    color: $color-1;
    font-family: 'Poppins';
  }
}

SCSS :

First, style the .container

.container{
  width:80%;

  //***Media Query to make the Accordion look good on larger screens.

  @media (min-width: 800px){
    width:45%;
  }

  h1{
    text-align:center;
    font-weight:300;
    margin: 50px 0;
  }
}

Then, style the .accordion

// Targetting & styling all .accordion classes

.accordion{
  @include flex(space-between,null);
  border-bottom: 2px solid $color-2;
  font-size: 22px;
  letter-spacing: 5px;
  // text-transform: uppercase;
  font-weight: 500;
  cursor:pointer;
  transition: all .3s ease;
  &:hover{
    color: $color-2;
  }
}

Next up, style the .panel

// Targetting & styling all .panel classes

.panel{
  max-height: 0px;
  overflow:hidden;
  transition: all 1s ease;
  p{
    margin: 10px 0px 10px 20px;
    text-align:justify;
  }
}

Finally, create an extra .open class to be used in JS

// This is an extra class. It will be used inside javascript.
// it's main task is to change color of accordion title from white to red.

.open{
  color : $color-2;
}

JavaScript :

Explanation is given as comments on the code. If you don't understand this part, then scroll to top, and see the youtube tutorial.


// Targetting all the .accordion classes
let acc = document.getElementsByClassName('accordion')

// console.log(acc);

// Creating a loop to add eventListener to all .accordion classes

for(let i=0;i<acc.length;i++){
  acc[i].addEventListener('click',function(){


//targetting sibling of every .accordion class named .panel class

    let panel = this.nextElementSibling

//if panel is open, then this block will close it on mouse click

    if(panel.style.maxHeight){
      panel.style.maxHeight=null;
      this.classList.remove('open')
      this.getElementsByClassName('icon')[0].innerHTML ='+';
    }
 //if panel is closed, then this block will open it on mouse click
    else{

//Removes everthing on previous accordion on new mouse click       
//by this for loop

      for(let x=0;x<acc.length; x++){
        acc[x].classList.remove('open')
        acc[x].nextElementSibling.style.maxHeight=null;
        acc[x].getElementsByClassName('icon')[0].innerHTML ='+';

      }

 //if panel is closed, then these codes will open it on mouse click & set those specific rules mentioned below.

      panel.style.maxHeight = panel.scrollHeight + 'px';
      this.classList.toggle('open')
      this.getElementsByClassName('icon')[0].innerHTML ='-'
    }
  })
}

Once Again, if this post is difficult for you then see Step by step Tutorial on Youtube 🔥

Conclusion :

Congratulations 🎖️

We're done with the project. 🔥
Let me Know your Thoughts on the Comment Box.

Suggestions & Criticisms are Highly Appreciated ❤️️

Youtube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb

Deploy SCSS Variables & Save Everyday from Today🔥

Joy Shaheb — Mon, 16 Nov 2020 16:18:06 +0000

One of the main task of programming is to find out a shortcut to solve "Repetition". While writing code in CSS, we tend to repeat a lot of code, making our code large, hard to read & change. Out of All the solutions SCSS/SASS provides, one of them is Variables.

🔥Let's look at 4 tricks to Solve code repetition using SCSS/SASS variables.

Table Of Contents 🔥

Media Queries
Responsive Design
Global Scope
Local Scope

1. Media Queries :

Responsive Website, without Media Queries is a Joke! Let's say we have 4 block level, and 10 element level media queries(I follow BEM method). While changing the values of our media queries we have to manually read the whole thing.
But, if we deploy SCSS/SASS variables, then we only need to look at the top of our page. ***Thank me later.

❌Instead Of Doing This❌

//*******  Avoid this system  *******

@media (max-width: 1024px){
  // Contents Here
}
@media (max-width: 768px){
  // Contents Here
}
@media (max-width: 480px){
  // Contents Here
}

✔️Do This✔️

//*******  Follow this system  *******

$laptop : 1024px;
$tablet : 768px;
$mobile : 480px;

@media (max-width: $laptop){
  // Contents Here
}
@media (max-width: $tablet){
  // Contents Here
}
@media (max-width: $mobile){
  // Contents Here
}

2. Responsive Design :

Designers pick 4-6 common numbers to set font size, padding, margin, etc.

Let's say, A Designer has picked 22px for heading, 16px for font size(general), padding between 2 elements of 32px, common margin of 10px, etc.

A Developer has to follow these style guides. While coding, he has to set these values in multiple places. It becomes a nightmare when there's a change in padding from 32px to 20px, and the developer has to read the whole file and change it again.

So, deploy SCSS/SASS variables and next time, look for the values at the top of the page.

❌Instead Of Doing This❌

//*******  Avoid this system  *******

.container{
  color: black;
  font-size: 18px;
  padding :32px;
  margin:10px;
}

✔️Do This✔️

//*******  Follow this system  *******

$color-1: black;
$fs : 18px;
$padding : 32px;
$margin : 10px;

.container{
  color: $color-1;
  font-size: $fs;
  padding :$padding;
  margin: $margin;
}

Quick Tip 💪

You can perform Calculations on the go using SCSS/SASS variables, like this......


$x : 50px;

.div-1{
  width: ($x+$x);     // (50+50) = 100px;
}
.div-2{
  width: ($x*10)/2;   // (50*10)/2 = 250px;
}

3. Global Scope(General Purpose):

Variables once set, at the top of your page, you can use it anywhere as you please. Sample 👇


$color-1 : white;
$color-2 : blue;
$color-3 : black;
$fs: 18px;
$padding: 20px;


.container{
  background-color: $color-3;
  font-size :$fs; 
}

4. Local Scope(Temporary Use):

If you want to set a value for a temporary use, then it's possible to create local scoped variables for temporary use.
**P.S : for this to work, set variables inside code blocks.
Sample 👇


//These are Global Scoped Variables

$color-A : white;
$color-B : black;


.div-1{

// This is Local Scoped Variable

$color-1 : green;

  background-color : $color-1;

}


.div-2{


//**** This will not work  ****
  background-color : $color-1;


//*** This will Work ****
  color : $color-A;

}

Conclusion :

So, we're Done with the Tutorial Ladies & Gentlemen. Let me know your thoughts on the comment section.

Suggestions & Criticisms are Highly Appreciated ❤️

Youtube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb