Correcting Poorly Written Code 

I started this unit with fixing the poorly written HTML code. I tried to find as many errors as I could without using any help from online tools. I quickly solved easy to find errors such as: missing closing tags, a broken image link, missing quotations after an equal sign, and correcting a few tags to lower case. The list and table were also messes, disorganized and missing tags. Next, I did a little research on today's standards and found that HTML5 is now widely accept. I compared sample1.html and sample2.html to an HTML5 example on W3Schools and corrected the DOCTYPE and tags within the head of the html code. Once I reorganized the list to what I thought it should be, I used the W3C Markup Validation Service (https://validator.w3.org) and found out that UL tags should no longer be nested within each other (use CSS instead). Border tags within a table are now deprecated, also in favour of CSS. Sample1 and Sample2 updated to HTML5 standards can be viewed as part of my submission files. 

The Problem 

Using the HTML5 base, I created 4 pages as the basic HTML structure of my website: index.html, gettingstarted.html, communities.html, and feedback.html. I will add more pages as I progress through the units learning new functionalities. I also created a logo and a few graphics using GIMP (https://www.gimp.org), a free and open source image editor. I watched a few YouTube videos in order the learn how to use it. I was able to catch on fast. I wasted a little too much time trying to figure out how to design a layout for my page. I remember building a page in high school by using tables for the layout, but this is now frowned upon. Layout seems to be mostly achieved using CSS which is coming in unit 3. Therefore, I should have skipped this part and moved on. Writing the HTML for this unit was the easy part, since it simply needed to be clean and well structed with no formatting. The longer process was researching and gathering the content to include.  

Mapping Activities

4 pages created: 

• A home page index.html to describe the website and to display news. 
• A guide on how to buy a snowboard was created in gettingstarted.html to meet the needs of Ester shopping for her grandson.  
• A list of popular online communities using unordered lists was created in communities.html for Jessica who is looking to join a club and make new friends. 
• A feedback page feedback.html so users can share their experience with me. The feedback form is listed my plans further requirements. 

Images: 

• I created a logo included on each of my pages.  
• I created and added to gettingstarted.html, images to describe the different types of cambers for snowboard. 
• I replaced the broken image in sample1.html with an image I found on Unsplash (https://unsplash.com), a website that offers images for use free of charge. I included a reference to the photographer. 

• Several hyperlinks to external sites and lists are included in communities.html to meet Jessica’s needs to find social clubs. 

I believe I did well at ensuring each page communicates clear content a purpose. I have also proofread and ensured the content flowed well for the reader. The pages contain no deprecated code. I have included additional tags such as and . I believe the content should be accessible through different browsers as far as basic HTML can go. All images include alt text. Pages and menus are simple and easy to navigate. To keep the project folders clean and structured, all images were placed in the “images/” folder. 

Unit 2 website: http://student.athabascau.ca/~michelde10/unit2/

Corrected poorly written code: http://student.athabascau.ca/~michelde10/unit2/sample1.html