TABLE OF CONTENTS
INSTRUCTIONS
The objective of this project is to create a fully functional website consisting of minimal 5 pages, based of the approved prototype that was made in the previous project. The final website should reflect the original design choices and maintain consistency in layout, typography, and user experience across all devices and browsers. It must include key features like intuitive navigation, interactive elements, and optimization for performance. Finally, deploy the site to a live server with a public URL.
PROJECT
Week 9 / Preparation
Because I only made 3 pages for the prototype, I had to think of 2 other pages to add into the final website. I decided to go for the FAQs and the Safety pages because those two have the most relevant content. I could’ve worked on the prototype for those two pages on Figma, but I decided not to do it due to time constraints, and I will just wing the design as I go.
|
| Fig 1.1 Figma Board / Week 9 (24/06/25) |
Based on the prototype I did, I worked on the website redesign on Dreamweaver. Before starting, I set up the file by creating the required pages, namely index.html, activites.html, contact.html, faqs.html, safety.html, and the css to go with it. I also prepared the images and icons by exporting them straight from Figma, and renaming them for easier organization.
|
| Fig 1.2 Files / Week 9 (24/06/25) |
|
| Fig 1.3 Images / Week 9 (24/06/25) |
Week 10-14 / Coding
Home Page
The home page was the first and most complex page to do, as it has the most complex layout and uses the most interactive elements. From the prototype, each section has a unique layout and contains lots of interactive features. Code-wise, this makes it a very tough page to finish.
 |
| Fig 1.5 Starting Code - HTML / Week 14 (23/07/25) |
I started with the Navigation Bar first following Mr. Shamsul’s tutorials in class. For the most part, it worked well, but I did use AI to help me find faults in my code and recommend additions to my HTML and CSS. This will be done a lot throughout the process, because there is still a lot I have not quite grasped yet in terms of coding.
Fig 1.6 Navigation Bar Code - HTML / Week 14 (23/07/25)The Carousel Section was the hardest thing I worked on this entire website, since using templates found on the internet didn’t seem to work. This led me to a 6-hour argument with Chat-GPT until I got the finished result seen in the website. The code is quite confusing that it's better if I don't attempt explaining it.
Fig 1.7 Carousel Section Code - HTML / Week 14 (23/07/25)Making a working layout for the Footer also took a while. I ended up using grids to help me solve this issue, with the horizontal information under the class info-links, and the vertical information under the class info-details.
Fig 1.8 Footer Code - HTML / Week 14 (23/07/25)
Fig 1.9 Footer Grid Code - CSS / Week 14 (23/07/25)As for other sections of this page, working on it was quite straightforward with a few hiccups here and there. Because the About and Review Sections both used the grid system which I’m still unfamiliar with, it took a long time to figure out.
Activities Page
Fig 1.10 Activities Page - PDF / Week 14 (23/07/25)
Fig 1.11 Act. Introduction Code - HTML / Week 14 (23/07/25)Below that, I have 4 modules of information about the other services provided. Upon hovering on these modules, all the colors switch and the picture beside will increase in size.
Fig 1.12 Act. Details Code - HTML / Week 14 (23/07/25)
Contact Page
Fig 1.13 Contact Page - PDF / Week 14 (23/07/25)
Fig 1.14 Contact Page Code - HTML / Week 14 (23/07/25)
FAQs Page
Fig 1.15 FAQs Page - PDF / Week 14 (23/07/25)
Fig 1.16 Hide & Reveal Code - CSS / Week 14 (23/07/25)Because it felt a bit boring, I decided to have an reveal animation, and a condition where upon pressing another question, the answer for a previously opened question gets closed. To achieve all of this, I used JavaScript which I had to completely rely on AI as I have zero knowledge on this.
Fig 1.17 Animation Code - JavaScript / Week 14 (23/07/25)
Safety Page
Fig 1.18 Safety Page - PDF / Week 14 (23/07/25)
Just like the last page, I had to think of a new layout for this page. I figured that I could somewhat follow the previous design as both these pages are more text-heavy. After summarizing key points from the original website, I separated the information into several categories and placed them in different blocks.
Fig 1.19 Safety Page Code - HTML / Week 14 (23/07/25)Lastly, I deployed my file into Netlify so that the website can be accessed on the internet.
Fig 1.20 Netlify Deploy / Week 14 (23/07/25)Although it was not mentioned much, I tried to fit in as many interactive elements as I could, whether it be through hover effects, color switch, or size changes on text, pictures, links and more. I couldn’t mention each one of them as it would make the blog too lengthy. To explore all the features of the website, you can check them out here:
FEEDBACK
Week 11
The progress is good! I should quickly finish the website.
REFLECTION
I was honestly surprised at myself that I was able to make something like this after learning for just one semester. There are definitely flaws I might not notice in my code or certain ways I did that were not the most effective, but the website seems to work fine so I’m overall satisfied.
Sadly, due to time limitations, I was unable to do much for my website’s responsiveness, especially with how a whole redesign is required for certain sections. I had to leave this part incomplete, but nonetheless I was still proud of the level of work I can come up with in my first semester learning HTML and CSS.