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:

http://tech.bsge.org/students/21omylaka/

Here’s my webpage coding:

<!DOCTYPE html>

<html>
<head>
<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="21omylaka@bsge.org">
     <link rel="stylesheet" type="text/css" href="Aleksandrastyle.css" />
     
</head>  
<aside class="left">
   

<img src="http://www.ibo.org/globalassets/digital-tookit/logos-and-programme-models/ib-world-school-logo-2-colour.png" alt="iblogo" style="width:150px;height:150px;"><br />
   
</aside>
<header> 

<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>
</header>
<aside class="right">
<img id= img2; src="http://askbuzz.gatech.edu/GeorgiaTech.png";width="150" height="150">
</aside>
<nav>
<ul>
<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>

</ul>
</nav>

<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="http://bsge.org/">The official BSGE website</a>



<style>

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;

}

</style>

</head>

<body>



<div class="img">

  <a target="_blank" href="http://assets.nydailynews.com/polopoly_fs/1.1074170.1336450706!/img/httpImage/image.jpg_gen/derivatives/article_1200/best8n-1-web.jpg">

    <img src="http://assets.nydailynews.com/polopoly_fs/1.1074170.1336450706!/img/httpImage/image.jpg_gen/derivatives/article_1200/best8n-1-web.jpg" alt="Trolltunga Norway" width="500px" height="300px">

  </a>

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

</div>



<div class="img">

  <a target="_blank" href="https://lh3.googleusercontent.com/-REpRbfivdVQ/TrxnikO4HBI/AAAAAAAAQBo/eBQP5A5R718/s300/P1040078.JPG">

    <img src="https://lh3.googleusercontent.com/-REpRbfivdVQ/TrxnikO4HBI/AAAAAAAAQBo/eBQP5A5R718/s300/P1040078.JPG" alt="Forest" width="600" height="400">

  </a>

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

</div>



<div class="img">

  <a target="_blank" href="https://thebaccrag.files.wordpress.com/2016/06/img_5372.jpg">

    <img src="https://thebaccrag.files.wordpress.com/2016/06/img_5372.jpg" width="600" height="400">

  </a>

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

</div>



<div class="img">

  <a target="_blank" href="https://lh3.googleusercontent.com/-n2RoBir7X_4/TrxcmRRgBRI/AAAAAAAAP88/xTnZSwX8c4kx-nMSFfKow9EFa7zVlSnXACHM/s540/P1040044.JPG">

    <img src="https://lh3.googleusercontent.com/-n2RoBir7X_4/TrxcmRRgBRI/AAAAAAAAP88/xTnZSwX8c4kx-nMSFfKow9EFa7zVlSnXACHM/s540/P1040044.JPG" alt="Mountains" width="300px" height="400px">

  </a>

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

</div>
</body>
</html>

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

CRYYYYY

due
Throughout the process of making my webpage, I was checking back to www.w3schools.com 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.

 

Tags:

CC BY-SA 4.0 Unit 2 Tech Project by Aleksandra is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

1 Comment
  1. Isabella 9 months ago

    ale to super!

Leave a Reply

CONTACT US

We welcome new members. You can send us an email and we'll get back to you, asap.

Sending

Youth Voices is organized by teachers at local sites of the National Writing Project and in partnership with Educator Innovator.

CC BY-SA 4.0All work on Youth Voices is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License
Missions on Youth Voices

Log in with your credentials

or    

Forgot your details?

Create Account

%d bloggers like this: