How To Create Your First Wireframe

What is a wireframe?

when designing for the screen you need to know where all the information is going to go in plain black and white diagrams before building anything with code. Wireframing is a great way of getting to know how a user interacts with your interface, through the positioning of buttons and menus on the diagrams. So Wireframing is a practice used by UX designers which allows them to define and plan the information hierarchy of their design for a website, app, or product. This process focuses on how the designer or client wants the user to process information on a site, based on the user research already performed by the UX design team.

Wireframes from CareerFoundry student Samuel Adaramola:

For the Full article

HTML

Last modified: Feb 19, 2021 HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions. It’s 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

The main parts of our element are as follows:

The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins. The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results. The content: This is the content of the element, which in this case, is just text. The element: The opening tag, the closing tag, and the content together comprise the element.

see the image below:

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?”.)

Some of the benefits from writing semantic markup are as follows:

• Search engines will consider its contents as important keywords to influence the page’s search rankings
• Finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or namespaced classes
• Suggests to the developer the type of data that will be populated
• Semantic naming mirrors proper custom element/component naming
• For Full Article