INTERACTIVE DESIGN-PROJECT 2/WorkingWebPage
INTERACTIVE DESIGN
28 August 2023
9.10.2023- 16.10.2023/Week 7 - Week 8
Nur Fariha Binti Mohd Rodzuan/0351242
Interactive Design/Bachelors(Hons) in
Creative Media
Project 2-Working Web Page
LISTS
Instruction
INSTRUCTIONS
Module Information Booklet
Project 2: Working Web Page:
- 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.
- Upload the file in Netlify and submit the link here. Update your e-portfolio with all the processes documented in the blog
PROJECT 2: WORKING WEB PAGE
1. Process
fig 1 Prototype resume from project 1 week 8 (16/10/2023)
I began to code within HTML and put in all the information first
before decorating the resume using CSS. I entered all the contents and used
<div> to divide them into different classes so that it'll make it
easier to use them in CSS later.
fig 2 HTML code week 8 (16/10/2023)
After coding in HTML, I began creating the CSS to style the resume
according to its appearance. For the fonts, I originally used Arial as the
headings/subheadings and Verdana as the body text, however, the choices
weren't available in Google fonts so I decided to choose ones that are most
similar, Arimo (in exchange for Arial) and Jost (in exchange of body
text).
fig 3 Arimo display font in Google fonts
fig 4 Jost display font in Google Fonts.
fig 5 CSS code week 8 (16/10/2023)
I decided to use two columns to group the two columns and group the two columns using 'nth-child' to differentiate between the two.
fig 6 Website page on Google Chrome week 8 (16/10/2023)
I had to go through Blackbox AI to figure out how to get rid of border text
since I have tried to remove it plenty of times but it doesn't work. So I
thought changing the colour of the font was enough to hide the text within the
border.
The outcome of week 9:
Link to the working website resume:
fig 7 Project 2 Working Web Page-PDF
fig 8 Project 2 Working Web Page-Mobile Version
REFLECTION
Experience
Learning to code with CSS was the hardest for me, I did struggle a lot in
completing this project and wasn't really proud of the outcome of the project,
however, I was able to comprehend new things that I have learnt in class to be
used practically in creating my working webpage such as organising the columns
and dividing the information placed using the <div> makes it easier to
change and decorate in CSS file.
Observation
I realised that coding requires a lot of time and research on the internet and
as well as using AI such as Chatgpt or black box AI could really help
beginners a lot in understanding certain lines of coding that you're not sure
how to execute. Furthermore, looking back on my peer's work and the way they
go through the work, I realised that I still have a lot to learn and
understand in terms of the fundamentals of coding, there are certain parts of
the code that I still don't understand and hopefully, I will be able to
comprehend before going through the final project.
Findings
I found creating a working prototype from HTML and CSS requires a lot of
research, study, patience and observational skills. It is not an easy
process and there are many technicalities to be taken into account. While
coding it is also important to organize the lines of code to make sure that
it is easy to identify mistakes or code errors later on after seeing the
work in live view.
Comments
Post a Comment