Forem: Kawsar Hossain

Exploring the Magic of Sass ✨

Kawsar Hossain — Sun, 20 Aug 2023 09:11:20 +0000

Hey there, let's dive into the enchanting world of Sass! Sass, or Syntactically Awesome Stylesheet, is a powerful scripting language that takes your CSS experience to a whole new level. Think of it as a wizard's toolkit for enhancing your stylesheets with supercharged features.

Unraveling the Mystery of Sass

Sass isn't just a language; it's a CSS preprocessor, which means it extends the capabilities of regular CSS. Imagine being able to use variables, nesting, mixins, and more, all within your stylesheets. It's like adding a touch of magic to your styling workflow.

Different Flavors of Sass

Sass comes in two delightful flavors: .sass and .scss. In .sass, the syntax is clean and indented:

nav
  ul
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 8px 12px
    text-decoration: none

Meanwhile, .scss mirrors the familiar CSS syntax:

nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
  }
}

Unveiling the Power of Variables

Sass introduces the concept of variables, just like programming languages. You prepend a dollar sign to the variable name and assign values like strings, numbers, colors, and more:

$primary_font: Arial, sans-serif;
$highlight_color: crimson;
$base_font_size: 16px;
$container_width: 960px;

body {
  font-family: $primary_font;
  font-size: $base_font_size;
  color: $highlight_color;
}

.container {
  width: $container_width;
}

This magical feature sets Sass apart, especially since CSS custom properties don't enjoy full browser support yet.

Navigating the Nesting Labyrinth

Sass nesting is a superpower! Say goodbye to repetitive selectors. Instead of writing the same selector multiple times in CSS, Sass lets you nest them within each other:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
  }
}

Nesting isn't just for parent-child relationships; it's also perfect for handling pseudo-classes like :hover:

a {
  &:link {
    color: red;
  }
  &:visited {
    color: green;
  }
  &:hover {
    color: hotpink;
  }
  &:active {
    color: blue;
  }
}

Using the & symbol helps weave this enchanting web of selectors.

Marveling at Nested Properties

Nested properties in Sass add elegance to your styling. When multiple properties share a common prefix, you can bundle them together:

body {
  font: {
    family: Helvetica, sans-serif;
    size: 18px;
    weight: bold;
  }
  text {
    align: center;
    transform: lowercase;
    overflow: hidden;
  }
}

By grouping properties, your code becomes cleaner and more manageable.

Summons with @import and Partials

Sass is all about DRYness—Don't Repeat Yourself. You can create partial files with shared variables, colors, and more, and then import them:

@import "variables";
@import "colors";
@import "typography";

// Your main styles here

And if you want to differentiate partials, prepend an underscore like _partial.scss. Sass won't transpile files starting with an underscore.

The Enchanting @mixin and @extend

@mixin is your spellbook for creating reusable sets of CSS properties. It's a boon for maintaining consistent styles:

@mixin important-text {
  color: red;
  font-size: 18px;
  font-weight: bold;
}

.danger {
  @include important-text;
  background-color: green;
}

On the other hand, @extend lets you share a set of properties from one selector to another:

.button-basic {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report {
  @extend .button-basic;
  background-color: red;
}

.button-submit {
  @extend .button-basic;
  background-color: green;
  color: white;
}

While they both help avoid repetition, @mixin is better for standalone reusable styles, and @extend is more suited for inheriting styles.

Looping and Interpolation: The Sorcery Within

Looping in Sass is like weaving spells. Create lists and loop through them to generate CSS:

$sizes: 32px, 48px, 72px;
@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
  }
}

The #{$size} part is interpolation—bringing variables into your strings.

Embracing the Magic of Sass Functions

Functions in Sass let you create reusable pieces of logic. You can even use built-in utility functions for quick styling:

$primary: #11141f;

.box {
  background: lighten($primary, 25%);
  color: darken($primary, 30%);
}

These functions make styling more intuitive and efficient.

The Grand Finale: @mixin vs. @extend

@mixin and @extend serve different purposes. @mixin is like creating a spell recipe. It bundles a set of properties to reuse. @extend is like sharing magic among spellcasters—it lets you extend one selector's properties to another. While both reduce repetition, they shine in different scenarios.

