Labels

Interactive Design | Exercises

25.04.2024 - 13.06.2024 Week 1 - Week 8
Tracy Angeline Tio / 0362222 / Bachelor of Design ( Honors ) in Creative Media
Interactive Design / Taylor's University
EXERCISES 1 , 2 , 3
TABLE OF CONTENTS
LECTURES
LECTURES 1 (WEEK 1 Usability : Designing Products For User Satisfaction)
- Usability refers to how effectively, efficiently, and successfully a particular user can utilize a product or design in a certain situation.
- A design usability depends on how well its features accommodate users needs and contexts.
- UX Design is the part/ example on it. An interface with high usability guides users through its easiest route to achieve it is goal.
- There are 5 key principle of Usability which is :
  1. Consistency : Ensures that the website look coherent and works harmoniously across all different elements such as header, navigation bars, layout structure. Example : Apple websites that had same color, font and style in their websites.
  2. Simplicity : Minimize the number of steps, symbols and terminology to help user achieve their goals faster and efficiently.
  3. Visibility : Visible the elements to make user know what they want to do and the option. Example : In Go food (Food Application),there should be a menu when we click the restaurant so customer could choose it.
  4. Feedback : Communicate the results of any interaction either it is good or bad. Example : Comment section on the website and rating star on it.
  5. Error Prevention : To alerting a user when they are making an error, with the intention to make it easy for them to do whatever it is. Example : Email verification when sign up/ log in.
Briefing Notes on WEEK 01 :
- Mr. Shamsul review the materials on the first week and ask us about what it is and give an example on it.
- He then discussed the MIB Booklet about our task from week 1 - week 14. The most important things is we had to do our task as instructed and submit it on time.


LECTURES 2 (WEEK 2 The Anatomy of a Web Page : 14 Basic Elements)
There are 14 basic elements and had a different contribution to general user experience :
1. Header  
- The upper/top part of the webpage. It referred to as a site menus and positioned as an element of primary navigation in the website layout.

2. CTA Button 
- A call to action (CTA) is an element of a user interface aimed at encouraging a user to take a certain action, for example : buy, contact, subscribe, etc.

3. Hero Section
- Is the above-the-fold (pre-scroll area) that present the strong visual hook. It could be hero image, catchy piece of typography, video or anything that could attracting visitors attention.

4. Footer 
- The lower (bottom) part of the web page which usually marks it's end. Footer provides the additional field for useful links and data users may be interested in finding. Moreover, footer could include brand identity signs, links to support section, credit, contact, testimonial, etc.

5. Slider 
- An interactive element that applies a technique of a slideshow or carousel to present different products, offers, etc. Slider present controversial elements that often become an object of hot debates.

6. Search  
- The elements that enables a visitor to browse the content inside the website and shows it according to the search query.

7. Menu  
- One of the core navigation elements in user interfaces that presents the option of interactions with the interface. Basically, it can be the list of commands. Example : save, delete, buy, send, etc.
- Menus can be organized horizontally or vertically. Some popular types found on diverse websites are :
  • Classic horizontal menu : most common and well recognized type of menu which presents the core navigation organized as horizontal line in the website header.
  • Side bar menu : Presents a vertical list of options, sticking to the left or right side of the web page
  • Dropdown menu : Complex type of menu for content-heavy websites, the list of additional options open below the primary one.
  • Megamenu : Complex expandable menu in which the big list of multiple choices is presented in a two dimensional dropdown layout.
  • Hamburger menu / The three horizontal lines : This option saves space and is often applied to mobile versions of websites.
8. Breadcrumbs
- Are navigation elements used to support users in a journey around the website. It present a tool for better wayfinding, yet they don't replace the primary navigation menu but the secondary level of navigation and increase website usability.

9. Form
- Form is an interactive element that allows users to send information to the system or server. Forms present the actual point of communication between the user and the digital product. Example of form in websites are process registration, adding financial details, making payments, sending feedback, etc.

10. Cards
- Also called titles, are layout elements that help arrange and visualize homogeneous data or content in a scannable and easy to use way. Usually organized in a sort of grid. For example, a product preview card on a catalog page can include an image, title, etc.

11. Video
- Videos have become a popular visual hook applied to the hero section mentioned above. Video content activates several channels of perception- audio visual, motion, and usually does wrapped in telling a story.

