Interactive Design - Project 2 : Working Web Page
27/5/2024 - 10/6/2024 ( Week 6 - Week 8)
Ho Winnie / 0364866
Interactive Design / Bachelor's of Design Honors In Creative Media
Project 2 : Working Web Page
Requirements :
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.
Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
Upload the file in Netlify, update your e-portfolio with all the processes documented in the blog, and submit the link as a submission
1. Project 2: Working Web Page
As we needed to make responsive designs for our Project 1 ( Digital Resume ) , I relooked at my figma file and decided to make another layout that is suitable for small screen viewing as the original design is more suitable for big screens.
I split up each sections clearly into about me, experiences education awards , skillsets than projects and designed a mobile view for each of them.
About Me Section :
 |
| Fig 1.1 Screen Designs for "About Me" |
Experiences, Education & Award Section :
 |
| Fig 1.2 Screen Designs for "Experiences, Education , Awards" |
Skillsets Section :
 |
| Fig 1.3 Screen Designs for "Skillsets" |
Projects Section :
 |
| Fig 1.4 Screen Designs for "Projects" |
I started off with creating the HTML doc in Dreamweaver and linked all my fonts used and also two external CSS stylesheets ( one for desktop CSS styling and another for phone CSS styling ). I opened 2 CSS file so it would be less confusing for me if I were to make any changes to it.
 |
| Fig 1.5 HTML document opening |
About Me Section :
 |
| Fig 1.6 HTML codes for About Me section |
The HTML code provides the structure of this section. It includes various div elements for layout and content.
The div with the id="name-title" contains the user's name.
The div with the id="name-content" holds a profile picture and additional content sections (intro-container, hello-container, etc.).
Content Sections:
Profile Picture: An img element with the class="profile-picture" displays the profile image. The src attribute points to the image's URL.
Introduction Container: This div includes a heading and image links. Each image (circle-drawing, arrow) is displayed using img tags with corresponding src attributes pointing to image URLs. I exported the svg codes directly when it comes to icon pictures.
Hello Container: This section includes a span element with a greeting message.
Introduction Container: Contains a paragraph describing design philosophy and personal interests.
After styling the HTML, I did the CSS styling hand in hand as well. Below is the explanation for desktop CSS styling for "About Me" section.
 |
| Fig 1.7 CSS styling for desktop About Me big screen |
Body and Title Styles:
The body element is set to a fixed width of 601px.
The #name-title div is styled to center its content with a maximum height and flexbox properties.
The h1 tag inside #name-title is styled with a large font size and a koulen family font.
Content Layout:
The #name-content div uses flexbox to arrange its child elements in a row with space around them and specific padding and gap.
The #profile-picture and #information-container divs are also styled with flexbox for alignment and sizing purposes.
Box and Icon Styles:
Classes like .box, .box-icon, and .box-text are used to style specific elements within the content sections. These include setting dimensions, display properties, alignment, and padding.
Contact Section:
The #contact-content div uses flexbox to arrange its child elements in a row, centered with a gap between them.
In my separate CSS document for mobile version, I made some changes to the codes so it would be responsive on small screens, mainly changing many flex direction from row to columns.
 |
| Fig 1.8 CSS styling for About Me small screen |
CSS Styles for Mobile:
The @media rule is used to apply styles only for screens with a maximum width of 601px.
The html element is given a background color of black and uses flexbox to center its content.
The body element is set to a fixed width of 360px for better readability on smaller screens.
Title Section:
The #name-title div is given a maximum height of 70px.
The h1 tag inside #name-title is styled with a font size of 50px to fit better on smaller screens.
Content Layout for Mobile:
The #name-content div uses flexbox to arrange its child elements in a column, centered within the container.
The #profile-picture div is given specific dimensions to ensure the image fits well on a mobile screen.
The #extra-container and #images-container divs use flexbox to arrange images in a row with specific margins and alignments.
Individual Image Styles:
The .circle-design and #arrow classes set the maximum width and height for the images to ensure they are appropriately sized on a mobile screen.
Hello Container:
The #hello-container div is given a fixed height and overflow set to hidden to control its display on small screens.
The span inside #hello-container is styled with a font size of 60px and a specific font family to maintain readability.
Introduction and Contact Containers:
The #introduction-container and #contact-content divs use flexbox properties for layout, with specific margins and padding to ensure proper spacing.
The #contact-title and #contact-details are styled with font sizes and padding to maintain a clean layout on mobile.
I started with the HTML basic structure for this section and mainly used divs to split into many subsections and ul with li items listing out my details.
 |
