Interactive Design - Final Project

 

|| 10/17/2024 - 11/03/2024 (Week 4 - Week 6)

|| Bertrand Alden Gani / 0370471

|| Interactive Design

|| Bachelor Of Design In Creative Media

|| Final Project

INSTRUCTIONS

FINAL PROJECT

Objective: The objective of this assignment is to bring your website redesign to life by developing a fully functional website 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, and 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).

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.

Technical Considerations:

Performance Optimization: Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression.

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.

The process:

Fig 0.1 Creating new html and css file

Firstly, I created a new html and css file. Then I linked the css file to the html file and named it index.html and style.css respectively.

Fig 0.2 Creating header section

1) Home Page

In the html file, I began creating the header section. I added the Berkshire Hathaway building image as the background and made the 4 navigation bar: Home, News, About, Contact at the top. Then, I create a text box for the main text of the header and a button.

Fig 1.0 Adjusting header in css file

In the css file, I made some adjustment to background-size, background-color, position, padding, margin, etc. I also added hover effect for the button and navigation bar. Here is the result:

Fig 1.1 Adding hover effect to navigation bar

Fig 1.2 Adding hover effect to button

Then I faced some problem, when I opened it on a smaller screen it looks messy. So I have to adjust it for smaller screen. Here is what I did:

Fig 1.3 Adjusting for smaller screen

Here is what it looks like after adjustment:

Fig 1.4 After adjustment

I need a way to be able to close and open the navigation bar. So I added icons from Font Awesome. I added the source link to the head section and the javascript at the bottom of the body section. In the css file, I adjusted the display, color, size, etc.

Fig 1.5 Adding font awesome icons

Fig 1.6 Adding javascript for the navigation bar toggle

Fig 1.7 Adjusting icons in css

Fig 1.8 After adjustment

Next, I needed to make a live chart. Originally, I was thinking only using chart images. However, I found a tutorial video on Youtube on how to add live stock chart. The tutorial suggested to use widget from TradingView. So I followed the steps and here is what it looks like:

Fig 1.9 Stock live chart widget

Fig 1.10 Stock live chart

After that, I started creating the News section. This section consists of 3 images from Latest News arranged in a row.

Fig 1.11 Creating News section

I added a row class and the 3 images as well as the texts. Then I created 3 layers on top of each image and adjusted them in css file. I also added hover effect for the layers. I adjusted the row's flex direction to column and max width of 700px in @media.

Fig 1.12 Adjusting row, images, layers

Fig 1.13 Adding hover effect for the layers

Fig 1.14 Adjusting @media

Next I created About section. I did the same thing as the previous section by creating row, however, this time I didn't add layers, instead I use shadow for the hover effect.

Fig 1.15 Creating row for About section

Fig 1.16 Adding hover effect using shadow

After that I created Contact section. In the html file I added some texts as well as a button for contacting. The rest of the adjustment is in the css file. I also added background image in the css file. To make it doesn't look messy in smaller screen, I adjust the width and size in @media.

Fig 1.17 Creating Contact section

Fig 1.18 Adjusting and adding background image in css

For the footer, I added texts and social media icons such as facebook, twitter/X, instagram, and email. The icons are all from FontAwesome. Then I link each icon to the social media account respectively.

Fig 1.19 Creating footer section

Fig 1.20 Adjustment in css

2) News Page

I duplicated the index.html file by saving it as news.html. Then I opened the file and deleted the parts or sections that are not needed for the news page. What left are the header and the footer. I changed the header section class from header to sub-header. Then I added "News" text as the title of the page.

Fig 2.0 Changing header class name and adding page title

I wasn't sure how to make the news be able to slide left and right so I watched a tutorial on Youtube. Firstly, I created a new section called "News-content" and added the title for the first part of the news section "Latest News". Then I followed the video instruction using Bootstrap and added carousel and card class. I added the bootstrap link to the head section and the javascript to the end of the body section. For the search bar, I added <input.

Fig 2.1 Creating news content section

Fig 2.2 Carousel controls

I adjusted carousel and image in css and made sure it works in smaller screens. Here is the adjustment:

Fig 2.3 Width, height, padding and others adjustment

Fig 2.4 @media adjustment for smaller screen

Then I created a javascript file for the search bar and carousel to work.

Fig 2.5 For the search bar

Fig 2.6 For the carousel

In the html file, I copy the first part "Latest News"section to create the the other two which are "Important News" and "Letters". To make it work, I needed to make unique id for each part so I named it "__1 for part one, __2 for part two, __3 for part three."

Fig 2.7 Part 2 Important News

Fig 2.8 Part 3 Letters

Following the tutorial video, I added Jquery code at the end of the body section. I read that new versions of Bootstrap doesn't need to add Jquery code to work, but I still added it just in case. Here is the script: 

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

Following that, I tried to see if it works. Unfortunately, it had some problems. The carousel didn't look as what it supposed to look like and it also doesn't work properly. Turned out, I had some typos and I also learned from a Youtube comment that the the link position matters. Originally, I put the style.css and script.js file above the other files. But when I moved them to the bottom it finally works.

3) About Page

Moving on to the third page, I also saved the previous file as a new file named page.html. I deleted the parts that are not needed and change the title to "About Us".

This page was quite simple and easy to make as it doesn't need scripts or other things to work. It only consists of images and texts. So here what it looks like in the html file after I type the usual code:

Fig 3.0 Creating About Page

Then for the css file, I adjusted the width, height, margins, paddings, etc.

Fig 3.1 Css adjustment

Here is what it looks like in the website:

Fig 3.2 Result

4) Contact Page

Lastly the Contact page, I did the same things as previously and named the file "contact.html" and for the title of the page "Contact Us".

For the first part, I created section for the map. Then I searched Berkshire Hathaway location in Google Maps and copied the embed code. After that I adjust it in css.

Fig 4.0 Embedding location/map code

Fig 4.1 Css adjustment

Then I created new section for the other informations. I added texts and icons from FontAwesome. 

Fig 4.2 New section for other information

Fig 4.3 Css adjustment

Next I created the form, I dont know how to make it able to send the message to my email so I searched for a tutorial in Youtube as well. Here is what it looks like in the html and css after adjustment:

Fig 4.4 Creating form

Fig 4.5 Css adjustment

According to the tutorial, I had to make a php file. So here is what I did:

Fig 4.5 Creating php file

P.S. Recently, I discovered that some links in my website are not accessible when I upload it in Netlify. It's because the file from the links are saved in my laptop. I tried some ideas. In the end, the solution is I upload the files from the links to Google drive, then I copied the Google drive links to the html file.

Website Folder (html, css, js, etc.): Folder Link

Final Submission: Website Link (Berkshire Hathaway)