In a world of styles and enchantment, Sass is your trusty wand, weaving efficiency and elegance into your stylesheets. So, harness its powers, and let your styles shimmer and shine like never before! 🌟🎩

Exploring JavaScript Fundamentals!

Kawsar Hossain — Tue, 08 Aug 2023 12:25:07 +0000

What is JavaScript?

JavaScript is a versatile and widely-used programming language primarily used for building interactive and dynamic features on websites and web applications.

Now let’s dive deeper into some intriguing concepts:

High Abstraction

So here the question comes what is abstraction? An abstraction is a way of hiding the implementation details and showing only the functionality to the users.

In the context of programming, abstraction allows developers to work on complex systems or concepts without needing to understand all the underlying complexities

So that means JavaScript is hiding more technical complexities and inner workings from the developers.

When we work with JavaScript, we’re interacting with a high-level language that shields us from the low-level details of memory management, hardware interactions and other technical aspects. This abstraction simplifies the development process, making it more accessible and efficient to create interactive and dynamic web applications.

Garbage Collected

In JavaScript, we don’t need to worry about garbage cleanup. An algorithm inside JavaScript takes care of garbage collection and cleaning.

So, when you’re done using something in JavaScript, like an old toy you don’t play with anymore, you can just forget about it. The garbage collector will swing by when you’re not looking and scoop up all those forgotten things, freeing up space for new things you want to use.

JIT compiled

JavaScript is not purely interpreted language; rather, modern JavaScript is Just in Time compiled. It’s a process that dynamically translates the human-readable code into machine-executable code at run time, significantly enhancing its performance and execution speed.

In contrast, an interpreted language like Python or Ruby directly executes the source code line by line without an intermediate compilation step. This can lead to comparatively slower execution speeds since the code is translated on-the-fly during runtime.

On the other hand, a compiled language, such as C++ or Java, first translates the entire source code into machine code before execution. This often results in faster performance compared to interpreted languages as the compilation step optimizes the target platform’s code before execution.

Multi-paradigm

First, what is a paradigm? Well, the paradigm is a mindset of code structure that will determine your coding style.

In programming, going multi-paradigm means something cool -it’s about mixing and matching different programming styles within one programming language. Each style or paradigm brings its own set of tools and techniques to the table. When you blend these paradigms, you get a coding toolbox that’s more diverse and versatile, kind of like having a bunch of superpowers.

In JavaScript, there are:

Procedural Programming(step-by-step instructions)
Object Oriented Programming or (OOP)
Functional Programming(FP)

So, when you go multi-paradigm with JavaScript, you’re not stuck with just one way to code — you get to pick what works best for each situation.

Prototyped-based

In JavaScript, nearly everything is treated like an object, except for the primitive data types.

Now, a “prototype” is like a blueprint or a template that an object can inherit properties and methods from. It’s like a handy guide that helps objects know what they can do and how they should behave. So, instead of creating every object from scratch, JavaScript lets you create one object with all the cool stuff, and then other objects can borrow those cool traits.

Let’s say you have a “Car” object with all the details about speed, colour, and even how to start the engine. You can then make new car objects that inherit all these details, and you can even add or change stuff if you want — it’s like making customized versions of the original.

So, when JavaScript is prototyped-based, it’s all about this dynamic link between objects.

Functions are the first-class citizen

This means you can treat functions like VIPs in the world of programming. They are so flexible that you can toss them around wherever you like. It’s like having these versatile tools that you can use however you want.

For example, You can treat functions as available. You can pass a function as a parameter of a function. You can return a function from inside of another function. This feature gives a lot of flexibility while using functions

Dynamically Typed

This means you don’t have to play the “label game” when you create a variable in JavaScript. You know how, in some languages, you have to put a tag on your variable saying it’s a number, a text, or something else? Well, in JavaScript, you’re free from that hassle.

When you declare a variable, you don’t need to say, “Hey, this is going to be a number!” or “Hold on, this will be a string!” No tags, no declarations — you can just dive right in.

Single-Threaded

Single-threaded means the execution of instructions happens in a single sequence. It’s like having a single-lane road where cars follow each other in a straight line, without any branching or parallel paths.

So, when your code runs single-threaded, it’s like taking one step at a time — no jumping ahead or going in different directions. It’s like reading a story from the beginning to the end, not skipping chapters.

