Interactive Design: Project 2- Working Web Page

10.10.2023-24.10.2023/ Week 7- Week 9
Kelly Lau Jie Ning/ 0354839
Interactive Design/ Bachelor of Design(Honours) In Creative Media
Project 2: Working Web Page

INSTRUCTION


Project 2- Working Web Page

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 and submit the link here. Update your e-portfolio with all the processes documented in the blog

Progress

1. Review Previous Prototype
I am looking forward to my last project outcome which is my project 1:resume prototype.

Fig 1.1 Resume Prototype

2. Building HTML and CSS code at Adobe Dreamweaver
I first use HTML code to enter all the data I want to display on the page, and then I divide it up into several classes for the CSS coding.
Fig 2.1 HTML code for the website


Fig 2.2 CSS code for the website

3. Highlights of the code
Vertical line
I have created two vertical lines on the website. One of them is between About Me and Education and one of them is between Interest and Languages.

Fig 3.1 HTML and CSS code for the vertical line between about me and education

Fig 3.2 HTML and CSS code for the vertical line between interest and languages

Progress bar for skills
I have tried to create the progress bar using HTML and CSS code for each skill.
Fig 3.3 HTML code for each progress bar under each interest

 
Fig 3.4 CSS code for progress bar under each interest

Progress bar for Languages
The progress bar for languages is different from the progress bar for skills. They are in the circle.
Fig 3.5 HTML code for progress bar for each language

Fig 3.6 CSS code for progress bar for each language
Mobile Format 
I have created the mobile format code for CSS because if not it will be messy when it is in mobile format.
Fig 3.7 CSS code for mobile format
Final outcome
Fig 4.1 Final outcome in computer format

Fig 4.2 Final outcome in mobile format

Here is the link for the final website.


FEEDBACK
Week 10
-change the nav link colour
-try to fix the extra space when it turns to mobile format using border

REFLECTION
In this project, I have learned a lot about the div. This is because we need to create a lot of layouts in this project to make it look the same as our project 1 final outcome. Then, I also learned a lot of needed code when doing this project. For example, I have learned how to create a progress bar and how to create a vertical line using HTML and CSS code.


Comments

Post a Comment

Popular posts from this blog

Intercultural Design - Projects 1,2&3: Proposal, Data Collection and Visual Design

Image
05.02.2024- 22.03.2024/ Week 1-Week 7 Kelly Lau Jie Ning/ 0354839 Intercultural Design/  Bachelor of Design (Honors) in Creative Media Project 1,2&3- Proposal, Data Collection and Visual Design INSTRUCTION Lecture Week 1 First of all, our lecturer took us through the MIB to let us have a basic knowledge of our projects. During briefing time, we know about what we going to do for our current project and our future projects. Visuals are powerful persuasive mediums to provide most of our information about the world.  Visual Communicate What are Visuals? Visuals are... The first design has no meaning. It just appears as a tree. Another design aspect an visuals is that visual that represents something. It comes with meaning and cultural...
Read more

Animation Fundamentals- Exercises

Image
30.04.2024-/Week 2-Week  Kelly Lau Jie Ning/ 0354839 Animation Fundamentals/ Bachelor of Design (Honors) in Creative Media Exercises INSTRUCTION Exercise 1-Bouncing Ball Animation We do this exercise in class. We must draw a short bouncing ball animation using Adobe Animate. In week 2 class, we try to use Adobe Animate by creating a bouncing ball animation. In this class, we learn frame rate, timing & spacing, slow in & slow out, timing chart and arcs. First, we create 3 layers: ball, arc, and floor.  Fig 1.1 Layers Next, we draw the floor and the arc. Fig 1.2 The arc and the floor After that, we add the ball frame by frame. Fig 1.3 The ball frame-by-frame Fig 1.4 Timing & Spacing The animation that I did in class   Fig 1.5 Bouncing ball animation done in the class After I go back home, I have done a second version of the boun...
Read more