Day 17: Building the First Webpage

The beginning…

Well my first attempt at making a web page has just started…

Planning Phase…

(1) Planning: “If you don’t know where you are going, you’ll end up someplace else” ~ Yogi Berra

~ Creating a site map helps to define what it was that you are creating and for who. I like making bowties, so I felt that would be the main topic to begin.

~ It identifies your target audience, why people will visit your site, what visitors need from your site as well as what visitors are trying to achieve from your site.

~I created fictional target audience characters to help me identify the target audience based on the following attributes: age, gender, country, urban/ rural, income, level of education, occupation, and marital status.

~Then I came up with a list of why people would visit my site ranging from: bowtie styles, ideas, colors, pairings, news and purchasing.

~ This then led me to asking what would the visitors need from my site: visuals of the bowties, product material, product care, How-To videos, how to pair with outfit and more…

~Finally I tried to identify what would the visitors like to achieve regarding recommendations of bowties for: formal school events, networking dinner, trending fashions and more.

This all led me to needing a navigation bar that had an about tab, gallery tab and contacts tab. Now I was ready to start building the wireframe.

(2) Wireframes are a simple sketch of the key information that needs to go on each page of a website.

~ This helped me to lay the foundation of what the HTML would look like prior to sitting down to write any code.

Lessons Learned…

Although, I am far from being finished I have learned a few lessons along the way.

(1) The site map and wireframes are like your roadmap or your “Yellow Brick Road”, if you will. The planning done helps helps to create a rough visual of where you are going and should save time in development.

(2) Collecting all your images and editing the sizes and formats helps reduce headaches down the road. I must say that I did not do this, and had pictures taking up the entire page prior to adding CSS rules.

(3) Creating individual directories for ‘images’ , ‘css’ , ‘javascript’ and your index.html file helps with organization. I must admit that I started to get annoyed with having to bounce between files to make changes and refresh the page. However, I feel it is for the better.

(4) When using CLI, be meticulous about the spelling of your code. I spent twenty minutes trying to figure out why a figure would not appear on the screen, only to realize that I put an ‘s’ at the end of the file name when identifying the source path.

(5) Learn how to break page down into small chunks…I must admit that I was rushing and did not do this. However, I did start to get frustrated because I was jumping ahead instead of taking it one step at a time. Set milestones and take a few breaks if necessary. I was at the library for four (4) hours. The first one or two was productive learning. The last two were a mix of defeats and small victories.

(6) CSS has a great impact on the aesthetics of a site and there are many options to choose from…This at times feels daunting.

Things to Improve…

(1) I need to find a way to separate the ‘about’ section of the page from the ‘gallery’ section. The gallery pictures are invading its space.

(2) I may need to step away from the site being fully responsive and stick to fixed for the moment.

(3) Adding a border around the images and using the ‘float’ left property should make the images appear more professional.

(4) Need to learn how to embed the google maps image of the location.

(5) Much more…But this is the start.

Show your support

Clapping shows how much you appreciated Keith Brooks’s story.