Hey pals, if you are wondering that the above title really means something, it’s for you to find out by yourself
People out there, who might be a student, or a budding developer are often seen getting confused when it comes to front-end. If you are one of those, this article is just right for you
According to my GURU (Wiki), Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data.
From the above statements, it’s clear that this session is more about HTML, CSS and JS. But before we start, we should understand that this session is not to make you guys able to code right after we complete this session, but its to educate you through the basics of web development and what it actually takes to be a Web Developer.
Let’s dive a little deep into this, by understanding each section and how does these effect your webpage.
HTML — Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser and it looks something like the below snippet
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div class="outer-layer"> <div class="inner-layer"> <h3>HTML & CSS</h3> <p>This is what CSS can do to your application</p> </div> </div> </body> </html>
CSS — Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. There is much to learn about CSS, but for a while let’s keep that aside and check the code below
@page { margin: 2cm } p { margin-bottom: 0.25cm; direction: ltr; line-height: 120%; text-align: left; orphans: 2; widows: 2 } a:link { color: #0000ff }
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.outer-layer{
border:5px solid pink;
padding:15px;
}
.inner-layer{
border:3px dotted red;
text-align: center;
}
.inner-layer h3{
font-style: italic;
}
</style>
</head>
<body>
<div class="outer-layer">
<div class="inner-layer">
<h3>HTML & CSS</h3>
<p>This is what CSS can do to your application</p>
</div>
</div>
</body>
</html>
If you don’t understand those definitions, I assure the image below will help you understand them like a PRO, you can even try to run the above code in a editor to check the result.
Does this image ring a bell (🔔), I’m sure it does, So from this we should be able to conclude that HTML is something that helps us to create different elements into the webpage, but it cannot powder/makeup your code. That’s where CSS jumps into the pool.
CSS turns everything so beautiful by adding styles and making all the necessary formatting. It’s not just that, CSS also has the power which can do wonders. Have you ever seen a button glowing when you hover your cursor on a button or rotating image? If Yes, it’s the magic of CSS, even it’s possible to create interactive games using CSS. If you don’t trust me, here is a gift for you to check out
So, are you thinking that mastering these two is enough to be a front-end developer? Well, that isn’t. To have a seamless experience in a webpage, user always needs dynamic actions and this is where out third HERO comes and you probably have guessed the name, it’s the JavaScript or simply JS
JavaScript is one of the core technologies of the World Wide Web. JavaScript enables interactive web pages and is an essential part of web applications. Most of the websites use it for client-side page behavior, and almost all the major browsers have a dedicated JS engine to execute it
JavaScript is the most powerful technology for web developers, though the internet today is being occupied by various other popular frameworks like Angular, React and Vue, Still the seed(🌱) of all these plants(🌿🌿🌿) is always our very own JavaScript.
All dynamic actions in a webpage, whether it could be a click action on a button which thereafter submits a form, it could be a timer used in a digital web clock or even the event listeners which can constantly monitor any user actions in a webpage, everything is handled by JS
Another useful framework that I recommend and which is widely used now a days is BOOTSTRAP, developed at Twitter Inc, which is nothing but a CSS framework and includes JavaScript based design templates
@page { margin: 2cm } p { margin-bottom: 0.25cm; direction: ltr; line-height: 120%; text-align: left; orphans: 2; widows: 2 } a:link { color: #0000ff }
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="
">
<script src="
"></script>
<script src="
"></script>
<script src="
"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h2>Button Styles</h2>
</div>
<div class="col-8">
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
</div>
</div>
</div>
</body>
</html>
The basic idea of bootstrap is to divide the available row into 12 columns(It’s for you to decide the number of columns but at last it should all sum to 12 ) which would further help us to achieve better responsive design irrespective of the device size. It also gives us a set of predefined CSS classes which can directly be applied to any HTML element and reduced the amount of effort that a developer has to be keeping.
If you are trying to be in the race, bootstrap would be a good start, and here is official website link for your reference
And this brings us to the end of this session but before concluding this session, I would like to share some websites, that helped me to become a web developer and hope these will even help you to achieve the same
Stay tuned for my other blogs😊 Happy Coding!!
Contact for further details:
Rajeev Varma Gottimukkala
Senior Technology Specialist – Digital Transformation
MOURI Tech
