Interactive Design / Project 2: Working Web Page

on

19/06/24 - 25/05/24 Week 9 - Week 10

Sheren Princessa Davon / 0362134

Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Project 2: Working Web Page

INSTRUCTIONS


Project 2: Working Web Page

This project is a continuation of Project 1, to turn the prototype into a fully functional & interactive web page. We are to translate the layout, typography, color scheme & imagery into HTML & CSS code and make sure the designs are responsive for different devices and screen sizes.

Fig 1.1 Project 1 Prototype. Week 6 (28/05/24)

I first analyzed my Project 1 Prototype and for a more efficient layout, I exported the software icons as a picture altogether, as well as the Education part as PNGs from my Figma workspace. This way, I can insert the pictures into the columns of my layout later on.

Fig 1.2 PNGs from Figma

Then, I started to code the website on Adobe Dreamweaver. I started with the <head> where I linked the Google Fonts I used (Poppins & Sora). I also added the <meta> tag to ensure responsiveness across different devices.

Fig 1.3 HTML code

For the <body> I formatted the code into different <div> classes, such as the rows and columns, then added different headings, text, and the necessary images. I added different classes into some of the <p> tags and <h3> tags to allow me to change its style in the CSS file. I also added a <ul> list tag to insert some of my skills.    

Fig 1.4 HTML codes

After I was done with the code, I created a CSS file and linked it to the HTML file. I changed the colors of the headings, edited the width, padding margins, etc. of the containers, rows, columns and the different class elements. 


Fig 1.5 CSS Codes

In my profile section, I added an external link to my blog as well. I used the <a href> tag and I edited the CSS code to add a hover effect with a simple fade transition. 

Fig 1.6 Blog link

I added a similar hover-fade effect to the Experiences to reveal the date, making the website more interactive.
Fig 1.7 Hover Effect

To make sure that the webpage layout is compatible with different devices, I added the necessary codes in HTML.
Fig. 1.8 @media tag
Fig 1.9 Webpage on different dimension

Final Project 2: Working Web Page

Link to webpage: 

Fig 1.10 Project 2 Screenshot. PNG - Week 10 (25/06/24)

REFLECTION

With the help from the tutorials we learned in class, I was able to complete this project using the necessary elements. I've learned the different HTML elements, headings, adding columns and rows into the webpage, as well as editing the CSS file to make the layout look more neat and appealing. I now have a better understanding of HTML and CSS, a combination of both the coding and making the layout look nice in a webpage, which is something I wasn't used to. Overall, I like how my project turned out.


Comments

Post a Comment