DEV Community: Surendrababuvunnam

proto and prototype chaining

Surendrababuvunnam — Sat, 14 Jan 2023 08:13:54 +0000

hey guys today I am writing about prototype chaining or inheritance chaining

before going into the the topic it should be noted that nearly every-thing is an object or an instance(copy) of an object other than primitive variable (except string which is some kind of object).

let's us see how the prototype works.

all the methods(nothing but functions which are associated with only objects) of the properties are available in the prototype of the object . If any thing other than primitive variable is created this will get inherited the objects with predetermined methods which is present in the prototype.

let us see how check the above statement

example:

let myHeros = ["thor", "spiderman"]
let dcHeros = ["batman", "black adam", "superman"]

output:

as seen from the above example when an array is created it being inherited by the object by the help of the prototype because of this it can be said that mostly everything is object in JavaScript.

this prototype can be manipulated as per the coders desires, this ability to manipulate the JavaScript's object's prototype which gives the object it's characteristic which is in turn the main and defining characteristic of JavaScript programing language.

this ability to manipulate object's prototype has given rise to the different frame works of the JavaScript.

let us see how we can manipulate the prototype of the JavaScript.

prototype of object can be manipulated by the following example

object.prototype.surendra = function() {
    console.log(`hey surendra babu`);
}

as seen in the above example a method of surendra which is prints a console of a string is created in object.prototype . let us see the result

as seen in the above image a method of surendra is injected in the prototype.

one of the other main features of prototypes exchange of properties from one object to other object via the injection in the prototype from source object to recipient object. it can be done by following ways.

1)(way one) by using proto directly in the recipient object .

2)(way two) by using the following syntax

objectName.__proto__ ===object
 Let us see the using the following example.

3 (way three (modren way)) by using method shown in the following syntax

Object.setPrototypeOf(User, TSAssistant)

const User = {
name: "top name",
email: "topuser@gmail.com"
}

const Teacher = {
makeVideos: true
}

const TeachingSupport = {
isAvailable: false
}

const TSAssistant = {
makeAssignment: 'JS assigment',
fullTime: true,
// way one
proto: TeachingSupport
}

// way two

Teacher.proto = User

// way three

Object.setPrototypeOf(User, TSAssistant)


result considering only way one portion:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1eb1n69cvxwy88gxxov1.png)

result considering only way two portion:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihtypmydwfjs6by16rnl.png)

result considering only way three portion:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sser5rwda7mqkxgkaz9a.png)

There is one more important thing if object-A is protoed (__proto__) with object-B and protoed-C then A gets the properties of C also this is known as inheritance or chaining


let us see how the frameworks are created with simple string example.

let us say you want to create string method that trims the spaces in the given string and gives you the trimmed length of string. You want to name the method as truelength lets see the example:

String.prototype.trueLength = function (){
console.log(the actual length is ${this.length});
console.log(the true length is ${this.trim().length} );
}


this above code creates a method of truelength for a string only because it is created specifically for string only.

let us see if this method is created.

let my_name ="vunnam"

result:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9td69jwrcxvimsifpcn7.png)

let my_name ="vunnam "




result :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/moul7n7rg5jckx1jbtqv.png)

Date and math

Surendrababuvunnam — Thu, 12 Jan 2023 10:15:04 +0000

hey friends today we are gonna learn about date math array and array methods

Dates

it is a built in JavaScript function to get a date so that it could be used in day to day operations. The most general syntax is shown below

 console.log(Date());

output:

but it is better to use new Date() because it returns a date object which can be used for various operations.

there are four ways of creating a date they are :

new Date(): this is similar to shown in above example

new Date(milliseconds): this give no of milliseconds from Jan 1, 1970

example :

console.log(new Date(10000000000))

output :

new Date(dateString): When one string argument is passed, it is a string representation of a date.

example:

console.log(new Date("2015-03-25"));

output:

new Date(DateObject):
this creates a date object with the specified date and time.

example:

console.log(new Date(2023, 1, 10, 16, 33, 30, 0));

output:

date methods getting dates

getDate()

Returns the day of the month (from 1-31)

example:

const d = new Date();
console.log(d.getDate());

result:

other examples include getYear() getMonth() etc.

math

it is a built-in object whose purpose is to give user mathematical constants and operations by help of built in functions.

math properties

all the properties and methods of math are static hence they are called as static properties and static methods.

based on browser and operating systems these values can sometimes vary a little bit.

static properties

these are the properites that give you the values of constants. The examples can be seen below.

example:

const mat = Math.PI;
console.log(mat);

output:

as seen in the above example the above code gets you the value of constant pi.

static methods

