Create your own personal page

By following the instructions below

It is easier than it looks I promise

Part 1: HTML

HTML (HyperText Markup Language) is the skeletal structure of the webpage, providing the basic layout and organization of content. It defines elements like headings, paragraphs, images, and links, which make up the different parts of a webpage. Think of it as the blueprint that outlines what appears on the page, while other technologies like CSS and JavaScript are used to style and add interactivity.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>(CHANGE1)</title>

    <style>
/* we will come back to this during the CSS section */
    </style>

</head>
<body>
    <section id="main">
<div class="main-content">
    <header>
        <h1>(CHANGE2)</h1>
    </header>
    <section class="image-section">

            <span class="image"><img src="(CHANGE3)" alt="" /></span>
        <p>
            (CHANGE4)
        </p>
    </section>

    <section id="quiz">
        <!-- we will come back to this during the JavaScript section -->
    </section>
</div>
    </section>

    <script>
// we will come back to this during the JavaScript section
    </script>
</body>
</html>
  • Copy and paste the code above into your favourite text editer
    • Notepad for windows
    • TextEdit for mac
    • Linux typically comes with Gedit
    • Or any third party text editor you may have
    • Note using a document editor like Microsoft Word will be difficult and not recommended, make sure you are using a text editor
    • If you want to use a better text editor you can download notepad++ or VS Code which I use myself. these options include syntax highlighting and other features which make the code easier to read.
  • Find (CHANGE1) towards the top of the document between the title tags and change it to your name or anything you want to call the webpage
  • Find (CHANGE2) further down between the h1 tag and change this as well, it will be the main heading of your page
  • (CHANGE3) will be a little more involved, this will be the photo for your page
    • Choose a photo on your computer you want to use, if you right click you should have the option to copy path
    • If you do not want to use a photo from your computer you can also copy a link for a photo on the internet, it will work just as well
    • Replace (CHANGE3) with the path/link you copied. It is important to place it between the quotation marks
  • Finally (CHANGE4) will be the content of the page, if you are making the page about yourself you can go into as much or as little detail as you like. if you want to add a new line here use <br /> instead of pressing return/enter
  • Now you can save your file, typically the first page of a project is called index.html you can name it anything as long as you include .html at the end
  • You can now open the page by double clicking the icon, it will open the browser and you can take a look
  • If it looks like a mess now that is expected, once we add CSS it will clean things up

CSS

CSS (Cascading Style Sheets) defines the rules for how HTML elements are styled and presented on the screen. It controls aspects such as colours, fonts, spacing, and layout, allowing you to customize the appearance of your webpage. While HTML provides the structure, CSS adds the visual styling, making the content look more appealing and user-friendly. It works by applying styles to elements based on selectors, enabling you to target specific parts of the page and apply consistent design rules across the entire site.


            
body {
    background-color: lightgray; /* Change the background colour of the page */
    color: black; /* Change the colour of the text */
}
.wrapper {
    
    padding: 6em 0 4em 0 ;
}

.main-content {
    font-size: 2em;
    width: 1400px;
    margin: 0 auto;
    background-color: white; /* Change the background colour of the content */
    border-radius: 8px;
    margin-bottom: 2em;
    margin-top: 4em;
    padding: 4em 3.5em 2em 3.5em ;
}

header {
    display: block;
    padding-top: 0.5em;
    text-align: center;
    margin-bottom: 6em;
}

.image-section {
    display: flex; 
    align-items: flex-start; 
    min-height: auto; 
}

.image {
    border-radius: 8px;
    border: 0;
    display: inline-block;
    padding: 0 1.5em 1em 0;
    max-width: 20%;
}

.image img {
    border-radius: 8px;
    display: block;
    width: 100%;
    height: auto;
}

.question-container {
    padding-left: 30%;
}
.question-container label {
    margin-right: 3%;
}

