Single Page Lifestyle Microsite (music entertainment, music, fanpage of an artist (painter, musician), game)
needs to be RESPONSIVE (on laptop and mobile)

Final Complication

2. USABILITY: Designing Products for User Satisfaction

Usability is the efficiency and success of a product or design in a specific situation, a crucial aspect of User Experience (UX) Design. It is the second level of UX Design and depends on how well a design accommodates users' needs and contexts. A high usability interface guides users through its easiest route to achieve its goal, ensuring users can easily navigate and achieve their objectives.

Key Principle of Usability

Consistency
Simplicity
Visibility
Feedback
Error Prevention

Consistency

Consistency ensures that your website looks coherent and works harmoniously across all elements, such as headers, footers, sidebars, and navigation bars. Includes a consistent navigation system, page layout and menu structure, fonts and typography, and branding in web design

Consistency is key for these patterns to be recognized and learned by users. If similar-looking things do not produce a similar output, the user is bound to become frustrated. For example, if a website’s buttons are protruding boxes with labels on them, then all of the website’s buttons should look like that. Similarly, if a backward arrow denotes the back button, then it should not be changed to something else because that would be inconsistent with what the user has learned.

Simplicity

The principle is that user interfaces should be “simple” for users. Simplicity refers to the need to minimize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible, and difficult to make mistakes.

Visibility

Visibility is the basic principle that the more visible an element is, the more likely users will know about them and how to use them. It as the opposite, when something is out of sight, it’s difficult to know about and use. Users should know, just by looking at an interface, what their options are and how to access them.

Feedback

Feedback communicates the results of any interaction. Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task. An example of feedback is when you’re on desktops or laptops when you hover over navigation items, you expect them to change color or load a submenu.

Feedback

It involves alerting a user when they’re making an error, to make it easy for them to do whatever it is they are doing without making a mistake. The main reason for this is that we humans are prone to and will always make mistakes.

Week 2 - F2F (Apr 30, 2024)

1. The ANATOMY of a Web Page: 14 Basic Elements

1. Header

The header, the top part of a webpage, is crucial for strategic navigation and user experience. It serves as a site menu, allowing users to quickly access main pages and navigate the website.

Fig 1.1 Header, Week 2 (30/04/2024)

Fig 1.2 Header, Week 2 (30/04/2024)

Headers may include a bunch of meaningful layout elements, for example:

basic elements of brand identity, usually a logo
call-to-action button
search field
links to basic categories of website content
links to the social networks
basic contact information (telephone number, e-mail address, etc.)

Web Usability and Header Importance

The header is crucial for web usability as it is placed in the most scannable zone of a web page. Applied to a page or screen, the verb “scan” means to glance at/over or read hastily. When interacting with a website, especially the first time, users quickly look through the content to analyze whether it’s what they need. So, if an eye has nothing to be caught with at the first minutes of introduction, the risk is high that the user will go away.

A zig-zag pattern is typical for pages with visually divided content blocks.

Fig 1.3 Zig-Zag Pattern, Week 2 (30/04/2024)

One more model is the F-pattern presented in the explorations by Nielsen Norman Group.

Fig 1.4 F-Pattern, Week 2 (30/04/2024)

That's why Header elements are often found in them, especially those in the left and right corners, such as the CTA button and core navigation.

Consistency

Header's external consistency of user experience is also important. The term “consistency” is the quality of always behaving or performing in a similar way, or of always happening in a similar way, aka “being the same”. Put shortly, the consistent approach to user experience design leads to the following benefits:

The interface gets much easier to learn for new users
Fewer errors happen as users are less confused
It reduces cognitive load this way, saving users’ time and effort
Consistency supports a strong brand image for a website or application

there are many types of consistency so let's just speedrun it.

Visual consistency is based on making similar objects or elements look the same. They need to give the same vibe basically, Icons, fonts, image sizes, buttons, labels, and even text (heading, subheadings, main text body, quotations, etc.) should use the same font family.

Fig 1.5 Visual Consistency, Week 2 (30/04/2024)

