22.5.2023—11.6.2023 (Week 8—Week 10)
Rachel Madeline Purwanto / 0356994
Interactive
Design / Bachelor of Design (Hons) in Creative Media
Project 2 : Working
Web Page
❥INSTRUCTIONS
❥TASKS
This project is continuous from the Project 1, but this time we are instructed
to recreate the responsive landing page with html and css.
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.
Project 1 Link here
I started with the navbar first and added hover effects for it to change
colours on the css when hovered on. I also added the same css code to create
hover effects for other buttons.
Fig 1.1 Html of navbar
Fig 1.2 css of navbar
The first section is the new release section which features a display of the
new release of Suzanne's book where I used display flex to separate the image
of the book and the description. This will also feature the CTA button which
when hovered on will turn into a different colour.
Fig 1.3 html of new release section
Fig 1.4 Part of the new release section
The next part was the display of the 2 main book series that Suzanne wrote
which would feature an order now button and a link to view the full series.
This time, I used display grid to display them equally next to each
other.
Fig 1.5 html for book series
I struggled with this part for a bit since they didn't want to align next to
each other and instead was placed on top of each other so instead of display
flex, i used display grid. Even then the content were still overlapping each
other so I had to add more css codes to increase the gap between the 2 columns
as well as adjust the size of the image.
Fig 1.6 html for biography section
Fig 1.7 Progress of css for biography section
For the other books section, I didn't have to use display grid or flex since
the image of the books were already adjusted and small enough that they
automatically aligned next to each other in a row. All I had to do was
adjust the spacing and aligned them to the center of the page.
Fig 1.8 html for other books section
Fig 1.9 Progress of css for other books section
I had to keep altering the colours according to the colour scheme of
hunger games as they had to contrast from the background, like how I made
it in project 1. So to not make it too much of a hassle, before styling
the elements in the css I had a root section consisting of the colours
that I would use so I could just use the var() element in the css to link
it to the root section, in order to not waste time to find the accurate
colours desired.
PS, the writing in the button was initially meant to be orange but because I
clicked on it already, safari detected it as a link I already opened thus
changing the colour to purple.
Fig 1.11 Screenshot of Project 2
❥REFLECTION
This project was pretty time consuming, as it was my first time having to recreate a full landing page accurately to the landing page we designed on figma. Despite having multiple tasks correlated to exploring how to code on html and css, I was still pretty lost and confused on some parts, especially if the elements I wanted didn't align next to each other which was when I had to go through the css code repeatedly to find which code was overwriting the display grid code.
.png)
Comments
Post a Comment