Interactive Design Final Project

 Edlin Raihana binti Mohamad Firdaus 0359096 Bachelor in Design Creative Media
GCD60504 Interactive DesignObjective: 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.

Website Development:

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

Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, color 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).

___________________________________________________________

    I first referenced the prototype and the colour scheme from the website proposal. Since I was going to use the blue monochromatic theme, it made it easier for me to colour code the more important parts of the website. I did decide to simplify my initial prototype because Dreamweaver would not let me code a section without self-destructing itself before I could save, losing all my progress.

    After that, I started organizing what I wanted to have in each page of the website and here is what I ended up on:

1. Home Page

• Warren Buffet's Message
• Letters regarding pledges
• Letters regarding shareholders

2. Announcements Page

• SEC Filings
• Pledges
• Fraud
• 60 years anniversary
• News Release
• Annual & Interim Reports
• Annual Meeting

3. Archives Page

• Corporation
• Sustainability
• Energy Investment Presentations
• Common Stock Information

4. Contact Page
5. About Page

    Since the original website was so barren without basic information, I decided to search up more information about Berkshire Hathaway Inc. included but not limited to phone number, quotes, employees, description, etc.

    I then searched online on how to effectively put in icons and I stumbled upon using .ico files to fill that need. https://www.youtube.com/watch?v=929K8JdfF9A, is the video that helped me install flaticon,ico into my website. I thought about adding JavaScript into my website but I opted not too since a)I wasn't comfortable enough with that code language b)I didn't know coding that well and c)java's scary. I also had a refresher on how to navigate style.css files and certain html codes that this video (https://www.youtube.com/watch?v=HD13eq_Pmp8) helped out a lot.

Installing favicon.ico

    I used the Navbar provided and css by bootstrap to make it easier for me to code the pages into place. I then used Canva to make sure that the images (from Pexel) are the right size that is needed to fill in the containers for my websites and href'd it to the source code.

Canva images

    After doing the final touches, I uploaded the website to netlify to get an existing url to be used.

Uploading on Netlify

   ⇢ Berkshire Hathaway (Redesigned) - https://edlin-0359096-bh-final.netlify.app/

   ⇢ Reflection

    This project have been the most painstaking and the most coding I ever had to do in my whole entire life. Although using adobe Dreamweaver was convenient, it was frustrating when Adobe Dreamweaver would crash multiple times (and bluescreened my laptop multiple times as well but we don't talk about that) that I almost wanted to go transfer to Visual Studio Code. But that would've meant relearning a whole new application just to create a website and that just sounds more of a hassle than anything. Since I had many set backs, I also sadly was too focused on coding that I didn't manage to take many screenshots. Honestly, W3School and Bootstrap are the real MVPs of this project because, if it weren't for their resources and existing code, I don't think I would've had any working braincells for me to recover from.

    Seeing my code finally working and up and running gave me a sense of pride, akin to defeating a really hard boss after multiple tries. When I started to pick up coding again, it went smoother as time passed on. Of course, it took multiple tries and relentless effortless but I'm glad I stuck it through. However, I feat that coding is one of those "One and Done" topics for me because rest assured I wont be touching a line of code ever again.