| Fig 1.9 HTML structure for Experiences, Education , Awards |
The main wrapper div with id="contact-content" and class white encapsulates the entire content section.
Inside the main wrapper, there are multiple div elements with the class content-column, each containing subsections for experiences, education, and awards.
Each content-column div has an inner wrapper div with the class inner-column to group related subsections together.
Experience Section:
Heading: The h2 tag with text "EXPERIENCES".
Subsection: Each job or experience is enclosed within a div with class content-subsection.
Date Container: A div with the class date-container black containing the date range (e.g., JAN 2021 - NOV 2022).
Job Title and Company: An h4 tag with the job title and company name.
Job Details: A ul element with li items listing job responsibilities and achievements.
Education Section:
Heading: The h2 tag with text "EDUCATION".
Subsection: Each educational experience is enclosed within a div with class content-subsection.
Date Container: A div with the class date-container black containing the date range (e.g., 2015 - 2018).
School Name: An h4 tag with the school name.
Details: A ul element with li items listing educational achievements and roles.
Awards Section:
Heading: The h2 tag with text "AWARDS".
Subsection: Each award or recognition is enclosed within a div with class content-subsection.
Date Container: A div with the class date-container black containing the date (e.g., JANUARY 2023).
Award Title: An h4 tag with the award title.
Details: A ul element with li items listing details about the award.
Next, I proceeded with the CSS styling for big screens desktop view version which I used many flex display, flex direction and justify content properties.
 |
| Fig 2.0 CSS structure for Experiences, Education , Awards ( Big Screen ) |
Flexbox: Used extensively to layout elements both in rows and columns (display: flex, flex-direction, justify-content, align-items, etc.).
Typography: Custom font families (Koulen and Kokoro) are used along with specific font sizes and text alignment to create a consistent look.
Spacing and Sizing: Various properties like margin, padding, width, and height are used to control the spacing and size of elements.
Styling Specific Elements: Classes and IDs are used to target specific elements for styling, allowing for detailed customization of the appearance of different sections.
Next, I did CSS styling for small screen mobile version which I mainly changed the flex direction to columns to ensure they look good in small screen.
 |
| Fig 2.1 CSS structure for Experiences, Education , Awards ( Small Screen ) |
Skillsets Section :
I started with HTML styling and mainly used div class to separate the contents and used svg as the icon images.
 |
| Fig 2.2 HTML structure for Skillsets |
The HTML code for the "Skillsets" section of the resume or portfolio webpage is structured to organize software skills and soft skills into clear subsections. The main container (skillsets-content) wraps the entire section, which begins with a header displaying "SKILLSETS."
Within this section, there are two subsections: one for software skills and another for soft skills. Each subsection starts with a subtitle, such as "SOFTWARES" or "SOFT SKILLS," housed within a skillsets-subtitle-container.
Below the subtitles, the skillsets-icon-container div holds individual skill representations. Each skill is encapsulated within a skillsets-icon div, containing an image (img tag) for the icon and a paragraph (p tag) for the skill name. This structure ensures that both software and soft skills are clearly presented, making the section visually organized and easy to style and maintain. The icons of each image is exported as svg style as well.
Next, I proceeded with CSS styling for desktop big screen version. Flexboxes and flex directions are mainly used to keep the content organised as well as justify content and align items.
 |
