top of page

Web Development Assignment

Introduction

In this individual project, I used HTML, CSS and Javascript to design and develop a personal website.

​

Features:

  • Games

    • Breakout bricks​

    • Simon

  • Jokes

    • Riddles​

    • Gallery

  • Health tips​

  • About

​​

To do something creative with the background of my website, I used javascript to code a colour changing background.

Games

The games section on my website would definitely be the most interesting feature I have done.

 

I used javascript to develop the 2 games, breakout bricks and simon. HTML and CSS were used to format and design the game layout.

Breakout Bricks

Simon Game

Jokes

The jokes section consists of riddles and a gallery of funny images and videos.

 

To create the riddles page, a used a HTML dropdown menu to display the answers when the question is being clicked on and CSS to design the page.

As for the gallery, I used HTML and CSS to format the images and videos.

Riddles

Gallery

The following are 3 samples displayed in the gallery.

Health tips

The health tips section teaches the user how to measure and interpret their body mass index (BMI).

​

To help users find out their BMI, I have included a calculator which tells the user the range they are in (eg. underweight, normal weight). If the user is not of normal weight, a suggested range for an acceptable weight based on their height is given.

Calculator

About 

The about page tells my visitors information about me. To create this page, I used HTML and CSS.

Key Takeaways from this Project

This individual assignment was my first main assignment using HTML, CSS and Javascript.

 

Through this assignment, I learned how to integrate Javascript codes with HTML and CSS so that my website would be able to function well with the layout.

​

To me, the toughest part of this assignment was coding the 2 games, breakout bricks and simon. As I had just started learning how javascript works, coding 2 games made me push myself to achieve what I thought was not yet possible.

​

During this assignment, I was also allowed to use my creativity because my teacher did not assign me a theme or focus. This meant that it was up to my creativity to decide on how much I wanted to push myself to do for this assignment.

​

Overall, I am very satisfied with the end result of my website.

WEBDEV Key Takeaways
bottom of page