Functional consistency means that similar objects behave the same way. For example, most websites use a logo or a publication name in the top left corner of the website header, and by clicking it, users get back to the home page or refresh it.

Fig 1.6 Functional Consistency, Week 2 (30/04/2024)

Internal consistency is about different parts of your interface or brand that look and behave as one clear system. For example, when you make all the CTA buttons on different pages colored and designed the same way, users will quickly distinguish them anywhere.

Fig 1.7 Internal Consistency, Week 2 (30/04/2024)

This web has many CTA buttons with the same design and color.

External consistency is about parts of your interface that look and behave as typical patterns for most products of this kind. That’s, for example, when you use a shopping cart even on the website selling non-tangible products give users a hint that they are clickable.

Fig 1.8 External Consistency, Week 2 (30/04/2024)

Some of the popular design practices for web headers include

Hamburger Menu It is the button hiding the menu. When you click or tap it, the menu expands. This kind of menu (and button as well) got the name due to its form of three horizontal lines that look bread-meat-bread hamburger.

Fig 1.9 Hamburger Menu, Week 2 (30/04/2024)

Fig 1.10 Hamburger Menu, Week 2 (30/04/2024)

Sticky Header that doesn’t hide away but sticks to the top part of the page when users are scrolling the page down. Which is helpful in terms of content-heavy pages with long scrolling.

Fig 1.11 Sticky Header, Week 2 (30/04/2024)

The presented design concept of a website has a fixed header that doesn’t hide while the page is scrolled.

Two-Layer Navigation, a sort of double set of navigation sites in the header to separate two different routes of navigation that are both important for web usability.

Fig 1.12 Two-Layer Navigationr, Week 2 (30/04/2024)

The website features a sticky header with two navigation levels: an upper menu for social networks, logo, search, shopping cart, and hamburger button, and a second line for product catalog, locations for the point-of-sales, and information about the service.

2. CTA Button

A call-to-action (CTA) button is an element of a user interface aimed at encouraging a user to take a certain action. for example, buy, contact, subscribe, etc.). Effective call-to-action buttons are easy to notice; that’s why they are usually bold contrasting buttons.

Fig 2.1 Call-To-Action, Week 2 (30/04/2024)

Fig 2.2 CTA Button, Week 2 (30/04/2024)

Fig 2.3 Call-To-Action, Week 2 (30/04/2024)

Fig 2.4 CTA Button, Week 2 (30/04/2024)

3. Hero Section