12. Progress Indicator
- It is a helpful element that helps the visitor to understand the current point in the general volume of information or set of actions. With the indicator, users do not get lost and can estimate the time needed for reading or browsing better.

13. Favicon (URL Icon)
- A special type of symbol representing the product or brand in the URL line of the browser and in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing.

14. Tags
- Tag is presented with a keyword or phrase that enables users to jump directly to the items marked up with it. Tags provide quick access to specific content categories, so they support navigation with the additional watt of content classification. 


LECTURES 3 (WEEK 3 Understanding Website Structure)
- Website structure is the foundation of a user friendly and accessible website. It affects user experience, SEO, and overall website performance.
- A well structured website helps users find information easily and keeps them engaged. 

Three Key Elements
- Websites are typically divided into three key elements :
  • Header : Top section that contains the website logo, navigation menu and contact. It provided users with quick assess information and navigation.
  • Body : Main content that contains text, images, videos etc. Proper organization of content within the body is crucial for readability. 
  • Footer : Bottom of a webpage that includes copyright, link to important pages and contact details + additional navigation options.
Organizing Content
- Content organization is key to a well structured website. We could use headings (H1,H2,H3) to create a hierarchical structure.
- Logical grouping of content and clear labeling of sections improve user experience.

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


LECTURES 4 (WEEK 4 Web Standards)
- In the early days of the Web, everyone accessed the Web using a keyboard, mouse, and monitor, until now, it has a various ways to access it by their phones, tablet computers with touch screen, or listen it. Even with the disability still could depend on speech input or output.

Hardware & Software Issue : 
  • Variety of browsers to choose like internet explorer, mozilla firefox, chrome, opera, safari, etc.
  • Variety of operating system like windows, mac os and linux.
  • Variety of screen resolutions from 640 x 480 px to 1680 x 1050 px and beyond.
- The most important part of website is its content and all users should be able to access that. Web standards are the core set of rules for developing websites. It might be possible to develop sites that do not comply with standards and unable to access it.
- World Wide Web (W3C) has defined the standard markup languages we use to build websites which is :
  • HTML
  • CSS
Why Web Standards?
- Web Standards are good to make internet a better place for both developers and visitors, Make the development simplified and to ensure all browsers will display your web site properly.

How The Web Works?
- In order to find the location of web server, your browser will first connect to a Domain Name System (DNS) server.
Fig 1.1 How The Web Works? Week 04 15/05/2024
Structure of a Web Page
  • Understanding Structure
  • Learning about Markup
  • Tags and Elements
- Structure is very important in helping readers to understand the messages we are trying to convey and to navigate around the document.

How Pages Use Structure 
- The use of headings and subheadings in any document often reflect a hierarchy of information. Any document will start with a large heading, followed by an introduction or the most important information
Fig 1.2 Example of Structure in Pages Week 04 15/05/2024
HTML Describes The Structure of Pages
- HTML Code is made up of characters that live inside angled brackets <>. Elements are usually made up two tags, opening and closing.
<element>Information</element>
- Each Elements tell the browser something about information that sits between its opening and closing tags.
Fig 1.3 Closer Look at Tags Week 04 15/05/2024 
Attributes Tell Us More About The Elements
- Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts : a name and value. 
Fig 1.4 Attributes Value Week 04 15/05/2024
Body, Head, Title, Others
  • <body> : everything inside this element is shown inside the main browser window
  • <title> : the contents of it are either shown in the top of the browser
  • <head> : it contain information about the page, before <body>.
- When creating a web page, we add tags (markup) to the contents of the page. The function is to provide extra meaning and allow browsers to show users the appropriate structure for the page.

Headings
- HTML has six levels of headings : <h1> main headings, <h2> subheadings...
Fig 1.5 Headings Example Week 04 15/05/2024
Paragraph
- To create it, surround the words that make up the paragraphs with an opening <p> and closing </p>.
Fig 1.6 Paragraph Example Week 04 15/05/2024
Bold & Italic
- Bold : <b> and </b> to appear bold
- Italic : <i> and </i> to appear italic
Fig 1.7 Example of Bold & Italic Week 04 15/05/2024
Lists
HTML provides us with two different types :
1. Ordered list <ol>
- are list where each item in the list is numbered like for a recipe.
- created it with <ol> first then put <li> (opening) and </li> (closing) for each item in the start and finished.

