Interactive Design GCD60904/Project 2: Working webpage

on

18th Jun 2024-29th Jun 2024

WangShengxiao/0369380

Bachelor of Design(Honours)in Creative Media

Interactive Design/Project 2: Working webpage (week 7-week 10)

INSTRUCTIONS



LECTURES

Display Property

  • Importance: Controls the layout of elements.
  • Default Values:
    • Block: Elements start on a new line and stretch out (e.g., <div>).
    • Inline: Elements stay within the line (e.g., <span>).
  • Customizing Display:
    • Override default values to fit specific design needs.
    • Example: Making <li> elements inline for horizontal menus.
  • Other Display Types:
    • Inline-block
    • Flex
    • Grid

Box Model in CSS

  • HTML Elements as Containers: Elements like <body>, <p>, <div>, etc., act as containers or boxes.
  • Layers in Box Model:
    • Padding: Space inside the element, around the content.
    • Border: Line surrounding the padding and content.
    • Margin: Space outside the border, separating elements.

Flexbox

  • Purpose: Create responsive and efficient web layouts.
  • Dependence: Relies on understanding the Box Model for manipulating element positioning and spacing.
  • Key Concepts:
    • Flex Container: Parent element with display: flex.
    • Flex Items: Children of the flex container.
  • Important Properties:
    • display: flex: Establishes a flex container.
    • flex-direction: Defines direction (row, column).
    • justify-content: Aligns items along the main axis (start, end, center, space-between, space-around).
    • align-items: Aligns items along the cross axis (stretch, center, start, end).

Week 7-Week 9
In weeks 7 to 9, our class exercises and homework were about My Life web design, we needed to create a folder to express our daily life, preferences, class schedules, basic information in code (HTML, CSS)etc. This exercise helped us to improve our proficiency in web design.




HTML

CSS

Week 9-Week 10
Mission overview
Objective: To transform the static prototype in Project 1 into a fully functional interactive web page.
Steps:
1. Review prototypes:
- Analyze layout, typography, color and images.

2. Write code:
- Use HTML and CSS to turn design elements into code, ensuring consistency with prototypes.

3. Be precise:
- Achieve pixel-level precision and responsive design to ensure cross-device compatibility.

4. Upload and submit:
- Upload the file to Netlify, document the process in the blog of the e-portfolio, and submit the link.



HTML

CSS

Netlify link to Resume final work website: https://wangshengxiao-resume.netlify.app/


REFLECTION

In this study, I have learned a lot of practical knowledge, which I believe will be of great significance to my future work and life. In this study period, the most difficult thing for me was the innovation and idea of digital resume and the editing of CSS, but fortunately, the result was smooth. I am also very grateful to Mr. Hamimi for his patient guidance and teaching me how to fix the code.


Comments

Post a Comment