Please view the .zip file for Unit 2 here: Unit 2 - Google Drive

Critique of Sample Files

The sample HTML files that were provided looked very unorganized. They had some semblance of HTML functionality, but there were some key issues:

• The image tag didn’t include alt tags, which can aid some readers if the page cannot load correctly or have accessibility issues. I improved this by adding alt tags with relevant and/or descriptive titles to help readers.

• The head of the file didn’t include things like metadata and title for the page, which is poor for readability and accessibility. To fix this, I added metadata such as the character set that the website will be dealing with, as well as the title, author and content.

• Unclosed tags, like the H2 tag on line 12, which uses a p tag right after, rendering the tag useless. To be consistent, I ensured that all tags should be followed by their closing, and envelop the correct information within. 

• Big lines of text are written using header tags, making them harder to read. It is more appropriate to use smaller font tags such as p or H4 for items such as the ones on line 12. I ensured to use smaller font tags like these in chronological order to maintain visual hierarchy.

• There are no div or span tags, rendering code almost impossible to style and format independently later on. This didn’t help the maintainability or organization of the file. I nested all relevant elements in a div tag to organize them and lay them out.

• No ids are given to any elements. This makes them hard to identify and organize and style later on. I fixed this by ensuring every div tag has an ID or class tag.

• The file contains no indenting, further adding to readability issues. I formatted each file with an extension called Prettier in VSCode, and also used an auto formatter to move all page content within 100 characters to lay the code out neatly.

Overall, while the file communicates what it needs to, it fails to do so responsibly and in an organized way. It provides unmaintainable code that is extremely hard for someone else to review and develop with later on. 

Work Done For This Unit

This unit allowed me to create the first pages for my website. I downloaded the sample pages and immediately organized all the tags and divs to identify each element individually. Using the site map as a guide, I searched online on how to organize a navigation bar and elements underneath it, since that’s how all the pages in my mockup looked like. As I made the 6 different files for the 6 different frames I outlined in Unit 1, I made sure to use all the items listed such as lists, tables, forms, etc. in the problem definition. I used the guides and references as help, and made sure to keep my code readable and understandable as I went. This included using div tags, ids and class tags, and file indenting. 

The pages I’m making also adhere to the personas in Unit 1, as I make sure that users like recruiters can access Experience information quickly, users like business owners can access the contact information in the Connect section quickly, and users like students can access Resume and Projects quickly. All the needs of my personas are identified in my pages and will help them achieve their goals.

Learning Outcomes

1. When you have completed this unit, you should be able to write well-structured, easily maintained, standards-compliant, accessible HTML code.

   - I believe I have achieved this, as I used references to ensure what the basic standard for HTML code writing is. I used a linter in my VSCode environment to ensure readability of my file through indentation, used the appropriate tags and divs to section my content, and laid out information hierarchically to present information in a readable manner.

   - This code vastly improves on the sample files given through these actions.

   - Additionally, no visual markups such as CSS or in-line styling were used, adhering to only making HTML pages for now.

What Went Well and What Didn’t

I think this unit went very smoothly for me. I was able to systematically create pages from the ground up, building each tag and referencing guides on the best ways to lay them out. For example, I did not know h4 tags existed, but using them helped the visual hierarchy of my textual information on my Experience page. Additionally, I used some metadata in the header of each file that allows for better readability and adaptability over different devices. I’ve been familiar with HTML/CSS/JavaScript (more of TypeScript, actually) for a while now, so most of this unit’s information is not completely new to me, but the references provided helped me learn some new things along the way and keep file formatting and accessibility in mind. I’m satisfied with what I’ve produced, and I’m excited to keep building on this as the project goes on.

References

• I took this course on HTML to refresh myself: https://www.codecademy.com/learn/learn-html 

• I used W3 Schools as a guide to practice and play around with a bunch of HTML elements like forms, tables, etc. with their in-built editor: https://www.w3schools.com/html/

• I also looked through meta tags and their content in the Mozilla wiki: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag