Coding
Notes from lectures
Intro to Brackets
Quick edit - colour picker
<h1> top header
<h2> subheading
<head> important information that the viewer doesn't see
<body> all content in the browser window
<p> paragraph
block elements exist on their own
<em> emphasis in italics
<ul> unordered list
<li> list items
<ol> ordered list, number points
tab to indent
<img has no end tag
src - attribute name
alt - attribute that provides information of an image for screen readers
<a> anchor element makes hyperlinks
href - attribute, set to page
put url in when linking to an external page
New Site:
1. Make a specific folder
2. Make a new document
3. Save document as html file
4. Call it index.html
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
Attach a stylesheet
<head>, <link href = "style" rel="stylesheet" type= "text/css"
no end tag
p{
color: red;
background-color: antique white;
font-family: sans-serif;
width: 400px;
}
rgba (200, 0, 200, 0.8)
a - this allows transparency to change
0.8 - this means 80% transparent
font-family: Helvetica, Arial, sans-serif;
pay attention to capitalisation
"Times new roman"
text-transform: uppercase;
- capitalisation
letter-spacing: 5px;
- tracking
font-weight: bold;
font-style: italic;
CSS Box Model
describes how much space the text takes up on the page
change size of the content area using width and height
use overflow: scroll, to stop text spilling out
- content
- padding
- border
- margin
work outside in, beginning with <div>
margin: 0 auto;
- centered on the page
nested selector
p a {}
text-decoration: none
- removes underline
li a: hover{
background-colour: yellow;
}
images
- positioning moves image around
- float moves text around the image
- clear to override float
Helpful Websites
Adobe Edge Web Fonts
- this allows anyone to see the font, follow the instructions on the website to add code into html and css pages
w3schools
MDM
The State of Interaction Design
Interactivity is not the goal. It is a means to an end.
used
usuable
useful
Responsive design means designing for all devices.
/* comment */ (command + forward slash)
Coding Exercise
Coding the page from Tim's website.
Website
I started having a go at making my illustrations in Adobe Illustrator but I actually prefer to work straight on figma with the pen tool there because I don't have files to transfer and it somehow just takes me less time.
The first image is using an illustration I made in Illustrator, but I didn't know how to change the colour of the trolley so it was black and obviously didn't match. Therefore I re did it in figma using the right colours and the second attempt was much better.
This is my homepage so far. I'm pretty happy with it but my next steps are the contact element at the bottom and I would also like to add a human element to the basil pesto illustration to show someone making it.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.