This was a final unit project, that showed if we were able to create multi-page sites. This project was supposed to be a webpage providing information to incoming 7th grade students about the school. The page should have included useful information about the teachers, classes, schedules, after-school clubs, and any general information that a new student would want to know ysing the HTML and CSS coding.

Here’s the link to my webpage:

Here’s my webpage coding:

<!DOCTYPE html>

<title>Aleksandra's BSGE homepage</title>
     <meta charset="UTF-8">
     <meta name="description" content="Home Page">
     <meta name="keywords" content="HTML, CSS, 8th grade, tech, programming, lesson">
     <meta name="author" content="">
     <link rel="stylesheet" type="text/css" href="Aleksandrastyle.css" />
<aside class="left">

<img src="" alt="iblogo" style="width:150px;height:150px;"><br />

<h1 id=h1><span style="color:blue">B.</span><span style="color:yellow">S.</span><span style="color:blue">G.</span><span style="color:yellow">E.</span></h1>
<p>The Baccalaureate School for Global Education</p>
<aside class="right">
<img id= img2; src="";width="150" height="150">
<li><a href="home.html">Home</a></li>
<li><a href="ibprogram.html">The IB Program</a></li>
<li><a href="courses.html">Courses Offered</a></li>
<li><a href="schedule.html">Schedules</a></li>
<li><a href="clubs.html">School Clubs</a></li>
<li><a href="teachers.html">Teachers</a></li>
<li><a href="sources.html">Sources</a></li>


<p>Welcome to the B.S.G.E homepage. Here you can find information abut the school and especially about seventh grade among other grades and how they experience the school.<p>

<a href="">The official BSGE website</a>


div.img {

    margin: 5px;

    border: 1px solid #ccc;

    float: left;

    width: 180px;


div.img:hover {

    border: 1px solid #777;


div.img img {

    width: 100%;

    height: auto;


div.desc {

    padding: 15px;

    text-align: center;





<div class="img">

  <a target="_blank" href="!/img/httpImage/image.jpg_gen/derivatives/article_1200/best8n-1-web.jpg">

    <img src="!/img/httpImage/image.jpg_gen/derivatives/article_1200/best8n-1-web.jpg" alt="Trolltunga Norway" width="500px" height="300px">


  <div class="desc">The outside of the school</div>


<div class="img">

  <a target="_blank" href="">

    <img src="" alt="Forest" width="600" height="400">


  <div class="desc">The school library</div>


<div class="img">

  <a target="_blank" href="">

    <img src="" width="600" height="400">


  <div class="desc">The newly painted cafeteria</div>


<div class="img">

  <a target="_blank" href="">

    <img src="" alt="Mountains" width="300px" height="400px">


  <div class="desc">The music room</div>


In order to create my webpage, I first made a project design outline, that showed what my ideal webpage for BSGE would look like. It was basically an outline for the whole project.
Here's the design:
Secondly, I made a schedule/ project plan, that listed what part of the project I would do on what day.
Sunday Monday Tuesday Wednesday Thursday Friday Saturday
nothing nothing Class: plan

Home: content information and images

Class: HTML outline

Home: finish HTML outline

Class: courses offered

Home: courses offered

Class: ib diploma

Home: ib diploma

Home: student clubs

And teachers

Student clubs and teachers Home and Class:

Organize CSS

Finish anything that’s not done Class and home: debug and check Class and home: debug and


Throughout the process of making my webpage, I was checking back to to make sure that I was coding the website correctly. As I was making progress on my project, I would record the progress in developers logs. 
I created the webpage with TextWrangler and uploaded it using FileZilla. 
The reason that this project looks somewhat decent is through luck, tears and annoyance, but most of all trying to catch up on work that I was supposed to have done a couple of days ago.


image_printPrint this page.


0 0 votes
Rate This Post
Notify of
1 Comment
Oldest Most Voted
Inline Feedbacks
View all comments
November 28, 2016 10:30 pm

ale to super!

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