Hero section is the above-the-fold (pre-scroll area of the web page containing the element that presents the strong visual hook: a hero image, slider, catchy piece of typography, video, or anything else attracting visitors’ attention and transfers a needed message to them.

Fig 3.1 Hero Section, Week 2 (30/04/2024)

The hero section for this website catches attention and impresses visitors with an animated 3D graphic.

4. Footer

Footer is the lower (bottom) part of the web page, For most users, the footer is a common place to search for contact information, credits, and sitemaps.

Fig 4.1 Footer, Week 2 (30/04/2024)

Fig 4.2 Footer, Week 2 (30/04/2024)

Footers can include:

Brand identity signs, usually the name and logo of the company or product
Links to user support sections, for example, FAQ page, About page, Privacy Policy, Terms and Conditions, Support Team, etc.
Credits to website creators
Contact forms and information
and more!

5. Slider

A slider is an interactive element that applies a technique of a slideshow or carousel to present different products, offers, etc.

Fig 5.1 Slider, Week 2 (30/04/2024)

Fig 5.2 Slider, Week 2 (30/04/2024)

Sliders are controversial interactive elements with benefits like saving page space, user engagement, and attractive visual hooks. However, they can decrease page speed, distract users cause of lack of priority, and cause issues in mobile adaptation.

6. Search

The interactive element responsible for the internal search in the user interface is a search field, also called a search box or search bar: it enables a user to type in the search query and, this way find the pieces of content that are needed.

Fig 6.1 Search, Week 2 (30/04/2024)

Fig 6.2 Search, Week 2 (30/04/2024)

This is the search element in blog.tubikstudio.com on the top right corner and the page when you click it.

7. Menu

The menu is one of the core navigation elements in user interfaces. A menu represents the categories along which the content is organized in the given interface.

Classic horizontal menu: the most common and well-recognized type of menu that presents the core navigation organized as a horizontal line in the website header.

Fig 7.1 Classic Horizontal Menu, Week 2 (30/04/2024)

Sidebar menu: quite a classic type, presents a vertical list of options sticking to the left or right side of the web page

Fig 7.2 Sidebar Menu, Week 2 (30/04/2024)

Dropdown menu: a more complex type of menu for content-heavy websites; here, the list of additional options opens below the primary one when it’s clicked or hovered.

Fig 7.3 Dropdown Menu, Week 2 (30/04/2024)

Megamenu: that’s the expandable menu in which the big list of multiple choices is presented in a two-dimensional dropdown layout; this is used for cases with many options.

Fig 7.4 Megamenu, Week 2 (30/04/2024)

Hamburger menu: when the hamburger button (typically marked with three horizontal lines) is clicked, the menu expands. This option saves space and is often applied to mobile versions of websites.

Fig 7.5 Hamburger Menu, Week 2 (30/04/2024)

8. Breadcrumbs

Breadcrumbs are navigation elements used to support users in a journey around the website: they get aware of where they are on the website and can get used to the website structure more easily.

Fig 8.1 Breadcrumbs, Week 2 (30/04/2024)

Breadcrumbs enhance website findability by providing a touchpoint for users to navigate the website's structure. They require fewer clicks, effectively use screen space, and are rarely misinterpreted. Breadcrumbs are particularly helpful for first-time visitors or those unfamiliar with complex websites, as they reduce bounce rates, making them a more effective tool for navigation.

9. Form

Forms are interactive elements that allow users to send information to a system or server. They are digital versions of traditional paper forms, with more options and functionality. Forms are used in various digital activities like registration, payment, feedback, and newsletter subscription. To ensure user communication, forms should be simple, intuitive, and have visual prompts and tips to support the user's process.

Fig 9.1 Form, Week 2 (30/04/2024)

10. Cards

Cards, also known as tiles, are layout elements that organize and visualize homogeneous data in a user-friendly way. They are organized in a grid, combining different types of content about an item.

Fig 10.1 Cards, Week 2 (30/04/2024)

Fig 10.2 Cards, Week 2 (30/04/2024)

Fig 10.3 Cards, Week 2 (30/04/2024)

11. Video

Video content is increasingly prominent on websites due to advancements in web development solutions and technical abilities. It attracts customers' attention and informs them quickly and brightly.

Fig 11.1 Video, Week 2 (30/04/2024)

Fig 11.2 Video, Week 2 (30/04/2024)

Video content activates multiple channels of perception, including audio, visual, and motion, while telling a story. Videos are popular visual hooks for product introductions, setting the atmosphere, and sharing feedback. However, pitfalls like loading time, contrast issues, and responsiveness can negatively impact user experience.

12. Progress Indicator

Progress indicators help visitors understand information volume and actions, especially on text-heavy pages with long scrolling. They help users estimate reading time and feel more confident in complex forms or processes.

Fig 12.1 Progress Indicator, Week 2 (30/04/2024)

13. Favicon

Favicon, URL icon, or bookmark icon, represents a product or brand in browser URLs and tabs, providing quick visual connection and effective website promotion, while contributing to web usability due to its small size.

Fig 13.1 Favicon, Week 2 (30/04/2024)

Fig 13.2 Favicon, Week 2 (30/04/2024)

14. Tags

Tags are secondary navigation elements found in blogs and websites with homogenous content. They provide quick access to specific content categories and are metadata that support content classification. Users often create tags as an alternative to fixed website categories.

Fig 14.1 Tags, Week 2 (30/04/2024)

Fig 14.2 Tags, Week 2 (30/04/2024)

Week 3 - F2F (May 7, 2024)

1. Understanding Website Structure

1. Why Website Structure Matters

Website structure is crucial for a user-friendly and accessible website, impacting user experience, SEO, and overall performance by facilitating easy information access and engagement.

2. The Three Key Elements

Websites are typically divided into three key elements:

Header

The header is the top section of a webpage.
It usually contains the website's logo, navigation menu, and contact information.
The header provides users with quick access to essential information and navigation.

Body

The body is the main content area of a webpage.
It contains text, images, videos, and other multimedia elements.
Proper organization of content within the body is crucial for readability.

Footer

The footer is located at the bottom of a webpage.
It typically includes copyright information, links to important pages, and contact details.
The footer provides closure to the webpage and additional navigation options.

3. Organizing Content

Content organization is key to a well-structured website.
Use headings (H1, H2, H3, etc.) to create a hierarchical structure.
Logical grouping of content and clear labeling of sections improve user experience.

4. Navigation Menus

Navigation menus help users move around the website.
Use clear and concise labels for menu items.
Consider using dropdown menus for complex sites.

Fig 1.1 Header, Week 3 (07/05/2024)

Week 4 - F2F (May 14, 2024)

1. The Web

Mr Shamsul has explained all of the slides including the history and theory in the beginning. But these are the main points that we applied in class.

1. BODY, HEAD & TITLE

<head>

Before the <body> element you will often see a <head> element. This contains information about the page. You will usually find a <title> element inside the <head> element.

<title>

The contents of the <title> element are either shown in the top of the browser (tab bar).

<body>

You met the <body> element in the first example created. Everything inside this element is shown inside the main browser window.

2. HEADINGS

HTML has six levels of headings:
<h1> main headings
<h2> subheadings
If there are further sections under the subheadings then the <h3> element is used and so on..

Fig 2.1 Headings, Week 4 (14/05/2024)

3. PARAGRAPH

To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and a closing </p> tag.

Fig 3.1 Paragraph, Week 4 (14/05/2024)

4. BOLD & ITALIC

By enclosing words in the tags <b> and </b> we can make characters appear bold.
By enclosing words in the tags <i> and </i> we can make characters appear in italic.

Fig 1.1 Bold, Week 4 (14/05/2024)

Fig 4.1 Italic, Week 4 (14/05/2024)

5. LISTS

Ordered list

Ordered lists are lists where each item in the list is numbered. The list is for the set of steps for a recipe that must be performed in order.
<ol> The ordered list is created with the <ol> element
<li> Each item in the list is placed between an opening <li> tag and a closing </li> tag (the li stands for list item.)
Fig 5.1 Ordered list, Week 4 (14/05/2024)

Unordered list

Unordered lists are lists that begin with a bullet point.
<ul> The unordered list is created with the <ul> element
<li> Each item in the list is placed between an opening <li> tag and a closing </li> tag (the li stands for list item.)

Fig 5.2 Unordered list, Week 4 (14/05/2024)

6. NESTED LISTS

Fig 6.1 Nested List, Week 4 (14/05/2024)

7. LINKS

Fig 7.1 Links, Week 4 (14/05/2024)

8. ADDING IMAGE

Fig 8.1 Image, Week 4 (14/05/2024)

Week 5 - F2F (May 21, 2024)

1. HTML & CSS

1. ID and Class attribute

ID attribute

The ID attribute uniquely identifies every HTML element from others on the page, ensuring no two elements have the same ID value.

Using a unique identity allows for distinct style for an element on the page, such as assigning a paragraph to a different style from all other paragraphs.

Class attribute

Class attributes are used to distinguish certain elements from others on a page, allowing for easier identification and differentiation between them.

For instance, you may want to differentiate important paragraph elements by using class attributes that can share the same value or name.

Block elements

Block level elements, such as <h1>, <p>, <ul> and <li> always start on a new line in the browser window.

Inline elements

Inline elements, such as <b>, <i>, <em>, <a> and <img> appear to continue on the same line as their neighboring elements.

2. Introducing CSS

CSS allows for the creation of rules to define the appearance of an element, such as setting the background color, paragraph typeface, or level header typeface. A CSS rule contains two parts: a selector and a declaration.

Fig 2.1 Selector and Declaration, Week 5 (21/05/2024)

This rule indicates that all <p> elements should be shown in the Arial typeface.
Selectors indicate the element the rule applies to, and the same rule can apply to multiple elements if element names are separated with commas.
Declarations indicate how the elements referred to in the selector should be styled.

CSS declaration sit inside curly brackets and each is made up of two parts; a property and a value, separated by a colon.

Fig 2.2 Property and Value, Week 5 (21/05/2024)

This rule indicates that all <h1>, <h2> and <h3> elements should be shown in the Arial typeface, in a yellow color.
Property refers to the specific elements you wish to modify, such as color, font, width, height, and border.
Values specify the settings you want to use for the chosen properties.

Method to Employ CSS

Using External CSS

The <link> element in an HTML document indicates the location of the CSS file used for styling the page. It is an empty element with three attributes: href, type, and rel, specifying the path to the CSS file and its relationship.

Using Internal CSS

CSS rules can be incorporated into an HTML page by placing them within <style> element, usually sits inside the <head> element of the page.

Week 7 - F2F (June 4, 2024)

1. CSS Selectors

1. ID and Class attribute

1. 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.

Fig 1.1 Universal Selector, Week 7 (04/06/2024)

2. Element Selector

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

Fig 2.1 Element Selector, Week 7 (04/06/2024)

3. 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.

Fig 3.1 ID Selector, Week 7 (04/06/2024)

4. 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.

Fig 4.1 Class Selector, Week 7 (04/06/2024)

5. 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,"

Fig 5.1 Descendant Selector, Week 7 (04/06/2024)

6. Attribute Selector

Selects elements with a specific attribute value. It is used to styling elements based on their attributes, such as form inputs. Syntax: [attribute=value]

Fig 6.1 Attribute Selector, Week 7 (04/06/2024)

7. Child Selector

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

Fig 7.1 Child Selector, Week 7 (04/06/2024)

8. 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)

