There are moments at the beginning of your career journey when you develop a growing interest in becoming a web developer. You may have come across the field online, and it stays on your mind, yet you still find it difficult to fully understand what it entails.
This article is designed to guide you through what to expect as a beginner in web development, how to set up your workspace, and how to write your first lines of code. This will be part of a series where each article breaks down essential concepts, starting with the fundamentals.
Table of Contents
What is a website?
Before defining what a website is, it is important to understand what makes up a website. Think of a website as a collection of components known as web pages. Web pages are individual documents that contain text, images, and other interactive elements. A website, therefore, consists of multiple web pages that are accessed and displayed through a web browser.
What is a web browser?
A web browser is a software application used to access the World Wide Web (WWW). It retrieves and displays the content of websites.
There are common types of web browsers; examples include Chrome browser, Firefox, Opera Mini, Safari browser, etc
For a website to display its content, a user enters the website’s Uniform Resource Locator (URL). The browser then sends a request to a web server, which checks if the URL is valid. Once confirmed, the server returns the requested web pages, and the browser displays their content.
What is Frontend and Backend development?
Website development is mainly divided into two parts: frontend and backend development.
In this article, we will focus primarily on frontend development, but it is helpful to understand the difference between the two. Frontend development refers to the part of a website that users can see and interact with, while backend development refers to the part that runs behind the scenes and is not visible to users.
To better understand this, consider a restaurant as an example. The frontend is like the waiters, cashiers, and servers - the staff you see who attend to your needs when you visit. These are the visible parts of the service.
The backend, on the other hand, is like the kitchen staff - the chefs, grillers, and dishwashers. They work behind the scenes, and although you do not see them, their role is essential. Without them, the staff attending to you would have nothing to serve.
Frontend Development
Now that we understand the concept of frontend web development, it is essential that we know the languages used. There are several languages and frameworks in frontend development, but for the sake of this article, we will talk about the three most distinct languages that will set you up as a beginner in web development.
To better understand the three basic frontend languages, consider the human body as an example.
HTML
HyperText Markup Language (HTML) is the standard markup language used to build the structure of a website.
Just as the human skeleton provides structure to the body, HTML serves as the structural foundation of a website. Every other component of a website is built on top of this structure.
A simple HTML Document:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to HTML simplified</title>
</head>
<body>
<h1>My first HTML code</h1>
<p>Hello world</p>
</body>
</html>
To better understand an HTML syntax, it is important to note that HTML tags are typically opened and closed. These are commonly referred to as opening tags and closing tags, as shown in the example above.
HTML example explained
In the above HTML syntax, the:
<!DOCTYPE html>is the declaration that defines that this document is an HTML5 document.<html></html>tags are the root elements of an HTML page.<head></head>tags contains the meta information about the HTML page.<title></title>tags define the title for the website page, which can be seen at the top of the browser tab when loaded.<body></body>tags define the body, which contains the contents that are to be displayed on the website (texts, images, videos, etc.)<h1></h1>tags define a large heading. In HTML, the heading ranges from<h1>to<h6>; the higher the value, the smaller the heading appears.<p></p>tags define a paragraph. They act as a container for text content that is displayed on a webpage.
CSS
Cascading Style Sheets (CSS) is a frontend language used to style a website built with HTML. It defines how HTML elements are displayed in a browser.
Continuing with the human body analogy, CSS can be thought of as the skin and appearance of the body.
CSS can be implemented in styling a website using three methods:
- Inline styling (CSS): This is a method of styling that involves embedding the CSS code inside an HTML tag.
Example of an Inline styling CSS:
<button style="color: red; border: none;">Click me</button>
code explained:
The style="property: value;" here represents the inline CSS which, as we can see, is embedded inside our HTML tag <button></button>
Use case:
Inline styling is used in simple cases where a developer wants to quickly apply small styling changes to an element.
- Internal CSS: This is a method of styling that involves writing our CSS code inside our HTML document file. The CSS code is embedded in a
<style></style>tag, which is written inside the<head></head>tag in the.HTMLfile.
example of an Internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
button{
color: red;
border: none;
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>
Use case:
Internal CSS is used in cases where a developer:
- is working on a single-page website.
- wants consistent styling across multiple pages.
- wants to keep code organized and maintainable.
- External CSS: Unlike internal CSS, where styles are written within the
<head></head>tag, external CSS requires creating a separate.cssfile. This file is then linked to the.HTMLfile so that the styles can be applied. In subsequent articles, I will be showing you how to create an external.CSSfile and how you can link to your HTML.
Use cases for external CSS:
External CSS is used when a developer:
- is working on a multi-page website.
- wants consistent styling across multiple pages.
- is building a scalable or production-level project.
JavaScript
JavaScript (JS) is widely regarded as the programming language of the web. It is the only programming language commonly used for both frontend and backend web development.
Continuing with the human body analogy, JavaScript can be thought of as the veins, cells, muscles, and other systems that make the body function.
Just like CSS, JavaScript can also be written:
Internally - inside of an HTML document.
Externally - inside of a separate
.JSfile
Internal JS:
A developer writes an internal JS code inside the <script></script> tag in the .HTML file.
One thing to note when writing an internal JS code is that, unlike internal CSS, the <script></script> tag can be placed in either the <head></head> tag or the <body></body> tag of the .HTML file
example of an internal JS - in the <head></head> tag
<!DOCTYPE html>
<html>
<head>
<script>
let display = alert('my first JS code')
</script>
</head>
<body></body>
</html>
example of an internal JS - in the <body></body> tag
<!DOCTYPE html>
<html>
<head></head>
<body>
<--! body contents in here -->
<script>
let display = alert('my first js code')
</script>
</body>
</html>
External JS
A developer writes an external JS code in a separate .JS file, which is then linked to the .HTML file.
Summary
In this article, we covered the fundamentals of web development, with a primary focus on frontend development. We explored the core languages used in frontend development and highlighted a few ways to approach them.
In the upcoming articles in this series, we will break down each of these frontend languages and guide you through writing your first lines of code as a beginner in web development.
Until then, Ciao 👋
Top comments (0)