these are the methods that return you the value based on the method applied which is seen in the bellow example

example :

const random = Math.random() * 10 ;
console.log(random);

math.random() method gives you the number randomly between 0-1.

output:

more properties and methods of math can be seen in mdn docs .

Date and math

Surendrababuvunnam — Thu, 12 Jan 2023 10:11:57 +0000

hey friends today we are gonna learn about date math array and array methods.

Dates

it is a built in JavaScript function to get a date so that it could be used in day to day operations. The most general syntax is shown below

 console.log(Date());

output:

but it is better to use new Date() because it returns a date object which can be used for various operations.

there are four ways of creating a date they are :

new Date(): this is similar to shown in above example

new Date(milliseconds): this give no of milliseconds from Jan 1, 1970

example :

console.log(new Date(10000000000))

output :

new Date(dateString): When one string argument is passed, it is a string representation of a date.

example:

console.log(new Date("2015-03-25"));

output:

new Date(DateObject):
this creates a date object with the specified date and time.

example:

console.log(new Date(2023, 1, 10, 16, 33, 30, 0));

output:

date methods getting dates

getDate()

Returns the day of the month (from 1-31)

example:

const d = new Date();
console.log(d.getDate());

result:

other examples include getYear() getMonth() etc.

math

it is a built-in object whose purpose is to give user mathematical constants and operations by help of built in functions.

math properties

all the properties and methods of math are static hence they are called as static properties and static methods.

based on browser and operating systems these values can sometimes vary a little bit.

static properties

these are the properites that give you the values of constants. The examples can be seen below.

example:

const mat = Math.PI;
console.log(mat);

output:

as seen in the above example the above code gets you the value of constant pi.

static methods

these are the methods that return you the value based on the method applied which is seen in the bellow example

example :

const random = Math.random() * 10 ;
console.log(random);

math.random() method gives you the number randomly between 0-1.

output:

more properties and methods of math can be seen in mdn docs .

JavaScript: variables, datatypes and operators and loops

Surendrababuvunnam — Sat, 07 Jan 2023 01:43:37 +0000

Hey guys today I am going to talk about my first learnings about JavaScript.

values and variable:

value: a value in JavaScript is nothing but a piece of data there are two types of values 1) The Primitive values 2) Non-primitive values

1) The primitive values or primitive datatype: this is where a single variable can store a single type of value . The different types of variables are :

numbers(both integers and decimal numbers)
strings which are collections of alphanumeric and symbols.
Booleans (true or false)
undefined data type means that the variable has been created, but has never been given a value.
Null is similar to undefined, except it has to be set by coder intentionally

*_ Non-primitive values or non-primitive data types_: these are the data types which are made up of primitive data types (or primitive values). There are two types of non-primitives they are arrays and objects.

variables: the are nothing but the place holder for the values. there are three types of variables 1)var 2)let 3)const.
the most used types of variables are let and const.

It is to be noted that const should be given a value immediately after using it for a variable.

template literals : Template literals (template strings) allow you to use strings or embedded expressions in the form of a string.

eg:

console.log(My Current First Name is ${firstname} ${lastname} ${mobileno});

operators: the are special symbols to perform mathematical operations on the variables with data containing in them.

the major types of operators are shown in below :

Arithmetic Operators:
As the name suggests, these operators perform arithmetic operations like addition(+), subtraction(-), multiplication(*), division(/), remainder(%), increment(++) and decrement(--).
Assignment Operators:

Assignment operators(=) are binary operators that are used to assign values to variables.

Comparison Operators The comparison operators in JavaScript are binary operators. This means that it compares the two given operands and returns a Boolean value as the result.

the comparison operators available in JavaScript are: 1)equal(==) 2) not equal(!=) 3) strict equal(===) 4)Strict not equal(!==) 5)Greater than(>) 6) Greater than or equal to(>=) 7) less than (<) 8) less than or equal to (<=)

conditionals: conditional statements are those statements that determine the flow of the program based on the pre-determined requirements that are required to be performed by the program. the different types of conditionals are :

1) if : this condition is used to check if the specified is true.

2) elseif: this condition is used to check if the next specified condition is true if the previous condition is false.

3) else: this is a condition where a all the above condition is false.

eg:
if (false) { let outcome = "if block"; } else if (true) { let outcome = "else if block"; } else { let outcome = "else block"; }

switch case: let us see the switch case with an example

