reading-notes

HTML & Webpage Structure

Wireframing & Design

HTML Basics

Semantics

Wireframing & Design

What is a wireframe?

Wireframing is a practice used by UX designers to sketch out the structure of a webpage before coding it
The purpose is to plan the information hierarchy of the page and how the owner wants the information displayed

Wireframing Example

Steps to Make a Wireframe

Do your research
- Understand who your audience is
- Create user personas
- Define use cases
- Compile this info with industry research
Prepare your research for quick reference
- Document your research in a way such that it is easy to retrieve information and notes during the design process
Map your user flow
- How will the user move through the website?
- Where do you want to ultimately guide the user to?
- How can you best channel them to the desired end point?
Draft, don’t draw. Sketch, don’t illustrate
- The wireframe is on outline, not the end product
- Don’t bog yourself down in the details too early
- Define your work in chunks or blocks
- Questions to ask your self while sketching:
  - How can you organize the content to support your users’ goals?
  - Which information should be most prominent? Where should your main message go? What should the user see first when arriving at the page?
  - What will the user expect to see on certain areas of the page?
  - Which buttons or touch points does the user need to complete the desired actions?
Add some detail and get testing
- Start adding in some detail, top to bottom, left to right
- Conduct an initial test batch of code and send to the owner/users for feedback
Start turning your wireframes into prototypes
- Begin iterating on prototypes and seek feedback frequently

HTML Basics

What is HTML?

HyperText Markup Language
Used to structure a web page and its content
Consists of a series of elements that you use to enclose, or wrap, different parts of the content to make it appear or act a certain way

Anatomy of an HTML Element

HTML Element

The opening tag designates the element type
The closing tag designates where the effect of the element ends and consists of the forward slash /
Content is what will be affected by the HTML tags
The element is everything put together

Elements can also have attributes that contain extra information about the element that will not appear as content

Attribute Example

Anatomy of an HTML Document

Always starts with <!DOCTYPE html>
All html content is contained between <html> </html> tags
A header <head></head> tag acts as a container for things that you want to include on the HTML page that are not the content you display
A title <title></title> tag sets the title of your page, which will be displayed in the browser tag
A <body></body> tag contains all the content that you want to show to web users when they visit the page

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

Basic HTML Markups

Element	Syntax
Headings	`<h#></h#>`
Paragraph	`<p></p>`
Unstructured List	`<ul></ul>`
Links	`<a href="url">Text</a>`
Images	`<img src="soruce" alt="Alt Text" />`

Semantics

In programming, Semantics refers to the meaning of a piece of code
- “What effect does running that line of JavaScript have?”
- “What purpose or role does that HTML element have”
- Focus is on “what is this”, rather than “what does it look like?”