Fig 8.1 Pseudo-class Selector, Week 7 (04/06/2024)

9. Pseudo-element Selector

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.

Fig 9.1 Pseudo-element Selector, Week 7 (04/06/2024)

10. 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.

Fig 10.1 Adjacent Sibling Selector, Week 7 (04/06/2024)

11. 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.

Fig 11.1 General Sibling Selector, Week 7 (04/06/2024)

12. Complex Selectors

(n): Select the nth child element.

Fig 12.1 Complex Selectors, Week 7 (04/06/2024)

2. INSTRUCTION

Description

Web Analysis (Week 2)

Your task is to analyze an existing website and identify areas for improvement. This exercise will help you develop your critical thinking skills and gain insights into web design best practices.

Replicate a website (Week 3)

Your task is to replicate an existing website to better understand its structure. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices.

CSS Layout (Week 8)

Requirements

Online submission - individual work to be submitted in Google Classroom.

Submission

Weekly in class during tutorial and practical
Weekly self-directed coding practice

3. Exercise

1. Web Analysis (Week 2)

1. Instruction

Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization.
Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Consider the design, layout, content, and functionality.
Identify the strengths and weaknesses of the website.
Consider how they impact the user experience.
summarizing your findings and recommendations.

2. Progress

I intentionally pick the best web in my opinion on the site and string to analyze it. I tried my best to nitpick and comment on every possible detail there is that I picked up on both of the websites. As I'm picking the UI/UX specialization I'm glad that I can pick up this many details and design choices used in both websites and also still found areas to be improved upon in them.

