Structure web pages with HTML

Wireframing and why it is important

Wireframing is important because it helps to outline what you want to do with your project. It shows you how it ebbs and flows before getting stuck in it. It is a way to plan and design all the different aspects of the website/app. It is also a great way to show how the user will be able to interact with the website/app so you know if it will be a smooth experience or not.

Steps to take when 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

   HTML

   • Stands for Hyper Text Markup Language
   • It defines the structure of your language on webpages/apps
   • Use different elements to create how you want the page to look and act
   • Paragraph element
   • The main parts of the element are:
     • 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.

       Semantics

   • Is the meaning of a piece of code
   • Meaning “what purpose or role does that HTML element have” (rather than “what does it look like?”.)
   • There are different semantics in HTML, CSS, and Javascript