Interactive Design - Project 2: Working Web Page
29.05.2024 - 29.06.2024 / Week 6 - Week 10
Teo Mei Hui / 0358315
Interactive Design / Bachelors of Design (Honors) in Creative Media / Taylor's University
Project 2: Working Web Page
.jpeg)
CONTENTS
LECTURES
Week 7
Figure 1.1 CSS Selectors
Week 9
Figure 1.2 Box Model-Layout in CSS
INSTRUCTIONS
TASK
Project 2 - Working Web Page
Transform our static prototype from Project 1 into a fully functional and interactive web page. Apply our knowledge of web layout class to create a working website that closely aligns with our original prototype. Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
Process
First, I started analyzing and planning how to use HTML and CSS to create my resume according to the prototype I created in Figma.
 |
| Figure 2.1 Resume prototype from Figma |
I started creating the layout in Adobe Dream Weaver. I created one div box as the page for the resume. Then I created 2 div box inside the div box, separating into top and bottom. On the bottom div box, I created 2 div box again and adjusted the width to make two columns. I also inserted the headings and part of the content. In css, I adjusted the margins and width, as well as creating borders with border-radius.
 |
| Figure 2.2 Creating the layout |
Then, I started adding the graphic elements and icons as the bullet points of the list. I selected li and set list style as none, then used class and id at li with ::before to set content as images.
 |
| Figure 2.3 Making image pngs into list bullet points in DW |
 |
| Figure 2.4 Making graphic elements into list bullet points |
Moving on, I inserted my picture as well as the vector of the software icons with level indicators (exported from Figma), then adjusted the position, padding and margins.
 |
| Figure 2.5 Adjusting my image position |
.jpg) |
| Figure 2.6 Inserting images and vectors |
Once the layout was set, I adjusted the color according to my prototype, using background-color and background-image for gradients.
 |
| Figure 2.7 Adjusting colors |
Lastly, I attempted to make the webpage responsive using media query. This way, when the tab is shrunken or when the webpage is viewed on other devices, the contents are not completely messed up.
 |
| Figure 2.8 Using media query to make website responsive |
 |
| Figure 2.9 Full size screen captured when tab is in smaller size |
.jpg) |
| Figure 2.10 Screenshot of phone view |
Final Link
FEEDBACK
No feedback given.
REFLECTIONS
Experience
Through this task, I was able to practice my HTML and CSS skills. By trial and error, I cleared a lot of my doubts. At first, I thought it would be a very difficult task, but in the end I managed to figure it out. I feel very accomplished with how similar the final resume webpage looks like to the Figma prototype. It was a great learning experience.
Findings
In order to understand and improve, we must keep attempting. To solve a problem, try searching the solution on the internet as well as pay attention to any coding errors.
Observation
We must be meticulous when coding, sometimes we can't solve a problem because of a small detail that was overlooked.
FURTHER READING
Video tutorials I watched to strengthen my understanding:
HTML Basics
CSS Basics
Flexbox
.jpeg)
Comments
Post a Comment