2. Unordered list <ul>
- are list that begin with a bullet point.
- created it with <ul> first then put <li> (opening) and </li> (closing) for each item in the start and finished.
Fig 1.8 Ordered and Unordered List Week 04 15/05/2024
3. Nested List
- It is used to put a second list inside an <li> element to create a sub-list or nested list. Tab the list and it will become nested.
Fig 1.9 Nested List Week 04 15/05/2024
Links
- Links are the defining features of the web because they allow you to move from one web page to another.
- Common type of links :
  • Links from one website to another
  • Links to one page to another on the same website
  • Links from part of a web page to another part of the same page
  • Links that open in a new browser window (tab)
1. Writing Links <a>
- Links are created using the <a> element (<a> opening and </a> closing).
Fig 1.10 How to Writing Links Week 04 15/05/2024
2. Linking to other sites <a> - Adding Images <img>
- When you link to a different website, the value of the href attribute will be the full web address for the site, also know as an absolute URL.
Fig 1.11 How to Adding Image Week 04 15/05/2024
- When using the <img> tag, two essential attributes must be included
  • src - This attribute specifies the path to the image
  • alt - This attribute provides alternative text for the image which is essential for accessbility.
  • title - provides tool tip of the image in the browser.

LECTURES 5-6 (WEEK 5-6 ID, Class Attribute & CSS)
ID and Class Attribute
1. ID Attribute
- Every HTML element can carry the ID Attribute and it is used to uniquely identify the element from other elements on the page.
- Giving an element a unique identity allows you to style it differently from any other instance of the same element on the page
- Eg: you might want to assign one paragraph within the page a different style from all of
the other paragraphs.

2. Class Attribute
- Every HTML element can also carry a class attribute. Sometimes, we want a way to identify several elements as being different from the other elements on the page.
- The class attribute on any elements can share the same value or name.

- By default, using these attributes does not affect the presentation. It will only change their appearance if there is a CSS rule that indicates it should be displayed differently.

3. Block Elements
- Some elements will always appear to start on a new line in the browser window which is block level. Example : <h1>, <p>, <ul> , <li>.

4. Inline Elements
- Some elements will always appear to continue on the same line as their neighbouring elements which is inline level. Example : <b>, <i>, <em> , <a>, <img>.

Introduction to CSS (Cascading Style Sheet)
- CSS allows you to create rules that specify how the content of an element should appear. For example we can set the background of the page is cream.

CSS Style Rules with HTML Elements
- CSS works by associating rules with HTML elements. A CSS rule contains two parts : a selector and declaration.
Fig 1.12 CSS Rules Week 05 25/05/2024
CSS Properties Affect how Elements are Displayed
- CSS declaration sit inside curly brackets and each is made up of two parts; a property and a value, separated by a colon. You can specify several properties in one declarations each separated by a semi-colon.
Fig 1.13 CSS Properties Week 05 25/05/2024
Method to Employ CSS 
Using External CSS : <link>
- The <link> element can be used in an HTML document to tell the browser where to find the CSS file used to style the page. It is an empty element and it lives inside the <head> element
- It should use three attributes:
  • href : To specify the path to the CSS file. 
  • type : This attribute specifies the type of document being linked to. The value should be text/css.
  • rel : Specifies the relationship between the HTML page and the file linked to. The value should be stylesheet when linking to a CSS file.
- An HTML page can use more than one CSS style sheet. To do this it could have a <link> element for every CSS file it uses.

Using Internal CSS : <style>
- This can be used  by placing them inside a <style> element, which usually sits inside the <head> element of the page. The value should be text/css.
- When building a site with more than one page, you should use an external CSS style sheet to :
  • Allow all pages to use the same style rules
  • Keeps the content separate from how the page looks
  • Means you can change the styles used across al pages by altering just one file
- CSS Color : Set Background color on text, Set color on text, and Set border color
- CSS Background : Set background color, image, repeat, attachment, and background shorthand 
- CSS Text Formatting : Text color, alignment, decoration, transformation, spacing (indent, letter spacing and word spacing) and text shadow.
- CSS Fonts : Use google fonts to add more fonts. Some best safe font for HTML and CSS are Arial, Verdana, Tahoma, Trebuchet, TNR, Georgia, Garamond, Courier, Brush Script. 


LECTURES 7 (WEEK 7 CSS Selectors)
CSS Selectors
- CSS (Cascading Style Sheets) selectors are a fundamental and crucial part of CSS that allow you to target and style HTML elements on a web page. It is used to define which elements should receive specific styles (colors, font, spacing and more).
- Type of CSS Selectors : 
(*Note : 1 code just 1 line. It should written in enter, below is just an example)

