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/ 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
**GET /index.html HTTP/1.1
Host: www.google.com
Accept-Language: en-us**
browser sends a response like this:
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 tag encapsulates the complete web page content. All other tags are 'nested' within the 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 and ends with the end tag .
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.
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.
<a href="https://www.youtube.com/" target=”_blank”>Link to Youtube</a>
💡 Extra spaces are ignored in HTML
<style>
button {
background-color: red;
here button is CSS Selector
and background-color is a property.
TO CREATE EFFECTS ON BUTTONS WHEN WE HOVER ON THEM,
to change color when we hover on them,
.subcribe-btn:hover {
background-color: rgba(252, 48, 48, 0.747);
}
💡 :hover is psudo-class, these psudo classes adds extra styles in certain situations
Similarly,
:active Psudo-class adds functionalities when we click on the button
to change the opacity we can use opacity between 0 to 1
.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)
transition: opacity 1s;
to create shadows after hovering
.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
<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
.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 🚀!!
Top comments (0)