`let expression = "expression-1";

switch (expression) {
case "expression-1":
console.log("expression-1");
break;
case "expression-2":
console.log("expression-2");
break;

default:
    console.log("no expression-3")
    break;

as seen in the above example switch like if compares the expression with all the pre-determined cases and executes the block of code as per the required case.

note: when dealing with the conditionals especially with switch cases there are things such as breaking i.e. to break the program after meeting the conditions.

loops: it is a piece of code which performs a task sequentially until a certain condition is reached.

the most widely used loops in JavaScript are 1)for 2)while 3)do-while

while loop is used when you don't know how many times does a loop need to run while for the for-loop it is opposite in case.

do-while is used when you want to run when the program needs to run at least once even if the condition is false

syntax of for loop
for ([initialExpression]; [conditionExpression]; [incrementExpression]){ statement}

syntax of do-while loop:

do { statement } while (condition);

syntax of while loop:

while (condition){ statement}

there are other loops like for-of and for-each but these are built for arrays and objects.

the end and happy learning

CSS grid

Surendrababuvunnam — Wed, 04 Jan 2023 07:36:45 +0000

hello friend today we are going to learn about CSS grid.

CSS grid is a methodology of laying out the elements of a web page in two dimensional manner.

in order to get started with the grid we have to set display of the parent element of the item to which we want to apply the properties of the grid into grid.

there are two main categories of grid properties which can be applied to grid they are parent-properties and child-properties.

The parent-properties

grid-template: grid template defines the rows and columns of the grid .

example: grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
or
grid-template: 1fr 1fr 1fr(grid-template-columns)/1fr 1fr
1fr(vice-versa)

as seen in the above example it creates a grid of 3 rows and 3 columns.

result:

align-content: justifies all the contents of the grid to column axis if the total grid size is smaller than container.

code:
.container{
display: grid;
border: 2px solid red;
height: 600px;
grid-template: 150px 150px 150px/ 150px 150px 150px ;

align-content: center;
}
.box{
height: 100px;
width: 100px;
margin: 10px;
border: 2px solid black;
}

result:

the other values of the align-content are start, end, space-between, space-evenly and space-around

justify-content:justifies all the contents of the grid to row axis if the total grid size is smaller than container.

code:
.container{
display: grid;
border: 2px solid red;
height: 600px;
grid-template: 150px 150px 150px/ 150px 150px 150px ;
justify-content: end;
}
.box{
height: 100px;
width: 100px;
margin: 10px;
border: 2px solid black;
}

result:

other values of justify-content includes start, center, space-evenly, space-around, space-between.

align-items: defines alignment of grid items along the column axis.

justify-items: defines alignment of grid items along the row axis.

code:
.container{
display: grid;
height: 600px;
grid-template: 150px 150px 150px/ 150px 150px 150px ;

align-items: center;
justify-items: center;
gap: 10px;
}

result:

other values include end, start and stretch align-items includes an additional property of baseline

the child-properties

align-self: aligns the item of a single-cell along column axis
justify-self: aligns the item of a single cell along row axis

code:

    .container{
        display: grid;
        height: 600px;
        grid-template: 150px 150px 150px/ 150px 150px 150px ;  
        gap: 10px; 
    }
    .box{
        height: 100px;
        width: 100px;
        margin: 10px;
        border: 2px solid black;
    }

    #box-2{
      align-self: end;
      justify-self: center;
    }

result:

the other value include start also.

grid-column: determines the item's location based on a start and an end column lines (or a span).

grid-row:same but for rows.

code:
#box-2{

      grid-column-start: 2;
      grid-column-end: 4;
      /* or */
      /* grid-column: 2/4; */
      grid-row-start: 1;
      grid-row-end: 3;
      /* or */
      /* grid-row: 1/3 ; */
    }

result:

CSS media queries

Surendrababuvunnam — Mon, 02 Jan 2023 07:40:20 +0000

hi friends today I am going to write about CSS media queries.

CSS media queries are a way of to target browser and change certain styling or run other code when certain required conditions are met.

media queries are mainly used to create websites which are responsive i.e. that change with respect to the screen.

the typical syntax of media queries are:

`@media mediatype operator(mostly and) media-feature operator media-feature {
.element {
/* Apply some styles */

}
}
`

let us break down the syntax

@media must be compulsorily used to write media queries it is a rule to include a block of CSS properties only if a certain condition is true.

media-type: the name chosen for the media type decides which type of device the queries are targeted the main type of media-types are in modern times the situations to write media types are rare :

all: suitable all devices
print: Matches documents that are viewed in a print preview or any media that breaks the content up into pages intended to print.
screen: Intended primarily for color computer screens.
speech: Matches devices that read the content audibly, such as a screen reader.

media-feature: describes the features of the devices such as size of screen, type of screen etc. but the mostly used features are max-width, min- width and may be sometimes orientation(landscape or portrait).

operator: Media queries support logical operators like many programming languages so that we can match media types based on certain conditions. most widely used operator is and.

let us see media queries in action via the following example.

code:
.item{ height: 100px; width: 100px; border: 2px solid black; margin: 10px ; } @media screen and (max-width: 600px) and (min-width: 500px) { body{ background-color: aqua; } .container{ display: flex; flex-wrap: wrap; } }

result(between 500px and 600px):

as seen in the above image all the media query properties will be applied at the range of screen sizes of 500px and 600px

CSS FLEXBOX

Surendrababuvunnam — Sat, 31 Dec 2022 16:46:08 +0000

hi friends today we are going to learn about flexbox .

Flexbox is a way or methodology of arranging the elements of the web page.

when dealing with the flexbox there are two things that should be kept in mind the two axes of the flexbox and whether the property is being applied to the flex-container or flex-item

two axes of the flexbox

While working with Flexbox, we deal with 2 axes:

Main Axis: By default, the main axis runs from left to right.
Cross Axis: By default, Cross Axis runs perpendicular to the Main Axis i.e. from top to bottom.

main Axis can be changed by the property of flex-direction and it is to be noted that all the flexbox properties can be applied only to the parent element of whose elements to be arranged is given a display property of flex

left to right:

flex-direction: row;

right to left:

flex-direction: row-reverse;
top to bottom:

flex-direction: column;

bottom to top:

flex-direction: column-reverse;

flex container: Flex containers are responsible for aligning and distributing the space available to their child elements

Flex containers have a number of properties that can be used to control the alignment and distribution of flex items, such as justify-content, align-items, and align-content.

flex items: Flex items are aligned and distributed within the flex container along the main axis.

Flex items have a number of properties that can be used to control their size, alignment, and order within the flex container, such as flex-grow, flex-shrink, flex-basis, align-self, and order.

flex container properties

1. justify-content: the justify-content property is used to align flex items along the main axis of a flex container.

The justify-content property takes one of several values that specify the alignment of flex items within the flex container:

flex-start: Flex items are aligned to the start of the main axis. It is the default
flex-end: Flex items are aligned to the end of the main axis.

code:

.container { display: flex; justify-content: flex-end; border :2px solid red; }

result:

center: Flex items are centered along the main axis.

code:

.container { display: flex; justify-content: center; border :2px solid red; }

result:

space-between: Flex items are evenly distributed along the main axis, with the first flex item aligned to the start of the main axis and the last flex item aligned to the end.

code:

.container { display: flex; justify-content: space-between; border :2px solid red; }

result:

space-around: Flex items are evenly distributed along the main axis, with equal space around each flex item.

code:

.container { display: flex; justify-content: space-around; border :2px solid red; }

result:

space-evenly:items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same.

code:

.container { display: flex; justify-content: space-evenly; border :2px solid red; }

result:

align-items: the align-items property is used to align flex items along the cross axis of a flex container.

The align-items property takes one of several values that specify the alignment of flex items within the flex container:

flex-start: Flex items are aligned to the start of the cross axis. This is default value
flex-end: Flex items are aligned to the end of the cross axis.

code:

.container { display: flex; justify-content: space-evenly; align-items: flex-end; border :2px solid red; height:500px; }

result:

center: Flex items are centered along the cross axis.

code:

.container { display: flex; justify-content: space-evenly; align-items: center; border :2px solid red; height:500px; }

result:

baseline: Flex items are aligned along their baselines.

code:

.container { display: flex; justify-content: space-evenly; align-items: baseline; border :2px solid red; height:500px; }

result:

align-content: the align-content property is used to align flex lines within a flex container when the flex items are wrapped onto multiple lines. The align-content property only applies when the flex-wrap property is set to wrap or wrap-reverse, and determines the alignment of the flex lines along the cross axis of the flex container.

The align-content property takes one of several values that specify the alignment of flex lines within the flex container:

flex-start: Flex lines are aligned to the start of the cross axis.

code:
.container{ display: flex; flex-wrap: wrap; align-content: flex-start; border :2px solid red; height: 500px; }

result:

flex-end: Flex lines are aligned to the end of the cross axis.

code:
.container{ display: flex; flex-wrap: wrap; align-content: flex-end; border :2px solid red; height: 500px; }

result:

center: Flex lines are centered along the cross axis.

code:
.container{ display: flex; flex-wrap: wrap; align-content: flex-end; border :2px solid red; height: 500px; }

result:

space-between: Flex lines are evenly distributed along the cross axis, with the first flex line aligned to the start of the cross axis and the last flex line aligned to the end.

code:
.container{ display: flex; flex-wrap: wrap; align-content: center; border :2px solid red; height: 500px; }

result:

space-around: Flex lines are evenly distributed along the cross axis, with equal space around each flex line.

.container{ display: flex; flex-wrap: wrap; align-content: space-around; border :2px solid red; height: 500px; }

result:

flex item properties

the majorly used properties of flex items are : 1)align-self

align-self: the align-self property is a flex item property that overrides the align-items property for a specific flex item, allowing it to be aligned differently within a flex container.

The align-self property takes one of several values that specify the alignment of the flex item within the flex container:

-flex-start: The flex item is aligned to the start of the cross axis. This is default from start

flex-end: The flex item is aligned to the end of the cross axis. center: The flex item is centered along the cross axis.

code:

    #box-4 {
        align-self: flex-end;
    }

result:

center: The flex item is centered along the cross axis.

code:

    #box-4 {
        align-self: center;
    }

result:

CSS positioning

Surendrababuvunnam — Fri, 30 Dec 2022 08:11:39 +0000

hello friends today we are going to learn about CSS positioning.

CSS positioning is used to position the elements of a web page as per the decision of the creator of the web page. The elements are positioned via the property of position. There are five different values of position they are:

1. Static: All elements of the web page are static by default. They are rendered in the browser as per the normal flow of the page any properties such as top, bottom, right, left if applied will not have any effect with elements with position sticky.

2. Fixed: All elements with the position with the value of fixed is positioned with relative to the viewport(screen). This means the that element stays in the same place even when the screen is scrolled. Let us see the position with fixed value:

code:
`.box{
height: 100px;
width: 100px;
border: 2px solid black;
margin: 10px;
}

