This topic is important to me because its a the structure of the websites we will be creating and its a good skill to learn.
References : https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/ https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics https://developer.mozilla.org/en-US/docs/Glossary/Semantics
Things such as HTML, plays a key part in structuring your website.
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.
When designing its there to show you where you might want things to go before coding said site.
A good way to know how a user uses your site, through the positioning of buttons and menus on the diagram.
Either can be drawn by hand, or some use software such as Invision and Balsamiq.
Paper drawn - easier to change and more flexible.
Software drawn - More detail orientated.
Each HTML element has an opening tag, closing tag, and the content.
This forms the thing we call an elemenet.
<p>My Cat is very grumpy<p/>
<p> is the opening tag.
</p> is the closing tag.
and the rest in the middle is the content!
Attributes can be applied to elements such as class!
You can put elements into elements, this is called nesting!
Every HTML document has essential anatomy, its important to research what to put in your head when starting a HTML document.
Ex. charset, name, content!
Headings are done similar to Markdown, except its h1 incased in tags!
the P tag is used for paragraphs.
Unordered list is ul!
Ordered list is ol
Semantic elements are a code that is easily identifiable by its tag name. Some like article, footer, header, can be easily read and dicphered.