Module 6: Building the Webpage

Lesson 1: Structuring the HTML

Creating the Webpage Layout

We'll build a simple webpage with a dropdown menu for selecting a country, an area to display the response, and a flag image. This is quite a simple website and we'll take a look at what it's doing.

Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Country Information</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Select a Country</h1>
    <select id="countryDropdown"></select>
    <div id="infoContainer" style="display: none;">
        <h2 id="countryName"></h2>
        <img id="countryFlag" alt="Country Flag">
        <p id="countryAnswer"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

The main section you should be interested in is the bit between the <div> brackets. This is where your data is going to display. There's also a line that calls on a script.js file which we'll look at in the next module. This js file will contain the code that joins togther this website file with the JSON data.

We need to copy the code into a new file. I use a piece of software called Visual Code but it might be a little complex for now so using something like Notepad is completely fine. If you're using a Mac, search for an alternative to Notepad and you'll find a few options. You can also use an online notepad. Click here to access Online Notepad which is fairly handy. The main thing to note when you are saving this in Notepad is that you save the file in the correct folder and you name it "index.html"

index.html is the foundation of almost every website. When you go to most websites, the index.html file is the first one that opens up. Your folder should have two files now.

Lesson 2: Styling the Page

CSS for Layout and Design

A line of code in the index file you might note is: <link rel="stylesheet" href="styles.css">

This line opens up an external file called styles.css and this is where you get to make your app look pretty

For the moment, we'll again open a new file and paste this code and save it into our folder as styles.css

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 50px;
}
select {
    padding: 10px;
    font-size: 16px;
}
img {
    max-width: 150px;
    margin-top: 20px;
}

We'll be playing around with this again but for now, let's weave everything together with our script file in the next module.