Interactive Design - Exercises
28/09/2023 - /09/2023/ Week 1 - Week
Amelia Intan Cahyani/ 0355211
Interactive Design/ Bachelor of Design (Hons) in Creative Media
Exercises
Lectures - Week 1
Lectures - Week 2
Lectures - Week 3
1. Improve website structure for better user-friendliness.
2. Use SEO by adding keywords with tags to help search engines find the site.
3. The footer marks the end of the webpage.
4. Include navigation options in the footer for easy access.
5. Organize HTML code with headers like h1, h2, h3, and so on.
6. Keep navigation visible on desktop versions.
7. Put the most vital information on the landing page.
8. Consider adding quotes to enhance website credibility.
Lectures - Week 4
1. CSS stands for Cascading Style Sheet.
2. HTML stands for Hypertext Markup Language.
3. Why is it important? To have a universal language everyone understands and to ensure text displays correctly in all 4. browsers without needing rewrites.
5. You can change the heading's style using the style option.
6. CSS can be used to alter a website's appearance.
7. Tags in HTML can be one-sided or two-sided.
8. In HTML, we use <> called angle brackets; in CSS, we don't use them.
9. <b></b> are the opening and closing tags respectively, and for <a></a> and <img>, it's necessary to use attribute tags like <a href="#id"></a>.
10. HTML is in the American language.
11. There are two types of lists in HTML: ordered lists <ol><li></ol> and unordered lists <ul><li></ul>.
12. Links are created using the <a> element.
13. To add an image, use the <img src="image link"/> tag, which is a one-sided tag.
Lectures - Week 5
1. The name shouldn't have any special characters.
2. The first page should be named "index," while the others can have any name.
3. To view it in your web browser, go to "File" > "Real-Time Preview" or click the icon at the bottom right.
4. Manage your website by linking it to the folder in Dreamweaver.
5. The <div> tag doesn't have any attributes, but you can add an "id" attribute or "class" markup to it.
6. Two HTML elements can't have the same "ID" (it must be unique), but the "class" attribute can be the same for multiple elements.
7. BLOCK elements take up the whole space and cannot be side by side (e.g., <h1>).
8. INLINE elements can be placed side by side (e.g., <b><i>).
9. In HTML, we use <> and in CSS, we use {}.
10. CSS allows for customizable styles (CSS {property: value;}).
11. To change the style for the entire document, add it to the head.
12. Each attribute must be separated by a space.
13. For the "background attachment" to remain fixed and not scroll, you can use shorthand.
14. For the background, set it to repeat only in the horizontal direction (background-repeat: repeat-x).
15. Avoid using numbers in the code.
16. The system font is a font from your computer's system; some users might not have it.
17. In "project 1," the width is 1330 pixels, and there are 12 columns for the grids, which can stretch.
Lectures - Week 6
This week, we learned about CSS Selectors. Selectors are like tags that tell the computer which part of a webpage you want to style. There are several types of selectors:
1. Universal Selector: This one affects everything on a page and is represented by an asterisk (*). For example, you can use it to style everything on the page.
2. Element Selector: This targets specific HTML elements by their names. For example, you can use it to style all paragraphs (p), list items (li), ordered lists (ol), or headings (h1).
3. ID Selector: This is for targeting an element with a special ID attribute, like hyperlinks. You use a # symbol before the ID name. For example, you can use it to style an element with the ID "chosen."
4. Class Selector: This one targets elements with a specific class attribute. Multiple elements can have the same class. You must use a period before the class name. For example, you can style elements with the class "my-class."
5. Descendant Selector: It selects an element that is inside another element. For instance, if you want to style links inside a container, like a table or a button inside a div, you can use it.
6. Child Selector: This selects elements that are direct children of another element. For example, to select only the immediate list items (<li>) that are children of an unordered list (<ul), you can use this selector.
7. Pseudo-Class Selector: This one is for selecting elements based on their state or position, like when a link is being hovered over, clicked on, or visited.
8. Pseudo-Element Selector: It's used to style parts of an element rather than the element itself, like adding content before or after an element.
These different selectors help you be very specific in targeting parts of a webpage. They make your webpage look good, work well, and be accessible to all users, no matter what browser or device they're using. So, it's like having a toolbox full of tools to make your website just the way you want it.
Lectures - Week 7
In our lesson, we figured out how CSS helps us control how things look on a webpage. Here are some important things we learned:
1. Block-Level Elements: These are like the "big building blocks" of your webpage. When you use them, they start a new line and stretch horizontally, making sure each one gets its own line.
2. Inline Elements: These are like the "small details" of your webpage. You can put them in a line without making a new line for each one. They're good for keeping things close together.
3. Other Display Options: Besides block and inline, there are other ways to show elements on your webpage. You can choose to make things act like blocks that stay close together (inline-block), or you can arrange them flexibly (flex) or in a grid.
4. Containers: These are like big, invisible boxes that wrap around most things on your webpage. They're like a protective layer with some extra space (padding), a border around them, and some space outside (margin). They help you control how things are placed and spaced on your webpage.
Lectures - Week 8
1. Static Position: This is the normal position of an element. It just stays where it is.
2. Relative Position: If you move the container of an element with relative positioning, the element inside will move along with it. It won't affect other elements, and it doesn't take up extra space.
3. Absolute Position: An element with absolute positioning is like a sticker. If its container is set to relative, it stays inside that container. If not, it sticks to the corners of the webpage. It doesn't affect the space of other elements.
4. Z-Index: This is like arranging layers. You can use it to decide which element appears in front of others.
5. Sticky Position: To use this, the parent container must have relative positioning. Sticky elements stay put until you scroll past them. It's important to set a parent container to relative so your contents don't get messed up.
6. vh (Viewport Height): This means a percentage of the whole viewport. So, 100vh is the entire height of what you can see on your screen.
Exercise 1 - Website Analysis
Exercise 2 - Website Replication
.png)
Exercise 3 - Recipe Card
In this task, you'll make a recipe card using HTML and CSS. The aim is to create a simple web page that shows a recipe's ingredients and steps in a nice way.
1. Make a new HTML file and name it "index.html."
2. In the HTML file, set up a section for the following:
- Recipe title
- Include any images you need
- List of ingredients
- Step-by-step cooking instructions
3. Now, create a separate CSS file and name it "style.css."
4. Use CSS rules to style your recipe card. You can use selectors like these to style different parts:
- To style the whole page: (e.g., body, h1, ul)
- For specific things like the recipe title or ingredient list: (e.g., .recipe-title, .ingredient-list)
- To style the step-by-step instructions: (e.g., #instructions)
Comments
Post a Comment