Code Fellows Reading Notes

Building a Site

HTML stands for hypertext markup language and is the language used to create web pages. However, before you start building a site, you’ll want to have a plan.

Wireframing

Wireframing is a great practice to use when planning your site. The goal of wireframing is to build the basic structure and flow of your site, like a rough draft. Don’t put too much effort into the content and style, but do consider a few of the following points:

1. Research the content of your site so you know who you user is, and how you’d like to present your content.
2. Consolidate your research into an easy to reference guide you can refer to as needed.
3. Map out the flow of your site so that you have an idea of the key pages and elements needed for your wireframe.
4. Make your wireframe an outline of the important pieces, you will add the finer details when you build your site.
5. Once you have the basic structure complete, fill in other necessary details that help to bring your site together.
6. Use your wireframe to build a prototype, and test out your site.

If you’re not sure if your wireframe is complete, consider these goals:

• Clarity: Can a user clearly tell the purpose of your site, and how to use it?
• Confidence: Is your site organized & intuitive, or does unpredictability lead to confused users?
• Simplicity: Can a user easily locate needed content and interactions, or they get distracted by cluttered pages?

HTML

Once your wireframing is done, you’re ready to bust out the HTML!

Tags

HTML is made up of elements that are defined by < tags >. Most, but not all elements, have an < opening > and </ closing > tag. Tags consist of an < elementName attributes=”setting” > content </ elementName >

• elementName: Defines the type of tag
• attributes: modify the settings of the tag
• content: what the tag presents

The structure and content of a site is built using these tags. Styling will be added later through cascading style sheets.

Semantic HTML

Semantic coding is used to add clarity of purpose to what you build. Semantic tags tell you their purpose before adding content; header tags make a header, nav tags point you to navigation elements, etc. This makes it easier for you, or a collaborator, to understand what’s happening in your code, allows search engines to understand what’s contained in your site, and aids in navigation with accessibility tools like screen readers.