Table of contents
No headings in the article.
You just discovered this thing called web development and have heard quite a few buzzwords revolving around it like frontend, backend, blah blah blah... Perhaps you may be curious to learn these new terms, right? Then this is the perfect place you have landed upon.
Let's see what all topics you will find in this blog:
Frontend vs Backend
Web programming language
Building a simple portfolio
Resources
- Frontend vs Backend
The front part of the website that is interacted with by the users, i.e clicking a button on the whole UI etc, is known as the front end.
The backend is the process and code executed in a server that the user never interacts with.
For instance, you are visiting Facebook.com
When you request the URL, in the backend our IP address is stored and some user information is processed that users won't be able to see
The home feed that is loaded when we visit Facebook.com got some code let's say we tapped a Like button and an animation is played this happens in the frontend part
- Web programming language
For the frontend, we use the trio HTML, CSS & Javascript
HTML is the markup language
CSS is the styling language
Javascript is the programming language
Now you might be thinking about the reason behind these only being the web languages and not any other, while there are so many languages, the answer is browser only supports these languages. It executes and paints the page by reading the HTML, CSS and Javascript
To understand the difference between HTML CSS Javascript let's take our human body as an analogy.
HTML is the skeleton system 💀 of our website, so CSS is the skin and muscles 💪 and javascript is the brain 🧠
For the backend, we can use any language with a mix of frameworks like python with Django framework, and javascript with expressjs. We will not be covering backend development now as it is out of the scope of this blog
Building a simple portfolio
Portfolios are your faces on the internet or they can be used as an online resume to showcase your skills, achievements etc
Having a portfolio site as a student can help you a lot in standing out in applications. Even some tech companies (Google included) ask for your portfolio URL for some of their events.
Let's get into the implementation 👨💻 ⚡
i.Install VS Code (you can use any other code editor):-
VS Code has got a good amount of extensions
ii. Create a folder named portfolio:-
We will be creating our HTML, CSS and js files inside this folder
Or create a folder through the portfolio and open it in vs code with the following commands
Iii. Create an HTML file named index.html
iv. Use HTML tags and structures to build the skeleton of your website:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="./index.css"/>
</head>
<body>
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/28/Richard_Stallman_at_LibrePlanet_2019.jpg"/>
<div class="contents">
<h1>Hello 👋,Im Richard stallman</h1>
<p>This is my new Portfolio created for GDSC team hope you guys like it !</p>
<div>
<p>Click on the below button to see a magic</p>
<button onclick="press()">press me</button>
</div>
</div>
</div>
<script>
function press(){
alert("You pressed this button");
}
</script>
</body>
</html>
Don't be scared of the Html tags and structures. You will learn all of them one by one by building sites. One piece of advice is “don't memorize any tags or attributes”, learn their use and try building the page accordingly.
v.Add CSS according to your HTML code:-
.container{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
img{
height: 250px;
width: 250px;
object-fit: cover;
}
button{
border-radius: 25px;
background-color: black;
color: white;
text-align: center;
height: 40px;
}
button:hover{
background-color:rgb(26, 22, 22);
}
.contents{
display: flex;
flex-direction: column;
margin-left: 10px;
}
vi.And for javascript part let's add an alert when a button is pressed
function press(){
alert("You pressed this button");
}
vii final screenshot of the site , is just a basic one, we hope you try to iterate over and create some beautiful sites For styling you need the patience and creative approach that can be learned by practicing
- Some amazing resources through which you can expand your journey in web development
1.HTML and CSS: Design and Build Websites by Jon Duckett
2.JavaScript and JQuery: Interactive Front-End Web Development by Jon Duckett
3.W3schools
We hope you have enjoyed the blog and this has given you an idea to kick-start your journey in web development, also GDSC SCTCE is hosting a 30-day web development study jam called rebootEd if you are interested register here http://bit.ly/rebootEd (it’s free)
We're looking forward to seeing your finished portfolio.
With love ❤️