Full Stack and Blockchain Mastery Program
Web Development Basics
The Building Blocks of the Web
Every website you visit is built with three core technologies: HTML, CSS, and JavaScript. Think of them like the components of a house. HTML is the frame and foundation, CSS is the paint and decor, and JavaScript installs the electricity and plumbing.
These are the building blocks of web development.
Let's break down each one to see how they work together to create the web pages we use every day.
HTML Structures the Content
HyperText Markup Language (HTML) is the skeleton of a webpage. It isn't a programming language; it's a markup language used to define the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear or act a certain way.
The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, look at the following line of content:
My cat is very grumpy
If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:
<p>My cat is very grumpy</p>
A basic HTML document has a standard structure that tells the browser how to display the page. It includes a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body> tags.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The <head> contains information about the page, like the title that appears in the browser tab. The <body> contains the actual content that's visible to the user, like headings (<h1>), paragraphs (<p>), images (<img>), and links (<a>). When a browser reads this HTML, it renders it as a simple webpage.
CSS Adds the Style
Cascading Style Sheets (CSS) is what gives a website its look and feel. While HTML provides the structure, CSS handles the presentation. You can use it to change colors, fonts, spacing, and layouts. This separation of concerns—structure (HTML) from presentation (CSS)—makes code easier to manage and reuse.
You can apply CSS styles to HTML elements using selectors. A selector can be an element type, like p, or a class name you've given an element, like .special-text. Here's how you might style the paragraph from our earlier example.
p {
color: blue;
font-size: 16px;
font-family: Arial, sans-serif;
}
This code tells the browser to find all <p> elements and make their text blue, 16 pixels tall, and use the Arial font. Every element on a webpage can be thought of as a box. CSS lets you control the dimensions of this box, including its content area, padding, border, and margin. This is known as the CSS box model.
Understanding the box model is key to creating well-structured layouts. Modern CSS also includes powerful tools like Flexbox and Grid, which make it much easier to align elements and build complex, responsive page layouts that adapt to different screen sizes.
JavaScript Brings Interactivity
JavaScript is the programming language of the web. It breathes life into static pages by allowing them to be interactive. When you click a button that shows a pop-up, see an animated slideshow, or fill out a form that gives you instant feedback, you're seeing JavaScript in action.
JavaScript works by interacting with the Document Object Model (DOM). The DOM is a tree-like representation of a webpage's HTML structure. JavaScript can add, remove, or change any of the HTML elements and their attributes, effectively modifying the page in real-time without needing to reload it from the server.
For example, you can write a script that listens for a button click and then changes the text of a paragraph.
// HTML
<p id="demo">Hello World!</p>
<button onclick="changeText()">Click me</button>
// JavaScript
function changeText() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
In this snippet, the getElementById function finds the HTML element with the ID demo. The innerHTML property then allows us to change the content inside that element when the button is clicked. This is a simple example of DOM manipulation, the core concept behind dynamic web pages.
Designing for Every Screen
Today, people access the web on all kinds of devices, from giant desktop monitors to tiny smartwatches. Responsive design is the practice of building websites that look good and function well on any screen size.
This isn't just about shrinking a website down. It's about creating a flexible layout that adapts. Key techniques include using fluid grids, flexible images, and CSS media queries. Media queries allow you to apply different CSS rules based on the device's characteristics, like its width, height, or orientation.
/* On screens that are 600px wide or less, make the background color lightblue */
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
By combining these three technologies—HTML for structure, CSS for style, and JavaScript for interactivity—you can build nearly any web experience you can imagine.
Time to test what you've learned about the foundations of the web.
In the analogy of building a house, what does HTML represent?
Which technology is responsible for a website's interactivity, such as a clickable pop-up or a dynamic photo gallery?
Mastering these fundamentals is the first and most important step in becoming a web developer. With a solid grasp of HTML, CSS, and JavaScript, you're ready to explore more advanced topics and build amazing things.