Informational
Technology Course
– Unit 6 Web
Development/Assi
gnment B
, Unit 6 – Website Development 1
Learning Aim B: Website Development.
Table of Contents
Purpose of website ................................................................................................................................. 2
User requirements of website ............................................................................................................... 2
Impact of design constraints on website development: ............................................................................................. 2
Process Journal ....................................................................................................................................... 3
Main Storyboards ................................................................................................................................... 4
Homepage ..................................................................................................................................................................... 4
Job Offers ...................................................................................................................................................................... 5
Help ............................................................................................................................................................................... 6
Our Team ....................................................................................................................................................................... 7
Application Form ........................................................................................................................................................... 8
Contact Us ..................................................................................................................................................................... 9
About Us...................................................................................................................................................................... 10
Main sitemap ........................................................................................................................................ 11
Why have I chosen this design over the alternative version ? ........................................................... 11
How does the main design fulfil user requirements? ............................................................................................... 11
Alternative Storyboards ....................................................................................................................... 12
About Us...................................................................................................................................................................... 12
Job Offers .................................................................................................................................................................... 13
Contact ........................................................................................................................................................................ 14
Our Team ..................................................................................................................................................................... 15
New Staff Form............................................................................................................................................................ 16
Home Page .................................................................................................................................................................. 17
Alternative Sitemap.............................................................................................................................. 18
Alternative Design Review ................................................................................................................... 19
MoodBorad ........................................................................................................................................... 20
Assets List ............................................................................................................................................. 21
Website Pages Before Testing .............................................................................................................. 27
Website Testing..................................................................................................................................... 32
Feedback and Improvements (Code screenshots) ............................................................................. 34
Screenshots :............................................................................................................................................................... 34
Final improvements.............................................................................................................................. 80
Evaluation of the website..................................................................................................................... 83
[Author] 1
, Unit 6 – Website Development 2
Purpose of website
The primary objective of the website for "Hot Beans" is to effectively promote and showcase the company's offerings
as a junior web developer. As part of your induction and training, you have been tasked with creating a new section
on the company's website that specifically targets prospective employees. The aim is to attract talented individuals
who have completed training courses or obtained qualifications in the field of web development and are actively
seeking employment opportunities as web developers.
User requirements of website
Creating a good website involves fulfilling several user requirements. Firstly, the website should consist of a minimum
of six pages that are interconnected through a navigation bar, enabling seamless navigation for users. Additionally, it
should prioritize accessibility and quick loading times to ensure a smooth user experience.
Moreover, the website should incorporate at least two hyperlinks that direct users to other websites offering IT
courses. To enhance user engagement, an interactive feedback forum should be integrated, allowing customers to
provide their input and share their experiences.
Furthermore, one of the web pages within the site should feature a table, presenting information in a structured
format. To make the website visually appealing and captivating, it should incorporate elements such as a distinctive
logo, compelling images, engaging videos, dynamic animations, and visually appealing graphics.
In terms of content, the website should include a profile of the company, providing an overview of its background
and objectives. Additionally, profiles of existing trainee web developers can be showcased, highlighting their
experiences and achievements. The site should also feature comprehensive job specifications and required
qualifications for potential applicants, along with online application forms for a seamless application process.
Furthermore, it should provide relevant links to web development courses, directing users to further educational
resources.
Impact of design constraints on website development:
The development of the website was primarily affected by poor time management and technical issues. Last-minute
work due to procrastination resulted in a rushed final product. Additionally, encountering technical problems
necessitated restarting the work multiple times. Being a beginner in web development posed challenges in creating a
perfect website that fully met the user requirements.
[Author] 2
, Unit 6 – Website Development 3
Process Journal
Start-26/05/2023.
Finish-12/06/2023.
Date: Task: Results:
26/05/2023 Create 6 Storyboards Task Completed Successfully
with sitemap and
moodboard.
27/05/2023 Create another 6 After the Feedback from 3 users, I have changed some
storyboards for details about the design
alternative design.
28/05/2023 Start-up the website with The layout was basic for the six pages, but it worked to put
layout of the 6 pages. information in
29/05/2023 Introduce a video and 2 I have not introduced a video because of design preferences
hyperlinks. but instead I have added more pictures and hyperlinks
30/05/2023 Create a navigation bar Pictures have been added and the are high-quality. The
and add pictures. navigation bar worked but it needed some adjustments
after testing
31/05/2023 Format the layout of the The layout was created but not perfectly on all pages0
web pages and use
paddings.
01/06/2023 Adjust the text positions I have added two fonts and adjusted the text positions
and add fonts.
02/06/2023 Implement the I have implemented some of the colours from the
moodboard colours. moodboard
03/06/2023 Use w3schools to create W3schools helped a lot to create external CSS style sheet
external CSS files.
04/06/2023 Add additional pages due After the tutor review, I had to add and make changes to
to tutor review. one of the pages
05/06/2023 Create forms where you I have a basic form and basic JavaScript code
will use JavaScript to
validate the answers.
06/06/2023 Learn and implement I have improved a bit my JavaScript code
JavaScript in the pages
coding.
07/06/2023 Adjust JavaScript to work I have added one more JavaScript and test it to work as
after the testing. supposed to
08/06/2023 Add more hyperlinks to 3 hyperlinks were added to courses page
your course page.
09/06/2023 Add one more page with The jobs were added, and the deadline java script code has
jobs where to display been added
three jobs.
10/06/2023 Improve the position of The position has been improved successfully
the text and the pictures
on webpages.
11/06/2023 Make the last The last improvement was to add a heading for about us
improvements for the page
last look.
12/06/2023 Hand in the work. The work was handed in successfully
[Author] 3
Technology Course
– Unit 6 Web
Development/Assi
gnment B
, Unit 6 – Website Development 1
Learning Aim B: Website Development.
Table of Contents
Purpose of website ................................................................................................................................. 2
User requirements of website ............................................................................................................... 2
Impact of design constraints on website development: ............................................................................................. 2
Process Journal ....................................................................................................................................... 3
Main Storyboards ................................................................................................................................... 4
Homepage ..................................................................................................................................................................... 4
Job Offers ...................................................................................................................................................................... 5
Help ............................................................................................................................................................................... 6
Our Team ....................................................................................................................................................................... 7
Application Form ........................................................................................................................................................... 8
Contact Us ..................................................................................................................................................................... 9
About Us...................................................................................................................................................................... 10
Main sitemap ........................................................................................................................................ 11
Why have I chosen this design over the alternative version ? ........................................................... 11
How does the main design fulfil user requirements? ............................................................................................... 11
Alternative Storyboards ....................................................................................................................... 12
About Us...................................................................................................................................................................... 12
Job Offers .................................................................................................................................................................... 13
Contact ........................................................................................................................................................................ 14
Our Team ..................................................................................................................................................................... 15
New Staff Form............................................................................................................................................................ 16
Home Page .................................................................................................................................................................. 17
Alternative Sitemap.............................................................................................................................. 18
Alternative Design Review ................................................................................................................... 19
MoodBorad ........................................................................................................................................... 20
Assets List ............................................................................................................................................. 21
Website Pages Before Testing .............................................................................................................. 27
Website Testing..................................................................................................................................... 32
Feedback and Improvements (Code screenshots) ............................................................................. 34
Screenshots :............................................................................................................................................................... 34
Final improvements.............................................................................................................................. 80
Evaluation of the website..................................................................................................................... 83
[Author] 1
, Unit 6 – Website Development 2
Purpose of website
The primary objective of the website for "Hot Beans" is to effectively promote and showcase the company's offerings
as a junior web developer. As part of your induction and training, you have been tasked with creating a new section
on the company's website that specifically targets prospective employees. The aim is to attract talented individuals
who have completed training courses or obtained qualifications in the field of web development and are actively
seeking employment opportunities as web developers.
User requirements of website
Creating a good website involves fulfilling several user requirements. Firstly, the website should consist of a minimum
of six pages that are interconnected through a navigation bar, enabling seamless navigation for users. Additionally, it
should prioritize accessibility and quick loading times to ensure a smooth user experience.
Moreover, the website should incorporate at least two hyperlinks that direct users to other websites offering IT
courses. To enhance user engagement, an interactive feedback forum should be integrated, allowing customers to
provide their input and share their experiences.
Furthermore, one of the web pages within the site should feature a table, presenting information in a structured
format. To make the website visually appealing and captivating, it should incorporate elements such as a distinctive
logo, compelling images, engaging videos, dynamic animations, and visually appealing graphics.
In terms of content, the website should include a profile of the company, providing an overview of its background
and objectives. Additionally, profiles of existing trainee web developers can be showcased, highlighting their
experiences and achievements. The site should also feature comprehensive job specifications and required
qualifications for potential applicants, along with online application forms for a seamless application process.
Furthermore, it should provide relevant links to web development courses, directing users to further educational
resources.
Impact of design constraints on website development:
The development of the website was primarily affected by poor time management and technical issues. Last-minute
work due to procrastination resulted in a rushed final product. Additionally, encountering technical problems
necessitated restarting the work multiple times. Being a beginner in web development posed challenges in creating a
perfect website that fully met the user requirements.
[Author] 2
, Unit 6 – Website Development 3
Process Journal
Start-26/05/2023.
Finish-12/06/2023.
Date: Task: Results:
26/05/2023 Create 6 Storyboards Task Completed Successfully
with sitemap and
moodboard.
27/05/2023 Create another 6 After the Feedback from 3 users, I have changed some
storyboards for details about the design
alternative design.
28/05/2023 Start-up the website with The layout was basic for the six pages, but it worked to put
layout of the 6 pages. information in
29/05/2023 Introduce a video and 2 I have not introduced a video because of design preferences
hyperlinks. but instead I have added more pictures and hyperlinks
30/05/2023 Create a navigation bar Pictures have been added and the are high-quality. The
and add pictures. navigation bar worked but it needed some adjustments
after testing
31/05/2023 Format the layout of the The layout was created but not perfectly on all pages0
web pages and use
paddings.
01/06/2023 Adjust the text positions I have added two fonts and adjusted the text positions
and add fonts.
02/06/2023 Implement the I have implemented some of the colours from the
moodboard colours. moodboard
03/06/2023 Use w3schools to create W3schools helped a lot to create external CSS style sheet
external CSS files.
04/06/2023 Add additional pages due After the tutor review, I had to add and make changes to
to tutor review. one of the pages
05/06/2023 Create forms where you I have a basic form and basic JavaScript code
will use JavaScript to
validate the answers.
06/06/2023 Learn and implement I have improved a bit my JavaScript code
JavaScript in the pages
coding.
07/06/2023 Adjust JavaScript to work I have added one more JavaScript and test it to work as
after the testing. supposed to
08/06/2023 Add more hyperlinks to 3 hyperlinks were added to courses page
your course page.
09/06/2023 Add one more page with The jobs were added, and the deadline java script code has
jobs where to display been added
three jobs.
10/06/2023 Improve the position of The position has been improved successfully
the text and the pictures
on webpages.
11/06/2023 Make the last The last improvement was to add a heading for about us
improvements for the page
last look.
12/06/2023 Hand in the work. The work was handed in successfully
[Author] 3