Fig 1.1 Header, Week 2 (30/04/2024)

It's hard to compose the analysis due to the many sections we need to analyze and a lot of them overlap and are connected with each other. I worry that the analysis will become too repetitive of certain elements because one element can be for the purpose and goals of the web but also be functionality such as interactive elements.

Fig 1.1 Header, Week 2 (30/04/2024)

I figured just writing the analysis of the design detail would make sense without the pictures, so I went to Canva to add the pictures in a cohesive manner as Blogger does not support the layout design analysis I aim for, it literary can only have one image per row and can't have another image beside it, its really a waste of space.

Sadly I did not know that you can clip a vid with a screenshot and put it in Canva, it would be so much better to visualize what I'm analyzing instead of multiple images, but what's done is done.

3. Final Result

Fig 1.1 Header, Week 2 (30/04/2024)

2. Web Replication (Week 3)

1. Instruction

Choose two existing main pages from a given link.
Follow website dimensions from width and height.
Use software like Photoshop or Adobe Illustrator for design skills development.
Use any image from stock or free stock icon.
Focus on layout, type style, and color style.
Download similar typefaces/fonts from Google Fonts.
Screengrab the website for page replication.

2. Progress

So in this task, we need to replicate two web exactly to understand why the web design is the way they are. Now I did not realize that the first web I'm picking is the longest one of the three options and it took so much time with the sheer amount of text. I needed to know every single one of the letters, it's way too tedious, I wished I bailed on this web and did another one instead.

Fig 1.1 Header, Week 3 (07/05/2024)

The elements and overlapping section aren't so bad, I can them easily after a bit of experiment, the forms and the button just used squares with rounded edges. What's interesting though, I was struggling to find some images with the right color because the text overlapping them is white and looked washed out. The solution for this is to make a square, give it a gradient, and lower the opacity on one end.

Fig 1.1 Header, Week 3 (07/05/2024)

After everything I went through on the first web design the second one is way easier and not to mention is a lot shorter too.

Fig 1.1 Header, Week 3 (07/05/2024)

Some observations on both web, the first one is minimalistic as it is about finance and investment management, sales, and trading. While the second one is all about ocean health with a blue dominant color palate and underwater images.

One thing I notice on both webs is that the grid actually becomes the ruler for across the web whether it's from right to left or top to bottom for both the texts and the elements. This invisible ruler is of course more noticeable in the ocean web, but have more clever uses of this in the Morgon web.

3. Final Result

Fig 1.1 Header, Week 3 (07/05/2024)

4. Class Task

In physical class we were grouped and given the task to make a prototype website, this is the prototype that we came up with.

Fig 1.1 Header, Week 3 (07/05/2024)

During the feedback from the other group, we realised that while we got some aspects right we were missing crucial parts too. This is the main points:

We got right:

The style of the web needs to be the same (we nailed this as all of the layout was done by 1 person before dividing the part each person needs to do.)
The sign-in and login page, in the beginning, the Google option to fill in the form immediately

Still missing:

Consistency of the elements
Feedback, follow-up pages. We made a web where the viewer can see artworks without the ability to click and see the artist see the art in full resolution, or the ability to like, save and comment on it.
We also made a page to buy artwork up for sale without the follow-up page to see how many were in stock, colors, sizes, prices, and more. Then still need to give feedback to the user whether the order was successful or not.

Fig 1.1 Header, Week 3 (07/05/2024)

So we did that as fast as we could with the limited time and this is what we came up with. we were still missing the page showing how many and what items were in the cart, the payment method, and the feedback to the user on whether the orders were successful or not.

But we did well one of the compliments given during our feedback was the navigation menu on the bottom is very clear to see and what their function is thus giving the user easy navigation without much fuss "Back to home page".

3. Creating Recipe Card (Week 8)

1. Instruction

Design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. Choose ONE Recipe.

Create a recipe card using HTML and CSS.

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