| Fig 2.3 CSS structure for Skillsets ( Big Screen ) |
Flexbox Layout: Flexbox is used extensively to align and distribute items both horizontally and vertically, ensuring a responsive and well-organized layout.
Typography: Custom fonts (Koulen) are used for titles and skill names, with specific font sizes to maintain a consistent style.
Responsive Design: Widths and padding are set to ensure the layout adapts well to different screen sizes, and margins provide appropriate spacing.
Styling Specific Elements: Classes and IDs are used to target specific elements for detailed styling, such as the title, subtitles, and skill items.
For the mobile small screen CSS styling, I added a margin width of 16px to separate the title from the contents.
 |
| Fig 2.4 CSS structure for Skillsets ( Small Screen ) |
Project Section + Footer :
I started with the basic HTML structure and used div id and div class to structure the contents , including putting in images of my projects.
 |
| Fig 2.5 HTML structure for Project |
The HTML code provided structures the "Projects" section of the webpage. The section begins with a title enclosed in a div with the ID projects-title, displaying the text "PROJECTS".
Following the title, the projects-content div contains a series of project items. Each project is represented by a div with the class project-item, which includes an image (img tag) with the source and alternate text specifying the project name. Finally, the designer-footer div at the bottom of the section includes a span with the text "DESIGNER" and an arrow image, providing a visual conclusion to the section. This HTML structure ensures that the projects are presented in a clean, organized manner, with clear titles and images for each project.
Next, I proceeded styling the CSS big desktop screen version and once again used display flex, flex direction , align items and justify content to style it.
 |
| Fig 2.6 CSS structure for Projects ( Big Screen ) |
The CSS code styles the "Projects" section of the webpage by ensuring a clean and organized presentation. The title of the section is centered and styled with a large, bold font. The project items are arranged in a grid layout with four columns, each containing an image that covers the entire area of its cell.
The footer includes a large "DESIGNER" text and an arrow icon, both centered and spaced appropriately. The use of flexbox and grid layout ensures that the content is responsive and visually appealing. The specific font families and sizes maintain a consistent and professional look throughout the section.
Finally, I proceeded to style the mobile small screen version of the CSS code.
 |
| Fig 2.7 CSS structure for Projects ( Small Screen ) |
Project Items Grid:
The #project-items grid layout organizes the project images into a 2x2 grid, each cell being 130px by 130px. This ensures that the project images are evenly distributed and neatly aligned within the given area.
Designer Footer:
The #designer-footer adds space around the content with padding, ensuring that the footer content does not touch the edges of the container. The bottom padding creates a gap between the footer and any content below it.
The #designer-wrapper sets a fixed height for the wrapper containing the "DESIGNER" text and arrow image.
The span inside the footer is styled with a large font size, making the "DESIGNER" text prominent and easily noticeable.
With that, I am done with this project, view my digital resume on the netlify link here
Responsive Design :
 |
| Fig 2.8 Desktop View |
.png) |
| Fig 2.9 Small screen view |
Final HTML PDF Code :
Final Desktop CSS Code :
Final Mobile CSS Code :
2.Feedback
No feedback was received for this project
3. Reflection
3. Reflection
Completing this project over the course of 3-4 days was both challenging and rewarding, significantly enhancing my coding knowledge, particularly in HTML and CSS. The toughest part was ensuring the website's responsiveness and creating a smooth transition from desktop to mobile view.
The most challenging sections were the experience, education, and awards sections. I had to split these into multiple divs and subsections to apply flex direction effectively in both column and row formats, especially for mobile view. This required meticulous attention to detail and problem-solving.
I spent considerable time tweaking the CSS to handle various breakpoints and ensuring elements remained readable and interactive on smaller screens. Implementing smooth transitions and animations added another layer of complexity, requiring careful experimentation with CSS properties.
Despite these challenges, the project provided an excellent opportunity to brush up on my coding skills and delve deeper into advanced CSS techniques. It improved my confidence in tackling complex web design challenges and will be highly beneficial for my final project.
QUICKLINKS
Comments
Post a Comment