19/06/2024 - 29/06/2024 (Week 6 - Week 10)
Isabel Tan Xen Wern/ 0355602/ Bachelors of design in creative media/
Taylors University
Interactive Design GCD 60904
Project 2 : Working Web Page
JUMPLINK
Introduction
Process
Final Submission
Reflection
INTRODUCTION
Figure 1.1
Mib (19/06/24)
The objective of this assignment is to transform your static prototype from
Project 1 into a fully functional and interactive web page. You will apply
your knowledge of web layout class to create a working website that closely
aligns with your original prototype.
Review your static prototype from Project 1 and analyze its layout,
typography, color scheme, and imagery.
Use HTML and CSS to translate the design elements into code, ensuring a
faithful representation of the original prototype.
Aim for pixel-perfect precision while maintaining responsive design
principles to ensure compatibility across different devices and screen
sizes.
Process
Figure 1.2
color scheme testing (25/06/24)
the font color turned out too light for my liking
Figure 1.3
checking the fonts used (25/06/24)
Figure 1.4
finding the fonts in google fonts (25/06/24)
using the exact same fonts used in project 1 for the web page.
Figure 1.5
final color scheme (25/06/24)
tried hard to replicate the color scheme of project 1
Figure 1.6
language section (25/06/24)
learned the <progress> function can replicate the design on my
project 1 resume
Figure 1.7
form (25/06/24)
created a form for potential employers who are looking into my webpage
for easy contact
Figure 1.8
before adjusting mobile view (25/06/24)
this is without adjusting the different screen sizes
Figure 1.9
adjusting the mobile view (25/06/24)
i removed the flex so that the words will appear on the bottom rather than
beside the profile photo
Figure 2.1
testing mobile view (25/06/24)
FINAL SUBMISSION
Figure 2.2
full size screenshot (28/06/24)
REFLECTION
This project really tested my patience and was truly a learning experience. I had a lot of trouble finding out where to put the ending </div> and where i should i should even place a div. My fingers hurt from typing and scrolling to look for the css part that i need to change and sometime the color doesn't look the same on dream weaver than on the websites.
while uploading it to netlify, it kept telling me page not found and i almost ripped my hair out trying to figure out what, turns out the name had to be index or it wont work. regardless, i manage to egt through all the problems without going banging my head on the screen with the help of my friends and sir.
This project really thought me a lot about html and css.
.png)
Comments
Post a Comment