#box-3{
background-color: red;
position: fixed;
bottom: 20px;
right: 20px;
}
`

result:

as seen in the result box-3 is at the bottom of the page irrespective of the amount of scrolling done by the user.

3. Relative: All elements with the position with the value of relative is positioned based on the relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

Let us see the position with relative value:

code:

`.box{
height: 100px;
width: 100px;
border: 2px solid black;
margin: 10px;
}

#box-3{
background-color: red;
position: sticky;
top: 20px;
left:120px
}
`
result:

4. Absolute: All elements with the position with the value of absolute is positioned based relative to it's parent.

Absolute positioned elements are removed from the normal flow, and can overlap elements.

let us see from the example:
code:
`
.box{
height: 100px;
width: 100px;
border: 2px solid black;
margin: 10px;
}

box-3{

   background-color: red;
   position: absolute;
   top: 20px;
   left:120px;
 }`

result:

. sticky : All elements with the position with the value of sticky is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position: fixed).

You must also specify at least one of top, right, bottom or left for sticky positioning to work.

let us see the working of sticky with an example:

code:
`.box{
height: 100px;
width: 100px;
border: 2px solid black;
margin: 10px;
}

#box-3{
background-color: red;
position: sticky;
top: 20px;
left:120px
}
`

result:

CSS box model

Surendrababuvunnam — Thu, 29 Dec 2022 12:04:09 +0000

The CSS box model is a fundamental concept in web design that describes the way that the dimensions and layout of a web page element are calculated. It consists of four main parts:

Content: This is the element's content, such as text or images.
Padding: This is the space between the content and the border.
Border: This is a line that surrounds the content and padding.
Margin: This is the space between the border and the next element

The dimensions of an element in the CSS box model are calculated based on the size of its content, plus any padding, border, and margin that has been added.

Padding: padding is the space between an element's content and its border. Padding is an important aspect of the CSS box model.

To set the padding of an element in CSS, you can use the padding property. To understand the padding property let us use an example:

div { padding: 20px; }

as seen in the above example 20 pixels of padding to all four sides of the div element (top, right, bottom, and left) is applied.

You can also specify different padding values for each side of the element using the padding-top, padding-right, padding-bottom, and padding-left properties. For example:

div { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; }
This will apply 10 pixels of padding to the top and bottom of the <div> element, and 20 pixels of padding to the right and left.

Padding is often used to add space around the content of an element, which can help to improve the layout and readability of a web page.

Border: border is a line that surrounds an element and separates it from other elements on the web page.

To set the border of an element in CSS, you can use the border property. The border property takes one or more values that specify the characteristics of the border, such as its width, style, and color.

let us learn with example how to set a border.

div { border: 2px solid black; }

from the above example we can see that a border of 2pixel solid black is created around the element <div>.

You can also specify different border characteristics for each side of the element using the border-top, border-right, border-bottom, and border-left properties. For example:

div { border-top: 1px dashed red; border-right: 2px solid green; border-bottom: 3px dotted blue; border-left: 4px double purple; }

This will create a 1-pixel-wide dashed red border at the top of the div element, a 2-pixel-wide solid green border at the right, a 3-pixel-wide dotted blue border at the bottom, and a 4-pixel-wide double purple border at the left.

Borders are often used to add visual interest to web page elements, to separate elements from one another.

Margin: margin is the space between an element and the other elements around it.

To set the margin of an element in CSS, you can use the margin property. Let us see the margin property using following example:

div { margin: 20px; }

This rule will apply 20 pixels of margin to all four sides of the <div> element.

You can also specify different margin values for each side of the element using the margin-top, margin-right, margin-bottom, and margin-left properties.

div { margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; }
This will apply 10 pixels of margin to the top and bottom of the div element, and 20 pixels of margin to the right and left.

Margin is often used to add space around the outside of an element, which can help to improve the layout and readability of a web page.

CSS selectors and Pseudo-elements

Surendrababuvunnam — Sat, 24 Dec 2022 14:00:19 +0000

Hi friends let's learn about the selectors and pseudo-elements today.

universal selectors: it is type of selectors which is used to select all the elements of a HTML page . It is basically used to override the default CSS style of the browser and the basic syntax is as follows:
*{ margin: 0; }

individual selectors: it is a type of selectors in which an element is targeted by using their tag name. The syntax of the individual selectors is as follows:
p{ margin:10px; }

as seen in the above example all the p tag elements are given a margin of 10px.

class and Id selectors:

class: it is a type of selectors in which an element is targeted by the class of the html element. The syntax of the class selectors is as follows:

.class-name{ margin:10px; }

as seen in the above example all the elements with class of .class-name are given a margin of 10px.

Id: it is a type of selectors in which an element is targeted by the Id of the html element . The syntax of the Id selectors is as follows:

#id-name{ color:#ffffff; }

as seen in the above example all the elements with #id-name is has a text-color of #ffffff

the difference between class and id at the first glance is obvious that is via . or # and class can be used to multiple elements and id for one element only. It doesn't mean browsers cannot display multiple elements with same id but it is not a good practice.

& selector (chained):It is a type of selector in which an element is targeted when all the conditions of targeting is met. The syntax of the & selector is shown as the following:

(tagorclass_or_id)(class_or_tag)(class_or_tag)and so on

example:li.bg-black.text-white#blah-1{ background-color: #000; color: #ef9323; }

as seen in the above example an element with list tag which has all the classes and the tags with no spaces in-between is given the properties as specified above

combined selector: in this type of selector two or more, same or different types of selectors i.e. the above mentioned and following below are used to target an element or a group of elements. The below example shows how combined selector works.

li.bg-black.text-white#blah-1, .class-name, p{ padding: 19px; }

as seen in the above example the three different types of selectors separated by the a comma is selected and is given a padding of 19px.

inside an element:this is a type of selector in which a element which is inside an another element is selected. The below example show the inside an element selector.

div ul li{ border:1px; }

as seen in the above example all the elements in which li which is inside ul which is inside div is selected and border property is applied.

direct child: this is a type of selector in which a element which is a direct child of an other element is selected the direct child can be understood by the following example :

div >ul >li{ color: black; }

as seen in the above example all the elements in which a div which has the direct child ul which has a direct child li is selected and is given a text-color of black.

*sibling ~ or + *: this is a type of selectors which is used to target a element which is its sibling. this can be understood by the following example.

.sibling + p{ background-color: pink; }
as seen in the above example a adjacent sibling element which has class .sibling is selected . if instead of p ~ is used all sibling element after class .sibling is selected.

pseudo-elements:A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element. The two most majorly used pseudo-elements are:

::before and ::after : this is used to add content but mostly used for styling an element used along with a selector the diffrence is that before adds content before the selected element after adds the content after the selected. the example is shown in the below figure. .imp-label:hover::before{ content: ''; display: block; width: 20px; height: 20px; border-radius: 10px; background-color: orange; }

as seen in the above figure when hover your pointer over the element which has a class of imp-label a orange circle is shown above that element which occupies entire block. when instead before after is used content is placed after the element with class.

Media and input tags

Surendrababuvunnam — Fri, 23 Dec 2022 07:09:28 +0000

Hi today I am going to write about media and input tags.

media tags
the most used media tags are image(<img>),video(<video>),audio(<audio>) and iframe(<iframe)

image(<img>)

image tag and its details are written in following article :

https://dev.to/i_am_surendra_/intro-to-web-development-39gc#:~:text=a%20brief%20play%20with%20img%20tag

video(<video>):

It is a tag in HTML used to embed a video in a document. Video tag has following attributes.

src: The src attribute specifies the URL of the video file that you want to play.
poster: The poster attribute specifies an image to be displayed before the video starts playing.
controls: The controls attribute adds video controls, such as a play/pause button and a volume control, to the video player.
autoplay: The autoplay attribute specifies that the video should start playing as soon as it is ready. It is a Boolean attribute
loop: The loop attribute specifies that the video should start over again, from the beginning, when it reaches the end.
muted: The muted attribute specifies that the video's audio should be muted.
controlslist: The controlslist attribute, when specified, helps the browser select what controls to show for the video
preload: The preload attribute specifies whether or not the video should be loaded when the page loads.

width and height: The width and height attributes specify the dimensions of the video player.

audio(<audio>):
It is a tag in HTML used to embed a audio in a document. Audio tag has following attributes.

it has all the above attributes as video expect attributes like poster height and width

muted: A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is false.

iframe(<iframe>):
The iframe element in HTML is used to embed an external webpage or document into an HTML document. iframe tag has following attributes.

src: The src attribute specifies the URL of the webpage or document that you want to embed.
width and height: The width and height attributes specify the dimensions of the iframe.
frameborder: The frameborder attribute specifies whether or not to display a border around the iframe.
scrolling: The scrolling attribute specifies whether or not to display scrollbars in the iframe.
allow: The allow attribute is a new attribute in HTML that was introduced in HTML 5.2. It allows you to specify a list of features that should be allowed in the iframe. This attribute is used to enable or disable certain capabilities in the iframe in order to prevent malicious actions or improve security.

input tags:
The input element in HTML is used to create interactive controls for web-based forms in order to accept data from the user. The input element is one of the most important elements in HTML and is used in almost all web forms.

several types of input tags are :

text: The text input type is used to create a single-line text field for the user to enter a short piece of text, such as a name or email address
password: The password input type is used to create a single-line text field for the user to enter a password. The text entered by the user is masked to prevent it from being visible.
password: The password input type is used to create a single-line text field for the user to enter a password. The text entered by the user is masked to prevent it from being visible.
checkbox: The checkbox input type is used to create a single checkbox. The user can check or uncheck the checkbox to indicate their preference.
submit: The submit input type is used to create a button that the user can click to submit the form.
reset: The input element with the reset type is used to create a button that the user can click to reset a form to its default values. When the user clicks on the reset button, all form elements are reset to their default values, and any user input is erased.
number: The input element with the number type is used to create a field for the user to enter a numerical value. The number input type is used when you want to accept only numerical input from the user.
tel :The input element with the tel type is used to create a field for the user to enter a telephone number. The tel input type is used when you want to accept only telephone numbers as input from the user.
file: The input element with the file type is used to create a field for the user to select a file to upload. The file input type is used when you want to allow the user to upload a file from their computer to your website.
range: The input element with the range type is used to create a field for the user to select a numerical value within a specified range. The range input type is used when you want to allow the user to select a value from a range of continuous or discrete values

Tags for text, formatting, citation and semantic and usability improving attributes

Surendrababuvunnam — Wed, 21 Dec 2022 02:58:30 +0000

hi today I am going to dive deeper into html

*text related tags*

header tags
The heading elements in HTML are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. These elements are used to define headings of different levels, with <h1> being the highest level and <h6> being the lowest.

paragraph tags
The<p>element of HTML is used to represent the paragraph.

pre tag

The <pre> tag is an HTML element that is used to define preformatted text. Preformatted text is displayed in a fixed-width font and preserves spaces and line breaks.
The <pre> tag is often used to display code examples or other content that needs to be displayed exactly as written, without any additional formatting being applied by the browser.

format related tags **
**strong and bold and their difference

before going to these tags let's know what are the screen readers.

Screen readers are software programs that assist users with visual impairments in accessing the content of websites and other digital media. They do this by converting the text on a webpage or document into synthetic speech, which the user can then listen to through their computer's speakers or a set of headphones.

now let's go to these tags

strong tag:
The <strong> tag is used to indicate that the text has strong importance or emphasis. It is typically rendered as bold text, but the meaning of the tag goes beyond just the visual appearance. Screen readers, for example, may announce the text as being "strongly emphasized" or "important".
bold tag:
The <b> tag, on the other hand, is used to format text as bold without any particular meaning or emphasis. It is purely a visual formatting element and does not convey any semantic information to screen readers or other assistive technologies.

In general, it is recommended to use the <strong> tag for indicating strong emphasis or importance, and to use the <b> tag only for visual formatting purposes. This helps to ensure that the content of your website is properly conveyed to all users, including those who rely on assistive technologies.

emphasis and italic and their difference

The <em> tag is used to indicate that the text has emphasis or stress. It is typically rendered as italic text, but the meaning of the tag goes beyond just the visual appearance. Screen readers, for example, may announce the text as being "emphasized" or "stressed".

The <i> tag, on the other hand, is used to format text as italic without any particular meaning or emphasis. It is purely a visual formatting element and does not convey any semantic information to screen readers or other assistive technologies.

In general, it is recommended to use the <em> tag for indicating emphasis or stress, and to use the <i> tag only for visual formatting purposes. This helps to ensure that the content of your website is properly conveyed to all users, including those who rely on assistive technologies.

small tag:

The <small> tag in HTML is used to format small text. It is typically rendered as a smaller font size than the surrounding text, and is often used for disclaimers, legal text, or other fine print.
small tag is intended only for small text that is part of the regular flow of the document, and not for structural or organizational purposes.

sub-script tag:

The <sub> tag in HTML is used to format text as subscript. Subscript text is smaller than the surrounding text and is typically lowered below the baseline.

super-script tag:

The <sup> tag in HTML is used to format text as superscript. Superscript text is smaller than the surrounding text and is typically raised above the baseline.

both sub and super script tags are used often used in scientific or technical documents to indicate subscripts or footnotes. It can also be used for other purposes, such as to indicate trademark or copyright symbols.

insert and delete tags:

insert tag: The <ins> tag is used to mark text that has been inserted into a document. The text within the tags is typically rendered with a line under it, to indicate that it is new or added content.
delete tag: The <del> tag is used to mark text that has been deleted from a document. The text within the tags is typically rendered with a line through it, to indicate that it has been removed.
The <ins> and <del> tags are often used to show the changes that have been made to a document, such as in a version control system or a collaborative document editor. They can also be used for other purposes, such as to highlight new or updated content on a website.

mark tag:

The <mark> tag in HTML is used to highlight text that is relevant to the context of the surrounding text. The text within the <mark> tags is typically rendered with a background color or other highlighting effect, to draw the reader's attention to it.
The <mark> tag is often used to highlight key terms or phrases in a document, or to draw the reader's attention to specific passages of text. It can also be used for other purposes, such as to highlight search results or to indicate recently updated content on a website.

citation related tags:

cite tag: This tag is used to indicate the title of a work, such as a book, article, or website. The text within the <cite> tags is typically rendered in italic or with a different font style to indicate that it is a citation.

quotation tag: The <q> element in HTML represents a short inline quotation. It is used to mark a section of text as a quotation, and is typically rendered in quotation marks.

blockquote tag:The <blockquote> element in HTML represents a long quotation that is set apart from the rest of the text. It is typically rendered as indented text.

semantic tags

Semantic tags are HTML tags that provide meaning to the content they contain, rather than just describing the appearance of the content. They help to structure the content of a webpage in a way that is meaningful and easy to understand for both humans and computers.

header tag:

The <header> tag in HTML is a semantic element that represents the header of a webpage or section of a webpage. It is typically used to contain the main heading of the webpage.
The <header> tag can also be used to represent the header of a section within a webpage, in which case it should be used as a child element of the sectioning element (such as <section> or <article>) that it belongs to

nav tag:
A nav bar, or navigation bar, is a section of a webpage that provides links to other pages or sections within the same website. It is typically used to allow users to easily navigate around the site and find the content they are looking for.

main tag:
The <main> tag in HTML is a semantic element that represents the main content of a webpage. It is typically used to enclose the content that is central to the purpose of the webpage, and that is unique to that webpage.

section tag:
The <section> tag in HTML is a semantic element that represents a section of a webpage that has a thematic grouping of content. It is typically used to divide the content of a webpage into logical sections, each with its own heading and containing related content

article tag:
the <article> tag in html is a semantic element that represents a piece of content that can be reused and distributed as per the creator's wish.

aside tag:

The <aside> tag in HTML is a semantic element that represents content that is related to the main content of a webpage, but that is separate from it.
It is typically used to contain sidebars, additional information, or other related content that is not central to the main purpose of the webpage.

footer tag:

The tag in HTML is a semantic element that represents the footer of a webpage.
It is typically used to contain information such as the copyright notice, website credits, and links to related content or resources

attributes used to increase the usability of web page

few attributes that are used to increase the usability are:

title:
The <title> attribute is used to provide additional information about an element, such as a tooltip or pop-up text. It is often used on links and form elements to provide a brief description of the destination or purpose of the element.

alt:
The alt attribute is used to provide alternative text for images. It is especially important for users who are unable to see the images, as it allows them to understand the content of the image through the use of screen readers.

aria-lable:
The aria-label attribute is an HTML attribute that is used to provide a label for an element that does not have a visible label. This is particularly useful for custom widgets or elements that are not natively supported by HTML.