The site you are looking at right now was coded by me. No part of it has been created using template site builders such as Wix or Wordpress, which has meant that the project has taken longer, but also been very satisfying to work on. From the outset I decided that the site must be designed responsively, so that whatever device you are viewing this page on (phone, tablet or desktop/laptop), the page will automatically adapt to the screen size to make the content readable and fit correctly.
Creating responsive webpages has been a large learning experience
for me. For what I wanted this website to be, it has meant that
I needed to learn and practice in my own spare time. This does not
just relate to the coding itself, but other areas as well. For the
photos and images you see on this site, I have used to learn editing
programs in much greater detail than on previous projects, as
well as how to plan websites that will be viewed on different
screens.
This process has not always been easy, but it has given me
the opportunity to gain new skills, which is what I enjoy the most.
| File Type | Information | Download | ⇓ |
|---|---|---|---|
| Link | GitHub repository of files used in the creation of this site | ⇓ |
Having the opportunity to work on web coding for the first time
within a formal qualification was a major step-up in experience
for me. I had previously carried out coding, but the requirements of
the project for my One Awards Computing Diploma represented
a larger learning curve than I had encountered previously. This also meant
though that I would have the chance to learn a lot of new skills
and learn how to use new programs, which are two areas that I
have always hugely enjoyed.
The first part of the brief was to create a website for a fictional
company of my choosing.
I decided that the website would be created for a fictional talent
agency representing DJ’s called 'Book DJ'. The website needed to be
made up of multiple pages, with evidence that showed a
clear understanding of how to plan, design and develop a working
website as well as how carry out the process of coding. The pages
were required to make use of various aspects of HTML, CSS and
JavaScript code, so that the site looked and acted like a
professional site as closely as possible.
This meant that the site would need to be interactive, contain links,
feature good navigation and much more:
Before any code can be typed, the planning process needs to be completed. I needed to produce several items that would demonstrate that I understood how to prepare creating a website. A sitemap details what pages are to be created and how they will link together (including links to other sites). A wireframe model was created for every webpage, which shows how the page will be interactive, and what it is expected to contain. Finally, a ‘moodboard’ was created, which displays the colour scheme the site will use, logos, and examples of images likely to be used.
The next stage is to produce colour mock-ups of how each page is expected to look. The assignment only asked for two pages initially, but I thought it best to create an example for each page, as this would help greatly when it came to the coding process.
After the website was completed, I produced a comprehensive 56-page report, which detailed the whole process from start to finish. The document used a number of references to illustrate common elements for webpage code, as well as expected good practices for the coding itself. The document also contains structured examples of good usability for a website visitor and how I implemented this. The report uses captioned images throughout from my own examples, and is finished off with a guide on publishing a website to the internet.
Please click on a link below that most closely matches your monitor resolution (links will open in a new tab). The site was not designed to be responsive but it was created with two different resolutions in mind. If your display resolution is less than 1920 by 1080 (known as 1080P), then please select 1366 X 768 to view the site as it is more likely to display as intended (site may display incorrectly on phones and tablets as it was designed for laptop/desktop first)
Listed below are all my self-produced tutorials relating specifically to the creation of web pages
A full list of my tutorials for all subjects can be found here
My YouTube channel can be found here
*To open links in a new tab, hold down the Ctrl key and click on the link*
| No. | Description | Link |
|---|---|---|
| 1 | Awaiting upload | ▶ |
| 2 | Awaiting upload | ▶ |
| 3 | Awaiting upload | ▶ |
| 4 | Complete playlist | ▶ |
