FINAL PROJECT - WEBSITE REDESIGN DEVELOPMENT
Nicole Ng Ying Yan 0382412
GCD60904 Interactive Design
Final Project: Website Redesign Development
1.0 INSTRUCTIONS
2.0 SUBMISSION
Google Drive Link: https://drive.google.com/drive/folders/1FPQffz4RhSssF_4rJ4mYcLGDgisjkTkh?usp=sharing
3.0 DOCUMENTATION
Before starting development, I reviewed the design layout and broke the page down into clear sections, including the hero section, content sections, call-to-action buttons, and footer. This helped me understand how different components should be structured in the HTML and styled using CSS. I decided to build the site using plain HTML and CSS rather than a framework, as this allowed me to better understand the fundamentals and maintain full control over the layout and styling.
I began by setting up the basic HTML structure and adding semantic containers for each major section. From there, I applied base styles such as fonts, colours, and spacing to ensure consistency across the site. Establishing a clear class-naming structure early on made it easier to target elements later when adding interactivity and hover effects. The colour scheme featured blue tones to evoke water and trust, while maintaining strong contrast for readability.
I divided the implementation into three layers: HTML for structure, CSS for layout and styling, and JavaScript for interactivity and logic. This separation helped me isolate issues more easily and made the code easier to maintain and debug. One challenge I encountered early on was maintaining a clean and readable HTML structure as the site became more complex. As I added more components, such as navigation elements, buttons, and interactive sections, it became easy for the code to become messy. To address this, I had to consistently refactor my code and comment sections clearly so I could understand and maintain it more easily.
Layout & Positioning
One of the main aspects of the development process involved positioning elements accurately to match the intended design. I used a combination of Flexbox, CSS Grid, and absolute positioning depending on the context. Flexbox was especially useful for centering content and aligning elements horizontally and vertically within containers. However, achieving the intended layout across different screen sizes was particularly difficult. Although I understood the theory behind responsive design, applying it in practice required a lot of trial and error.
A challenge I faced was ensuring that absolutely positioned elements did not unintentionally affect the layout of their parent containers. In some cases, text elements positioned absolutely caused the parent element to collapse visually, which led to unexpected issues such as borders appearing as straight lines instead of rounded shapes. Positioning elements absolutely sometimes solved one problem but created another, such as overlapping content or misaligned components. Debugging this required a better understanding of how absolute positioning removes elements from the normal document flow and how properties like minimum height, box sizing, and overflow can be used to stabilise layouts.
Unnecessary Interactions Removal
Throughout the process of building the website, I realised my hover interactions for the cards in the Program page and About Us page were unnecessary as there were nothing to click into, making them useless UI. Hence, I did not add hover interactions for those sections in the final website like I did in my prototype, considering the POV of the users.
About Us Statistics Section
A particularly challenging issue arose on the About Us page, where the statistics section displaying confident swimmers, years of experience, and Google rating was supposed to appear on the left side of a photo grid. Initially, the statistics overlapped the images or disappeared entirely due to incorrect negative margin values that pushed elements way off-screen.
The solution required completely restructuring the layout approach. Instead of using problematic negative margins, I implemented a CSS Grid layout with two columns: one fixed-width column for the statistics and one flexible column for the images. I also changed text alignment from centered to left-aligned for the statistics, and adjusted the divider line width to create better visual hierarchy. This problem taught me that complex layouts often require proper layout systems like Grid or Flexbox rather than trying to force positioning with margins. It also reinforced the importance of avoiding hard-coded values such as large pixel-based positions, as these can cause responsiveness issues across different screen sizes.
Button Styling and Hover Effects
A significant part of the project involved creating interactive buttons, specifically the call-to-action buttons. The goal was to give both buttons consistent hover behaviour while maintaining their individual sizes, shapes, and positions. This involved changing background colours, text colours, and adding subtle animations such as a lift effect using CSS transforms.
Initially, I encountered issues where hover effects were not working as expected. In some cases, the button appeared invisible or partially rendered. This was often due to class name mismatches between the HTML and CSS or missing default states for properties such as opacity and background color. Carefully checking class names and explicitly defining default and hover states resolved these problems.Another challenge occurred when applying hover effects to buttons that contained absolutely positioned text. When the hover styles were added, the button border lost its rounded shape and appeared as a straight line. After debugging, I identified that this was caused by layout collapse and border rendering issues. Adding minimum height, border box sizing, and hidden overflow to the button container fixed the issue and restored the correct appearance.
Through iteration, I learned that many visual effects are better handled with CSS rather than images. The buttons were ultimately implemented using pure CSS for border, background, and text colour transitions with smooth easing effects. This solution was more scalable, easier to maintain, and more consistent across devices. I also added a subtle lift effect using CSS transforms on hover to enhance user feedback.
Multi-Image Slider Implementation
Another major challenge was implementing an image slider for the About page. The slider was designed as a horizontal scrolling gallery with previous and next buttons that displays multiple images in a row, rather than a traditional slideshow. I also wanted smooth transitions and visual dot indicators to reflect the current slide position.
The HTML structure consisted of a main slider container, navigation buttons, an image track, and a dot slideshow section. The images were placed inside a flex container so they could be aligned horizontally. Each dot was given a data attribute, allowing it to map directly to a specific slider position. One important design choice was ensuring that the dots represented slide positions rather than individual images, since multiple images are visible at once.
CSS played a major role in achieving the desired layout. I used flexbox for the image track to align images in a row and hidden overflow on the slider container to hide images outside the visible area. Fixed widths were applied to images to ensure consistent movement when sliding. Transitions were handled using transform properties with smooth easing effects. One challenge was ensuring that spacing between images was consistent while still calculating accurate movement distances in JavaScript.
JavaScript was used to handle slider movement, button clicks, and dot activation. I implemented a single index variable to represent the current slider position. The most difficult issue I faced was preventing the slider from scrolling beyond the final image. Initially, the slider allowed infinite movement, which resulted in unwanted white space appearing after the last image. I resolved this by calculating the maximum allowed index based on the slider track's total scroll width and the visible container width.
Another major challenge was keeping the slider movement and dot indicators in sync. Initially, I used separate variables for translation values and dot indices, which caused inconsistencies. I resolved this by refactoring the code to use a single source of truth. Additionally, debugging why the active dot color was not changing required inspecting the DOM and carefully reviewing event handlers. Once fixed, the dots responded correctly to both button clicks and direct dot selection.
FAQ Accordion Component Development
The development process for the FAQ page focused on customizing an existing accordion component to align with the intended visual design and interaction behavior. Instead of rebuilding the component from scratch, the existing HTML, CSS, and JavaScript structure was retained to ensure compatibility with the rest of the website. Visual states were carefully defined for the collapsed, hover, and active conditions to ensure consistency with the design and to improve user feedback during interaction.
One key issue was ensuring that the accordion content expanded smoothly without disrupting the layout or appearing abruptly. This was addressed by controlling the panel's maximum height through JavaScript and applying CSS transitions to create a gradual expansion effect. Another challenge involved synchronising the visual state of the accordion button with its functional state, particularly when switching between the plus and minus icons. This was resolved by using a dedicated active class that simultaneously controlled background colour, text colour, and icon changes.
CSS Syntax Errors and Visual Consistency
During development, I encountered multiple CSS syntax errors that prevented the stylesheet from rendering correctly. The main issues included trailing commas in selectors, nested media queries, and mismatched curly braces breaking entire sections. These errors were identified using code editor validation tools. Carefully checking selector syntax, removing trailing commas, and ensuring proper nesting structure resolved these problems.
Another technical challenge was ensuring visual consistency throughout the site. I needed to maintain consistent spacing, font sizes, colours, and button styles across multiple pages. At times, I found myself duplicating CSS rules, which made the stylesheet harder to manage. To overcome this, I reorganized my CSS by grouping related styles and reusing classes where possible. This helped make the code more efficient and reduced the chance of inconsistencies appearing later in development.
Debugging, Testing, and Refinement
Debugging played a major role throughout the development process. When elements did not appear on the page, I used browser developer tools to inspect the DOM, check computed styles, and verify whether elements were being rendered but hidden due to CSS rules. Simple diagnostic techniques, such as temporarily adding background colours or removing positioning rules, helped isolate the source of problems.
Testing and refinement were crucial in the later stages of the project. I tested the website across different screen sizes and browsers to identify layout issues and inconsistencies. This stage revealed problems that were not obvious during development, such as text overflowing containers or buttons being difficult to interact with on smaller screens. I used CSS media queries to adjust layouts for tablets and monitor devices, adjusting spacing and layout where necessary.
Reflection and Conclusion
Overall, this project significantly improved my understanding of front-end development. The process of building this website was so challenging which made me feel like giving up, and I ended up physically sick near the submission deadline, hence I had to ask for an extension. However, I'm glad I pulled through these obstacles. Although the outcome of the final website may have slight difference from the prototype, I'm proud of myself being able to complete it to the best of my ability.
This project reinforced the value of choosing the simplest solution whenever possible, using proper layout systems instead of complex positioning workarounds, and writing clean, modular code. As I'm a beginner to coding, I do admit my final code is quite messy and if it were to be an actual website that requires management, it would be hard to manage long term. I learnt that the simpler the code, the better it is to manage and revise. All in all, I successfully implemented the intended design with functional, interactive elements that behave consistently across the page and I'm glad I have the opportunity to learn new things about coding.
References:
Before starting development, I reviewed the design layout and broke the page down into clear sections, including the hero section, content sections, call-to-action buttons, and footer. This helped me understand how different components should be structured in the HTML and styled using CSS. I decided to build the site using plain HTML and CSS rather than a framework, as this allowed me to better understand the fundamentals and maintain full control over the layout and styling.
I began by setting up the basic HTML structure and adding semantic containers for each major section. From there, I applied base styles such as fonts, colours, and spacing to ensure consistency across the site. Establishing a clear class-naming structure early on made it easier to target elements later when adding interactivity and hover effects. The colour scheme featured blue tones to evoke water and trust, while maintaining strong contrast for readability.
I divided the implementation into three layers: HTML for structure, CSS for layout and styling, and JavaScript for interactivity and logic. This separation helped me isolate issues more easily and made the code easier to maintain and debug. One challenge I encountered early on was maintaining a clean and readable HTML structure as the site became more complex. As I added more components, such as navigation elements, buttons, and interactive sections, it became easy for the code to become messy. To address this, I had to consistently refactor my code and comment sections clearly so I could understand and maintain it more easily.
Layout & Positioning
One of the main aspects of the development process involved positioning elements accurately to match the intended design. I used a combination of Flexbox, CSS Grid, and absolute positioning depending on the context. Flexbox was especially useful for centering content and aligning elements horizontally and vertically within containers. However, achieving the intended layout across different screen sizes was particularly difficult. Although I understood the theory behind responsive design, applying it in practice required a lot of trial and error.
A challenge I faced was ensuring that absolutely positioned elements did not unintentionally affect the layout of their parent containers. In some cases, text elements positioned absolutely caused the parent element to collapse visually, which led to unexpected issues such as borders appearing as straight lines instead of rounded shapes. Positioning elements absolutely sometimes solved one problem but created another, such as overlapping content or misaligned components. Debugging this required a better understanding of how absolute positioning removes elements from the normal document flow and how properties like minimum height, box sizing, and overflow can be used to stabilise layouts.
Unnecessary Interactions Removal
Throughout the process of building the website, I realised my hover interactions for the cards in the Program page and About Us page were unnecessary as there were nothing to click into, making them useless UI. Hence, I did not add hover interactions for those sections in the final website like I did in my prototype, considering the POV of the users.
About Us Statistics Section
A particularly challenging issue arose on the About Us page, where the statistics section displaying confident swimmers, years of experience, and Google rating was supposed to appear on the left side of a photo grid. Initially, the statistics overlapped the images or disappeared entirely due to incorrect negative margin values that pushed elements way off-screen.
The solution required completely restructuring the layout approach. Instead of using problematic negative margins, I implemented a CSS Grid layout with two columns: one fixed-width column for the statistics and one flexible column for the images. I also changed text alignment from centered to left-aligned for the statistics, and adjusted the divider line width to create better visual hierarchy. This problem taught me that complex layouts often require proper layout systems like Grid or Flexbox rather than trying to force positioning with margins. It also reinforced the importance of avoiding hard-coded values such as large pixel-based positions, as these can cause responsiveness issues across different screen sizes.
Button Styling and Hover Effects
A significant part of the project involved creating interactive buttons, specifically the call-to-action buttons. The goal was to give both buttons consistent hover behaviour while maintaining their individual sizes, shapes, and positions. This involved changing background colours, text colours, and adding subtle animations such as a lift effect using CSS transforms.
Initially, I encountered issues where hover effects were not working as expected. In some cases, the button appeared invisible or partially rendered. This was often due to class name mismatches between the HTML and CSS or missing default states for properties such as opacity and background color. Carefully checking class names and explicitly defining default and hover states resolved these problems.
Another challenge occurred when applying hover effects to buttons that contained absolutely positioned text. When the hover styles were added, the button border lost its rounded shape and appeared as a straight line. After debugging, I identified that this was caused by layout collapse and border rendering issues. Adding minimum height, border box sizing, and hidden overflow to the button container fixed the issue and restored the correct appearance.
Through iteration, I learned that many visual effects are better handled with CSS rather than images. The buttons were ultimately implemented using pure CSS for border, background, and text colour transitions with smooth easing effects. This solution was more scalable, easier to maintain, and more consistent across devices. I also added a subtle lift effect using CSS transforms on hover to enhance user feedback.
Multi-Image Slider Implementation
Another major challenge was implementing an image slider for the About page. The slider was designed as a horizontal scrolling gallery with previous and next buttons that displays multiple images in a row, rather than a traditional slideshow. I also wanted smooth transitions and visual dot indicators to reflect the current slide position.
The HTML structure consisted of a main slider container, navigation buttons, an image track, and a dot slideshow section. The images were placed inside a flex container so they could be aligned horizontally. Each dot was given a data attribute, allowing it to map directly to a specific slider position. One important design choice was ensuring that the dots represented slide positions rather than individual images, since multiple images are visible at once.
CSS played a major role in achieving the desired layout. I used flexbox for the image track to align images in a row and hidden overflow on the slider container to hide images outside the visible area. Fixed widths were applied to images to ensure consistent movement when sliding. Transitions were handled using transform properties with smooth easing effects. One challenge was ensuring that spacing between images was consistent while still calculating accurate movement distances in JavaScript.
JavaScript was used to handle slider movement, button clicks, and dot activation. I implemented a single index variable to represent the current slider position. The most difficult issue I faced was preventing the slider from scrolling beyond the final image. Initially, the slider allowed infinite movement, which resulted in unwanted white space appearing after the last image. I resolved this by calculating the maximum allowed index based on the slider track's total scroll width and the visible container width.
Another major challenge was keeping the slider movement and dot indicators in sync. Initially, I used separate variables for translation values and dot indices, which caused inconsistencies. I resolved this by refactoring the code to use a single source of truth. Additionally, debugging why the active dot color was not changing required inspecting the DOM and carefully reviewing event handlers. Once fixed, the dots responded correctly to both button clicks and direct dot selection.
FAQ Accordion Component Development
The development process for the FAQ page focused on customizing an existing accordion component to align with the intended visual design and interaction behavior. Instead of rebuilding the component from scratch, the existing HTML, CSS, and JavaScript structure was retained to ensure compatibility with the rest of the website. Visual states were carefully defined for the collapsed, hover, and active conditions to ensure consistency with the design and to improve user feedback during interaction.
One key issue was ensuring that the accordion content expanded smoothly without disrupting the layout or appearing abruptly. This was addressed by controlling the panel's maximum height through JavaScript and applying CSS transitions to create a gradual expansion effect. Another challenge involved synchronising the visual state of the accordion button with its functional state, particularly when switching between the plus and minus icons. This was resolved by using a dedicated active class that simultaneously controlled background colour, text colour, and icon changes.
CSS Syntax Errors and Visual Consistency
During development, I encountered multiple CSS syntax errors that prevented the stylesheet from rendering correctly. The main issues included trailing commas in selectors, nested media queries, and mismatched curly braces breaking entire sections. These errors were identified using code editor validation tools. Carefully checking selector syntax, removing trailing commas, and ensuring proper nesting structure resolved these problems.
Another technical challenge was ensuring visual consistency throughout the site. I needed to maintain consistent spacing, font sizes, colours, and button styles across multiple pages. At times, I found myself duplicating CSS rules, which made the stylesheet harder to manage. To overcome this, I reorganized my CSS by grouping related styles and reusing classes where possible. This helped make the code more efficient and reduced the chance of inconsistencies appearing later in development.
Debugging, Testing, and Refinement
Debugging played a major role throughout the development process. When elements did not appear on the page, I used browser developer tools to inspect the DOM, check computed styles, and verify whether elements were being rendered but hidden due to CSS rules. Simple diagnostic techniques, such as temporarily adding background colours or removing positioning rules, helped isolate the source of problems.
Testing and refinement were crucial in the later stages of the project. I tested the website across different screen sizes and browsers to identify layout issues and inconsistencies. This stage revealed problems that were not obvious during development, such as text overflowing containers or buttons being difficult to interact with on smaller screens. I used CSS media queries to adjust layouts for tablets and monitor devices, adjusting spacing and layout where necessary.
Reflection and Conclusion
Overall, this project significantly improved my understanding of front-end development. The process of building this website was so challenging which made me feel like giving up, and I ended up physically sick near the submission deadline, hence I had to ask for an extension. However, I'm glad I pulled through these obstacles. Although the outcome of the final website may have slight difference from the prototype, I'm proud of myself being able to complete it to the best of my ability.
This project reinforced the value of choosing the simplest solution whenever possible, using proper layout systems instead of complex positioning workarounds, and writing clean, modular code. As I'm a beginner to coding, I do admit my final code is quite messy and if it were to be an actual website that requires management, it would be hard to manage long term. I learnt that the simpler the code, the better it is to manage and revise. All in all, I successfully implemented the intended design with functional, interactive elements that behave consistently across the page and I'm glad I have the opportunity to learn new things about coding.
References:
Comments
Post a Comment