🎯How WEB Works and Intro To Frontend 🌱
Tags: webdev, css, beginners, html
Published: 2023-01-06 14:42:09





Hi Guys👋, Today we will see How to Start Web Dev Journey🧑‍💻
And if you have already started this can be your first lesson 🌟

## 0️⃣ Pillars of Front End:

HTML: hypertext markup language, to define building blocks of web pages (markup language)

CSS: cascading style sheet and used for styling and making it beautiful (styling language)

JAVASCRIPT: gives functionality to webpages (**programming language**)

## 1️⃣ Frontend Frameworks:

**REACT**

**ANGULAR**

**VUE**

## 2️⃣ HOW THE WEB WORKS

the address we type in address bar is URL (Uniform Resource Location), it is a way to locate a resource on the internet like web pages, images videos..

CLIENT SERVER MODEL:

**WWW** -world wide web is a collection of web documents and resourses which are accessible over the internet. 

**URL**: uniform resource locator uniformly locates a particular in the internet. it has following components

> ***protocol://host:port/path***
> 

> http : // [www.myapp.com/](http://www.myapp.com/) results
> 

**protocol**: used for client server communication

**host and port** : name of the connected server along with port number

each device connected on the internet will be accessible with unique host name also called as **domain name**.

and different servises will be provided through specific  port numbers, if explicit port is not mentioned default will be used

standard port for HTTP is 80 and 443 for HTTPS

**path:** path to access the resource / web root

## 3️⃣ HTTP: 
HTTP is a request transfer based protocol as client establishes a connection with server and sends a request over the same connection server sends the response 

when client wants to send request again new connection request will be created

A client requests a service and server provides it.. so here browser asks a server about info of specific website.

now this msg is formatted according to a protocol called HTTP (Hypertext Transfer Protocol) , so its a plain language for communicating over the internet

HTTPS - HTTP with encryption

SO when browser asks a request like this

```jsx
**GET /index.html HTTP/1.1
Host: www.google.com
Accept-Language: en-us**
```
browser sends a response like this:

```jsx
HTTP/1.1 200 OK
Date: 1 Jan 2021 09:00
Content-Type: text/html

<!DOCTYPE html>
<html>

	...

</html>
```
 

So when the browser reads this HTML documents it creates DOM - Document Object Model

this is model that represents objects and elements in HTML document ie elements like building blocks, paragraphs of text, images links etc..

So when browser reads the doc, it sends requests to access the images videos link as separate HTTP request to server, and to increase loading speeds, they are sent parallelly

one the browser has all the necessary resources the browser renders HTML document.

**MIME** : Multipurpose Internet Mail Extension

indicates the format of the resource content from server to the client

contents such as text, image, videos, application (json, sql, javascript) . 

## 4️⃣ HTML & CSS

The following are some key elements in HTML that form the basic structure of a web page.

- <!DOCTYPE html> declaration update the browser about the version of HTML being used. By default, it points to HTML5, the latest version.
- The <html> tag encapsulates the complete web page content. All other tags are 'nested' within the <HTML> tag.
- Any HTML document or web page consists of two main sections the 'head' and the 'body'.
    - The head section starts with the start tag <head> and ends with the end tag </head>.

- HTML is not case sensitive language but generally we write in lowercase
- IN css style, if if border-radius is more than half of width it can become circle.


![difference between container elements and empty elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vouc5suxkh777l318ta.png)

 <a> represents anchor element (link to another website)

href="https://www.youtube.com/"> this represents HTML attribute which modifies how an element behaves

href is attribute name and “...” is value.

target=”_blank” ensures the link will open in new tab if its not present link will open in current page.

```html
<a href="https://www.youtube.com/" target=”_blank”>Link to Youtube</a>
```

<aside>
💡 Extra spaces are ignored in HTML

</aside>

 

```html
<style>
button {
background-color: red;
```

here button is CSS Selector 

and background-color is a property.

![difference between inline element and block element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvuqv1u48zqk01q2loki.png)


TO CREATE EFFECTS ON BUTTONS WHEN WE HOVER ON THEM,

to change color when we hover on them,

```css
.subcribe-btn:hover {
background-color: rgba(252, 48, 48, 0.747);
}
```

<aside>
💡 :hover is psudo-class, these psudo classes adds extra styles in certain situations

</aside>

Similarly,

**:active** Psudo-class adds functionalities when we click on the button

to change the opacity we can use opacity between 0 to 1

```css
.join-btn:active {
opacity: 0.7;
}
```

to adjust transition speed of the hover property ie not instantaneously (but use this in base css style not in hover style)

```css
transition: opacity 1s;
```

to create shadows after hovering 

```css
.Tweet-btn:hover {
box-shadow: 1px 5px 15px rgba(0, 0, 255, 0.2);
}
```

We should not set the height and width to the buttons, as if the text length is more it would flow out of box.

instead we can use inside space of button, ie  padding.

span is generic element used to give special characteristics to certain text in paragraph using class

```html
<p class="offer">
  Shop early for best selection of holiday favourites.
    <span class="shop">Shop Now !</span>
</p>
```

and in css we can give styles

```css
.shop {
    color: white;
    text-decoration: none;
    
  }
  .shop:hover {
    text-decoration: underline;
  }
```

That's all for now⌚, as you ready to get into this Web Dev Field.
Further, there are tons of things to learn from this vast internet 🕸️. I hope I have made you more curious about them, Happy Learning 🚀!!