Task 2: Working Web Page

02/10/2023 - 23/10/2023 Week 6 - Week 9
Reema Arif Hamza / 0362792
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 2: Working Web Page

Content

Lectures

Week 6: Class canceled.
Week 7: Learning more about CSS layout, using div and class. 
Week 8: Independent learning week - no class. 
Week 9: Learning about using position in CSS.

Instructions

Task 2: Working Web Page

In this second part of the assignment, you will build upon the UI design prototype created in Part 1 to develop the final visual design of your digital resume or curriculum vitae (CV). You'll focus on refining the visual aesthetics, enhancing user interface interactions, and ensuring a polished user experience.

Process

I began by analyzing my prototype (refer to Task 1) and translating the layout into basic HTML. I created an HTML document and created a div for each row/column. 

Fig. 1.1 Starting HTML, Week 8 (22/10/2023)

I linked the CSS file and my chosen font 'Nokora' which can be found on Google Fonts. For my first section <div class="about">, I separated it into two columns aside-left & aside-right. The left column contained text and the right contained my profile picture. I gave my profile picture <div class="img-right">, so I could later add a border radius to make it a circle.

The <div class="contact"> took me some time to do because I learned a new html code which is table. I also made sure to add the icon images next to each <td>.

Fig. 1.2 HTML 1, Week 8 (22/10/2023)

I split the next section into <div class="main">, with two columns column-left & column-right. On the left side, I added my softwares and skills/interests, making sure to bold the appropriate text according to my prototype. 

Fig. 1.3 HTML 2, Week 8 (22/10/2023)

On the right side, I added Education, Work Experience, and Projects. According to my prototype, I had two sets of text sitting on opposite sides but within one line. To achieve this I used the <span> element and used the class="para-split". It was easy to edit in CSS later and overall a simple process. I also split the project section into two columns. I then went in after adding <hr> to where I had dividers in my prototype and then giving them a class to edit color and size in CSS.

Fig. 1.4 HTML 3, Week 8 (22/10/2023)

For my CSS I began by adding padding, margin, font-family, font-weight, color, and font-size to my headings and paragraph. For my <hr> elements I added a border-top: 3px solid color;.

Fig. 1.5 CSS 1, Week 8 (22/10/2023)

I then formatted my about section adjusting the width of the two columns and padding. It took a lot of experimenting based on the preview I was looking at. Eventually, I landed on the right numbers. I also added a border-radius: 50%; to my profile picture to make it round.

Fig. 1.5 CSS 1, Week 8 (22/10/2023)

For the image icons for my contact section, I adjusted them individually using vertical-alignment to get them aligned to the text. In the contacts section, I adjusted various elements and used display:flex;. For the table I used the .con class to adjust padding to add gaps between the <td>.

Fig. 1.6 CSS 2, Week 8 (22/10/2023)

For the main, I used display: flex;. I added the width, height, color, and padding for each column. For the split para I made sure to add margin-left:10px; in order to align it to the left side. 

Fig. 1.7 CSS 3, Week 8 (22/10/2023)

Lastly, to make my website responsive I listed how to display certain containers when they reach the breakpoint screen width. 

Fig. 1.8 CSS 4, Week 8 (22/10/2023)

Final

Based on my Prototype in Task 1, I was able to create a working web page of my resume, as seen below.


Task 2: click here

Reflection

I was able to learn about HTML and CSS through this assignment. It was tough in certain areas to translate my design to a working web page. Overall, I was able to learn on the spot and adapt to the task. 


Comments

Post a Comment