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/