Web Development: October 2021

Sunday, 31 October 2021

Layout structure - CSS

Layout structure :

The layout is the way text, images, and other content is placed on the web page. The layout gives the page a visual structure into which we place our content. Building a layout is arranging the page elements into a visual structure instead of simply having the elements to be placed one after another.

There are two layouts in CSS

Page layout
Content layout

In general, the content layout is arranging the content within the element as required and the page layout is arranging the elements in the page.

There are three types of built-in layouts.

Float
Flexbox
Grids

Float Layout:

Float property tools are used most commonly for creating multiple column layouts on the webpage. This property is getting old, still used but getting outdated.

Flexbox:

Flexbox is a one-dimensional layout method for laying out items in rows or columns. Flexbox is perfect for content layout and for mobile sites.

Grid:

Grid is a two-dimensional layout method for the web. It allows laying the content in rows and columns. Grid is perfect for page layout and for complex components.

Thank You!!!

Have a good day!!!

Saturday, 30 October 2021

Transparent color overlay - CSS

To make a transparent cover overlay for the image i.e, to make a tint effect on the image, we use the pseudo-elements method to achieve this. The image may be a background image or a particular image in an element or it may be an element or it may be a list of images. Make sure the image is wrapped by a div element or any other element and have a class for the div or the particular element.

Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>TINT EFFECT</title>
    <link href="./style.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="tint">
            <img src="./CSS.jpeg" alt="CSS">
        </div>
    </div>
</body>

</html>

In the above example, the CSS.jpeg image is wrapped by a div element with the class tint.

In your style sheet use the class value as the selector and assign the properties as per the requirement and have the position as relative

* {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: auto;
}

.tint {
    width: 100%;
    height: auto;
}

Then create a pseudo-element for the class of wrapped div, for this selector we are giving the properties as position absolute. When the position is absolute, values for top, left are required and assign the required background color with opacity value for the color.

.tint::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 0, 85, 0.445);
}

img {
    width: 100vw;
    height: 100vh;
}

The above style properties do the trick, we have the pink tint over the image.

Here the image is fixed in its position with relative to the wrapped element. In pseudo class element to make the same element relative, so the background color overlayed on the image.

Thank you!!!

Have a good day !!!

Thursday, 28 October 2021

Re-sizing images automatically to div size

To get a responsive image to the div container size max-width property is used. The resize property will not work without the image width and height defined. Width property is also be used instead of max-width but the height value should be auto to achieve the responsive image

img {
    max-width: 100%;
    height: auto;
}

The above property will work fine to get a responsive image.

The width of 100% takes the full width of the parent element and similarly for the height. The width and height of the image are adjusted to the div container.

Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Image resising</title>
    <style>
        .container {
            width: 50%;
            height: 500px;
            margin: auto;
        }

        .empty {
            width: 50%;
            height: 100px;
            background-color: blueviolet;
        }

        img {
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="empty"></div>
        <div class="image">
            <img src="./CSS.jpeg" alt="CSS">
        </div>
    </div>
</body>

</html>

Output:

In the above case, the image width will be 50% of the window it is displayed. Because the container size is 50% of the body element. The size of the image is changed according to the window size.

Thank You!!!

Have a good day!!!!

Wednesday, 27 October 2021

SCOPING IN JAVASCRIPT

SCOPING:

Scoping controls how our program variables are organized and accessed, i.e Scoping asks the program where do the variables are present / where can access the variable and where the variable is not allowed to access. In javascript, there is lexical scoping. Lexical scoping is controlled by the placement of functions and blocks in code. There are three types of scopes

Global Scope
Function Scope
Block Scope

GLOBAL SCOPE:

Global scope is where the variable is declared outside of any block i.e this variable can be accessed everywhere in the program.

Example:

let x = 1;
let y = 2;

for (let i = 1; i < 5; i++) {
    x *= i;
    y *= i;
}

console.log(x, y)

// Result
// 24 48

In the above case, the variables x and y can be accessed within for block but the variable i cannot be used outside the block. So the variables x & y are global variables.

FUNCTION SCOPE:

Function scope is the variables are declared inside the function. These variables cannot be accessed outside the function. The. function scope is also called the local scope.

let a = 0;
const x = function (y) {
    a = a + y;
}

console.log(y);

//Output
// Reference error

In the above case, we want the y variable to log in to the console. But variable y is the function scope variable, when we access the variable out of its scope, would give us a reference error.

BLOCK SCOPE:

The variables which are declared inside the code blocks have the block scope. These variables cannot be accessed outside the block, however, this only applies to let and const variables. If the variable is declared by var this can be accessed outside the block. So let and const are said to be block variables.

And in strict mode, the functions are also block scoped.

Thank You!!!!

Have A Good Day !!!!

Tuesday, 26 October 2021

DOM MANIPULATION

DOM - Document Object Model, It is an API (Application Programming Interface) for manipulating HTML . They represents HTML structure. The structure is like tree. These documents allow JS to manipulate the HTML document.

The below example shows the DOM structure.

<html lang="en">
<head>
    <title>Document</title>
</head>
<body>

    <h1>DOM MANIPULATION</h1>

<p> DOM - Document Object Model</p>

</body>
</html>

Once the HTML file is created the DOM is created, with the help of the DOM we can manipulate the HTML using JS. Let's see some methods of DOM manipulation.

document.getElementById("id-value"):

We can select the element by its id value in the document.

<p  id="para"> DOM - Document Object Model</p>
<script>
    console.log(document.getElementById("para")) 
    //  console - "DOM - Document Object Model"
</script>

document.getElementByClass("class-value"):

We can select the element by its class value in the document.

<p  class="para"> DOM - Document Object Model</p>
<script>
    console.log(document.getElementByClass("para")) 
    //  console - "DOM - Document Object Model"
</script>

document.createElement("element"):

We can create an element in HTML using document.createElement

document.removeElement("element"):

We can remove an element in HTML using document.removeElement.

There are many other ways to manipulate the HTML content using Javascript. DOM manipulation enables the web in more interactive way. These made the web more attractive, user friendly and more interactive.

Thank You!!!

Have a good day!!!

Monday, 25 October 2021

INLINE, BLOCK and INLINE BLOCK ELEMENTS - CSS

BLOCK ELEMENTS:

Elements which occupy 100% of parents element width, no matter the size these elements are block level elements. These elements are stacked vertically by default one after another. Elements are formatted visually as blocks. Most of the HTML elements are block level elements.

Eg: main, body, header, footer, p, div, section, etc.

Even the elements which are not block elements can be converted into block elements using the display property.

display: block;

INLINE ELEMENTS:

Elements which occupies the only spaces necessary for its content, are inline elements. Since these elements occupies the necessary space, there are no line breaks after or before the elements. Box model applies in different way here, height and width properties do not apply and paddings and margins are applied only horizontally i.e: (right and left side of the elements). Some of the HTML inline elements are given in the below example.

Eg: a, img, strong, em, button, etc.

Block elements and inline block elements can be converted into inline elements using the display property.

display: inline;

INLINE-BLOCK ELEMENTS

The elements which behaves like a inline from the outside, behaves like block level on inside. i.e The elements occupies only the necessary space for the content and causes no line break but the box model is applied as in the block level elements so the height and width properties applied here.

For example image element is an inline block element.

The other element can be converted as inline block using display property .

display: inline-block;

THANK YOU!!!

HAVE A GOOD DAY!!!