Unit 6 - Web Development
Contents
Introduction: ....................................................................................................................................... 3
Client Requirements for the website: ................................................................................................. 3
Designs for the websites: .................................................................................................................... 3
Page 1- Homepage .............................................................................................................................. 4
Page 2 - Existing Trainee Web Developers ......................................................................................... 5
Page 3 - Job specifications and Requirements.................................................................................... 6
Page 4- Application form .................................................................................................................... 7
Page 5- Courses ................................................................................................................................... 8
Page 1 – Homepage ............................................................................................................................ 9
Page 2 - Existing Trainee Web Developers ....................................................................................... 10
Page 3 - Job specifications and Requirements.................................................................................. 11
Page 4- Application form .................................................................................................................. 12
Page 5- Courses ................................................................................................................................. 12
Review of the designs: ...................................................................................................................... 13
Family Response: .............................................................................................................................. 13
Friends Response: ............................................................................................................................. 13
Redesign: ........................................................................................................................................... 13
Before................................................................................................................................................ 13
After: ................................................................................................................................................. 14
Implementation of the produced website: ....................................................................................... 15
Page 1- homepage: ........................................................................................................................... 15
Page 2 - Existing Trainee Web Developers: ...................................................................................... 16
Page 3 - Job specifications and Requirements:................................................................................. 17
Page 4- Application form: ................................................................................................................. 18
Page 5- Courses: ................................................................................................................................ 18
Page 6 - Contacts: ............................................................................................................................. 19
Before:............................................................................................................................................... 19
After: ................................................................................................................................................. 19
Functionality of the website: ............................................................................................................ 20
Page 1- homepage: ........................................................................................................................... 20
Page 2 - Existing Trainee Web Developers: ...................................................................................... 21
Page 3 - Job specifications and Requirements:................................................................................. 22
Page 4- Application form: ................................................................................................................. 23
Page 5 – Available Courses: .............................................................................................................. 24
1|Page
, Unit 6 - Web Development
Page 6 - Contact: ............................................................................................................................... 25
Before:............................................................................................................................................... 25
After: ................................................................................................................................................. 25
Testing the functionality, compatibility, and usability of the website: ............................................ 26
Test no: 1........................................................................................................................................... 26
Test no 2:........................................................................................................................................... 27
Test no 3:........................................................................................................................................... 29
Test no 4:........................................................................................................................................... 29
Test no 5:........................................................................................................................................... 29
Test no 6:........................................................................................................................................... 30
Test No 7: .......................................................................................................................................... 32
Errors:................................................................................................................................................ 32
Before: .............................................................................................................................................. 33
After: ................................................................................................................................................. 33
Reviewing the client requirements: .................................................................................................. 33
Justification of design decisions and explanation on how they will meet the requirements: ......... 35
Optimisation of the website to meet client requirements: .............................................................. 35
Performance and testing: ................................................................................................................. 35
Review the feedback: ........................................................................................................................ 36
Evaluation of the design and the optimised website against the client requirements: ................... 36
Design: .............................................................................................................................................. 36
Optimised website: .......................................................................................................................... 37
Demonstrating individual responsibility, creativity and effective self-management in the design,
development, and review of a website: .......................................................................................... 37
Responsibility: ................................................................................................................................... 37
Gantt chart: ...................................................................................................................................... 38
Creativity: .......................................................................................................................................... 38
Design: .............................................................................................................................................. 38
Website Development: ..................................................................................................................... 38
Self-management:............................................................................................................................. 38
Reference: ......................................................................................................................................... 39
2|Page
, Unit 6 - Web Development
Unit 6 Website Development Part B & C
Introduction:
As a junior web developer, I have recently entered a website development company, Hot
Beans Web.
I have been asked to pick two websites and review them as part of my introduction to the
business.
As part of my induction and training, I was asked to build a new section for the company's
website that introduces the company to potential employees, as they need to find more web
developers.
The pages to be added to the website will be as follows:
• A profile of the company itself.
• Profiles of existing trainee web developers.
• Job specifications and required qualifications.
• An online application form.
• Links to website development courses.
Client Requirements for the website:
➢ The users should be able to get into the website from any devices or web browser.
➢ Easy navigation system so that the users can get into a webpage from another
among the website easily.
➢ Being able to search for any course they want and get the contact details from the
website without any hustle.
➢ Being able to know about the job specifications and the required qualifications
separately.
➢ Being able to submit the application form without any difficulty and must be able to
submit their CV while submitting their job application form.
➢ Being able to know about the employees and their role for the company.
Designs for the websites:
I will be using draw.io for my website designs and this shows what my website will look like
when I start developing it using Dreamweaver and alternatively, Sublime Text 3
3|Page
, Unit 6 - Web Development
Page 1- Homepage
In the first section of my homepage, I will give a brief information about the Hot Beans which
will be shown to the people who will access my webpage. The second section will have two
pictures or banner which will make it easier for the people to understand what the website is
about. Lastly, I will add a video so that people can get information with a clear vision and get
an idea of what facilities they can get from our company.
4|Page
Contents
Introduction: ....................................................................................................................................... 3
Client Requirements for the website: ................................................................................................. 3
Designs for the websites: .................................................................................................................... 3
Page 1- Homepage .............................................................................................................................. 4
Page 2 - Existing Trainee Web Developers ......................................................................................... 5
Page 3 - Job specifications and Requirements.................................................................................... 6
Page 4- Application form .................................................................................................................... 7
Page 5- Courses ................................................................................................................................... 8
Page 1 – Homepage ............................................................................................................................ 9
Page 2 - Existing Trainee Web Developers ....................................................................................... 10
Page 3 - Job specifications and Requirements.................................................................................. 11
Page 4- Application form .................................................................................................................. 12
Page 5- Courses ................................................................................................................................. 12
Review of the designs: ...................................................................................................................... 13
Family Response: .............................................................................................................................. 13
Friends Response: ............................................................................................................................. 13
Redesign: ........................................................................................................................................... 13
Before................................................................................................................................................ 13
After: ................................................................................................................................................. 14
Implementation of the produced website: ....................................................................................... 15
Page 1- homepage: ........................................................................................................................... 15
Page 2 - Existing Trainee Web Developers: ...................................................................................... 16
Page 3 - Job specifications and Requirements:................................................................................. 17
Page 4- Application form: ................................................................................................................. 18
Page 5- Courses: ................................................................................................................................ 18
Page 6 - Contacts: ............................................................................................................................. 19
Before:............................................................................................................................................... 19
After: ................................................................................................................................................. 19
Functionality of the website: ............................................................................................................ 20
Page 1- homepage: ........................................................................................................................... 20
Page 2 - Existing Trainee Web Developers: ...................................................................................... 21
Page 3 - Job specifications and Requirements:................................................................................. 22
Page 4- Application form: ................................................................................................................. 23
Page 5 – Available Courses: .............................................................................................................. 24
1|Page
, Unit 6 - Web Development
Page 6 - Contact: ............................................................................................................................... 25
Before:............................................................................................................................................... 25
After: ................................................................................................................................................. 25
Testing the functionality, compatibility, and usability of the website: ............................................ 26
Test no: 1........................................................................................................................................... 26
Test no 2:........................................................................................................................................... 27
Test no 3:........................................................................................................................................... 29
Test no 4:........................................................................................................................................... 29
Test no 5:........................................................................................................................................... 29
Test no 6:........................................................................................................................................... 30
Test No 7: .......................................................................................................................................... 32
Errors:................................................................................................................................................ 32
Before: .............................................................................................................................................. 33
After: ................................................................................................................................................. 33
Reviewing the client requirements: .................................................................................................. 33
Justification of design decisions and explanation on how they will meet the requirements: ......... 35
Optimisation of the website to meet client requirements: .............................................................. 35
Performance and testing: ................................................................................................................. 35
Review the feedback: ........................................................................................................................ 36
Evaluation of the design and the optimised website against the client requirements: ................... 36
Design: .............................................................................................................................................. 36
Optimised website: .......................................................................................................................... 37
Demonstrating individual responsibility, creativity and effective self-management in the design,
development, and review of a website: .......................................................................................... 37
Responsibility: ................................................................................................................................... 37
Gantt chart: ...................................................................................................................................... 38
Creativity: .......................................................................................................................................... 38
Design: .............................................................................................................................................. 38
Website Development: ..................................................................................................................... 38
Self-management:............................................................................................................................. 38
Reference: ......................................................................................................................................... 39
2|Page
, Unit 6 - Web Development
Unit 6 Website Development Part B & C
Introduction:
As a junior web developer, I have recently entered a website development company, Hot
Beans Web.
I have been asked to pick two websites and review them as part of my introduction to the
business.
As part of my induction and training, I was asked to build a new section for the company's
website that introduces the company to potential employees, as they need to find more web
developers.
The pages to be added to the website will be as follows:
• A profile of the company itself.
• Profiles of existing trainee web developers.
• Job specifications and required qualifications.
• An online application form.
• Links to website development courses.
Client Requirements for the website:
➢ The users should be able to get into the website from any devices or web browser.
➢ Easy navigation system so that the users can get into a webpage from another
among the website easily.
➢ Being able to search for any course they want and get the contact details from the
website without any hustle.
➢ Being able to know about the job specifications and the required qualifications
separately.
➢ Being able to submit the application form without any difficulty and must be able to
submit their CV while submitting their job application form.
➢ Being able to know about the employees and their role for the company.
Designs for the websites:
I will be using draw.io for my website designs and this shows what my website will look like
when I start developing it using Dreamweaver and alternatively, Sublime Text 3
3|Page
, Unit 6 - Web Development
Page 1- Homepage
In the first section of my homepage, I will give a brief information about the Hot Beans which
will be shown to the people who will access my webpage. The second section will have two
pictures or banner which will make it easier for the people to understand what the website is
about. Lastly, I will add a video so that people can get information with a clear vision and get
an idea of what facilities they can get from our company.
4|Page
