Interactive Design - Project 2
02.10.2023 - 23.10.2023 (Week 6 - Week 8)
Sorcha Griselda / 0353056
Interactive Design / Bachelor of Design in Creative Media / Taylor's University
Project 2 | Working Web Page
INSTRUCTION
Project 2 | Working Web Page - Digital Resume/CV
Instruction:
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 the web layout class to create a working website that
closely aligns with your original prototype.
Process:
I started out by creating the base of my CV layout by following the reference
that I had created in Figma. Firstly, I created a new folder on my laptop and
from there I started creating my HTML on Adobe Dreamweaver and connected with
the CSS. I tried to apply all the knowledge that I got from the previous class
where we learned about the use of CSS.
|
| Fig 1.1 Project's folder | 16/10/2023 |
1 | Picture & Icons
After the base was settled, I continued with placing my picture on the top
left-side of the web page. I decided to place my picture in a form of a
circle.
|
| Fig 1.2 My CV's Picture Outcome | 16/10/2023 |
Then, I started to create my contact information which contains some icons. At
some point, I was struggling on how to insert those icons into my html.
However, I did manage to execute after researching and watching some video
tutorials. I got all of my icons from fontawesome as this website provided the code, so all I need to do is just to
insert those codes into my html.
|
| Fig 1.3 My HTML Process | 16/10/2023 |
For this section, I used the unordered list items
<ul><li> as to produce the same arrangement as my
prototype. Then, I also added some percentage bars on the languages section,
to show the percentages of my languages skills to the viewer.
|
| Fig 1.4 My CSS Process | 16/10/2023 |
3 | Skills
I struggled on this section the most because at first I wanted to code
directly the rectangular progress bar. Unfortunately, I found out that it
required me to do Javascript, in which I've never learned about it. Thus, I
came with a solution which is to insert the progress bar screenshot that was
taken from my Figma into my HTML.
|
|
|
After finishing with the complicated section, I finally came to the easier
part of my web page which is just to fill up the informations on my
experiences, accomplishment and projects. This part does not require a
complicated coding, so I finished this section in a breeze.
|
| Fig 1.6 My Working Web Page [Before] | 16/10/2023 |
|
|
|
5 | Final
Netifly Link:
|
| Fig 1.8 My Final Working Web Page [JPEG Format] | 16/10/2023 |
Fig 1.9 My Final Working Web Page [HTML] | 16/10/2023
Fig 1.10 My Final Working Web Page [CSS] | 16/10/2023
REFLECTION
Creating my digital CV using HTML and CSS on Adobe Dreamweaver was quite the journey. It was like stepping into the vibrant universe of web development, where I got to dive deep into the intricacies of coding and design. One of the key takeaways from this project was the importance of attention to detail. It was all about fine-tuning the CSS, a process that demanded both patience and precision. Through the use of the CSS, I could produce a visually pleasing hierarchy that kept the overall coherence while emphasizing essential details. Ultimately, finishing this project gave me a sense of confidence in my abilities to leverage web technologies, especially when it comes to coding using HTML and CSS.
Comments
Post a Comment