.answer-button {
    font-size: 1em;
    background-color: greenyellow;
    border: solid transparent;
    border-radius: 16px;
    border-width: 0 0 4px;
    box-sizing: border-box;
    color: black;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    letter-spacing: .8px;
    line-height: 20px;
    margin: 0;
    margin-top: 2vh;
    margin-bottom: 2vh;
    outline: none;
    overflow: visible;
    padding: 13px 16px;
    text-align: center;
    touch-action: manipulation;
    transform: translateZ(0);
    transition: filter .2s;
    vertical-align: middle;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%;
}

.answer-button:hover {
    background-color: rgb(145, 216, 38);
}
  • Looking at your HTML file again towards the top you will find a tag called style
  • Copy and paste the above CSS inside the style tag, save and refresh the webpage. It should look much different
  • You are welcome to play with different colours and personalise your page further

JavaScript

JavaScript is where the magic happens, allowing you to add interactivity and dynamic behaviour to your webpage. It enables you to create logic that can respond to user actions, manipulate the content, validate forms, animate elements, and much more. While HTML structures the content and CSS styles it, JavaScript brings the page to life by making it interactive and responsive to user input.


// List questions in JSON format, feel free to add or change questions as long as you keep to the same pattern
const questions = [
    {
        "question": "What is the capital of France?",
        "choices": [
            "Berlin",
            "Madrid",
            "Paris",
            "Rome"
        ],
        "answer": "Paris"
    },
    {
        "question": "What is known as the red planet?",
        "choices": [
            "Earth",
            "Mars",
            "Jupiter",
            "Saturn"
        ],
        "answer": "Mars"
    },
    {
        "question": "What is the largest ocean on Earth?",
        "choices": [
            "Atlantic",
            "Indian",
            "Arctic",
            "Pacific"
        ],
        "answer": "Pacific"
    },
]
// Create title for the quiz section
const quizContainer = document.getElementById("quiz");
const header = document.createElement("header");
const title = document.createElement("h2");
title.innerHTML = "Quiz";
header.appendChild(title);
quizContainer.appendChild(header);

// Add questions to the page ready to be answered
questions.forEach((q, index) => {
    const questionContainer = document.createElement("div");
    questionContainer.classList.add("question-container");

    const question = document.createElement("p");
    question.classList.add("question");
    question.textContent = `${index+1}. ${q.question}`;
    questionContainer.appendChild(question);

    q.choices.forEach(choice => {
        const label = document.createElement("label");
        const radio = document.createElement("input");
        radio.type = "radio";
        radio.name = `question-${index+1}`;
        radio.value = choice;

        label.appendChild(radio);
        label.appendChild(document.createTextNode(choice));
        questionContainer.appendChild(label);
        // questionContainer.appendChild(document.createElement("br"));
    });
    quizContainer.appendChild(questionContainer);
});

// Function to check the answers
function checkAnswers(){
    // reset answers
    const labels = document.querySelectorAll("label");
    labels.forEach(l => {
        l.style.color = "black";
    });

    const answers = document.querySelectorAll(".question-container");
    answers.forEach((answer, index) => {
        const selectedOption = answer.querySelector('input[type="radio"]:checked');
        if (selectedOption){
            const userAnswer = selectedOption.value;
            const correctAnswer = questions[index].answer;

            const label = selectedOption.parentElement;

            if (userAnswer === correctAnswer) {
                label.style.color = "green";
            } else {
                label.style.color = "red";
            }

        }
    });
}

const answerButton = document.createElement("button");
answerButton.classList.add("answer-button");
answerButton.textContent = "Check Answers";
quizContainer.appendChild(answerButton);
answerButton.addEventListener("click", checkAnswers);
  • Last step lets give the user something to interact with, going back to our HTML file towards the bottom you will find the script tag
  • Copy and paste the JavaScript above between the tag
  • This will generate a quiz and will check the answers when completed
  • You are welcome to change and add as many questions as you like, make sure you keep format the questions are in. paying particular attention to quotation marks, comma's and the use of square and curly brackets

Final notes

I hope you had fun following this short tutorial on developing your own webpage, if you want to learn more about front end web development I recommend this free bootcamp from frontend masters or for a more in depth look at computer science you can try CS500 where I got my start.