reading-notes
Reading notes about code for my future reference.
Structuring Pages with HTML
What is wireframing?
Its a practice the UX designers use to plan how their website, app, or product will turn out.
Its utilizes basic designs and structures to convey a format!
You must emphasize in words what a user should click rather than relying that some one will know what you made!
Wireframe examples
You can draw out a wireframe either by hand or by switching it out by using a program. Everyone has their preferences.
-Use something that can easily be reformatted and redrawn!
-You can also Switch to software if you’re drawing it by hand at first!
Different Possible Processes for Design!
Wireframe > Interactive Prototype > Visual > Design Sketch > Code Sketch > Wireframe > Hi-Def Wireframe > Visual > Code Sketch > Wireframe > Visual > Code
Different Techniques!
Pen and Paper
Or UX tools! (Here are some!)
Wireframe Making Thought Process
Research
Research what you want to make, you target audience, your products, and event trends that could work out!
Ensure your web has a flow!
Making sure your website has a good flow is important to make sure people don’t get lost on your page and can navigate on their own!
Add Detail little by little!
Don’t fully furnish it but make it work out enough that it’s a usable website! Prototype it out! This is where the website begins to come to life little by little. Eventually once you have the building blocks established than you can add the design!
Now onto the Foundation! HTML
HTML consists of words in brackets or tags!
The opening tag starts the content!
The closing tag closes out the content to let HTML know when to stop!
CONTENT Is just the text that goes inside the tags!
The ELEMENT Is literally the name of this string of letters!
Nested Elements!
So Nested Elements are basically just content that provide a function to an already existing element!
My cat is very grumpy.
Empty Elements!
Elements that have no content are empty elements! Example Below
<Img src= “Images/firefx-icon.png” alt =”My Test image>
Document anatomy!
< !DOCTYPE html >
Required preamble that states this file will be in html!
< html >
Is the element that wraps all content around the page!
< title >
Allows you to set a title for your page! It also creates the and sets the title on the browser.
Images can be added via this text!
<Img src= “Images/firefx-icon.png” alt =”My Test image>
Markup Text
Literally the part of HTML itself which consists of Headings which can be numbered h1-h6!
Paragraphs make up regular text in most websites!
< p > PARAGRAPH < p >
Lists
There are two diferent things that exist
Unordered lists and Ordered lists!
< UL > Unordered
< ol > ordered
Items within these designated by
< li >