My UX Journey (Ongoing)
Inspired by the blog post by Brad Frost.
Levels of design:
- Atoms
- Molecules
- Organisms
- Templates
- Pages
Atoms
Basic building blocks of a page. Atoms are HTML tags, such as a form label, input, or button. Atoms can also include more abstract elements like colour palettes, fonts, or more invisible aspects, such as animations.
ROOT ELEMENT
HTML TAG: Root of an HTML document. Container for all other HTML elements. Contains the lang
attribute, which defines the language of the element’s content and is used to help search engines.
METADATA AND SCRIPTING
HEAD TAG: Container for metadata. Can contain the following elements:
<title>
<style>
<base>
<link>
<meta>
<script>
<noscript>
TITLE TAG: Defines a title for the HTML document in the browser toolbar, favourites, and search engine results.
META TAG: Describes metadata within an HTML document. Metadata is data (information) about data. <meta>
tags always go inside of a <head>
element, and are used to specify:
- character set,
- page description,
- keywords,
- author of the document,
- and viewport settings.
The viewport refers to the visible area of a screen or window, and is used to ensure websites adapt to different screen sizes.
BASE TAG: Specifies the base URL and/or target for all relative URLs in a document. There can only be one single <base>
element in a document, and it must be inside of the <head>
element.