Interactive Design Final Project
23/4/2024-20/7/2024 Week 5-Week 6
Jie Xuan/ 0356515
Interactive Design/ Bachelor of Creative Media/Taylor's University
Project 3
TABLE OF CONTENTS
1. Instructions
2. Final Project Development Process
4. Feedbacks
5. Reflections
INSTRUCTIONS
Task 3 Exercise ( 20% ) - Individual Assignment
Module Information
FINAL PROJECT
First References Website:
Prototype:
Prototype
Color Scheme:
Webpage Main Color
Font:
Arial Font
Times New Roman Font
Process:
Navigation bar and Home page.
For navigation bar this is the HTML code.
The navigation bar I chose light purple as my navigation bar because my webpage main color are light purple. For the home page I insert Rose Park picture and make it as a header and put the width 100%. I also put a overlay as a button link to the about page.
About Section
HTML code for about section.
For CSS section, I insert 4 picture as a introduction photo of Roseanne Park. Next, I insert a photo on left side and I adjust the padding left to make sure the picture don't stick too left so that the visual looks more better. Next, I type a introduction information introduce who is Rosé. I also set her name H1 as a title. I also adjust the text align left make it more tidy and looks not messy.
Career Section
This is the CSS code for career section.
I insert 5 picture as a timeline from debut until solo until the last year with her group member photo. Next, I align the photos center. I just adjust the photo's width and height.
Music Section
HTML code for music section.
This is the CSS code for music section.
I insert 2 YouTube music video as this is her Solo song. I align text the video center. I also adjust the width and height of the video. I embed code from YouTube. I also write the song name and align it center. Besides that, I also embed code form Spotify to add on into the music section.
Concert Section
HTML code for concert section.
This is the CSS code for concert section.
I embed 2 concert video 1 is Coachella Concert Performance another one is Born Pink Concert Performance. I also use <br> to make the paragraph spacing bigger. I float one video to left another float right. I also code the YouTube video auto play and mute. After adjusting CSS code I am very satisfied with the visual.
Merchandise Section
HTML code for merchandise section.
This is the CSS code for merchandise section.
I insert 4 things for the merchandise section. I also code the overlay on the picture so that when your mouse move to the shirt can see the merchandise name. If want to buy can click on the Buy now button. The button will link to the official website.
Contact And Footer Section
HTML code for contact and footer section.
This is the CSS code for contact form and footer section. I insert a CSS form code to make a form to let people create a fan account so that they can follow up the update news on time. I also insert an image on the background so that the visual more pretty. For footer section, I insert 4 icons and the icons can link to the social media platforms.
Media Only Screen 430px CSS code
FINAL OUTCOME:
Netlify Link https://roseanneparkwebpage.netlify.app/
Webpage HTML code pdf version
Webpage CSS code pdf version
Desktop Version:
iPhone 14 Pro Max Version:
FEEDBACK
Week 11
Mr. Shamsul said my website is to simple. He let me find a new website as a references. Need to improve the design.
REFLECTION
Experience
This journey of coding a single webpage has been incredibly rewarding and challenging. Initially, the process felt overwhelming as I navigated through the intricacies of HTML and CSS. However, as I delved deeper into the project, I began to appreciate the level of detail required to create a functional and visually appealing webpage.
Successfully implementing a responsive design for desktop, 996px, and 340px screens demonstrated the importance of precision and attention to detail in web development. The challenges I faced and the solutions I discovered not only enhanced my technical skills but also instilled a deeper appreciation for the art of web development.
The experience highlighted the complexity and creativity required to ensure a seamless user experience across various devices. Through persistent effort and problem-solving, I became more proficient in coding and more confident in my ability to tackle future projects. This journey has laid a solid foundation for future endeavors, and I am excited to continue exploring and expanding my coding capabilities.
Observation
Throughout this process, I observed the importance of meticulous attention to detail. Every element, from the structure defined by HTML to the styling dictated by CSS, needed to be precisely coded to ensure the webpage functioned correctly. The challenge was not only in writing the code but in understanding how each line affected the overall design and functionality. Debugging became a critical skill, as even the smallest error could disrupt the entire layout.
Working on the media queries for different screen sizes highlighted the complexity of responsive design. I learned that what works perfectly on a desktop might look entirely different on a smaller screen. This realization pushed me to think creatively and adapt my designs to maintain consistency and usability across various devices.
Findings
One of the most significant findings from this journey was the realization of how detailed and precise coding must be. A single misplaced character or an overlooked syntax error could lead to hours of debugging. This experience taught me the value of patience and the importance of thorough testing at each stage of development.
I also found that familiarity with HTML and CSS increased as I progressed. Concepts that initially seemed complex started to make sense, and I became more confident in my ability to manipulate and style elements effectively. The process of trial and error, though sometimes frustrating.
This journey has not only enhanced my technical skills but also instilled a sense of accomplishment and a passion for web development. I am eager to build on this foundation and explore new challenges, knowing that each step forward is an opportunity for growth and discovery.
Comments
Post a Comment