1. Universal Selector (*) 
- To select all elements on the page. example below : 
*{ padding:0;  margin:0;}

2. Element Selector (p)
- The simplest type of selector to targets HTML elements by their tag name. example :
p { text-align:left }

3. ID Selector (#ID name)
- To targets an element with specific id attribute. ID should be unique within a HTML document. Use # symbol followed by ID name to use it. example :
#my-element { display:inline; }

4. Class Selector (. Class name)
- To targets an element with specific id attribute. Multiple elements can share the same class. Use a . symbol and followed by class name. example :
.myclass { margin:auto; }

5. Descendant Selector (.container a)
- Selects an element that is a descendant of another element. example :
.container a { color:red: text-decoration:none;}

6. Attribute Selector (attribute=value)
- Selects elements with a specific attribute value to styling elements based on their attributes, such as form inputs. example :
input [type="text"] {...}

7. Child Selector (<li> <ul>)
- Selects elements that are direct children of another element. To select only the immediate <li> children of an <ul>, you can use: ul > li {list-style:none:}.

8. Pseudo-class Selector ( a:hover {} )
- 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)

9. Pseudo-element Selector ( p::first-line {} )
- 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.

10. Adjacent Sibling Selector ( h1 + p {} )
- Syntax : element + adjacent
- Selects an element that is immediately preceded by a specified element. Styling an element that directly follows another specific element.

11. General Sibling Selector ( h1 ~ p {} )
- Syntax : element ~ siblings
- Selects all elements that are siblings of a specified element. Styling all sibling elements that follow a specified element.

More Selector Example :
Fig 1.14 Complex Selectors Example Week 07 06/06/2024

Why There Are Many Selectors ?
- CSS provides a variety of selectors to offer flexibility and granularity when targeting HTML elements for styling. 
- CSS also give web developers the ability to precisely target and style specific elements or group based on their structure, attributes, etc.
- The key reason of many selectors in CSS :
  • Specificity : The availability of various selectors allows you to define the specificity you need.
  • Structure : It enable you to target elements within specific structural contexts like descendant and sibling selectors.
  • Attribute-Based Selection : When we want to style elements based on their attributes or attribute values. [ attribute="value" ]
  • Pseudo-Classes and Pseudo-Elements : It help us to style elements based on their state or position within the document.
  • Responsive Design : Media queries (type selector) enable us to apply different styles to elements based on user device characteristics.
  • Stateful Interactions : It allow us to style elements based on user interactions. Selector example : :focus, :active, :checked.
  • Cross-Browser Compatibility : Having variety selectors allows developers to use work consistently techniques across different browsers.
  • Ease of Maintenance : Certain selectors may make CSS easier to maintain depend on the structure and requirements of web page.
  • Accessibility : CSS selectors improve accessibility by providing styles that enhance readability and usability for individuals with disabilities.

LECTURES 9 (WEEK 9 Box Model in CSS)
The Display Property
- Every elements has a default display value depending on what type element it is. The default for most elements is usually block or inline.
  • Block-level element ( <div> ) : It starts on a new line and stretches out to the left and right as far as it can.
  • Inline Element ( <span> ) : Inline element can wrap some text inside a paragraph without disrupting the flow of that paragraph.
Fig 1.15 Example of Block (left) and Inline (right) Week 09 20/06/2024
- Other Display Properties are Inline-block, Flex and Grid.

Box Model
- Most HTML elements are containers. Each of these is a container, or box. 
- Each Box has three layers that surround it's content which is Padding, Border and Margin.
Fig 1.16 CSS Box Models Week 09 20/06/2024
- We can apply the following CSS to the paragraph tag in order to control the size of the padding, border and margin of the paragraph. (div / p { fill here }).
- Use 'div' tag / element to create the layout or using another method by position property.

Flexbox (Flexible Box Layout)
- 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.
- The key concepts are : 
  • Flex Container : The parent element with display : flex.
  • Flex Items : The children of the flex container
- Important Properties of the Flex Container are :
  • 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).
INSTRUCTIONS
MIB BOOKLET :
EXERCISES 1
Web Analysis (W1-W2)
On this exercises, we need to choose TWO (2) websites from the lectures given and analyzed it based on their design, purpose and goals of the website, and evaluate whether they are effectively communicated to the user.

