13 on 17/01/2024 10:2
Task 3: web design and development
HandiMaxi is a renovations company. It wants to create a website to promote its business
and attract more customers.
A web developer is commissioned to produce the website. On completing the analysis
stage, the developer identifies the following end-user and functional requirements.
End-user requirements
Customers want to:
♦ read information about HandiMaxi
♦ see pictures of the work carried out by HandiMaxi
♦ find out information about different types of bedrooms, bathrooms and kitchens
♦ read customer reviews
♦ get an online quote for a job
Functional requirements
♦ a navigation bar with links to the main pages of the website
♦ the ‘Home’ page should display:
— information about HandiMaxi
— a sample of positive customer reviews
♦ the ‘Bedrooms’ page should display:
— information about Luxury, Contemporary and Modern bedrooms, displayed when the
relevant button is clicked
♦ the ‘Bathrooms’ page should display:
— information about types of bathrooms
— links to the ‘Family Bathroom’, ‘Ensuite’, and ‘Wet Room’ pages
♦ the ‘Kitchens’ page should display:
— information about the kitchen design service
— images of kitchens before work had been carried out
— images of kitchens after work had been carried out
♦ the ‘Get a quote’ page should contain a form to allow customers to:
— get an online quote for a job
— choose the room(s) they would like a quote for
Version 1.0 24
ownloaded by [email protected] from 217.181.30.13 on 17/01/2024 10:2
Task 3: web design and development (part A)
3a The website will have a multi-level navigation structure, consisting of a ‘Home’ page
with a horizontal navigation bar that links four main web pages: ‘Bedrooms’,
‘Bathrooms’, ‘Kitchens’ and ‘Get a quote’.
The ‘Bathrooms’ page will have links to three sub-pages: ‘Family Bathroom’,
‘Ensuite’ and ‘Wet Room’.
Design a multi-level navigation structure for this website, clearly showing the
navigation bar and associated pages.
(3 marks)
♦ Check your answers carefully, as you cannot return to part A after you hand it in.
♦ When you are ready, hand part A to your teacher or lecturer and collect part B.
Candidate name___________________________ Candidate number____________________
Version 1.0 25
ownloaded by [email protected] from 217.181.30.13 on 17/01/2024 10:2
Task 3: web design and development (part B)
Your teacher or lecturer will provide you with a copy of the incomplete website.
Open the ‘Home’ page in a browser. Examine the home page and each of the other pages
on the website.
Interactivity will be added to the ‘Bedrooms’ page. The description for each type of
bedroom should only appear when the relevant button is clicked, as shown in the
wireframe below.
Open the ‘bedrooms.html’ file in a suitable editor.
3b Edit the ‘bedrooms.html’ file by adding events to:
♦ hide all the descriptions when the bedrooms page loads
♦ show the description for a bedroom type when the button is clicked
(4 marks)
Print evidence of the:
♦ edited ‘bedrooms.html’ file
♦ ‘Bedrooms’ page as viewed in a browser
Version 1.0 26
ownloaded by [email protected] from 217.181.30.13 on 17/01/2024 10:2
3c Locate the ‘Footer Styles’ section in the ‘styles.css’ file.
Edit the CSS file to implement the footer as shown below. The footer must appear on
all pages of the website.
(3 marks)
Print evidence of the:
♦ edited ‘styles.css’ file showing the CSS for the footer
♦ ‘Home’ page as viewed in a browser
Version 1.0 27
ownloaded by [email protected] from 217.181.30.13 on 17/01/2024 10:2
3d The wireframe design for the ‘Get a quote’ page is shown below.
After testing, it was found that the form did not match the design.
Using the wireframe above, edit the ‘quote.html’ file to match the design.
(3 marks)
Print evidence of the edited ‘quote.html’ file
Version 1.0 28
ownloaded by [email protected] from 217.181.30.13 on 17/01/2024 10:2
3e State two reasons why the HandiMaxi website is not fit for purpose.
(2 marks)
Version 1.0 29