Create an external CSS file named "style.css."

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)
ID selectors (e.g., #instructions) to style different parts of the card.

Use your creativity to make the page look appealing and interesting

2. Progress

First, I put the information in and separated them into sections, putting the headings, lists, links, and their placeholder in their respective tags.

Then put in the CSS for a section to separate it from the background and thus guide the eye to the information. They give the margins and padding to the content inside the section.

Give the border and radius of the image, and align them to the left, right, and center appropriately. give colors to all the information to give more contrast and fit the color palate.

I also added a contact form below with their placeholder, button, and links with their hover style.

.

When I was finished it looked too bland by itself, so I added background images from Google following a tutorial from YouTube. adjust the color palate and it looked visually more interesting.

3. Final Result

Final Result: https://6668722055054428423eac2a--brilliant-jelly-038150.netlify.app/

4. HTML and CSS Continuous (Week 4-6)

1. Progress

During this continuous task, Mr Shamsul guides us step by step to get to an acceptable web on our first time making this.

The first week we learned about the basics of HTML including the Head, Body, and Footer. How to use headings, paragraphs, links, and add images. We did this in our notes app on our laptop.

Fig 1.1 Code on Notes App, Week 4 (14/05/2024)

Fig 1.2 Web Aplication, Week 4 (14/05/2024)

In the next week, we moved our code into Dreamweaver. we learned how to make a timetable, how to collapse and uncollapse the border, and how to merge collum and rows. We're also given the homework to add forms to our web.

https://html.com/tables/rowspan-colspan/#colspan_8212_Code_Examples

https://www.w3schools.com/cssref/pr_border-collapse.php

Fig 1.3 Code on Dreamweaver, Week 5 (21/05/2024)

Fig 1.4 Table, Week 5 (21/05/2024)

Fig 1.5 Links, Week 5 (21/05/2024)

The next week, we learned how to use ID and class in the style element, to add attributes to our web such as colors, background, and text. We also learned how to add Google font to our web. The last thing we need to do is to style our forms and button ourselves, such as changing the color and border.

Fig 1.6 Forms, Week 6 (28/05/2024)

Fig 1.7 Web Application, Week 6 (28/05/2024)

2. Final Result

Start: https://brilliant-jelly-038150.netlify.app/

Finish: https://brilliant-jelly-038150.netlify.app/

4. Reflection

1. Experience

It's good fun to learn to analyze and make mock-up webs, I do have a little bit of coding background from high school, so it helps when I have a basic understanding of HTML and CSS. But never considered it with the design layout/ making it pretty.

2. Observation

It's hard when you already have something in mind but don't have enough coding knowledge and skills. Making you compromise your vision with your lack of skill. When you have a good idea you want to implement in your web and it takes 1 hour to make it, it makes you question whether it's worth it to make the web according to the vision. Also in my experience, it's gonna take a long time to get used to the HTML language and it needs continuous practice and exercise to be able to use them effectively.

3. Findings

For me, it feels like my imagination is not vivid enough to base the web on, it's more like a mood board rather than a sketch. So I can't rely on it to compare ideas about what works and what does not and I need to write the code down and see it instead of sketching. Maybe its because I'm not used to coding and when im fluent in it, it becomes easier than sketching.

Interactive Design - Exercises

JUMPLINK:

1. LECTURE

1. TASK BRIEFING

5 POST

Exercises

Project 1

Project 2

Final Project

Final Complication

2. USABILITY: Designing Products for User Satisfaction

1. The ANATOMY of a Web Page: 14 Basic Elements

1. Header

Web Usability and Header Importance

Consistency

Some of the popular design practices for web headers include

2. CTA Button

3. Hero Section

4. Footer

5. Slider

6. Search

7. Menu

8. Breadcrumbs

9. Form

10. Cards

11. Video

12. Progress Indicator

13. Favicon

14. Tags

1. Understanding Website Structure

1. Why Website Structure Matters

2. The Three Key Elements

Header

Body

Footer

3. Organizing Content

4. Navigation Menus

1. The Web

1. BODY, HEAD & TITLE

<head>

<title>

<body>

2. HEADINGS

3. PARAGRAPH

4. BOLD & ITALIC

5. LISTS

Ordered list

Unordered list

6. NESTED LISTS

7. LINKS

8. ADDING IMAGE

1. HTML & CSS

1. ID and Class attribute

ID attribute

Class attribute

Block elements

Inline elements

2. Introducing CSS

Method to Employ CSS

1. CSS Selectors

1. ID and Class attribute

1. Universal Selector

2. Element Selector

3. ID Selector

4. Class Selector

5. Descendant Selector

6. Attribute Selector

7. Child Selector

8. Pseudo-class Selector

9. Pseudo-element Selector

10. Adjacent Sibling Selector

11. General Sibling Selector

12. Complex Selectors

2. INSTRUCTION

Description

Requirements

Submission

3. Exercise

1. Web Analysis (Week 2)

1. Instruction

Final Result: https://6668722055054428423eac2a--brilliant-jelly-038150.netlify.app/

4. HTML and CSS Continuous (Week 4-6)