Requirements :
  • Write a brief report of summarizing not less than 500 words
  • Formatting should be clear (heading, subheading)
  • Can Include a screen capture 
We were given some link to find an example of the websites :
After I looked out all the websites, I choose two websites that I'm interested and filled any requirement to be analyzed.

FINAL OUTCOME (REPORT)
Fig 3.1 Report Summary (PDF) Week 01 28/04/2024

---
Additional Activity Week 02 - Prototype Design
Before we moving to the next exercises that related to the website, we were given a group activity consist of 6-7 people to sketches out the prototype design. My group got the scenario 3 : redesigning a school website.
Fig 3.2 Scenario 3 Task Week 02 02/05/2024 
We decided to choose MyTimes apps to do the redesigning using google classroom and microsoft teams as the inspiration. Below are our prototype design. We tried to emphasize the usability principles by making a prototype to submitted the task and messaging the lectures, etc.
Fig 3.3 Final Prototype Design (PDF) Week 02 02/05/2024
EXERCISES 2
Replicate a Website (W3)
On this exercises, we need to choose TWO(2) existing main pages of the website given to gain a better understanding of their structure.

Websites Given :
  1. Morgan Stanley (Link : https://www.morganstanley.com/?authuser=0)
  2. Ocean Health Index (Link : https://www.oceanhealthindex.org/?authuser=0)
  3. Bandit Running ( Link : https://banditrunning.com/?authuser=0)
Requirements :
  • Follow the dimensions of the existing website from the width and height,
  • May use Adobe Ilustrator / Photoshop
  • Image, Icon does not have to be an exact image from the original image.
  • Font could be replaced with the similar one
  • Focus on the Layout, type, style and color style.
References for Image & Font
---
Chosen Website 1 : Morgan Stanley

On practical class, firstly we were given a tutorial to screenshot full page of the website. to do so, firstly right click the website - inspect - click the three icon - run command - and type screen. then choose full screenshot.

After that, open Adobe Illustrator and open the file on it. Adjust the artboard size and checklist the template mode.

I tried to find the font similar to the website and Source Sans Variable is quite matched with the font on it. Then I began to replicate it.
Fig 4.1 Website 1 Progress Week 03 09/05/2024
Below are the comparison between the replication (left side) and the original website (right side). 
Fig 4.2 Comparison between the replicate (left) and original website (right) Week 03 10/05/2024

Fig 4.3 Final Outcome Website 1 : Morgan Stanley Week 03 10/05/2024

Chosen Website 2 : Bandit Running

Same step like a previous websites, take a screenshot of the page then import it to adobe Illustrator. 

I observed the font used on the html mode and the websites are using tomato grotesk and helvetica typeface. I tried to find the font on google and one of the font did not had the free version. As a result, I replace it with Helvetica Neue, because both are similar.

For the images, because I can not copy the images on the web, I used google lens to find the similar one.
Fig 4.4 Website 2 Progress Week 03 12/05/2024
Below are the comparison between the replication (left side) and the original website (right side). 
Fig 4.5 Comparison between the replicate (left) and original website (right) Week 03 12/05/2024
FINAL OUTCOME
Fig 4.6 Final Outcome Website 2 Week 03 12/05/2024
EXERCISES 3
Creating Recipe Card Using HTML & CSS
INTRODUCTION & PRACTICE :
On Week 4, We were introduced to the HTML basic and started coding using notepad. Mr Shamsul brief us to made a heading, paragraph, image, insert link and make the word bold, etc. Below are some screen grab of my work.
Fig 5.1 Coding Progress on Week 04 16/05/2024
Next, On Week 5, We continued our coding from Week 04 but we used different application to operate which is Adobe Dreamweaver. This week, we were introduced and tasked to create a table using HTML. We also had to practicing colspan and rowspan.
Fig 5.2 Week 5 Table Progress (HTML) Week 05 23/05/2024
Below are the result if we open up the chrome :
Fig 5.3 Table Result (View Mode) Week 05 23/05/2024
Full Result for Week 04 - 05 could be view on this PDF below :
Fig 5.4 HTML Personal Profile Practice Week 05 25/05/2024
On Week 6, We got to introduced CSS Id Attribute and our task is to give a background color light and dark in the table we made. We also learned on how to change the font, change the background color of the website, making images to the left/right of the text and create a contact box and the button. 
Fig 5.5 Some Notes I Made During Coding Week 07 06/06/2024
Fig 5.6 Week 6-7 Progress Week 07 06/06/2024
Below are the result for Week 6-7 Practical : 


EXERCISES 3 : CREATING A RECIPE CARD
On this exercises, we had to create a recipe card using HTML and CSS. We need to choose one recipe from 101 Cookbooks and recreate the recipe into the card.

Requirements :
  • Create a section named "index.html."
  • Display the information needed : recipe title, ingredients, procedure, image, etc
  • Create an external CSS files named "style.css" 
  • Apply the CSS rules on the recipe card : 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.
  • Be creative to make the page look appealing and interesting
---
Firstly I looked up the website and start to choose the recipes I want to use for my code. Since I'm a cookie lover, I go with the cookies recipe and Chickpea Chocolate Chip Cookies from The Miller's Daughter, Emma Zimmerman seems to be my chosen recipes.

Recipe on this LINK.

After I chose the recipes, I rearranged the information a bit to make it looks clean. Below are the notes I created to summary the information of the article. 
Fig 5.7 Website Content Week 08 11/06/2024
Then I do some layout sketches to know what structure I would like to made in my code.
Fig 5.8 Layout Attempts Week 08 12/06/2024
Out of three layout, I think I would like to go to the first layout since it has unique design than others two design that really common and kinda boring (because so many text in one column.

In Pinterest, I tried to find an image that could fit in as the background and cookie images. I tend to go with the diagonal pattern, As my references is from my previous website I made, Since the task is creating Recipe "card", So I tried to create it looks like a card website.
Fig 5.9 Site References Week 08 12/06/2024
I tried to create a simple and clean card, so I used serif fonts to make it looks better. My choice for the font are "Playfair Display" for the Header and "Poly" for the Body.
Fig 5.10 Prototype Week 08 12/06/2024
I tried to using Figma to draw out my prototype. Then I moved to Dreamweaver and started to create a new HTML file and save is as index. Then I create a CSS file by file menu - new - CSS and save it. To attach it in HTML, choose CSS designer on right and click the source - attach existing file.
Fig 5.11 Coding Progress Week 08 12/06/2024
Fig 5.12 Site Overview Week 08 12/06/2024
I had do many trials to made the instructions beside the image and ingredients, but there were no successful trial... ((( ( I think it is because the difference size of the column between ingredients and procedure, also I'm not good enough, still lack of skill (:).

As a result, I changed the image to bigger one and align it in the right. I also added the time information for the preparation, cook and serves using table. Finally, after making sure all contents are in, I finalized it by published in netlify.
Fig 5.13 New Attempt Side Week 08 12/06/2024

FINAL OUTCOME

Fig 5.14 Final Outcome (PNG) Week 08 12/06/2024


---
WEEK 9 ACTIVITY : 
On Week 9, we got to practiced the box elements in HTML and CSS by using <div>, container and flex. Our activity is to create a new file and applied "flex" in our website. 
Fig 5.15 Coding Progress Week 09 20/06/2024
After applying the CSS, I filled up the information related to the images I choose and example from Mr. Shamsul.

Week 09 Activity result : mimichocochipcookie.netlify.app
FEEDBACK
Week 2
Read the instructions carefully before starting to do the task. On a group activity, our group had made a little mistakes because we did not fulfill the usability principles on our prototype. After the evaluation, we quickly fixed our problem.

Week 3
Work Smart, No Hard. We could copy paste the text or image rather than type it so it does not wasting time. Mr. Shamsul also taught me to copy paste the text with the same formatting by clicking Ctrl + A on AI.

Week 4
Be careful and paid attention to small things because if we just missing one word/ letter, the coding could not work and did not appear.
REFLECTIONS
All of the exercises has taught me a lot from analyzing website until creating a website. On exercises 1 and 2, I learned about the website structure by analyzing and replicate it. Starting from the header, body and footer of the website, I realized that there's a lot of website structure like breadcrumbs, CTA, hero section.

The last exercises (with the most difficulty) which is exercises 3 made me exploring the theories of coding, how to do, the selectors, etc. At first, I found these task was hard because one mistakes made all of it error, But the mistakes made me learn to pay attention of every single elements. When there's a trial, I also gained a new things by exploring new layouts since the trial is not working. We had to explore, searched on some tutorials to find out a new things from exercises 3.
Labels:

Comments

Post a Comment

Popular Posts