The task was to refactor the code of a pre-existing webpage. This meant changing the source code from div elements to to semantic HTML elements, that the HTML elements are structured logically and not necessarily dictated by the css file, that the icon and image have alt attributes, the headings fall in sequential order, and the title element is given a unique title.
Additionally, code improvements required that I make the links function correctly, the css properties and selectors were consolidated and set to match the HTML structure, and that comments were provided throughout the css file.
Below is a copy and paste of the original readme file, for grading purposes:
-
GIVEN a webpage meets accessibility standards WHEN I view the source code THEN I find semantic HTML elements WHEN I view the structure of the HTML elements THEN I find that the elements follow a logical structure independent of styling and positioning WHEN I view the icon and image elements THEN I find accessible alt attributes WHEN I view the heading attributes THEN they fall in sequential order WHEN I view the title element THEN I find a concise, descriptive title
-
Application's links all function correctly.
-
Application's CSS selectors and properties are consolidated and organized to follow semantic structure.
-
Application's CSS file is properly commented.
-
Application deployed at live URL.
-
Application loads with no errors.
-
Application GitHub URL submitted.
-
GitHub repository contains application code.
- Application resembles mock-up provided in the Challenge instructions (at least 90%).
-
Repository has a unique name.
-
Repository follows best practices for file structure and naming conventions.
-
Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.
-
Repository contains multiple descriptive commit messages.
-
Repository contains quality README file with description, screenshot, and link to deployed application.
I found this exercise to be challenging partly because I felt I had focused too much on making things keyboard focusable and other things that were not requirements. I think I read too deep into the requirements, panicked, and then started to make a lot of changes. I learned a lot about classes and structure to both HTML and CSS. I feel uncomfortable, but not like I am drowning. There is definite room for improvement.
In regards to making changes, the comments originally started out being made for each change I made to the files. This got out of hand, especially as I started to consolidate the CSS file. Still unsure about about what exactly I should be providing as a comment. I think I have taken for granted how much time I have spent on this code that most of the elements/properties seem self evident, but if I were to give this a couple of months, I may need to take more time to understand what is going on in each line.
Changing the HTML elements to semantic language was something I did not feel I partically struggled with. I was able to find a cheatsheet online and used that to fill in all the div elements. My concern is that I may have used these elements liberally and that in order to diversify my code so that I could read particular sections as I made updates. Looking back, I believe I could reduce this variety of elements by using classes to specify my changes.
The CSS portion is something that I put a lot of time into. I was trying to figure out how they all related to each other and in the process, ended up tinkering with things that I think could have been left to themselves. I guarantee there are lines of code that do not need to be there and as we move along in the course, I plan to revisit and update. I did not grasp the various displays as well as I think I should. The difference between inline, block, etc. originally I thought would block together like puzzle pieces. Instead I found myself making many edits with widths, heights, alignment, and so forth to fix the layout and ultimately has shifted a lot of the blocks on the browser to not mirror the provided image ideally. I also found myself spending a lot of time going back and forth between my two monitors as well as the browser with and without the inspect window, to see if the changes that I made adjusted between these updates. This was probably where most of my time went to.
Classes were something that when I did an independent dive into, I started to feel very comfortable with. Treating these as their own templates for each section of the webpage allowed me to organize and adjust my code more freely. I was told in class to avoid ids in CSS but I found using ids as the only way to fix my links in HTML so I used them to meet part of the acceptance criteria.
Lessons learned has mainly gone into asking more questions during office hours. I took for granted what I would take to be the criteria for an exercise and that pushed me to make more changes than I think were necessary. I believe I spent more time trying to debug changes that I had made in the CSS file than should have been required. I think a chunk of this is that this is the first assignment and that has contributed to nerves. I understand that this was the assignment after our first week, and we have not covered everything that goes into CSS so to expect perfection out of the gate is unfair on my part. I have definitely grown tired of looking at the same code over the last week and need to focus on new content and new assignments.
Below are the images from my browser at 100% of the header, body, and footer.
https://1-those-jacks.github.io/01-challenge-html-css-git-code-refactor-repo/