Interactive Design / Final project

Objective: The objective of this assignment is to bring your website redesign to life by developing a fully functional website (MINIMUM OF FIVE (5) PAGES) based on the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.

Assignment Description: Building on your redesign proposal and prototype, you are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.

a) Website Development:

Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, or any other relevant technologies or frameworks (e.g., Bootstrap).

Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, colour schemes, imagery, and layout.

Responsive Design: The website must be fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.

Cross-Browser Compatibility: Ensure that the website functions correctly across multiple browsers (e.g., Chrome, Firefox, Safari, Edge).

b) Core Features:

Navigation: Implement a user-friendly navigation system that allows visitors to easily access all key areas of the website.

Interactive Elements: Include any necessary interactive features, such as forms, buttons, or dynamic content, that enhance user engagement.

c) Technical Considerations:

Performance Optimisation: Optimise the website for fast load times by minimising file sizes, using efficient coding practices, and employing tools like caching and compression.

d) Final Testing and Deployment:

Testing: Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. Document any issues found and how they were resolved.

Deployment: Host the website on a live server or a web hosting platform of your choice (e.g., GitHub Pages, Netlify, or a custom domain). Ensure that the website is accessible via a public URL.

Submission:

A live URL to the fully functional website. A brief report (800–1,000 words) documenting the development process, any challenges faced, and how they were overcome in your E-Portfolio, and upload the final project main folder into Google Drive and include the link in your e-portfolio (set the access to public).

--------------------------------------------------------------------------------------

Final Project

Chosen Website to refine: The Christmas Tree Farm

Fig 1.1 - screenshot of the original The Christmas Tree Farm website

Recap of Prototype

Before we start, lets looks at the prototype I have done in Figma during project 2.

(Link to project 2 blog for more information, Click me!)

Fig 1.2 - screenshot of Figma prototype

Setup of Dreamweaver/VS Code

Once the prototype is finished, I booted up Dreamweaver and started preparing the Html and CSS files.

Fig 1.3 - Preparing files in Dreamweaver

However, not long after I started work on Dreamweaver, I decided to switch VS Code instead. Thus the project was continued in VS Code. In VS Code, I prefer to work on 1 page at a time, so below is all the files I have opened up. (5 completed webpages and 4 webpages with placeholders)

Fig 1.4 - Files in VS Code

The next section will document all the 5 completed webpage I have done, and the placeholder webpage for the webpage that I couldn't finish in time.

Getting started: Laying foundation in CSS

Styles for the entire website

When making the website, I had followed a tutorial and learned to the root selector. The CSS's :root selector lets me define global variables that can be used in the CSS. These variables provide a convenient way of storing and reusing values, making my CSS more modular and easier to maintain.

Fig 1.5 - Styles for the entire website

1) Homepage, Navigation bar, and footer

Below is the full size screenshot of my homepage with the navigation bar, and the footer.

Fig 1.6 - Homepage, Navigation Bar, and Footer Overview

Code and development

Full HTML for the homepage, navbar, and footer

Using comments (Green texts), I have labeled each section of the codes to make it easier to look for and identify respective sections .

Fig 1.7 - HTML for homepage and navigation menu

--------------------------------------------------------------------------------

a) Navigation bar (Homepage version)

Fig 1.8 - Navigation bar

CSS for the Navigation bar

Fig 1.9 - CSS for the Navigation bar

CSS for the Navigation bar (Responsive media query code for max width 1000px)

Fig 1.9A - CSS for the Navigation bar - 1000px

--------------------------------------------------------------------------------

b) Hero section

Fig 1.10 - Hero section

CSS for the Hero section

Fig 1.11 - CSS for the Hero section

CSS for the Hero section (Responsive media query code for max width 1000px)

I had ChatGPT to help optimize the codes here.

Fig 1.11A - CSS for the Hero section - 1000px

CSS for the Hero section (Responsive media query code for max width 640px)

Fig 1.11B - CSS for the Hero section - 640px

--------------------------------------------------------------------------------

c) News section

Fig 1.12 - News section

CSS for the News section

Fig 1.13 - CSS for the News section

JavaScript for the News section

Fig 1.14 - JavaScript for the News section

CSS for the News section (Responsive media query code for max width 640px)

Fig 1.14B - CSS for the News section - 640px

--------------------------------------------------------------------------------

d) Quote section

Fig 1.15 - Quote section

CSS for the Quote section

Fig 1.16 - CSS for the Quote section

--------------------------------------------------------------------------------

