Interactive Design GCD60904/Project 2

Project 2 : Working Web Page

11/06/2024 -25/06/2024 (Week 6 - Week 10)

Shao Han/ 0369187

Interaction Design/Bachelor of Design in Creative Media

Project 2 : Working Web Page

TABLE OF CONTENTS

1. Instructions
2. Lectures
3. Exercises
4. Reflections

INSTRUCTIONS

LECTURE

Week 7

CSS Selectors

Universal Selector: Selects all elements on the page.It's represented by an asterisk. Use it with caution,as it can affect all elements and lead to inefficient CSS.

Element Selector: The simplest type of selector, it targets HTML elements by their tag name.

ID Selector: Targets an element with a specific id attribute. IDs must be unique within an HTML document. To select an element with a specific ID,use a # symbol followed by the ID name.

Class Selector: Targets elements with a specific class attribute. Multiple elements can share the same class. To select elements with a specific class, use a . symbol followed by the class name.

Descendant Selector: Selects an element that is a descendant of another element. You can specify a hierarchy of elements to target. For example, to style all <a> elements inside a <div> with class "container,"

Attribute Selector: Selects elements with a specific attribute value. It is used to styling elements based on their attributes, such as form inputs.

Child Selector: Selects elements that are direct children of another element. To select only the immediate <li> children of an <ul>, you can use:

Pseudo-class Selector: Selects elements based on their state or position in relation to other elements.Common pseudo-classes include :hover, :active, :visited, :link, :focus,

and :nth-child(n)

Pseudo-element Selector: Selects parts of an element rather than the element itself. Common pseudo-elements include ::before and ::after, which are used to add content before or after an element.

Adjacent Sibling Selector: Syntax: element + adjacent.Selects an element that is immediately preceded by a specified element. Styling an element that directly follows

another specific element.

General Sibling Selector: Syntax: element ~ siblings. Selects all elements that are

siblings of a specified element. Styling all sibling elements that follow a specified element.

fig1.1 CSS Selectors,week 7 (11/6/2024)

Week 9

The Display Property

fig1.2 The Display Property
,week 9 (19/6/2024)

Block-level element

• <div> is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can.

Inline Element

• <span> is the standard inline element. An inline element can wrap some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph.

fig1.3 The Display Property,week 9 (19/6/2024)

Box Model in CSS

• Most HTML elements are containers. Consider some of the HTML elements we've used so far: body, p, h1, h2, div, ul, ol, li.
• Each of these is a container, or box.
• Each box has three layers that surround its content. The layers are, in order from inside to outside:
• Padding
• Border
• Margin

fig1.4 Box Model in CSS,week 9 (19/6/2024)

CSS Flexbox is a powerful tools for creating responsive and efficient web layouts. It rely on a solid understanding of the Box Model, as they manipulate elements' positioning and spacing within a container.

Important Properties

Flex Container:

• display: flex: Establishes a flex container.
• flex-direction: Defines the direction of the flex items (row, column).
• justify-content: Aligns flex items along the main axis (start, end, center, space-between, space-around).
• align-items: Aligns flex items along the cross axis (stretch, center, start, end).

EXERCISE

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, update your e-portfolio with all the processes documented in the blog, and submit the link as a submission

I need to turn the resume I designed last time into a web page.

fig2.1 Resume design,week 9 (19/6/2024)

Use what you have learned and use html and css to make web pages in DW software.

fig2.2 HTML,week 9 (19/6/2024)

fig2.3 CSS,week 9 (19/6/2024)

FINAL LINK:https://chic-kataifi-ead026.netlify.app/

REFLECTION

Some time recently the plan, it is exceptionally imperative to conduct a full client inquire about to get it the user's needs and torment focuses. Organize and structure site substance so that clients can effectively discover the data they require. Amid and after the plan prepare, ease of use testing can offer assistance discover issues and lacks within the plan.

The interface plan ought to be as straightforward as conceivable so that clients do not feel over-burden with data. Utilize clear typesetting, suitable white space and reliable plan fashion.

Through text style measure, color, differentiate and other implies to form a visual chain of command, so that clients can rapidly get it the structure and significance of the page substance.

Web plan may be a handle that requires consistent learning and hone. By always getting client criticism and following the most recent innovations and plan patterns, site plan can be persistently progressed and optimized.