Interactive Design Project 2

on

2024.05.29-2024.06.29

Rachel Yeo Rong Qing / 0368901

Interactive Design / Bachelor of Design (HONS) in Creative Media

Project 2

CONTENT





LECTURES

     1. Lectures


Week 7 - CSS Selector


    Week 9 - Box Model-Layout in CSS

    INSTRUCTIONS



    Project 2: Working Web Page

    Objectives:

    • transform your static prototype from Project 1 into a fully functional and interactive web page
    • apply your knowledge of web layout class to create a working website that closely aligns with your original prototype


    Requirements:

    • 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

    Progress

    As mentioned in the requirement, in project 1 we have create an resume by using Figma. For further details please refer to the Interactive Design Project 1.

    Below are the preview of the my resume in Project 1.

    Final outcome of Project 1

    Based on the previous resume that I create, I start to create a web page by following this resume layout. First, I code the content of the website.

    Next, I proceed to CSS.

    I have spend a lot of time on thinking how to create the border like this in html, but at the end I figured out to use the image as the background so that I wont waste my times on create the border like this. All i need is just adjust the image and the text to the correct position and that's it. 

    Based on the experience on the biodata part, I follow the same steps on the rest. I also makes the display works can jumps to certain website of that project. For the digital artwork it will jumps to my IG.



    Final Outcome

    Below are the links to view the website : 

    https://rachel0368901-id-project2.netlify.app/



    FEEDBACK

    Week 10 : 

    General Feedback : -

    Specific Feedback : -


    REFLECTIONS

        Through this project, I have more used to HTML and CSS compared to when I do the project 1. I found that the coding is quite fun to explore how depth is it. Although there is a bit challenge when i arrange the content by using CSS but at the end i have create it successfully. I was quite satisfied with my outcome, but there is still some parts that I need to be improve. I hopes my skills in HTML and CSS can be more better in the future so that I can create the website I want by using coding skills. 

                

    Comments

    Post a Comment