Unit 3 &

13 Assignment 3: Develop a
website
Harrison O’donnell 123919

My Weebly
 Introduction
On this assignment, I’m going to create a digital portfolio on Weebly, the aim for this portfolio is to impress the
people at Exa networks so I can get a job in the IT industry. What I’ll need to do is a test plan, folder structure. I’ll
need to make pages for Home, about us, the units that i’m doing, a contact page and feedback page.
 Test plan
Test Number Webpage Test Outcome Comment

1 Google chrome To find out the The website

performance of runs very
the website and smoothly such
find out how I as it fast, all the
can fix it. buttons work
and the colours
are accurate.

2 Microsoft edge To find out the The

performance of performance is
the website and very good and
find out how I the website and
can fix it. you can search
the images on
the website to
find the origins
of then unlike
you can on
google.

3 Mozilla firefox To find out the The website

performance of works on
the website and Firefox but it’s
find out how I runs slower
can fix it. than it does on
Chrome.

4 Safari To find out the It works really

performance of good when
the website and your using an
find out how I apple device
Folder Structure

The reason why I have different folders is to keep my work from different units organised. If I kept everything on 1 file then
I would be hard to find the files for your units.

This folder structure will let Exa Network know what my folder structure looks like and where my college work is stored
 Home Page
Actual website
Design

This page shows the design of my homepage compared to the design on Weebly. The difference between these
2 pages is that the home page design has a hamburger button for the settings, while on the actual home page it
has being removed. The reason why I changed the logo was because I thought that it would be unnecessary to
add settings button even when the accessibility is already there. Another difference between the 2 pages is that
I put the Pearsons BTEC logo on the actual home page but not on the design. The reason why I added the BTEC
logo on the actual design is because I wanted Exa networks to know the exam board for my course.
 About Us Page
Design Actual website

This Page is comparing the About us page from the design I did to the actual website. The key difference between the
two designs is that I’ve changed the background colour of the page. The reason why I did this was because it’s better to
stick with the same colour every page such as dark green at the top and dark red at the bottom then it is to have
different colours on each page. Another key difference between the 2 pages are on my actual website is that I’ve decided
to add my face the actual design and the reason why I did this is because I wanted Exa Network to know who I am and
who I look like.
 Unit 1 - The Online World
Design Actual website

This page is comparing the design of Unit 1 (The online world) from the actual website. Then difference between the 2
pages are I changed one of the images on the actual website. The reason why i did this was because it showed a better
understanding about what you do in the Unit. Another thing that I change was my punctuation because on the design I
forgot some capital letters and comers but on my actual website I remembered capital letters and full stops. The reason
why I changed this is because it looks more professional to have good spelling and grammar, especially if this is targeted
to Exa Networks.
 Unit 2 - Technology Systems
Actual website
Design

This page is comparing the design and the actual web page of Unit 2 (Technology systems) . There's not alot of
features that I changed apart from the colours of the page because it looks more professional to stick with the same
colour scheme and I changed one of the pictures because it give more of a better idea what I’m doing in this unit.
 Unit 3-13 - Additional Portfolio and
website development
Design Actual website

This webpage is comparing the design and the actual web page of Unit 3-13 (Additional portfolio and website
development), the features that I changed was the tutor that was teaching this unit because when I made the design of
Unit 3-13 the tutors that I had was Sabah and Amanda but they left so and we got Azmat so when I made the actual
web page for Unit 3-13 we had Azmat. Other the colour of the page, the actual page looks the same.
 Unit 11 - Computer Networks

Design Actual website

These pages are comparing the design and the actual web page of Unit 11 (Technology systems). The features that
I’ve changed was the images, the reason why I changed the images was because the images on the website gives a
better idea what I’m doing in this unit. Another feature that I changed was the colour of the web page, the reason
what I changed it was because it doesn’t suit the website and it’s also better to stick with the same design.
 Feedback Page
Design Actual website

This slide is comparing the design and the actual website of the feedback page. The features that i’ve changed on the
actual website was when it ask how old you are. The reason why I changed this was because it’s irrelevant
information and I don’t need to know how old anyone is. So I replaced it with how did you hear about this website.
 Contact Page
Design Actual website

These pages are comparing the contact page from the Design and the actual web page. The features that I change
on the actual web page is that I’ve added my Facebook and instagram. The reason why I added my social media
account is because I wanted Exa Networks to know what I do in my free time. I also removed my shipley college
email address because this is not my main email and i’ll won’t use it once I leave shipley college.
 Add your changes that you made from
your peers feedback (Change 1)
Based on my peers feedback i’ve made some changes such as the colour pallet because on my design templates I used
different colours on each individual page but someone said that it would be more consistent if you stick with the same
colours on each individual page as it stands out to an unsettling degree therefore it is unpleasant to the viewer's eye.
 Add your changes that you made from