Some topics on Javascript methods.

Kawsar Hossain — Sat, 25 Dec 2021 13:01:22 +0000

Overview: Today in this article we will know about some topics/methods of Javascript.

1- Javascript string
charAt: The charAt() method returns the character at the index which will be given in this(index) method in a string.
const text = 'hello world';
console.log(text.charAt(6))
// and the answer will be "w" becasue in this text the sixth charecter is w and the charat method check the text and give the answer depened on the index that we have provided in this method

concat(): This method is used for concatenate strings together.
const textOne = 'Hello';
const textTwo = 'World';
console.log(textOne.concat(textTwo))
// and the answer will be "helloWorld" we can concate more string like this

*includes(): * This method returns true if a string contains a specified string. Otherwise, it will returns false
const text = "hello world";
console.log(text.includes('world'))
// and the answer will be true because the method checked the text variable with the string that we are given in the method and the method finds it true and return true

endsWith(): This method will return true if the a string ends with a specified string otherwise it will return false, and this method is case sensitive.
const line = "hello there what's upp";
console.log(line.endsWith('upp'))
// and the answer will return true because here in this method the the text ends with the string 'upp' and we provide the 'upp' string text and its matched that's why it return true

indexOf(): This method will return the position of the first occurrence of a specified value in a string.If the value isn’t available in the string then it will return the -1 value otherwise it will return the index.We can also set the starting index in indexOf method so that it can start the method from there.
const array = ["one", "two", "three", "two"];
console.log(text.indexOf('two'));
// and the answer will be 1 index number because here in this method we provided the 'two' and this method finds the first 'two' in the one number index and it will return 1
const array = ["one", "two", "three", "two"];
console.log(array.indexOf('two', 2));
// Now here it will search the index of ‘two’ from the second index. and it will return 3
lastIndexOf(): This method also works like indexOf but this method start searching from the last index
const array = ["one", "two", "three", "two"];
console.log(array.indexOf('two'));
// Now here it will search the index of ‘two’ from the last index. and it will return 0 because this method start searching from the last index

replace(): this method is used to replace a string with another string we can add/give two-parameter one is what we want to change another is what will be the new string. And we can also replace with all match strings using a regular expression like this
const textOne = 'hello world';
console.log(textOne.replace('hello', 'hi'));
// and the output will be come 'hi world'

const textTwo = 'hello there ! hello'
console.log(textTwo.replace(/hello/g, 'hi'))
// and now the output will be come like this: 'hi world ! hi' because it replace the all matching string that we given in the first second paremeter

trim(): using this method we can remove the extra spaces in our strings we don’t need any parameter in this method we can use this normally like this
const text = ' hello '
console.log(text.length)
// here is the length of this text varibale is 15 now we will going to trim it using trim
console.log(text.trim())
// now the length will be 5 because we trimed the text variable

isNaN(): The isNaN method is used to check the given value is a number or not if the value is a number then it will return false and if the number is not a number then it will return true.
const number = 100;
console.log(isNaN(number))
// here the answer will be false because the given value is an number.

Split(): The split method splits or divides the string depending on the value of the method that we are going to add. And it will return an array. Just like if we want to divide a string into the spaces of string we can run the code like this
const text = 'hello World! How are you?'
console.log(text.split(' '))
// here the answer will be look like this [ 'hello', 'World!', 'How', 'are', 'you?' ] because we divide the string by the spaces

findIndex(): This method returns the index of the first element in the array that is matched with the provided testing function in findIndex. And if the value is not matched with the array then it will return -1 we can check/ use like this
const numbers = [10, 20, 30, 40, 50];
const result = numbers.findIndex(number => number > 20 && number < 40)
console.log(result)
// and here the answer will be 2 because the match first match index is 2

join(): This method creates or concatenates and returns a new string by concatenating all of the elements in an array.
const books = ["Bangla", "English", "Math", "Physics", "Chemistry"]
console.log(books.join())
// and here the answer will be like this "Bangla,English,Math,Physics,Chemistry" because this method concatenates the values and return as a string.

reduce(): using this method we can use another call back function on it we can give it two-parameter and we can make them how to work and we have to give the initial value. After run this method it will return a single value
const numbers = [10, 20, 30, 40, 50];
const sum = numbers.reduce((previousValue, currentValue) => {
return previousValue + currentValue
}, 0)
console.log("the sum is", sum)
// now the result will be 150 because it takes all the array elements into the reducer and do the addition with the previousValue and Next value and its starts with the 0

Some topics about backend developement !

Kawsar Hossain — Thu, 23 Dec 2021 17:38:43 +0000

Overview: Today in this article we will going to know about some backend development topics.

CRUD Operations
CRUD is an abbreviation that stands for Create, Read, Update, and Delete. These four are the most basic operations which can be performed with most traditional database systems and they are the backbone for interacting with any database. Let’s get started to understand the concepts of CRUD operations.
Create: This operation is performed to send or post the data on the server. On our website, we have to store multiple just as text, image, address, date, etc to store this kind of data we need to post them on the database. The create operation is performed to post data in the database.
Read: This operation is performed to get the data from the database. When we visit a website under the hood they send a GET request to the server to perform this read operation. That means the Read operation is performed to get the data from the database.
Update: This operation is performed to update any value which is already in the database. This operation sends a PUT request to update the specific value in the database.
Delete: This operation is performed to delete any specific value in the database. We can delete any kind of value by using this delete operation.

JWT
JWT the full form of JWT is JSON Web Token. This token is used for security purposes.JWT is a good way of securely transmitting information between parties because it can be signed. Normally if we say that the JWT is a way to identify the owner of some JSON data, It’s an encoded, URL-safe string It can contain an unlimited amount of data. When a server receives a JWT token, it can guarantee that the data contained can be trusted because it’s signed by the source. No middleman can modify a JWT once it’s sent.JWT guarantees data ownership but not encryption that means the data can be seen by anyone that intercepts the token because it’s serialized, not encrypted. The JWT is mostly used in API authentication and server-to-server authorization.

Mongoose
Mongoose is a Javascript framework that is commonly used in NodeJs applications with the MongoDB database. It is an Object Modeling library for MongoDB. Mongoose manages the relationships between data, provides schema validation, and is also used to translate between objects in code and the representation of those objects in MongoDB. Mongoose helps to validate the collection of the MongoDB database and it can be done easily. Mongoose has a predefined structure that can be implemented on the collection. Constraints can be applied to documents of collections using Mongoose.

Relational database (MySql)
A relational database is a collection of data that pre-defined relationships between them. And these data are organized as a set of tables with columns and rows. That means we have to store the data on a relational database in a column and row-wise. Relational databases are vertically scalable and vertical scaling refers to increasing the processing power of a single server. The performance is poor in relational databases but its speed is considerably higher because of its ease and simplicity. And also there are various optimizations that are included in a relational database further increase its speed.

Aggregation
Aggregation is a framework that allows us to analyze our data in real-time. The main and the key element in Aggregation is called the pipeline. The Aggregation pipeline consists of one or more stages that process the documents and each stage performs an operation on the input documents

Express
Express is an open-source web application framework for NodeJs it helps to create and maintain the server. It is a server-side framework for building single-page, multipage, and also for hybrid web applications. Express js makes the backend development easier for the developers it is easier to write secure, modular, and fast applications using this Express js.Express Js is easy to configure and customize.

About ReactJs !

Kawsar Hossain — Thu, 23 Dec 2021 15:13:08 +0000

Overview: Today in this article we are going to know about some core features of React

PropTypes
PropTypes is a library that helps in finding the error in props. Like if we need to send data to the other component in the string, but if we accidentally send the data in number then we will not get the output that we are expecting and it will be tough to identify the problem we were made but by using this propTypes library we will get the error if we send string except number. In propTypes we can set the types of the prop just like this
import PropTypes from "prop-types";
function DisplayData ({name, age}){
return Hello there this is ${name} and my age is ${age}
}
DisplayData.propTypes = {
name: PropTypes.string, // here the type can be a number , boolean,string, func, object, array symbol
age: PropTypes.number
}
// by doing this if we send data in name and age in different type than if will console an error . we can also add isRequired so that if we use the prop in anywhere but the data is not send via prop then it will console an error we can use this like that
name: PropTypes.string.isRequired,
// we can also check the node, elemet etc here

