19/06/2024- 26/06/2024 (Week 9-Week 10)
Lizzie Tanaka (0362065)
Interactive Design | BDCM | Taylor's University
Project 2: Working Web Page
Lectures
Week 9
Mr Shamsul taught us about the box model. We were also given a demo to practice this box model CSS.
Fig 1.1 PPT Box Model - Week 9
Here's the screenshot of my version because my netlify wouldn't load the web with the CSS. The button is also responsive, it turns into green when hovered. The menu bar turns orange when hovered.
Fig 1.2 Layout exercise (1)
Fig 1.3 Layout exercise (2)
Week 10
Mr Shamsul tutored us on how to make a more complicated layout.
Instructions
In project 2, we were instructed to translate our original CV
Prototype design into HTML and CSS, make it an interactive
website.
Fig 2.1 Prototype design
This is the final prototype I designed in Figma for project 1. I
included a short introduction and my skills and experiences as
well as 3 projects I did and my contact list. Here's the blog to
the process: Project 1 Prototype Blog
I set the color palette and find the font I used in Figma. The
font is 'Epilogue' in Google Fonts and I use it as a variable
font where I only needed to change the weight in my CSS code. I
only used 1 font in this design.
.png)
Fig 2.2 Font choice & color palette
HTML:
Fig 2.3 First HTML (Skills to Experience)
Fig 2.4 First HTML (Experiences to Past Works)
Fig 2.5 First HTML (Past Works)
For the HTML, I divided each page into <section> tags and put and ID to it. And depending on the content, I made a lot of <div> tags.
A. INTRODUCTION SECTION
Fig 2.6 Introduction section
For the HTML, I first divided into 3 containers; left, right,
and the about text.
<div> left is for the picture and <div> right is
for the "hello! i'm Lizzie Tanaka"
Another <div> is for the short about me text.
Here's the final html code.
Fig 2.7 HTML code for introduction section
For the intro left, I exported my photo & the floating
labels from Figma to ease my process. I actually attempted to
do the labels myself in fig 0.0. However, I couldn't get this
issue solved; which was the background of the text being under
the photo. I was on a time crunch so I chose to export the
group altogether.
Fig 2.8 Failed attempt on labels
Fig 2.9 Exported picture
Fig 2.10 CSS for intro-left
For the intro right section, I divided the title into 2 class
because I had to change it to different colors. I divided into
.black and .orange (I wrongly typed black instead of white). The
class .introright is just to set the width of the
container
In the CSS, I mainly changed the font size size and weight as
well as the letter spacing and line-height, all according to the
figma file.
Fig 2.11 CSS for title and intro right
For the #aboutme, I changed the text colors and the alignment of
the text and set the size and the position of the
container.
Fig 2.12 CSS for about me
Section 2: Skills, Education, Experiences
By far this is the part where I struggled the most, thus my CSS
is quite messy because I was too confused. I'm dividing this
part into five parts:
General, Skills, Education, Experiences, and the soft
skills.
Fig 2.13 Skill, Education, Experience
Fig 2.13 Section 2 General; CSS
Skill Section:
I made a row and column <div> first. The column
<div> is to separate the left and right column. I then
make a .skills <div> to contain all the apps list. I
divided the apps into 2 because it is on 2 different
rows.
Fig 2.14 HTML for skill section
Below is my quite long CSS style for the apps. I set the
background color, border radius, padding, font-weight, list
style, display and more. Specifically the list style to
'none' since my html is in list. The display is set to
inline-block so that they have space between each other and
is horizontally distributed.
Fig 2.15 CSS for skill list
Education Section
Pointers <div>
I divided this section into 2 <div>; one for the
pointers on the left and one for the
content. I exported my pointers which was a
semi-circle and a line from Figma first separately and they
are contained in this <div>
Fig 2.16 HTML for education section
In .edu <div> I set the padding and the width of the div and set the content of the education style. I also set the positioning for the pointers.
Fig 2.17 CSS for general style and pointers <div>
In my education section, all the content, from the title,
the duration, the location are all differently formatted so
I had to style them separately. The class .page2orange is
the title of my education & experiences.
Fig 2.18 CSS for education
Experiences
I start with arranging the content first to ensure correct
spacing and text-formatting. I put the heading, location,
duration and job description with a different class each so
that it's easier for me to format the text in CSS. I mainly
set the font-weight, size, and the positioning using margin
and padding.
Fig 2.19 HTML CSS for experience content
After I set the formatting for the experience content, I
moved to set the pointers so that it aligns well perfectly
with the headings. For the pointers, I moved the line and
the semi-circle around by utilizing margin so that it sits
right within the container and I can resize it.
.png)
Fig 2.20 HTML CSS for pointers of experience
The last part of this section is the soft skills part. I had an issue in fig 0.0 where despite me putting the soft skill section after the <div>, it was placed outside of the <body> containers. Again due to the time-crunch, I put it into their own <div> and I manually positioned it on the page.
Fig 0.0 Issue on soft skills
Fig 2.21 Manually positioning the soft skills section
Here's the final HTML and CSS code for the soft skills
section. I used display flex and I use class to set same
colors and text-formatting and positioning.
Fig 2.22 HTML CSS for soft skills
Past Works: Table of Content
Fig 2.23 Past Works: Table of Content
Fig 2.24 HTML for table of content
While the HTML is quite short, I find that styling this page
was not as easy as I expected.
General:
Here, I set the height and background color as well as
text-format the title of the page. I also set the display of
the headings <div>
Fig 2.25 CSS for table of content
I start by styling my titles and subtitles first
before putting in the pointers. In the CSS for the title, I
separated the three titles into three <div> with a
class so I can set the display to flex and arrange the
positioning and formatting on the page. Since the titles all
have different width for their text-box, I was confused
since it can't create equal gaps. I decided to manually
position them inside the div.
Fig 2.26 Progress on table of contents
Fig 2.27 CSS for titles of the table of content
I wanted to use a <div> for the subtitles but I
realized that the gap is not equal and I had to set the left
and right spacing manually.
Fig 2.28 CSS for subtitles of the table of content
After I finalized the positions, I inserted my pointers
pictures. This is because I actually exported the pointers
quite later during the project, I had finished up the main
layout before adding the pointers.
Social Media Section
For this section, I did it by dividing into three phase: the
title, digital campaign, social media post, and digital
poster.
Fig 2.29 Social Media Design Section
For the title and heading part, I used the same class for
the apps "PS" and I used a <div> and an ID to position
in. The title that said "Social Media Design" is with a
class because I will use the same formatting for the rest of
my past works.
Fig 2.29 HTML and CSS for heading of social media
I created a <div> that can contain my digital campaign
and instagram post pictures since they are the same width and
height. My problem was that my digital campaign is 3-2-2 so I
made the first three into a different <div> and gave
them a separated ID, I set this to flex, arranged the gap and
gave each picture shadow using box-shadow CSS property.
The rest which was 2 and 2 on each row is put into different
<div> but with the same class to format it
equally.
The instagram post grid is easier to do so I set it into three
<div> with three pictures in each <div> and set
them to a class. With the class, I set their gap and
positioning so that it's neat and equal and gave them the
box-shadow property as well.
The digital poster is a separate item so I didn't put it
inside any <div>.
.png)
Fig 2.30 HTML and CSS for the images
For the subtitle, I couldn't use a <div> to
automatically format them so I had to position each subtitle
manually due to differing gaps between them.
Fig 2.31 HTML and CSS for the subtitles
Brand Identity Page
Fig 2.32 Brand Identity Page
For the header, I applied a new class called .orange_titles
since this will be used on the next page as well. The pointer
and the apps are already set before using the class (same
class on the previous page). I added a <div> on the apps
and applied class to it because I'll be using the same element
on the next page. This <div> is to position the apps
correctly on the page.
Fig 2.33 Brand Identity Page; Header
To set my images, I divided into 2 <div>; top and bottom
(horizontally). For the photos, they are saved from my figma
so I didn't add the box-shadow property. I was quite confused
on how to format this to the way I wanted so my CSS is quite
messy.
Fig 2.34 Brand Identity Page; Images
Layout Work Page
Fig 2.35 Layout Work Page
The header is set the same way with the previous page
(branding identity) since the pointers, title and the apps
are already set with the class.
For the typographic system posters, I made a grid by using
two <div> with class in one bigger <div> to
contain all the pictures. In the two <div>, there are
3 pictures each and I set this to flex in display. To set
the gap I used column-gap and margin-bottom on the same
amount.
Fig 2.36 HTML and CSS for Layout Work Page
Fig 2.37 Contact page
Fig 2.38 HTML for Contact Page
Here's the CSS for my contact page. It's mostly the ID (for
the content of the social media) where I set the font size
& letter spacing, font size, weight, and then the same
color and border radius. Only different thing is the
width.
Fig 2.39 CSS for Contact Page
Micro Animations
To compensate for the unresponsiveness in this website, I
wanted to add small animations so that it doesn't feel boring.
The title will upsize when hovered and the soft skills part
will change colors when hovered. The contact page title will
also change colors when hovered. The content of my social
media as well, but only on the words.
I made sure to use 'ease' in each animation so it feels more
natural.
Fig 2.40 CSS for interactions
Responsive Website
This is the part I struggled so much with and even until
submission, my website is not too responsive. On some pages,
the process is easy but on some pages, it gets difficult
(probably from how messy my CSS is). I tried my best to change
the positions and resize the text and pictures so that it
isn't too big on the smaller frame.
Fig 2.41 CSS for responsiveness (1)
Fig 2.41 CSS for responsiveness (2)
Since I'm unable to screenshot the whole thing, I compiled
each page's screenshot below.
Fig 2.42 Examples of responsiveness
Fig 2.43 Final website screenshot
Access the webpage here:
Working Web Page
Reflections
I think this is by far the most difficult task I have this semester.
HTML and CSS is new to me and I made the wrong choice of making a
quite complicated CV prototype. I had a hard time and the time
crunch was not helping me too. I was met with issues and I wanted the
website to look exactly the same like my prototype. The website is
quite responsive but some elements are not, so that's one thing I'm
not proud of. Even though the final result of this project didn't
really satisfy me, I think I did quite good for a beginner.
I've learned a few things that would be useful for me later. First,
the names of my class and ID needs to be clear. I struggled with the
CSS and setting the responsiveness because I get everything mixed up.
Some of my class and ID are added when I was on the process of styling
it. Second, instead of solving the problem by the surface, I need to
find out the root of my problem. I solve my problems by scratching the
surface, but this made it difficult on making the web responsive
because my root problem was not solved. Last, I should give myself way
more time while doing a website project.
Comments
Post a Comment