Reading Notes 04
Read
Wireframe and Design
- Hand-drawn sketch wireframe
This style of wireframe is done simply with paper and markers. These are very basic sketches used to give a general idea of the layout.
- Digital Wireframe
There are a lot of software programs you can use as tools for making digital wireframes.
These are both made up of the fundemental shapes to represent the key elements of the web page and they are usually made in black, white, and grey. It is important to keep them as simple as possible because too much detail can be distracting.
Wireframes are usually begun as hand-drawn sketches and then moved to digital wireframes to be more easily shared with other developers.
Mozilla HTML Basics
HTML is a markup language that uses a series of elements to enclose differnet content to change appearance and behavior. The enclosing tags can bold, italicize, hyperlink, and even change font or font size.
This is a visual representation of an HTML element. Images below were taken from this site.
This visual representation is of an attribute in the element. This can be in the form of a class or an id.
More information on HTML basics can be found here:
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
Semantics
In HTML semantics refers solely to what role an element has and not what it looks like. The style is done in CSS and the animations/behaviors are done in Javascript.
Skim
Mozilla HTML Docs
This page offers many resources for HTML basics and advanced use. It is a good place to refer back to when trying to resolve an issue with your HTML code.