State-props
The state is used for managing data we can keep our data in the state we can update the data or modify the data, and the state is internal and is controlled by itself. States control the internal data changes. In react we can use or make a state in functional component using the useState hook. Props are used to send data from one component to another component. Props are external and controlled by anything that renders the component. we can’t modify the props it is only readable which means we can only read it we can’t make any change to it.
import React, { useState } from 'react';
const FunctionalComponent = (props) => {
const [texts, setTexts] = useState('');
return (

hello there {props.name}

)
}
// this is the way to make a state in functyional component
// and we can use the props like that. and it should be send the data from another component otherwise we cant get the value

// this is the way to make a state in functyional component

JSX
The full form of JSX is Javascript XML. It allows us to write the HTML directly but it’s not HTML. It looks like HTML and gets transformed to Javascript using Babel.JSX makes the development and debugging process very easy and handy. Here is an example how we can write JSX in our react app.
import React from 'react';
const Home = () => {
return (

Hello world

Hello There This is an peragraph tag

)
}
// This is JSX its look like HTML but its not HTML it will be transfromed to this via babel
React.createElement("div", null, /#PURE/React.createElement("h1", null, "Hello world"), /#PURE/React.createElement("p", null, "Hello There This is an peragraph tag"));

Component Lifecycle
The lifecycle of a react component means the groups of methods that are invoked in a different stage of the component’s existence. Each component in React has a lifecycle that goes through three main phases Mounting, Updating, and Unmounting. When the components are mounted on the DOM (birth). They grow by updating and then unmount on DOM (death) this is the React component lifecycle.

Hooks
Hooks allow us to make a hook with the react state, lifecycle features using the functional component. React functional components allow us to use the hooks because the Class components are no longer needed and the hooks replace the class component. There are multiple hooks available in react library such as useState, useEffect, useReducer, useRef, useContext, useMemo, useCallbeck, etc. We can also make our own hooks to reuse our code. The most used hooks are useState by using this we can manage our state in a component used can also share the state using props. useEffect this hook is used for making or doing the side effects in a component,

custom hooks
Custom hooks are just a Javascript function created to reuse the stateful logic. We can create multiple custom hooks for our components to reuse them
import React, { useState, useEffect } from 'react';
export const useData = () => {
const [allData, setALlData] = useState([]);
useEffect(() => {
fetch('https://heroku/amateur-pgotograpger')
.then(response => response.json())
.then(data => setALlData(data))
}, []);
return {
allData,
setALlData
}
}
//this is an example of custom hook we can make multiple of hooks like that to reuse them in our multiple componenets

context API
Context API provides a way to pass data through components without doing the prop drilling. It allows us to make global variables, and we can call them or use them where we want using use context. In react component state if we want to share the state we can only share the state from parent to the child or if we want to share the state in multiple components then we have to do the lifting the state up and we have to send the data using the prop dilling which is not good for our web app. But using the context API we don’t need to do the prop dilling to pass data we can call the state using the context API hook use context then we can use the state. To create a context API
we need the createContext hook and to use that we need useContext.

Virtual DOM and diffing- algorithm
A virtual DOM is a lightweight Javascript representation of the real DOM. It has the same properties as real DOM. But the real DOM manipulating is slow whereas the virtual DOM manipulating is much faster than that Because by using the virtual DOM, we can find out what is changed and with that, we can apply only those changes to real DOM instead of replacing the entire DOM. And the diff algorithm compares two sequences and finds out the changes after that it updates the real DOM.

About some Javascript topics

Kawsar Hossain — Wed, 22 Dec 2021 17:19:00 +0000

Overview: Today in this article we will go to know about some topics that are used most in Javascript but we don’t know what actually is.

Null Vs Undefined
The difference between null and undefined is null is an assignment value that means we have to assign it, which basically means it’s blank. Whereas undefined means that the variable has been declared but its value isn’t assigned yet Undefined and null are two different types undefined is a type itself(undefined) in contrast null is an object. Here is an example:
let undifinedValue
let nullValue = null
console.log(undifinedValue, nullValue)
// and here the first one answer will be undefined and the second one is null the first one is undefined because we initialize the variable but we are not assign any value that's why its undefined and the second one is null because we assigned it as a null value

double equal (==) vs triple equal (===)
The double and triple equal is used to compare two variables. The “==” double equal is only checked quality in value, in contrast, the “===” triple equal strictly checks the quality in the values as well as in the type of the variables. Here is an example:
const one = 10;
const two = '10';
console.log(one == two)
// Here the answer will be true because == equal is only check the value it does not check the type of the value
console.log(one === two)
// and here the answer will be false because === equal check the value of the variables and as well as the type of the variable

implicit conversion
Implicit Conversion is also known as 'automatic type conversion' that means it will automatically change the type of the value when it will be needed. Here is an example of implicit conversion
const one = 10;
const two = '10';
console.log(one == two)
// Here the answer will be true because == equal is only check the value, but here the varibale named two which is a string type but here the inplicit corection us used it automaticlly change the type of the variable to the number and show the output true

Closure
A closure is a function that has access to the variable from another function’s scope. The closure is created every time when a function is created. To use the closure we have to define a function inside another function and expose it. The inner functions will have the access to the variable outer function that’s how the closure works.

function makeClosure() {
const text = 'Hello world';
function child() {
console.log(text) // parent element
}
return child
}
const myFunc = makeClosure();
myFunc()
// this is an example of an closure that how it cann access the parent elemnets

Encapsulation
Encapsulation is the process of combining data and functions into a single unit called class. In Encapsulation, the data is not accessed directly access to that data because the data is restricted from outside the class. This process is used for or the class is used for making the data restricted because if we write code more than 500 lines or less than that and if we make a variable that already exists then it will be conflict and gives an error to prevent them we use this class to make the data restricted. By using this we can make the same name variable but the variables and functions are will be only available on the unit.

bind, call, and apply
The bind() method allows an object to borrow a method from another object without making a copy of that method. The bind method creates a new function and sets the “this” keyword to the specified object. The call() allows for a function/method belonging to one object to be assigned and called for a different object. The call method sets the “this” inside the function and immediately executes that in the function. The apply method is a little bit the same as to call method. The difference is that the apply method accepts an array of arguments instead of comma-separated values.

Prototypical inheritance
The Prototypal Inheritance is a feature in javascript used to add methods and properties to objects. The prototypical inheritance refers to the ability to access object properties from another object we can inherit the properties, methods, from another object using this prototypical inheritance. That means we can make methods in objects and we can inherit the properties from the object in our method

Event bubble, Event delegate, and purpose of Event bubble
Event bubbling is a method of event outreach in the HTML DOM API. Event Delegation is primarily a pattern to handle events efficiently. Rather than adding an event listener to each and every similar element, we can add an event listener to a parent element and call an event on a special target using the target property of the event object. And we can access all the elements without adding the listener to them all and we can access of modify them
document.querySelector('#container').addEventListener('click', (e) => {
console.log(e.target.class)
})
// using this target we can select the inner elements

What is DOM (Document Object Model)
DOM basically stands for document Document Object Model. It’s a programming interface that allows us to create, change or remove elements from a document. It also allows us to add events on these elements to make our webpage more interactive and dynamic. using this DOM we can change the HTML document using Javascript Here is an example:
document.getElementById('container').addEventListener('click', () => {
const button = document.getElementById('button');
button.innerText= 'hello world'
})
// here is an simple example that how we can select document elements and we can change here

What is an API, the purpose of API, GET, POST
Well API stands for the application programming interface, it is a software intermediary that allows two applications to talk to each other. We can send our data to the server using API we can get the data etc we can do it with API. Get, using this get method in API we can request to the server for our required data. Post, this method is used to send the data to the server.

About some CSS topics

Kawsar Hossain — Mon, 20 Dec 2021 17:18:31 +0000

Overview: So Today we will going to discuss some CSS properties which are advanced and not usually used frequently like other properties.

Float: The CSS float property is used to align the items to the left, right. That means we can create a simple layout using float. Nowadays float property isn’t used by the developers. Float property values are left, right and none using the default value is none we can align the element to the right using right and if we want if the element start’s in right then we can align them left if we want and we can also use the none value for removing the left, right value. When we use the float property sometimes we need the clear property as well because when we use the float property some elements are overlapped in other elements that are we need to use this clear property. In clear property set the value to left, right and both that means of the element overlapped on the left side then we can use the left value and if right then we can use the right value and if we need then we can add both values which will clear the overlapping from left and right as well.

Animation: We can make an animation to use in our webpage using CSS animation. To make animation we have to use the @keyframes this property. And here we can make different kinds of animation make first we have to define an animation-name so that we can call it where we need it. We can make animation in keyframes using from and to or using the units like %, pixel. We can use the animation where we want in CSS to call the animation we have to use the animation-name property, we can also more animation properties like animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state. And these properties have multiple values we can use all these properties in shorthand using only animation property.

*Variable: * we can make variables in CSS and these variables have access to the DOM, and CSS variables are can be global or local scope. To make a global variable in CSS what we have to do is we have to declare the variable inside the :root{} inside this we have to declare the variable using – two dashes like this root{–color: #ffffff;} and we have to use these variables using var(variable name) like this h2{background-color:var(--color)} the advantage of variable in CSS are it makes code easier to read and if we need any changes then we don’t need to change everywhere we can simply change the variable value.

Empty-cells: using empty-cell we can hide the cell border and background in the table. It tells the browser not to draw the borders around the table cell. The empty-cell property has two values shown and hides the default value is shown which means it will show the border whether the value is available or not and if we use the value hide the border will be hidden.

*Resize: * Using resize property we can set elements to resizable or in which direction. The default value of resize property is none. We can make the element resizeable from both sides using both values and the user will be able to make or resize the width and the height of the element. We can also make horizontal or vertical using the horizontal and vertical value in horizontal user can resize the element width and the vertical the user can be able to resize the height of the element. We can also use the value initial and inherit

Tab-size: The tab-size property mark the width of the tab character like if we add the value of tab-size 4 then it will take the width of 4 tab size. The tab character is usually displayed as a single space character, except for some elements like textarea, pre.

White-space: The white-space property is used to set the space inside an element, and it helps to control the line breaks, space within the element’s text. In white space, we can set the value to nowrap, normal, and pre, and the normal value is the default. If we use nowrap then our content will go out of the screen and the screen will be scrollable which is not responsive for mobile. And if we use the pre then the content/text will be aligned line depending on the screen.

#100daysofcode [day 12]

Kawsar Hossain — Sun, 26 Sep 2021 20:33:49 +0000

Hey There, the last few days I was learning React JS. and this is the twelve day's post of 100 days coding challenge,

today I make a simple site using React JS .

Here is the Live site: https://online-pc-builder-100days.netlify.app/

Here is the code link: https://github.com/thekawsarhossain/100-days-of-code/tree/main/day%2012/online-pc-builder

#100daysofcode [Day 11]

Kawsar Hossain — Sat, 18 Sep 2021 18:16:14 +0000

Hey Guys, Today is the eleventh day of my 100 days coding challenge , I can't upload the progress of my 100 days of coding just because of my programming course classes , But I always try to keep this challenge.And today i make one of the best site that i've ever made . it's an bank site where you can sign up after that you can login , you can deposit as well as you can withdraw , to make this site I used html , css, bootstrap , js and LocalStorage.
Here is the live site : https://lnkd.in/gggu8mZZ
and here is the code link :https://lnkd.in/gvjHD5Eb

#100daysofcode [Day 10]

Kawsar Hossain — Thu, 09 Sep 2021 21:12:42 +0000

Hey There , Today is the tenth day of 100 days coding challenge ! And Today i tried to know more about local storage and session Storage. and i make this site, here if you add items in this site and do refresh the browser, the items of this site will still remain in this site/page .
code Link : https://lnkd.in/gherj5t6
Live Site : https://lnkd.in/gQwgWkRM

#100DaysOfCode [ Day 09]

Kawsar Hossain — Sat, 04 Sep 2021 22:04:01 +0000

Hey There , Today is the nineth day of my 100 days coding challenge and today i just go back to vanila css and tried a simple just to recap the css thats all .
Here is the live site : https://lnkd.in/gbqqSsk6
code link : https://lnkd.in/g9mRbucd

#100daysofcode [Day - 08]

Kawsar Hossain — Thu, 02 Sep 2021 14:30:26 +0000

Hey guys! today is the eighth day of my 100 days coding challenge and today i tryed to make site using api .
here is the live site : https://lnkd.in/gVZF34cv
and code link is : https://lnkd.in/guFKMxSr