INTERACTIVE DESIGN/ PROJECT 2

2/10/2023 - 24/10/2023

Week 6-Week 9

LIM CHAEHWAN (0363792)

Interactive Design / Bachelor of Design (Hons) in Creative Media/ Taylor's University

INTERACTIVE DESIGN/ PROJECT 2

---

INTRODUCTIONS

---

LECTURES

Week 6

CSS selectors

CSS selectors are essential for styling HTML elements. Here's a summary:

1. Universal Selector: Targets all elements with '*'. Use cautiously due to its broad impact.

   css
   * {
     /* CSS styles go here */
   }
   

2. Element Selector: Targets elements by tag name.

   css
   p {
     /* CSS styles go here */
   }
   

3. ID Selector: Targets an element with a specific ID.

   css
   #my-element {
     /* CSS styles go here */
   }
   

4. Class Selector: Targets elements with a specific class.

   css
   .my-class {
     /* CSS styles go here */
   }
   

5. Descendant Selector: Selects a descendant of another element.

   css
   .container a {
     /* CSS styles go here */
   }
   

6. Child Selector: Selects direct children of another element.

   css
   ul > li {
     /* CSS styles go here */
   }
   

7. Pseudo-class Selector: Selects based on state or position.

   css
   a:hover {
     /* CSS styles go here */
   }
   

8. Pseudo-element Selector: Selects parts of an element.

   css
   p::before {
     /* CSS styles go here */
   }
   

These selectors provide flexibility and precision in styling HTML elements based on various criteria.

Week 7

Display Property

Block-level element

• Examples: <div>, <p>, <h1>, <form>.
• Starts on a new line and takes up the full width available.
• display: block; is the default display property.

CSS
div {
  display: block;
}

Inline Element

• Examples: <span>, <a>, <strong>.
• Flows within the content and does not start on a new line.
• display: inline; is the default display property.

CSS
span {
  display: inline;
}

Inline-Block

• Combines features of both block and inline elements.
• Elements are placed inline, but you can set width and height values.

CSS
.inline-block {
  display: inline-block;
  width: 100px;
  height: 50px;
}

Flex

• Introduces a flexible box container.
• Allows elements within it to be flex items.
• Great for building responsive layouts.

CSS
.flex-container {
  display: flex;
}

Grid

• Introduces a two-dimensional grid system.
• Items can be placed in specific rows and columns.
• Powerful for complex layouts.

CSS
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

-Box Model

Fig.1.0 box model

---

PROJECT 2

Project 2 creates a working website that closely matches the prototypes created in Project 1.

Review Project 1's static prototypes and analyze layout, typography, color composition, and images.

Use HTML and CSS to convert design elements into code to ensure a faithful representation of the original prototype.

We aim for full pixel precision while maintaining responsive design principles to ensure compatibility across a wide range of devices and screen sizes.

Fig.2.0 Google font CSS code

Fig.2.1 HTML font code

Fig.2.2 Arrange a file

Fig.2.3 My prototype

I wanted the top logo to be fixed in the background like a prototype, so I looked for the code separately and studied it. 

Fig.2.4 Fixed image CSS

Fig.2.5 CSS Priority code

I looked for a code to prioritize and order the elements

Fig.2.6 DW screen 1

Fig.2.7 DW screen 2

Fig.2.8 Add hyperlink in HTML

Fig.2.9 check developer tools

Final Link to Website: https://limchaehwanproject2.netlify.app/

---

FEEDBACK

Week7: I'll send you Html examples, so take a look at them, study them well, and refer to them.

---

REFLECTION

Experience: Starting the conversion of prototypes created in Project 1 into real HTML and CSS code proved to be a daunting task. The difficulties I encountered along the way became a catalyst for personal and professional growth. The experience wasn't just about coding, it was a journey to find out how to present myself effectively, and it was an opportunity to resolve differences in knowledge through questions and exploration. I meticulously documented the entire project in my e-portfolio, from analysis to coding to distribution, and comprehensively documented the evolution of the project.

Observation: The transition from prototype to code revealed aspects of web development that were previously unfamiliar. Through the process, we were able to identify the ignorance and seek clarification through questions. The documents in my e-portfolio not only captured the technical aspects, but also highlighted the importance of a systematic approach to problem solving. This experience highlighted the repetitive nature of the development, emphasizing the need for adaptability and resilience.

Results: I think this project was able to be done well under the solid foundation of the learning journey I carried out in Project 1. The resulting site is a valuable resource for future reference and shows the development of my coding skills. The project demonstrated the importance of continuous learning, documentation, and the power of persistence in overcoming coding problems. The experience laid the foundation for a deeper understanding of the complexities involved in converting design prototypes into functional code.