Interactive Design Project 2: Working Web Page

on

 15.06.2024 - 29.06.2024 | Week 8 - Week 10

Maisarah binti Mohd Sufian | 0358458

Interactive Design | Bachelor of Design (Hons) in Creative Media

Project 2 | Working Web Page
___________________________________________________________________________________

LECTURES

Week 9

Box Model Layout in CSS

The Display Property

• Display is CSS's most important property for
controlling layout.

• Every element has a default display value
depending on what type of element it is.

• The default for most elements is usually block or
inline.

Block-level element

• <div> is the standard block-level element. A
block-level element starts on a new line and
stretches out to the left and right as far as it can.

Inline Element

• <span> is the standard inline element. An inline
element can wrap some text inside a paragraph
<span> like this </span> without disrupting the
flow of that paragraph.

• You can always override this. Though it wouldn't
make sense to make an inline div, you can use
this to customize the display of elements that
have particular semantics.

• A common example is making inline li elements
for horizontal menus.

Other Display Properties

• Inline-block

• Flex

• Grid

Box Model

Box Model in CSS

• Most HTML elements are containers. Consider some of the
HTML elements we've used so far: body, p, h1, h2, div, ul, ol, li.

• Each of these is a container, or box.

• Each box has three layers that surround its content. The layers
are, in order from inside to outside:

• Padding

• Border

• Margin


• The following illustration shows
the various layers in the box
model:



• The size of each of the layers
in the box model can be
specified using the usual CSS
units of measure (em, %, and
px).

• For example, consider the
following <p>, which is
wrapped inside a <div>:

• For example, consider the following <p>, which
is wrapped inside a <div>:

<div>
<p>This is a paragraph. It is a very short paragraph.</p>
</div>

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 {

background-color: red;

padding: 0;

border: 1px solid black;

margin: 0;

}

p {

background-color: white;

padding: 1em;

border-width: 10px;

border-style: solid;

border-color: blue;

margin: 10px !important;

}

Reason to include an element in ‘div’ tag/element is to create layout.

Another method to create layout in CSS is using position property.

Flexbox

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.

Flexible Box Layout

Key Concepts:

Flex Container: The parent element with display: flex.

Flex Items: The children of the flex container.

Important Properties

Flex Container:

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

___________________________________________________________________________________

PROJECT 2 - Working Web Page

Intructions


For this task, we must transform our static prototype from Project 1 into a fully functional and interactive web page.

1. HTML 

I first added my text and elements in html, in order of how I want them to be displayed. I had an idea of using a background image for elements that aren't interactive. I did this by seperating my content in div elements.

I added anchors to each container, so that the links in my header would scroll down to that section of the page, and linked it to my header elements. For my email button, I used a mailto: href, which targets the user's default email and opens the email draft.




Then I worked on the form that would appear at the bottom of my page, as well as the other footer elements. I had an idea to make it functional, so I incorporated a bit of javascript into my html coding, with the help of a SheetDB API, whatever that was entered into the form would show up in a Google Sheet that I can access. For my social media links, I used png images as buttons.

2. CSS

I then further styled my elements in a style sheet. For my sections, I used position to position my text in the areas I want them to be within the image. I used percentages to allow responsiveness to different window sizes. I also added a scroll-behaviour so that when any jumplinks are clicked on, the scrolling is smooth.
I further styled my form, and added hover responses. for my social media images, I decreased the brightness as a hover response to make it seem like buttons.

3. Final Website

Website Screenshot

Protoype VS Working website




___________________________________________________________________________________

FEEDBACK

Week 5

No feedback given

Week 6

My layout is very clean, and it works for a printed resume. However, as a digital CV my content should be arranged in a scroll down fashion. I also used the wrong file size, it should be Desktop instead of A4.
___________________________________________________________________________________

REFLECTION

Experience

While Mr Shamsul taught us extra ways to style using CSS, I used all the knowledge I knew from classes as well as external reading materials to construct a working website. I feel like now I have a thorough understanding of how HTML and CSS work together, and the behaviours of different properties.

Observation

It was easy to visualise my website with Dreamweaver, I did not have much difficulty with the coding, but the process was very long and took hours to finish. 

Findings

I found that organising my code made it much easier to continuously work on it after whenever I took a break, and it is easier to look for elements that I wish to change or adjust. Overall, I enjoyed making this website and it was a fun experience.

Comments

Post a Comment