For my 8th grade Unit 2 Project for technology class, we learned html and css coding to finally make up a collection of web pages about our school, the Baccalaureate School for Global Education – or BSGE for short. For my pages I researched the content I was going to put into them, I designed how they all would look like, I planned when each of them would get done, and finalized them all by the due date. However, these pages weren’t going to be made on what we would like to base them on. Instead, my peers and I were given some requirements and constraints to follow. Although, I’m not going to give all of the to you; here are just a few of them to give you an idea of what we needed to do:

  • the website must have a homepage and at least four other pages,
  • the website must contain a navigation bar on all pages,
  • the website must have pictures of the school,
  • the website must have 90% or more of its styles specified in a single external style sheet,
  • the website must be completed by Friday, November 4, and
  • any pictures used must have permission or be via Creative Commons.

Those were just 6 out of the 17 requirements that we had to meet. The other 11 just stated what we should and should not include as the content of our websites.

My project in particular can be found at:


Now let me explain the process I took to make my whole website. First I designed the basic layout of the pages, then I planned when things would get done. I researched on all of the content that I didn’t know much about, and finally uploaded them and checked their functionality.

That above is my project design. It was mainly meant for the home page of my website. The home page is the main web page that you will see when you try and connect to my project. It acts as a hub to all the pages that I’ve made for this project. However, the only difference is that only my home page has that image of the school, while my other pages of the site don’t.

After I made that design, it never really changed as I thought it represented BSGE, the best. The colors all (for me) are best connected to BSGE as BSGE follows the IB program (which the main color is blue) and has teams called the Stings (which are primarily yellow as the mascot is hornet). I just used different shades blue and yellow to come up with my design. I also really wanted the design just to be short and simple so it doesn’t scare off any viewers.

Now onto my project plan. It was very simple and just allowed to set due dates for myself and hasn’t very much changed through the coarse of this project. It was a go to plan where each night I had to accomplish something new. For awhile, I was a little behind schedule, but still accomplished what was set for each night.

Some parts of my plan include:

  • Take pictures of and search up images relating to the school and if they’re not on creative commons, I could try and get permission. (Friday 10/28)
  • Create a navigation bar that links my main home page to my other pages of information and links to other pages where people could out more info that I can’t really explain as well. (Saturday 10/29)
  • Test if those links and images work. (Sunday 10/30)
  • Get the information and content I will put into my pages. I will type them up in docs first and revise them. (Monday 10/31)

The plan worked and helped me keep track of what has to be done. All in all, my plan was great for me and did well to keep me with time. In fact, I would say it would be what allowed me to submit my website on time.

I’d say with the html (which stands for Hypertext Markup Language) coding, the biggest part has to be my navigation bar which links all my pages together.

        <li><a href=”home.htmltarget=”_blank“> Home </a></li>
       <li><a href=”contactproject.htmltarget=”_blank“> Contact </a></li>
       <li><a href=”ibproject.htmltarget=”_blank“> IB Program </a></li>
       <li><a href=”usualdayproject.htmltarget=”_blank“> Usual Day </a></li>
       <li><a href=”studentsproject.htmltarget=”_blank“> Students </a></li>
       <li><a href=”afterschoolproject.htmltarget=”_blank“> After School </a></li>
       <li><a href=”bibliographyproject.htmltarget=”_blank“> Bibliography </a></li>

Instead of creating a regular list with <ul> and <li> tags, I had to use <nav> tags (which stand for navigation) in order for my styles for the bar to work. These styles were put into css (which stand for Cascading Style Sheet) coding and put into another file called an “external style sheet”. This is basically a file that has style codes and is connected with html files that make up a webpage.

nav {
   clear: left;
   margin: 0;
   padding: .5em;
font-family:’Comic Sans MS’,Sans-Serif;
nav ul {
   list-style-type: none;
padding: 0;
nav ul li {
clear: left;
border-right:1px solid #bbb;
display: inline;
nav li:last-child {
border-right: none;
nav ul a {
   text-decoration: none;
nav ul a:link, nav ul a:visited {
nav ul a:hover {
   font-weight: bold;

Coding like this allows for my navigation bar looks as good as it does on my site. All that code is based around styles only so that my html web pages look appealing to the eye of anyone that sees it.


I did my best with this project/website. It most likely isn’t the best of all website ever made, but for my amateur ways, it seems good enough.

image_printPrint this page.


0 0 votes
Rate This Post
Notify of
Inline Feedbacks
View all comments

Youth Voices is an open publishing and social networking platform for youth. The site is organized by teachers with support from the National Writing Project. Opinions expressed by writers are their own.  See more About Youth VoicesTerms of ServicePrivacy Policy.All work on Youth Voices is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License


Email Call or Text 917-612-3006

Missions on Youth Voices
Would love your thoughts, please comment.x

Log in with your credentials


Forgot your details?

Create Account