ixd301 week 04 reflection and tasks

Week 04

Back to basics

Html – written in lowercase

Html tags – mostly in pairs

Web browsers- this displays the website, the html

Basic document setup

<!DOCTYPE html>

<html>

<body>

</body>

Html headings

<h1> </h>

Html paragraph

<p> this is a paragraph </p>

Html links

<a href=https://www.w3schools,com>this is a link</a>

Html images

<img src=”w3schools.jpeg”alt=”w3schools.com”

Width=”104” height=”142”>

Html buttons

<button>click me</button>

Html lists

<ul> (unlisted) <ol> (ordered list)

</li>coffee</li>

</li>tea</li>

</li>sugar</li>

</ul>

Horizontal rule

<hr>

Note – When naming things, no spaces, stick to lowercase

PNG – good for icons

Besides this you will probably use jpg format – good for images

SVG images – won’t lose quality when scaling up or down

Image dimensions

Make content optimised for web – resize

Text alternatives

Summary – websites are just html. Simple html works well

 

CSS Stylesheets

‘Rule’

 

body{

color: #FF0000

}

 

The above breaks down as,

Selector: {

Property: Color

Value: #FF0000 (accepts hexadecimal values)

 

<link rel=’stylesheet’>

The browser goes through HTML and finds the CSS stylesheet

 

Setting multiple properties: e.g. the body tag for the whole page can define colours, borders, backgrounds and setting different elements.

Different units of measurement: px and em.

More styles

Underlines are automatically done by

a{

text-decoration: none;

}

 

Text alignment: Different fonts, weights and styles

Sectioning elements: <nav>, <aside>, <article>, <section>, <body>

CSS Box Model

Content, Padding, Border & Margin (in this order from inside to out)

 

p {

padding-top: 20px;

padding-top: 60px;

padding-top: 100px;

}

 

Generic Boxes (Divs)

<div>button</div>

CSS Selectors

ID Selectors are another alternative to class selectors. They work pretty much the same way, except you can only have one element with the same ID per page.

 

Webflow Walkthrough

Dashboard – New page settings

Add, for elements, among other things

Icons will go in Assets/Images

You can only copy the Nav links at the very start

typefaces, these can be downloaded from Google Fonts, use of custom fonts, Adobe Fonts with account key, and you can change font size (scale) in Nav menu.

The section can’t be wider than 1440, max width. 1440 is an HD size desktop: although it can be as wide or narrow as you want 1440 is the general recommendation.

It’s okay to change margin and padding vertically: but doing it left to right means it breaks down when you move to tablet view – very important

You can add more padding and spacing to get the balance.

Have a good clean URL, if you want to use the Webflow domain that’s fine but give it the proper project name.

Your footer – you can go to ‘add’ or ‘layout’.

Everything is inside the containers to keep it organised.

You can add columns for text – remember, no-one wants full-width of your page.

The problem with ‘Lorem Ipsum’ is that not every paragraph will be identical in height and size.

If you want, full width (300x300px) can be cropped in Photoshop.

 

Pad and space as is right for your content; add a grid inside the container so it doesn’t go the full width of the screen: the grid will only grow as big as the container. If you select your grid, you can move things around and change alignment. You can change the grid. e.g., 2×2 to 3×2, widening.

 

 

Summary/Reflection

I found this week a good recap on html/CSS, Even though I’m building my site with webflow, it is still good for me to have knowledge on this as it will help me understand the designing and elements of the webflow designer.

 

This week’s tasks

  • START: Begin the process of building your website whether that’s with HTML/CSS or Webflow – remember to apply for student discount
  • Homepage and case study completed for next week, based off your high-res mock-ups.

Process Shots

 

Link to portfolio site – https://leonie-smyth.webflow.io/

Leave a Reply

Your email address will not be published. Required fields are marked *