Interactive Design: Project 3

21/6/2022 - 9/7/2022 (Week 13-Week 15)

Adeline Wong Chyn Nee / 0344017 / BDCM

Interactive Design

Project 3 / Microsite

---

INSTRUCTION:

---

Week 13

This final project will be a continuous project from project 2 where we were required to create a working landing page, in this one, we are to create 4 more pages and submit them along with the landing page.

This is the compilation of the page designs that I am planning to code for this project.

Fig. 1.1 Compilation of final microsite pages

There will be a total of 5 pages (including the landing page)

1. Landing Page
   
   
2. Our Story page
   
   
3. Product page
   
   
4. Event page
   
   
5. Log In page
   
   

Fig. 1.2 Compilation of final microsite pages in PDF

Now that I have my design down, all I needed to do was bring it over to Dreamweaver and translate the designs into codes.

Coding Process in Adobe Dreamweaver

A. Creating the HTML and CSS files

Fig. 1.3 Compilation of HTML file tabs in Dreamweaver

Starting with the pages, I knew I had to create a lot of them which means working on 5 pages simultaneously and going back and forth to make sure everything matches and links. I first start by creating 4 new pages named about.html, product.html, event.html, and login.html, along with their respective CSS files.

Fig. 1.4 Final microsite HTML and CSS files in 'project 3' folder

I struggled a little bit figuring out why the CSS files don't work and I slowly realized that I have to name them differently and if I don't then I'll be editing the same CSS for all the HTML files, which would be a disaster if I didn't realised sooner

B. Coding errors

Fig. 1.5 Screenshot of my progress in Dreamweaver

1. Ampersand Error

Fig. 1.6 Special character error

Fig. 1.7 Special character error

When typing a paragraph in my <p></p>, I realized that using the ampersand in my paragraph can cause an error to appear in my output tab. I searched how to solve this error on Google but could not find a solution anywhere. However, this error does not seem to cause any obstacles in my page so I have decided to leave it be.

1. Youtube embed error

In 3 of my pages, I have decided to include videos and I have decided to use some of my edited videos and also some video from YouTube.

Fig. 1.8 Embed code to copy in getbootstrap.com

 In order to embed YouTube videos, I looked at the 'embed' section on getboostrap.com. I tried the code but it did not work, as it showed a message in Dreamweaver saying that my browser is unable to play the video. So, I scoured the internet once again in search of answers, and apparently, I am using the incorrect code. 

Fig. 1.9 Error message shown in Dreamweaver

Instead of:

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

I should be using:

<div class="embed-responsive embed-responsive-16by9" width="100" height="230" >
    <iframe class="embed-responsive-item" src="https://youtube.com/embed/W5DBXQZUfvA"        allow="autoplay" allowfullscreen></iframe>
</div>

with an added CSS like this:

.embed-responsive-item, .embed-responsive {

width: 70%;

}

C. Some details

1. Scroll behavior style

When coding the pages, I realized that I should ass a smooth scroll behavior style to my pages since I have a link at my nav bar that brings me down to the contact footer instead of a new page itself.

Fig. 2.1 Contact link that goes to the footer

Fig. 2.2 Smooth scroll behavior style added at the head section of every page

2. Product categorized with the same initial letters

As an extra detail, I used the same product name initial for each row. It's just a fun little detail I added to give the microsite more character.

Fig. 2.3 Product row with initial letter 'K'

Fig. 2.4 Product row with initial letter 'J'

Fig. 2.5 Product row with initial letter 'D'

Fig. 2.6 Product row with initial letter 'L'

D. Uploading to Netlify

Fig. 3.1 Uploading to Netlify

Fig. 3.2 Uploading to Netlify

---

Final Submission

HTML & CSS: https://drive.google.com/drive/folders/1WIWKtVUFWNChVaG59A-PJNnOj_bRkPmL?usp=sharing

Netlify Link: https://finalproject-indexhtml-adelinewong.netlify.app/

---

Reflection

This final project was honestly pretty stressful for me because firstly I am pretty stubborn with codes and makes the dumbest mistakes which are usually obvious ones that I just don't realize. However, I can really say that by the end of this project, I have grown out of that stubborn state and grown to know more about what to do and not to do when coding. Working on this project taught me many things, I learned how to use bootstrap to create rows and columns that contain elements of our page. I also learned the importance of using the correct grid system number or else typing in the rest of your code would be useless as the base is incomplete as it is built on an unsteady foundation. 

At the end of the day, I am proud of myself to have pushed through and finally finished coding 5 pages with the style of my choice. I think that the good thing about this project is that we get the freedom of creating something we enjoy and like but we also get guidance from Mr. Shamsul who gives us feedback on what to improve. In conclusion, this project was a stressful one at the beginning but I have grown to learn and enjoy coding and now I can proudly say that my perspective of coding is forever changed, thanks to this project and module.