Interactive Design / Project 2 / Working Web Page
16/10/2023 - 23/10/2023 / Week 8 - Week 9
Janice Marie Eng Chia Hui / 0361521
Interactive Design / Bachelor of Design in Creative Media / Taylor's University
Project 2 / Working Web Page
Janice Marie Eng Chia Hui / 0361521
Interactive Design / Bachelor of Design in Creative Media / Taylor's University
Project 2 / Working Web Page
Table of Contents
- Lectures
- Instructions
- Task
- Reflection
Lectures
Lectures can be viewed here.
Instructions
Task
Things to do for this task :
- Transform the static webpage from Project 1 into a functioning interactive webpage
- Ensure a faithful representation of the original prototype
- Ensure compatibility across different devices
- Upload to Netlify
Putting the naked HTML down based on the prototype content
I started by putting all my CV content into HTML 1st. I did not do any
CSS yet cause I wanted to get all the info down. After getting all the
content down, I went onto Freepick to get the needed contact icons. I also
collected any pictures that I needed for the webpage.
.png)
Figure 1.1 Naked website (17/10/23)
Touching the naked HTML with CSS
As we had to follow the prototype, I opened up Figma and started
coding from there. I went about this process in sections.
The landing page
I uploaded my picture and then started placing the text and picture in
a container and then splitting said container into 2 to make the
picture on the left and the content on the right.
I then did some fine-tuning to ensure the picture and text were
centrally aligned inside the container. The font and colours were
added later as I wanted to finish the layout first.
I also used some icons from the website freepic for the contacts
icons. However, I couldn't find the specific icon I wanted in the
shape or size I wanted. So I downloaded the icons and edited them in
Ai.
Throughout the process, I made use of the inspect tool to see what was
wrong with the layout and which part of the code I should
change.
.png)
.png)
.png)
.png)
.png)
Figure 2.2 Editing the icons in Ai (left) vs the final icons (right)(18/10/23)
The Experience, Education, and Projects Section
For these three sections, I had a timeline in them. the original
timeline was supposed to look like Figure 2.2. However, after coding
out the timeline like my prototype, I realized there was a lot, like a
lot, a huge amount of white space lmao. So I decided to add boxes to
the titles to fill up the space more.
Not going to lie, it still looked quite empty, but we were asked to
not change the end product from the prototype too much so I decided
not to edit it more (also because I had no clue how to fill up the
white space lmao, with pictures?)
I also followed
THIS VIDEO
on how to code the timeline, the guy explained it really well so I
managed to do it on the first try lol (foreshadowing how I literally
struggled, like in the trenches to code the circular progress bar).
I also changed the padding and margin value, as well as the text-align
based on what I thought looked right.
Figure 2.4 How the timeline ended up looking like in the end
(18/10/23)
I had coded the experience timeline first. After that, I just placed
the content of the education and projects time-line into the same
class containers as the experience one. Following that, I only
needed to change the text height, font size, and padding of the
content.
Figure 2.5 The 2 class components that were used for the
timeline
E-portfolio
Initially, this section was supposed to be a carousel. But I could
not for the life of me code the stupid carousel. Literally, all of
the tutorials had Javascript. I was contemplating if I should add
that in. And for those that didn't have Javascript, I literally
could not make the code work. In the end, I gave up and opt to
make it static and have 3 links in the e-portfolio section.
.png)
Figure 2.6 Final e-portfolio layout without the
carousel(18/10/23)
Computer Skills
For this section, I had to code a circular progress bar. I
struggled with this. Like a lot. Same as with the carousel, a lot
of the tutorial videos used Javascript. I don't know if I should
use that because I'm scared I will mess up the entire file (and
also cause I'm lazy).
Eventually, I managed to find a video that taught us how to code
the circular progress bar without Javascript. However, they used
an element called {background : conic-gradient} with added
tags. That code was not working. I typed and retyped it multiple
times. I also used that element alone and saw that it worked on it
own, without all the tags from the video.
It might be because it was 4 am and I was tired, but the code I
typed out was not working. So I called it day and went to sleep.
The next day, I found another video, this time they used a linear
gradient instead of conic-gradient. So I followed that video and
it worked woooooooooooo!!!!
Figure 2.7 Evolution of circular progress bar (19/10/23)
Skills and Language
This section was fairly simple. It was basically what Sir showed
us for the box model section. So I followed the codes Sir gave.
The only problem I ran into here was the progress bar
(again).
I found a video that was teaching me how to code the progress
bar. The only problem is that the progress bar wasn't
responsible?? It wasn't compatible with different screen sizes.
So I googled a bit more and discovered the existence of the
<progress> tag. A godsend. The only downside is that I did
not really know how to customize this progress bar. On the
bright side, the progress bar could accommodate to different
screen sizes :D.
However, I was too lazy to figure out how to customize it
*Cough*. So I just rolled with it.
For the skills section, there were 2 columns?? row?? of text. So
I made a container inside the existing container. Coding is
confusing.
.png)
Figure 2.8 Container inside a container (19/10/23)
Footer
The footer was fairly simple. I just set the background colour
and added the contacts. I copied and pasted it from the
landing page.
Fine-tuning the union of HTML and CSS
I placed down all the CSS layout then I tried to fine-tune it.Colour palate
The initial prototype for the website had a colour palate that was
not that appealing. I did not know what I was thinking when I
chose that colour. So I went onto Google to find a more appealing
colour palate. Finally, I managed to find a red and yellow palate.
The palate I found was from this
website.
.jpg)
Figure 2.10 Initial colour scheme (left) vs final colour scheme
(right)(20/10/23)
Font for heading
Initially, the entire website was using MONTSERRAT font. However, I
felt like the heading needed to have a different font. So I went
onto Google Fonts to find another font I like. The font I chose was
LIMELIGHT.
.png){kind=small}
.png){kind=small}
Figure 2.11 Initial heading font (left) vs Final heading font
(right) (20/10/23)
Navigation menu/top button
I decided to add a navigation menu to the webpage for easy
navigation. I also added a to-the-top option for easy scrolling to
the top. I also added the tag :root {scroll=behaviour: smooth;} to
allow the jump links to scroll smoothly down the page. I stumbled
upon this code while looking for ways to fix the position of the 'to
the top' button to the bottom right of the page. I found the code
here.
.png)
Figure 2.12 Nav bar and to the top button (20/10/23)
Blur over the portfolio pic and hover clear over the pic
I am not sure how I stumbled upon this, I think I was Googling how
to make images responsive, not too sure, but I found out how to add
a blur filter to to images and how to unblur them when the cursor
hovers over them.
I learned the code to this from
here.
.png)
Figure 2.13 Blur (most left and most right) unblurred
(middle)(20/10/23)
Making the webpage compatible with different screen sizes
I initially did not know how to do this part, but my friend told me
that Sir had put an example in the files in Classroom. So I used
those as an example for mine. I managed to code it to allow the
pictures and text to change dimensions when viewed on smaller
screens.
I had an issue where when I viewed the page from my phone the footer
and heading background did not span fully to the screen. I don't
know why this is happening, I might ask Sir if I can before the due
date lmao. I realised it also made the webpage have extra padding on
the right. Well, padding or margin, I can't tell on the phone bc we
can't inspect.
Upon further inspection, I noticed that this problem only happened after I published the site. I really don't know what to do. I'm going to cry ;-;.
Figure 2.14 Added CSS to make the webpage
compatible(21/10/23)
Update. I think I found out why there was a space. It maybe because of the element scroll-behaviour: smooth; that I used. That or because I did not add the tag overflow-x:hidden;. Lol I don't really know. But I made the scroll behaviour none and added the tag overflow x:none and the site doesn't have that stupid gap anymore. I got the idea to add the overflow-x thing from here.
Figure 2.15 WOOOOO the yellow line is gone (24/10/23)
Sharing the website with my friend and them being my editor lol
Figure 2.14 Friend talking smack abt my spelling and
informing me (21/10/23)
Final work
------>>>>CLICK HERE FOR THE WEBSITE LINK<<<<-----
Figure 2.14 Final Webpage Screengrab(21/10/23)
Figure 2.15 Final HTML (22/10/23)
Figure 2.16 Final CSS (22/10/23)
Feedback
Week 8
Specific Feedback: The subheading is too big decrease the font
size
Reflection
This task was stressful lmao. It involves a lot of 'me staying up till 4 to
figure out what this vid on google is trying to do but ends up not knowing
in the end'. The entirety of this task was just me grouping around blind and
praying for the best. I can't tell you how many times I just put random
codes down and prayed for the best.
I felt happy when the code worked. But honestly, when it did not, I wanted
to jump into taylors lake and never resurface (a joke). The inspect tool in
Google Chrome is honestly a lifesaver. I abused it throughout this
task. After I had finished the webpage, I realised it really does have a lot of
white space. I do not know how to fix this lol.
Comments
Post a Comment