Alana Sofia Othman / 0353451 / Bachelor of Design (Hons) in Creative Media
Interactive Design
Exercises
LECTURES
Week 5
Web Standards
Why Web Standards?
- It is easily translation between multiple developers, allowing it to be easy for one to understand another's work.
- Ensures that all browsers will display the site properly without time consuming rewrites.
HTML
- Web pages will always need a headline, subhead, body and images, just like everything else we read (e.g. newspaper, magazine, etc.)
- There are 6 levels of headings, <h1> - <h6>. This creates headings and sub headings.
- <body> and <p> create normal paragraph body text.
- There are 2 ways to create lists. "<ul>" for unnumbered and "<ol>" for numbered, both needing to be paired with "<li>" to create it as lists
- All codes need to be opened and closed with <element>information</element>. For example <body>insert body text here</body>
- Open or one time items do not need to be closed, such as a break line <hr/>, spacing line <br>, images <img> and etc.
- There are multiple ways to add links into HTML depending on the way it is opened (open different website in same tab, open different page within same website, scrolls to a different section of the same page, opens in a new tab).
- Links use <a href>. "href" standing for hyper reference.
Week 7
Introduction to CSS
- CSS allows you to create rules that specify how the content of an element should appear
- It works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed. It becomes a format for HTML to follow
- A CSS rule contains two parts: a selector and a declaration. For example:
h1, h2 {font-family: 'Kanit', sans-serif;}
- The declaration sits inside the curly brackets and each is made up of two parts; a property and a value. It is seperated by a colon. For example:
font-family:
'Kanit'
- There can be multiple properties within a single declaration, seperated by a semi colon. For example:
h1, h2 {font-family: 'Kanit', sans-serif; color:dimgray;}
- A semicolon indicates the closing of a property
Coding In Class with Visual Studio Code
- text-shadow: 1px 1px 3px gray; (vertical, horizontal, blur radius)
- "class" / "id" attributes affect everything labeled under it
- '.' or '#' is needed to select the class or id respectively to label, format and/or call it.
- id only can be used for one element but 'class' can be used for several elements.
- 'class' can have multiple values. It is seperated by a space. It allows the element to have two seperate class formats. For example:
class="first-para upper"
INSTRUCTIONS
Process
Code
|
| Figure 1.1. Arranging Information in Code |
|
| Figure 1.2. Adjusting margin & Adding Images in Code |
I started with transferring the information given into Notepad, just like what was taught in class. I seperated the information with h1, h2, br & hr when necessary. Once that was done, I added images and adjusted the margin, learning from coding information online (Figure 1.2.). I wanted to give the webpage a margin to push it further away from the edge and create more breathing space for the text.
|
| Figure 1.3. Snippet of Final Outcome |
|
| Figure 2.1. Arranging Information in Code |
|
| Figure 2.2. Adding CSS to Format/Design the Webpage |
|
| Figure 2.3. Snippet of Final Outcome |
|
| Figure 3.1. Layout Design in AI |
Link to Chosen Webpage to Replicate: https://www.statecreative.com/
As can be seen on the layout most left of Figure 3.1., I replicated the basic layout first. From just a quick visual search, I found that the font they used is Poppins. That made it alot easier for me to replicate. I adjusted the alignments and texts size/weight/colour wherever necessary.
I then moved on to adding images in (see center layout of Figure 3.1.). I got most images from Unsplash and Pexels. The first image (girl in yellow with a laptop) was just from a google search and edited in Photoshop.
In the most right layout, I added in the logos of the brands in the "Featured Projects" section. For this, the logos were rather simple looking, so I just found the most visually similar looking font from my own font collection and added/adjused anything necessary. After all this, I added in the smaller bits of the website such as the menu closed icon, mouse scroll icon, back to top icon and logos at the bottom of the page.
|
| Figure 3.2. JPG of Replicated Landing Page |
 |
| Figure 4.1. CSS Issue faced |
 |
| Figure 4.2. Fixed CSS Code |
I started by doing the basics of HTML and linking our CSS stylesheet like we were taught in class previously. We were taught two ways two methods to create our rows and columns. However, when I tried applying the first method, "float:left", the text would overflow, causing my columns to expand sideways to the whole webpage width, as seen in Figure 4.1..
When I tried using the second method, "display:flex", this issue was not a problem. So, I decided to use everything in that method, as seen in Figure 4.2.. Coding everything else was pretty easy considering it was the same as the previous exercises. This was however a good practise that allowed me to learn how to properly code for designing a webpage.
 |
| Figure 4.5. Snippet of Final Outcome |
FURTHER READING
Duckett, J. (2011) HTML & CSS: Design and Build Websites. John Wiley & Sons, Inc.
Comments
Post a Comment