INTERACTIVE DESIGN - EXERCISE 3 (week5)
NAME: Miao Xinjun
I.D: 0379525
SECTION: 02
Interactive Design | Bachelor of Design in Creative Media | Taylor's University
Exercise 3 - Creating a Recipe Card
TABLE OF CONTENT
1. LECTURE
In week 5’s lecture, professor explained ID and class attribute, the differences between block elements and inline elements, as well as the introduction and functions of CSS. They also demonstrated how to apply them when creating a web page using Dreamweaver.
Extra Markup:
- ID and Class attribute
By default, using these attributes does not affect the presentation of an element and it will only change their appearance if there is a CSS rule that indicates it should be displayed differently.
ID attribute: It's used to uniquely identify the element from other elements on the page.Class attribute: The ID attribute can be used by a group of elements. A good example is 'Navigation'.
- Block elements and Inline elements
Block elements: Some elements will always appear to start on a new line in the browser window. It consists of many paragraphs. Example: <h1>, <p>, <ul> and <li>
Inline elements: Some elements will always appear to continue on the same line as their neighboring elements. It's different from Block elements. It's a part of paragraph. Example: <b>, <i>, <em>, <a> and <img>
CSS - Cascading Style Sheet:
It allows you to create rules that specify how the content of an element should appear.
A CSS rule contains two parts: a selector and a declaration.
Selector: Selectors indicate which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas.
Declarations: Declarations indicate how the elements referred to in the selector should be styled and are separated by a colon.
Declarations are split into two parts: a property and a value
Refer the example below: Background-image is a property; url("images/beimg.jpg") is a value.
You can specify several properties in one declaration, each separated by a semi-colon (;).
2. INSTRUCTION
Exercise 3 - Creating a Recipe Card:
In this exercise, you will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. Choose ONE recipe from the link below.
Create an HTML file named "index.html."
Create a section that displays the following information:
Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions
Apply the style element in your document.
Apply CSS rules to style your recipe card.
Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
3. EXERCISE
4. FEEDBACK
4.1Feedback_1:
4.1.1Remove the navigation section; navigation is not within the requirements of this task.
4.1.2 The image cannot be displayed on the website. The image and the HTML file need to be in the same folder.
4.2 Feedback_2:
4.2.1Good. No problem here.
Comments
Post a Comment