INTERACTIVE DESIGN EXERCISE 3: HTML AND CSS DEVELOPMENT

 INTERACTIVE DESIGN EXERCISE 3: HTML AND CSS DEVELOPMENT

17 October 2024 - 

FANG YAOYUE  (0372006)

Interactive Design | Bachelor of Design in Creative Media | Taylor's University

Exercises 3/ HTML and CSS Development

List

LECTURES

INSTRUCTIONS

FEEDBACK

REFLECTION

LECTURES

Week 4:

In class, the teacher explained the advanced design method of the website in detail for us, such as how to start and end, how to change colors, how to add hyperlinks, how to insert pictures and so on.

Dreamweaver provides an intuitive interface for managing HTML and CSS files, with support for code editing, design views, and live previews. Just follow the steps above to create and link CSS files, and you can use CSS to style your web pages. If you're familiar with CSS syntax, you can also edit styles directly in Dreamweaver's code view.

Fig 1.1 Opening tag

Fig 1.2 Opening tag

HTML has 6 levels of headings: 

<h1> main headings

<h2> subheadings

<h3>, <h4> so on...

Fig 1.3  headings

Paragraph

Opening <p> tag and closing </p> tag make up a paragraph.

Fig 1.4 Paragraph

Week 6: *Public Holiday

Week 7

CSS Selectors

Selectors are used to define which elements should receive specific styles, such as colors, fonts, spacing, and more.

Fig 1.5 Change color

Insert picture

Fig 1.6 Insert picture

Font size

Fig 1.7 Font size

Universal Selectors

Select all elements on the page

Represented by an asterisk (*).

Element Selectors

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. 

Allow to specify a hierarchy of elements to target. 

For example, to style all <a> elements inside a <div> with class "container".

You can write and edit CSS directly in Dreamweaver's Code View. Click on the Code View in the bottom right corner, then you can edit the HTML and CSS files.

Dreamweaver provides a Design View that displays your changes to the page style in real time. If you select an element (such as a paragraph, button, etc.) on the page, Dreamweaver automatically displays the CSS style for that element in the CSS Styles panel on the right. You can implement style design by modifying these styles.

INSTRUCTIONS

HTML and CSS Development:

HTML & CSS Exercise

Personal CV Page

Fig 1.8 First attempt

Fig 1.9 My class schedule

We need to design and build a resume page using basic HTML and CSS. And add your own elements and photos to decorate the page.

Fig 1.10 Instruction for Personal CV Page

Fig 1.11 I decided to use this photo

Fig 1.12 Production process 1

Fig 1.13 Production process 2

Fig 1.14 Production process 3

Fig 1.15 Production process 4

In the final product, I changed the background to a dark gray color and changed the font to a bright color, which I think will make people's eyes shine.

Fig 1.16 My resume page

Website link

https://rad-manatee-f89027.netlify.app/

 HTML Development

 CSS Development

FEEDBACK

WEEK7 

This week is the learning week, I applied the knowledge taught by the teacher to improve my web page, which made my web page more colorful and full, I think this is an interesting assignment, I find rules from complex web pages and improve, I think it is very interesting.

REFLECTION

After passing this assignment, many problems can be reflected. I think a good web page is diversified and rich. I think learning interaction design and learning computer have some similarities, that is, they both need to study the code. But the moment you finish the page is still very rewarding.