Web Basics - HTML, CSS, and JavaScript
Published on: Feb 2nd, 2025
Web development is a vast field that encompasses many different technologies and skills. However, at its core, web development relies on three fundamental technologies: HTML, CSS, and JavaScript. These three technologies work together to create the websites you see on the internet today. In this article, we'll explore the basics of HTML, CSS, and JavaScript and how they work together to create a functional and visually appealing website.
HTML - Hypertext Markup Language
Hypertext Markup Language (HTML) is the core language used to display websites on the internet. It was first created in 1993 and allows anyone to have content on a webpage. HTML controls the structure of the webpage you wish to create. To begin building a website, mastering HTML is essential. Knowing the various elements at your disposal will enable you to create a webpage with ease. However, if you want your site to have a polished, professional look, you’ll also need to learn Cascading Style Sheets (CSS) and JavaScript.
Examples of common HTML tags:
<h1>: Defines a primary heading.<p>: Defines a paragraph.<header>: Represents the top section of the page, often used for navigation and introduction.<footer>: Represents the footer area of the page, typically containing copyright info and links.
Semantic HTML: It's important to use HTML elements that clearly describe their
content. For example, <article>, <section>, and
<nav> improve accessibility and SEO, making it easier for search engines and
screen readers to understand your page structure.
Example of a basic HTML webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<p>This is a simple webpage created using HTML.</p>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>
CSS - Cascading Style Sheets
Cascading Style Sheets (CSS) were introduced in 1996 to add style to webpages. CSS brings your HTML structure to life, allowing you to customize the appearance of elements. By targeting specific HTML elements, you can alter their color, layout, size, and more. Mastering CSS is critical to transforming a basic webpage into a polished, professional website without needing to change the HTML structure.
CSS Selectors: CSS uses selectors to apply styles to HTML elements. Some basic selectors include:
#id: Selects an element by its ID..class: Selects all elements with a specified class.element: Selects all elements of a specific type (e.g.,<h1>).
Modern Layout Techniques: With Flexbox and Grid, CSS now allows for more flexible and powerful layouts. These methods make it easier to create complex designs without using floats or positioning.
Responsive Design: CSS also enables responsive design, ensuring websites look good on all devices. Media queries adjust styles based on the screen size, making your site mobile-friendly.
Example of CSS to style a webpage:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
h1 {
margin: 0;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}
JavaScript
JavaScript is a scripting language that was created in 1995 to make webpages interactive and dynamic. Unlike static HTML pages, JavaScript allows you to add functions such as dynamic footers, pop-ups, or interactive calculators. A developer’s ability to understand and use JavaScript effectively is crucial since it’s one of the most powerful tools for creating engaging, interactive web experiences.
DOM Manipulation: The Document Object Model (DOM) is a representation of the
HTML structure of the page. JavaScript allows you to interact with the DOM using methods like
getElementById, querySelector, and createElement.
Event Handling: JavaScript listens for events like clicks, mouse movements, or
keyboard input. You can use addEventListener to create interactive elements. For
example, a button might change the background colour when clicked:
Example of JavaScript to add interactivity:
document.getElementById("changeButton").addEventListener("click", function() {
document.body.style.backgroundColor = "#dff0d8";
});
This simple JavaScript code allows you to change the background color of the webpage when a button is clicked.
Overview of the Web Development Process
The web development process typically involves three main steps:
- Designing the Website: Start by planning the structure with HTML.
- Styling and Layout: Apply CSS to enhance the design and layout.
- Adding Interactivity: Use JavaScript to make your website interactive and dynamic.
Other Tools and Frameworks: Besides HTML, CSS, and JavaScript, developers often use version control systems like Git and modern frameworks like React, Angular, or Vue.js to build powerful applications, and I strongly recommend once you are comfortable with the basics you take a look at these frameworks to learn how to create even more complex web applications
Accessibility Tips for web design
Creating accessible websites ensures everyone can use them, including people with disabilities. Here are some important accessibility tips:
- Use
altattributes for images to provide text descriptions. - Ensure good color contrast for readability.
- Support keyboard navigation to make your site navigable without a mouse.
In Conclusion
HTML, CSS, and JavaScript form the essential building blocks for creating functional and aesthetically pleasing websites. HTML provides the structure, CSS adds the style, and JavaScript enhances interactivity. Mastering these three technologies is key to becoming a successful web developer, allowing you to create websites that are not only functional but also dynamic and visually engaging, as well as giving you the core fundamentals before moving forward with other web development frameworks such as React, Angular, and Flutter.