reading-notes

My reading notes

---

Project maintained by brandomoki Hosted on GitHub Pages — Theme by mattgraham

Day4 HTML

How to create a wireframe

• what is a wire frame? its a basic outline of what you’re creating

• wireframing is a great way to understand how the interface will work

Type’s of wireframing

• hand drawn sketch
• digital wireframe
• keep it simple

Wireframe flow examples

• wireframe > interactive prototype > visual > design
• sketch > code
• sketch > wireframe > hi-def wireframe > visual > code
• sketch > wireframe > visual > code

Tools

• pen paper
• uxpin
• invision

6 steps wireframe

• do your research
• prepare your research
• map out user flow
• draft dont draw. sketch, dont illustrate
• add detail get testing
• wireframes to prototypes

3 key principle

1. clarity
2. confidence
3. simplicity is key

Html basics

Hypertext makrup language

What is html?

html is a markup language that defines the structure of your content.HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.

Anatomy of an html element

1. opening tag <>
2. closing tag </>
3. content <>content</>
4. element all tags and content together

Example html <p>paragraph</p> <h1>heading</h1> <a>anchor</a>

Semantics

In programming, Semantics refers to the meaning of a piece of code — for example “what effect does running that line of JavaScript have?”, or “what purpose or role does that HTML element have” (rather than “what does it look like?”.)

• html semantic elements
• css styling a list li