DEV Community: Hemanth_Polisetti

Flex-Box& Flex

Hemanth_Polisetti — Fri, 23 Sep 2022 10:39:09 +0000

For Better Understanding of Flex we have to know what is Flex-Box.

Flex-box:It is a new layout mode in CSS3. This layout make the elements behave relatively to different display sizes and display devices.

Flex-box have Flex-Container and Flex-Items.
Flex-container specifies the properties of parent.It is declared by setting the display property of flex or inline-flex.
Flex-items specifies the properties of children.These are inside flex-container.

Flex-items are set along horizantal flex line by default.
These are mainly two axis to align flex items in flex container they are main axis and cross axis.Those are perpendicular to each other.
Main axis is along the line of flex.It will be horizantal is line of axis is horizantal and viceversa.

Flex-Box Properties:-

Display => Used to specify the type of box used for an HTML ELement.
Flex-Direction => To specify the line of axis of flex items
Justify-Content => To align items horizantally when the items didn't use all the available space on main axis.
Align-items => To align items Vertically when the items didn't use all the available space on cross axis.
Flex-Wrap => It specifies whether flex items wrap or not,if there is not enough room for the flex item in container.
Align-Content => It aligns flex-line,it is used to modify the flex-wrap property.
Flex-Flow => It specifies a shorthand property for flex direction & flex wrap.
Order => It specifies the order of a flex item relatively to another flex item in the same container.
ALign-Self => It is used on flex-items it overrides container's Align items property.

Then,
The flex property is only works on the flex-items,It is used to set the length of the flexible items.The length of the flex items is depend on flex grow, flex shrink,flex basis.
We can simply say flex is the shorthand for these three properties.

"flex val1 val2 val3"

val1 refers to flex grow, It is positive number without units and it specifies how much the flex item have to grow in size relative to other flex items.
val2 refers to flex shrink, It is positive number without units and it specifies how much the flex item have to shrink in size relative to other flex items.
val3 refers to flex basis,It specifies the initial length of the flex item from where it have to start growing or shrinking.

                         --Thank You--

CSS Display Properties

Hemanth_Polisetti — Tue, 20 Sep 2022 12:42:34 +0000

1) Block :- It occupies all the space of the container and a line above and below to it.It always start with new line
2)Inline :- It occupies the space it need and it doesn't need to start in new line but it can`t support to adjust the height and width of the content
3)Inline-Block :- It is similar to Inline property , unlike inline property it supports to adjust the height and width of the content
4)None :- It display nothing,simply it removes the content from displaying.

                         --Thank You--

HTML TAGS

Hemanth_Polisetti — Tue, 20 Sep 2022 11:09:39 +0000

1.What is HTML Tag?

Image result for what is html tag An HTML tag is a piece of markup language used to indicate the beginning and end of an HTML element in an HTML document. 2.What are the types of HTML Tags?
These are mainly classified into Two Types:- a)Based on their structure b)Based on their usage

a)Based on their Structure it`s further classified into two types:
i)Opening and Closing Tags
ii)Self-Closing Tags
i) Opening and Closing Tags: These have an opening tag and closing tag.if a tag is opened it should definetely closed.
Example:

<div></div>

ii) Self-Closing Tags: These have only one Tag,It will be closed at the end of the opening tag(No seperate tags are Required).
Example:

<input type="" >

b)Based On Their Usage it`s further classified into two types:
i)Block Level Tags
ii)Inline Level Tags
i)Block Level Tags: The Elements which occupy the whole Available space bound by the tags and these tags start in new line.
Example:

<div></div>

ii)Inline Level Tags: The Elements which only occupy the necessary space bound by the tags and these are doesn`t need to start in a new line.
Example:

<span></span>

3.Some most used HTML Tags:
-> Div tag
-> Heading tags
-> Paragraph tag
-> break tag
-> span tag
-> image tag
-> anchor tag
-> table tag
-> pre(preformatted) tag
-> form tag
-> input tag
-> textarea tag
-> select tag
-> button tag

                      --Thank You--

HTTP

Hemanth_Polisetti — Mon, 19 Sep 2022 12:04:43 +0000

1.What is HTTP?

HyperTextTransferProtocol.
It is the Communication between the Client & WebServer.
It takes Requests and Returns Response from server.
It returns Headers and Body with Every Request.
It is Stateless means every request is independent(at its core means without cookies.It doesn`t remember anything).

2.What is HTTPS?

HyperTextTransferProtocolSecure.
It Encrypts the data in between the transactions(request and response).
Data is Encrypted using SSL/TLS.
- SSL stands for Secured Socket Layer.
- TLS stands for Transport Security Layer.
Security will be provided by installing an SSL/TLS

certificate on webhost.

3.What are HTTP METHODS?

When a request is made to server there is a method attached to it.For different purposes different methods will be used.
GET request:

It mainly used to Fetch data from server like loading a HTML page,loading Json data ,xml data etc...

POST request:

It used to when adding data to server or posting/sending data to server.

Unlike Get request it doesn`t show the request in URL.

PUT request:

It used to update the data on the server

DELETE request:

It used to delete the data on the server

4.What Are HTTP Header Fields?

HTTP header fields are a list of strings sent and received by both the client program and server on every HTTP request and response. These headers are usually invisible to the end-user and are only processed or logged by the server and client applications.
There are 3 types of header fields:
-General header fields
-Response header fields
-Request header fields
General header fields(important Fields in General headers):
Request URL: URL which is used to make a request
Request Method:Which HTTP Method is used to make request
Status Codes: It shows the status of the webpage(It will be explained clearly in the next section)
Remote Address: IP Address of the computer
Referral Policy:It controls how much referrer info should be included with request
Response Headers(important Fields in Response headers):
Server:The info about who host the server
Set-cookie:The Set-Cookie HTTP response header is used to send a cookie from the server to the user agent, so that the user agent can send it back to the server later. To send multiple cookies, multiple Set-Cookie headers should be sent in the same response.
Content-Type:Which type of data is sending from server
Content-Length:The length of the content
Request Headers(important Fields in Request headers):
Cookies:Cookies which sent by request url to Server which are previously stored when server sent them to browser by set-cookies header.
Accept-xxx:The Support of the browser like accepting encoding of language, Program etc...
content-type & content-length:Same as response header fields
Authorization: Sending tokens to Authorize the user.
User-Agent:The Details of the web-browser of the user.
Referrer:The Referer header allows a server to identify a page where people are visiting it from.

5.What Are Status Codes?
An HTTP status code is a message a website's server sends to the browser to indicate whether or not that request can be fulfilled.
It has some ranges to indicate the website is working or not.
100-200: INFORMATIONAL
It indicates Request is recieved and It is processing
200-300: SUCCESS
It indicates Request is Successfully recieved,understood and accepted
300-400: REDIRECT
It indicates further action must be taken like redirecting
400-500: CLIENT ERROR
Request error either requested url is not correct or the request is not in the server
500-600:SERVER ERROR
Server Failed to fetch the valid request
Some Commonly Used Status Codes:
200 - Ok
201 - Ok Created
301 - Moved to New Url
304 - Not Modified
400 - Bad Request
401 - Unauthorized
404 - Not Found
500 - Internal Server Error.

6.Difference Between HTTP 1.1 & HTTP 2 ?
HTTP2 is fast,efficient and more secure than HTTP 1.1
In HTTP 1.1 HTML , CSS and Script are requested individually and get response individually whereas in Http2 CSS and Script are requested simultaneously and response also fetched simultaneously.
HTTP2 uses a more advanced compression method called HPACK that eliminates redundant information in HTTP header packets.

                        --THANK YOU--