Wireframe and HTML

Wireframe is an important first step when deciding to program a site or application. Think of the wireframe as a storyboard for your website. This gives a barebones look into what your site will offer. How the customers will utilize the technology. Most importantly, its going to give you the first look into how much coding is going to be necessary to complete the task.

(Photo by Kelly Sikkema on Unsplash)

One of the best tools you can use for wireframing is a simple piece of paper and a marker (makes it easier to read from further back). But if you insist on going full digital there are options out there (UxPin, InVision, Wireframe.cc).

Before putting pen(or marker) to paper you should make sure you do research on the product, client, and customers. Putting pertinent data in a cheatsheet can be an easy way to remember key aspects the site/application must have. One you have done the necessary research and have your pertinent data on hand it is time to build out your wireframe. Think of it like a flowchart of a first time user.

Now that your frame is built you can see what aspects you have to code.But what are you going to be doing the actual coding with? One of the first coding languages people learn can actually accomplish many of the tasks needed to build the bares bones of your site.

HTML (aka HyperText Markup Language) helps form the basic structure of your site. Using a series of “elements” they are able to build and control pieces of content within the site. You can control images, text, and some basic formatting of the site itself.

<p>Look at this!</p> vs <p> Look at this! </p>

The left hand side is the input of HTML and the right side is the output or what the customer would see on the site. The series of opening and closing brackets (<p></p>) around the “content” (Look at this!) create an element. This tells the browser to display the content as a message.

• Most html will require both opening and closing brackets. There are some exception to that rule as with images <img src=images/imgname.jpg alt "ImageName">. This code would show the desired image with no need for a </img> closing tag.

The semantics of a code is the meaning of a piece of code. So if you get stuck on a section of coding it can be helpful to ask yourself what it is that this portion is needing to accomplish. It may seem like common sense but when struggling it can be the simple info like the semantics of what you’re trying to accomplish that can get you back on track.

So when we take a bunch of these elements and “nest” or put elements within elements we can see our sites start to take shape. This isn’t going to get your site looking like a million dollars but remember, we’re just forming the bones of the project. The dressing up and making it into the final project is going to take a few more steps. (And a bunch more learning by me)

For now, click here to go back home and give me more time to learn.