e) Website section section

Fig 1.17 - Website section section

CSS for the Website section section

Fig 1.18 - CSS for the Website section section

CSS for the Website section section (Responsive media query code for max width 1000px)

Fig 1.18A - CSS for the Website section section - 1000px

CSS for the Website section section (Responsive media query code for max width 640px)

Fig 1.18B - CSS for the Website section section - 640px

--------------------------------------------------------------------------------

f) Pop-up section

Fig 1.19 - Pop-up section

CSS for the Pop-up section

Fig 1.20 - CSS for the Pop-up section

--------------------------------------------------------------------------------

g) Footer section

Fig 1.21 - Footer section

CSS for the Footer section

Fig 1.22 - CSS for the Footer section

CSS for the Footer section (Responsive media query code for max width 1000px)

Fig 1.22A - CSS for the Footer section - 1000px

CSS for the Footer section (Responsive media query code for max width 640px)

Fig 1.22B - CSS for the Footer section - 640px

Challenges:

1) Didn't know how to create the carousel in the news section.

2) Had difficulty aligning layout across different screen sizes

3) Elements overlapping or misaligned on mobile view

4) Struggled with setting up proper spacing and visual hierarchy

Solutions:

1) went to YouTube and found a tutorial on how to make it using plugins and JavaScript.

2) Used flexbox to control layout and media queries to adjust for different screen sizes

3) Tweaked element widths and positions specifically for mobile using responsive CSS rules

4) Adjusted padding, margins, and font sizes to improve clarity and balance

2) About Us, and Navbar variation

Below is the full size screenshot of the About Us page. The Navbar bar and footer is the same one from the Homepage, with some minor adjustments.

Fig 1.23 - About Us page overview

Code and development

Full HTML for the About Us page, and navbar

Here, the navbar cade on line 22 has the class "Navbar-link active". This active command makes that link to show a different colour and an underline text decoration to highlight which page the user is at.

Also, the Footer code is not shown here as it is the same code as in the homepage.

Fig 1.24 - HTML for About Us page and navigation menu

--------------------------------------------------------------------------------

a) Navigation bar (Active page Version)

The logo changes to a version with text on its right side. The active state modifies the link’s appearance by changing its color and adding an underline, indicating which page the user is currently viewing.

Fig 1.25 - Navigation bar in About Us page (Active page Version)

CSS for the Navbar (Active page Version)

Fig 1.26 - CSS code for the variant logo in the Navbar

Fig 1.27 - CSS for the Navbar in active state

--------------------------------------------------------------------------------

b) 'Our Beginning' section

Fig 1.28 - 'Our Beginning' section

CSS for the 'Our Beginning' section

Fig 1.29 - CSS for the 'Our Beginning' section

CSS for the 'Our Beginning' section (Responsive media query code for max width 1000px)

Fig 1.29A - CSS for the 'Our Beginning' section - 1000px

--------------------------------------------------------------------------------

C) 'Our Family' section

Fig 1.30 - 'Our Family' section

CSS for the 'Our Family' section

I had ChatGPT to help optimize the codes here.

Fig 1.31 - CSS for the 'Our Family' section

CSS for the 'Our Family' section (Responsive media query code for max width 1000px)

Fig 1.31A - CSS for the 'Our Family' section - 1000px

CSS for the 'Our Family' section (Responsive media query code for max width 640px)

Fig 1.31B - CSS for the 'Our Family' section - 640px

Challenges:

1) When making the 'Our Family' section (See Fig 1.30), I struggled trying to arrange the title, subtitle, description and image.

Solutions:

1) My father gave some advice and taught me how to use tables (he is a programmer) to align everything.

3) Visiting page

Below is the full size screenshot of the Visiting page. The Navbar bar and footer is the same one from the About Us.

Fig 1.32 - Visiting page overview

Code and development

Full HTML for the Visiting page

The Footer and Navbar code is not shown here as it is the same code as in the About Us page.

Fig 1.33 - HTML for Visiting page

--------------------------------------------------------------------------------

a) 'Pop-up-news' section

Fig 1.34 - 'Pop-up-news' section

CSS for the 'Pop-up-news' section

Fig 1.35 - CSS for the 'Pop-up-news' section

--------------------------------------------------------------------------------

b) 'Visiting' section

Fig 1.36 - 'Visiting' section

CSS for the 'Visiting' section

Fig 1.37 - CSS for the 'Visiting' section

--------------------------------------------------------------------------------

c) 'Picking Tree' section

