Skip to content

read-03.md

Latest commit

 

History

History
71 lines (50 loc) · 3.52 KB

read-03.md

File metadata and controls

71 lines (50 loc) · 3.52 KB

In this page there is a summary for 3 different subjects in structuring HTML...

The Definitive Guide: How To Create Your First Wireframe:

Wireframing is a practice allows you to define and plan the information hierarchy of the design for a website, app, or product.

Without the distractions of colors, typeface choices or text, wireframing lets you plan the layout and interaction of your interface. The importance of Wireframing with examples in this picture: Wireframing

Six steps for making Wireframing:

  1. Do your research
  2. Prepare your research for quick reference
  3. Make sure you have your user flow mapped out
  4. Draft, don’t draw. Sketch, don’t illustrate
  5. Add some detail and get testing
  6. Start turning your wireframes into prototypes

The best 3 onlines tools for Wireframing:

  • UXPin: facilitates building responsive clickable prototypes directly in your browser.

  • InVision: InVision allows you to get feedback straight from your team and users. It’s free

  • Wireframe.cc: create wireframes really quickly within your browser, the online version of pen & paper.

The reference

HTML Basics:

HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content. HTML consists of a series of elements

Main parts:

  1. The opening tag <>
  2. The closing tag </>
  3. The content (the text)
  4. the element (all the parts together)

also can have attribute like this: image Here, class is the attribute name and editor-note is the attribute value.

You can put elements inside other elements too — this is called nesting.

To structure your website you will use HTML grumpy.

The structure of HTML:

HTML structure

Semantics

In programming, Semantics refers to the meaning of a piece of code

Semantics in JavaScript

In JavaScript, consider a function that takes a string parameter, and returns an

  • element with that string as its textContent. Would you need to look at the code to understand what the function did if it was called build('Peach'), or createLiWithContent('Peach')?

    Semantics in CSS

    In CSS, consider styling a list with li elements representing different types of fruits. Would you know what part of the DOM is being selected with div > ul > li, or .fruits__item?

    ####Semantics in HTML In HTML, for example, the

    element is a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."

    Semantic

    benefits of writing semantic:

    • Search engines will consider its contents as important keywords to influence the page's search rankings.
    • Screen readers can use it as a signpost to help visually impaired users navigate a page.
    • 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
    •