Objectives
Our assignment was to refractor the existing webpage code-for Horiseon-that follows accessibility standards so that their site site is optimized for search engines.
Some of the requirements were:
- code refractoring non-semantic HTML elements to semantic HTML elements
- adding a title element is concise and descriptive
- all image elements to have alt attributes
- heading attributes are in in sequential order
- make sure that all links are functioning correctly
- rework the CSS to make it more efficient by consolidating CSS selectors and properties
- organizing CSS to follow the semantic structure of the HTML elements
- including comments before each element or section of the page
Reflection
This assignment was quite challenging as I had some difficulty from beginning. First, understanding the directions took me longer than I expected as it felt like the directions were a little vague. So I started out by refactoring the code that I immediately knew. After I referenced the following website through out the whole assignments: https://www.freecodecamp.org/news/semantic-html5-elements/ https://www.w3schools.com/html/html5_semantic_elements.asp
Because I just started coding-literally-three days ago, one of the hardest challenges was troubleshooting. For example, when I changed one of the div tags to a nav tag in the header, I did not change the css respectively causing some bugs. It wasn't until I looked at the css I realized my mistake. From that I learned that I should constantly review both the html and css.
Overall, I learned two main things I've learned in this exercise was not only to practice my html and css but also to finding different ways to overcome my frustrations (usually googling, walking away from computer, or asking the study groups).
Deployed website: https://s2hon.github.io/bcs20-hw1/ Git Repo: https://github.com/s2hon/bcs20-hw1