Build Your Professional Portfolio Website
Introduction to Web Development
The Building Blocks of the Web
Every website you visit, from a simple blog to a massive online store, is built using three core technologies: HTML, CSS, and JavaScript. Think of them like building a house. HTML is the frame and foundation, CSS is the paint and furniture, and JavaScript is the electricity and plumbing that makes everything work.
Your web browser is incredibly smart. It reads files written in these three languages and translates them into the visual, interactive pages you use every day. Let's look at each one to see what role it plays.
HTML: The Skeleton
HTML
noun
Stands for HyperText Markup Language. It's the standard language used to create the structure and content of web pages.
HTML isn't a programming language; it's a markup language. It uses special markers called tags to define different types of content. Tags usually come in pairs, with an opening tag like <h1> and a closing tag like </h1>. Everything between them is an element.
This structure tells the browser what each piece of content is. Is it a main heading? A paragraph? A link? A picture? HTML organizes all of this information into a logical hierarchy.
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<p>This is a paragraph of text.</p>
<a href="#">This is a link.</a>
</body>
</html>
The code above is a basic blueprint for a webpage. The <body> tag holds all the visible content, like the <h1> (Heading 1) and the <p> (paragraph). The browser reads this file and knows exactly how to display the content in the right order.
CSS: The Style
An HTML page on its own is functional, but not very attractive. That's where CSS comes in. CSS, or Cascading Style Sheets, is the language used to describe the presentation of a webpage. It controls the colors, fonts, spacing, and layout.
CSS works by selecting HTML elements and applying style rules to them. You can select elements by their tag name (like h1), a special class you give them, or a unique ID.
/* This is a CSS comment */
body {
font-family: sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333366; /* A dark blue */
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}
If we applied that CSS to our HTML file, the browser would transform the plain page. The background would turn light gray, the heading would become dark blue and centered, and the paragraph text would be a bit larger and easier to read. CSS separates the style from the structure, which makes websites much easier to manage.
A key concept in CSS is the box model. Every HTML element is treated as a rectangular box with content, padding, a border, and a margin. Understanding this helps you control layout and spacing precisely.
JavaScript: The Interactivity
HTML and CSS create static pages. They look nice, but they don't do anything. JavaScript (JS) is a true programming language that brings websites to life. It runs directly in the user's browser and can manipulate the HTML and CSS of a page on the fly.
Have you ever clicked a button that revealed a hidden menu, filled out a form that gave you instant feedback, or seen a photo gallery you could click through? That's all JavaScript at work.
JavaScript can listen for user actions, called events, like clicks, mouse movements, or key presses. When an event occurs, it can run a block of code to change the page. For example, a simple script could change the text of our heading when a user clicks a button.
// Select the button and heading elements
const myButton = document.querySelector('#changeTextBtn');
const myHeading = document.querySelector('h1');
// Listen for a click on the button
myButton.addEventListener('click', function() {
// When clicked, change the heading's text
myHeading.textContent = 'You changed me!';
});
With these three technologies working together, you have everything you need to build a complete, modern website. HTML provides the bones, CSS gives it a unique look, and JavaScript adds the brainpower.
Time to check your understanding of these core concepts.
What is the primary role of HTML in web development?
True or False: CSS is considered a programming language because it adds interactivity to a website.
Now you know the fundamental roles of HTML, CSS, and JavaScript. The next step is to start building.