HTML
Wireframe and Design
- Wireframe is what UX designers use to plan out the layout for a website. It is very basic and black/white
- ex of wireframes-
- tools for wire framing:
- Pen and paper (lol)
- UXpin
- InVision
- Wireframe.cc
- Steps to make a wireframe:
- do your research
- prepare the reaserch so it can be referenced quickly
- Have the flow mapped out
- Draft, dopnt draw. Sketch, dont illustrate
- dont worry about making the wireframe pretty. that comes later
- think about the layout only
- add some detail and get testing
- add detail in the way youd read the screen, left to right
- make sure its simple and easy to read/navigate
- build trust
- Start turning your wireframes into prototypes
Mozilla HTML basics
- opening and closing tags><
- elements go in tags p
- attributes go inside of the tags on an element i.e. “class=”
- nested elements < strong>
- empty elements have no closer i.e. < img>
- Atom makes setting up HTML docs super easy. All you have to do is label it .html and put html into the doc and it builds the structure for you
Semantics
- refers to the meaning of a code or the “role” of it
- < h1> for example gives the text it holds meaning (header)
- helps search engines understand content
- helps screen readers for accesibility
- helps a developer understand the code better than endles levels of divs
- examples
- article
- aside
- details
- figcaption
- figure
- footer
- header
- main
- mark
- nav
- section
- summary
- time