your peers feedback (Change 2)
A peer has commented on inconsistency which is a common problem with the design as the colour palette often
changes background colours which can be incredibly appealing for the user as it will be rather unsettling for the eye.
Another example of this is image placement as they are unlevel by a few pixels this is not great for the user as it can be
unsettling and look really unprofessional. A way this can be solved is if they kept a consistent colour palette and made a
background template to use for every page.
 Original and ready-made digital assets (images, video,
animations, audio). Sources of ready-made assets must be
documented and referenced P1
This shows a picture of the This is a picture of
Shipley College Salt building. myself

Where I got it from: This is my own picture

Category:Shipley College, Salt B
uilding - Wikimedia Commons
This shows a picture inside of Go
Bowling
This is the logo of BTEC Pearson Where I got it from:
Go Bowling - Shipley Lanes
Where I got it from: Pearson BTEC «

This shows the location of Shipley College

This is the logo of Shipley College
Where I got it from:
Where I got it from: https://www.google.com/maps/place/Shipley+College/@53.83
Shipley College 83826,-1.7861892,16.5z/data=!4m6!3m5!1s0x487be46a3f7a61
ef:0x2303f9426e9cc182!8m2!3d53.837128!4d-1.790326!16s%2
Fm%2F04n32l6
This is a picture of my structure chart (Navigation
diagram)

This is my own picture

This is a picture of my folder structure

This is my own picture

 Original and ready-made digital assets (images, video,
animations, audio). Sources of ready-made assets must be
documented and referenced P2
This is a picture of the Online world
This is a Youtube video of Shipley
college. Where I got it from:
The future of international diplomacy
Where I got it from: in an online world - Wilton Park

Get September Sorted with Shipley C

ollege
This shows a diagram of how emails are sent.
612401461-cv-.pdf
Where I got it from:
This is a link to my CV This is a picture of the Online world Where I got it from:
https://www.facebook.com/LinuxWorldByRJ/photos/how
-email-workswhen-you-click-the-send-button-your-email-
620973903-my-awards-harrison-o’donnell-it-level- client-connects-to-your/1815553998564309/
2.pdf
613338487-unit-1-assessment-1-harrison-o'donne 612405354-unit-1-online-services-harrison-o'donn
This is a link to my awards ll.pdf ell.pdf

This is a link to one of my Unit 1 work This is a link to one of my Unit 1 work (Online
This is the Facebook logo (Assessment 1) services)

612405354-unit-1-online-services-harrison-o'donn 612407765-unit-1-retired-test-3-answer-sheet-har
Where I got it from: rison-o'donnell-123919-it-level-2.pdf
ell.pdf
File:Facebook Logo (2019).png - Wikip
edia
This is a link to one of my Unit 1 work (Extension This is a link to one of my Unit 1 work (Retired test
task 2) 3 answer sheet)

This is the Instagram logo This image shows technology systems

Where I got it from: Where I got it from:

THE NEW INSTAGRAM LOGO PNG 202 https://www.knowitallninja.com/prod
3 uct/unit-2-technology-systems/
 Original and ready-made digital assets (images, video,
animations, audio). Sources of ready-made assets must be
documented and referenced P3
This shows a picture of a server This shows a picture of HTML
Where I got it from: Where I got it from:
Man Holds Server Cable Server Rack S Coding course looks to improve divers
tock Photo 553632073 | Shutterstock ity and inclusion in tech

613329744-unit-13-assignment-1-harrison-odonn
ell-it-level-2.pdf
612871916-types-of-computer-system-worksheet- This is the weebly logo
harrison-o'donnell-it-level-2.pdf Where I got it from: This is a link to one of my Unit 3-13 work
(Assignment 1)
Weebly Web Accessibility | ada compl
This is a link to one of my Unit 2 work (Types of iance
computer systems)
622725647-network-types-harrison-o'donnell-it-lev
el-2.pdf
612872698-how-data-flows-around-a-computer-sy 613329276-01-unit-3-13-a-digital-portfolio-assign
stem-worksheet-harrison-o'donnell-it-level-2.pdf ment-2-design-template-l2-harrison-odonnell-it-lev
el-2.pdf This is a link to one of my Unit 11 work (Network
types)
This is a link to one of my Unit 2 work (How data
flows around a computer system) This is a link to one of my Unit 3-13 work
(Assignment 2)
This shows a picture of a man fixing a
This image shows information about
server
storage.
Where I got it from:
Computer Science (Computer Networ
This is my own picture ks and Security) - Staffordshire Univer
sity

This shows a picture of a network

Where I got it from: This image shows information
about different networks.
Ruckus Network Director (RND) | Pro
duct Families This is my own picture
 Conclusion

In this assignment I learned how to create a digital portfolio, I also learned to test my portfolio on multiple browsers and see the
performance of the website. I leaned how to compare my web pages from the template and the actual page. I also listened to my
peers feedback about using a consistent colour pallet and Then I added ready made digital assets that I’ve used in my portfolio.