Graham Boyle's Blog
The Basics of Web Development: A Practical Guide for Beginners

The Basics of Web Development: A Practical Guide for Beginners

Practical Steps to Enhance Your Understanding of Web Development Made Easy

Graham Boyle's photo
Graham Boyle
·

7 min read

Table of contents

Are you new to web development and curious about how HTML, CSS, and JavaScript work together to create an interactive web page?

Ponder no more. This article is for you!

This article will introduce you to the basics of HTML and CSS while explaining how the JavaScript programming language contributes to a webpage's interactiveness and other functionalities.

How the Internet works

The internet is like a web of linked computers. When you connect to the internet, your computer is assigned a unique address called an IP address. This IP address allows other computers on the internet to identify your computer.

When you visit a website, your computer sends a request to the website's server for the web pages. The server then sends the web pages to your computer, and then your computer shows you the website.

The internet may seem complicated, but it's crucial in our modern world. It lets us talk to people, find information, and send files from anywhere on Earth.

What is Web Development?

Web development is constructing and maintaining websites and online programs. It's a mix of creating how websites look and work, making sure they are visibly appealing, comprehensive, and easy to navigate on the internet.

Web developers use programming languages, tools, and frameworks to build websites and web applications accessible through web browsers.

Front-end developers use Hypertext Markup Languages (HTML), Cascading Style Sheets (CSS), and JavaScript to create the visual and interactive elements of the webpage.

Back-end developers focus mainly on server and database management systems using programming languages like Python, Ruby, PHP, Java, and Node.js.

Why Learn Web Development?

Being a developer comes with numerous benefits.

You might think, “Do I have to keep learning, unlearning, and relearning?”

Yes, you do.

Due to constantly advancing technologies, it is advisable to maintain a continuous and progressive learning process.

Benefits of learning web development include:

  • It is a highly demanded skill. In an interview with the CEO of Git Hub, he said, “Despite artificial intelligence (AI) gains, demand for software developers will still outweigh the supply.”

  • Skilled web developers can earn a lot of money. The monetary compensation is quite attractive.

  • If you aim to go global, your work can be visible and used globally.

  • It can be satisfying and fulfilling through problem-solving and making a meaningful contribution to the digital world.

Prerequisite

For one to get the most out of this article, you need the following:

  • Web browser to execute and debug your code.

  • A text editor for writing and editing codes, preferably you Download - Sublime Text

  • Desire to learn.

Let's explore the fundamentals of HTML, CSS, and JavaScript together.

What is HTML?

HTML is not a programming language, it stands for HyperText Markup Language.

New developers often think it's a programming language but it's not. A programming language uses logic to determine if a declaration is true or false and then carries out an action based on that condition.

HTML is the standard markup language used for creating the structure of a webpage.

In other words, HTML is the ‘skeleton’ of a webpage and its contents. For example, HTML defines web elements such as headings, paragraphs, tables, links, images, etc.

These elements use tags enclosed in an angle bracket, <tags>content</tags> which provides instructions to web browsers on how to display the content.

We will create a basic webpage that modifies the background color with a button click.

This aims to enhance understanding of the connection between HTML, CSS, and JavaScript.

Go to Desktop > Create a new folder, open it, and create a text file named index.html. Open index.html with Sublime and paste the code below:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>

  <body>
    <h1>This is a header</h1>
    <p>This is a paragraph of text on my web page.</p>
    <a href="https://google.com/">This is a link.</a>
    <button id="colorChangeButton">Change Color</button>
  </body>
<!-- this is how to comment in HTML-->
</html>

In this code snippet, you can see:

  • <!DOCTYPE html> which tells the browser the document is written in HTML.

  • <html>, <head>, and <body> tags, which define the structures of the HTML file.

  • The <title> tag sets the title of the webpage.

  • The <p> tag, which defines a paragraph of text.

  • The <a> tag, which defines a link, can be a link to another webpage or a different part of the same webpage.

  • The <button> tag is used to create a button.

  • The <!--> (comment) tag used for documentation, and isn't visible on the webpage.

After pasting the codes in the text editor, save, minimize, and open index.html with a browser, preferably Chrome, and you get this outcome:

WHAT IS CSS?

CSS stands for Cascading Style Sheets with file extension .css. CSS is a style sheet language used to style HTML elements for a better display on a web page.

Think of it as ‘clothing’ for HTML’s ‘skeleton’, with attributes like background colors, font size, font color, layout, and more.

With both HTML and CSS, you can create a simple web page that is visually appealing and easy to navigate.

Go to the new folder you created earlier, create a text file named styles.css next to index.html, open the file with sublime text, and paste the following code:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f2f2f2;
}

button {
    padding: 10px 20px;
    background-color: #0074d9;
    color: #fff;
    border: none;
    cursor: pointer;
}

There will be no difference if you reload the webpage containing your HTML code. This is because you have to link index.html to styles.css with this simple line of code <link rel="stylesheet" type="text/css" href="styles.css">.

This is how you link files in HTML. Here we're linking the index.html file to the styles.css file in order for the CSS code to reflect on the web page.

Copy and paste this line of code in the html file you created earlier inside the <head> tag as seen below:

<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="styles.css">
    <title>My Web Page</title>
  </head>

After that, save and reload the web page to get this outcome:

The simple web page looks a bit better now.

If you observe, clicking on the button does nothing - this is where JavaScript comes into play, allowing the button to function as intended.

What is JavaScript?

JavaScript, often called JS, is a widely-used and versatile programming language, primarily recognized for its essential role in web development. It plays a key part in adding interactivity and dynamic functionality to web pages.

JS is crucial for building interactive elements on websites like image sliders and form validation, enabling developers to improve the user experience.

In other words, it modifies the content of a web page and makes it respond to user interactions. JS also collaborates with HTML and CSS to construct web applications and dynamic web pages.

HTML is the skeleton, CSS is the clothing, and JavaSript is the ‘brain’ that makes a web page interactive.

Go to the new folder and create a new text file script.js. Open the file with sublime text, and paste the following code:

// JavaScript to change the background color when the button is clicked
const colorChangeButton = document.getElementById("colorChangeButton");
const body = document.body;

colorChangeButton.addEventListener("click", function () {
    const randomColor = getRandomColor();
    body.style.backgroundColor = randomColor;
});
// Function to generate a random color
function getRandomColor() {
    const letters = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

The bunch of codes might be a bit confusing for now, but there's no need to worry; you can find links to resources on JS at the end of this article.

For the above code to work, you have to link the JS file to the HTML by typing this line of code <script src="script.js"></script> inside the <body> tag right below the <button> tag, as seen below:

<h1>This is a header</h1>
    <p>This is a paragraph of text on my web page.</p>
    <a href="https://google.com/">This is a link.</a>
    <button id="colorChangeButton">Change Color</button>
    <script src="script.js"></script>  
</body>
<!-- this is how to comment in HTML-->
</html>

Now save and reload the webpage in the browser. The background color changes randomly when you click the Change Color button. As seen below:

Viola! You now have an interactive web page.

Conclusion

Web development remains an essential technology component as long as the internet exists. A webpage relies on HTML, CSS, and JavaScript to work efficiently.

To excel in web development, be ready for continuous learning, adapting, and updating your knowledge.

Resources

For further knowledge on web development:

Happy Coding!

Beginner DevelopersWeb DevelopmentHTML5CSSJavaScript