Fig 1.38 - 'Picking Tree' section

CSS for the 'Picking Tree' section

Fig 1.39 - CSS for the 'Picking Tree' section

CSS for the 'Picking Tree' section (Responsive media query code for max width 1000px)

Assisted a bit by ChatGPT.

Fig 1.39A - CSS for the 'Picking Tree' section - 1000px

Challenges:

(Aye, no problems here)

Solutions:

4) Products page

Below is the full size screenshot of the products page. The Navbar bar and footer is the same one from the About Us. The 'Pop-up-news' section from the Visiting page also appears here.

Fig 1.40 - Products page overview

Code and development

Full HTML for the Products page

The Footer and Navbar code is not shown here as it is the same code as in the About Us page. The 'Pop-up-news' section is the same code as in the Visiting page, so it is not shown here.

If you look at the 'products header' section, the classes used are the same as the visiting section's classes. That's because i copy-pasted the code from that section and replaced the content.

Fig 1.41 - HTML for Products page

--------------------------------------------------------------------------------

a) 'Products header' section

Fig 1.42 - 'Products header' section

CSS for the 'Products header' section

The CSS code used in this section is from the 'Visiting' section.

Fig 1.43 - CSS for the 'Products header' section

--------------------------------------------------------------------------------

b) 'Products' section

Fig 1.44 - 'Products' section

CSS for the 'Products' section

Fig 1.45 - CSS for the 'Products' section

CSS for the 'Products' section (Responsive media query code for max width 1000px)

Assisted a bit by ChatGPT.

Fig 1.45A - CSS for the 'Products' section - 1000px

Challenges:

(aye, no problems here)

Solutions:

5) Contact Us page

Below is the full size screenshot of the Contact Us page. The Navbar bar and footer is the same one from the About Us.

Fig 1.46 - Contact Us page overview

Code and development

Full HTML for the Contact Us page

The Footer and Navbar code is not shown here as it is the same code as in the About Us page.

Fig 1.47 - HTML for Contact Us page

--------------------------------------------------------------------------------

a) 'Contact' section

Fig 1.48 - 'Products header' section

CSS for the 'Contacts' section

Fig 1.49 - CSS for the 'Contact' section

CSS for the 'Contact' section (Responsive media query code for max width 1000px)

Assisted a bit by ChatGPT.

Fig 1.45A - CSS for the 'Contact' section - 1000px

Challenges:

1) Could not figure out how to add a map in this section

Solutions:

1) Searched up "google maps in websites" and learned how to embed google maps in the website

!) Placeholder page

This webpage is place in the 4 other webpages that I did not design and code. This placeholder ensures that the Navigation bar works and can jump to other pages.

Below is the full size screenshot of the Placeholder page. The Navbar bar and footer is the same one from the About Us.

Fig 1.50 - Contact Us page overview

Code and development

Full HTML for the Contact Us page

The Footer and Navbar code is not shown here as it is the same code as in the About Us page.

Fig 1.51 - HTML for Placeholder page

--------------------------------------------------------------------------------

a) 'Under Construction' section

Fig 1.52 - 'Under Construction' section

CSS for the 'Under Construction' section

Fig 1.53 - CSS for the 'Under Construction' section

Final Outcome

Google drive link:

https://drive.google.com/drive/folders/1UhsxiVq4VfKVVXXwe7mcROfpiaCuvcrc?usp=drive_link

Netlify Link:

https://finalprojectrachelng.netlify.app/?authuser=0

Feedback

Week 10

Week 11

Week 12

- The white column appearing may be cause by margin or padding.

- Some of the images are a bit too big

- Focus on the website layout first, do the responsiveness after that.

Week 13

Week 14

Reflections

Time management was one of the main challenges I faced during this project. I often felt there wasn’t enough time to complete tasks as thoroughly as I would have liked. Moving forward, especially in future modules like Advanced Interactive Design, I plan to improve my scheduling and start earlier to avoid last-minute stress.

The tutorials and in-class practice exercises were very helpful in building my final project. They provided clear guidance and gave me hands-on experience, allowing me to understand how each element fits together in a website. These exercises helped me apply the concepts more confidently during development.

Throughout this module, I learned the basics of HTML, CSS, and JavaScript, which enabled me to create a working website. It was my first time doing web design, and I enjoyed the creative and technical aspects of the process. Overall, the class was fun and engaging, and I’m excited to continue building on these skills in future projects.

Search This Blog

Rachel Ng Jie Ting (0378902)