HTML CSS Git Challenge: Code Refactor

This is my first weekly challenge for the UCF Coding Boot Camp. The following challenge is expressed in the form of an on-the-job ticket and the focus is on accessibility. I was given starter code with HTML and CSS and a mockup of the website for visual reference.

Table of Contents

1. Challenge
2. Starter Code and Mockup
3. Project Requirements
4. Solution
5. Credits
6. Technology Used
7. License

Challenge

AS A marketing agency I WANT a codebase that follows accessibility standards SO THAT our own site is optimized for search engines.

Guidelines

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 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

Starter Code and Mockup

View The Original Code Here:

• Original CODE

Project Requirements

• Satisfies all of the preceding acceptance criteria plus the following code improvements:
  • 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 that contains application code.
• Application resembles (at least 90%) screenshots provided.
• 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 desciption, screenshot, and link to deployed application.

My Solution

Live URL

https://iitoneloc.github.io/codeRefactor/

View my edited HTML and CSS here:

• Refactored HTML

  • Refactored CSS

  Screenshot of deployed website

Credits

I had no knowledge of HTML, CSS, or any coding language prior to starting the coding boot camp last week. I used the knowledge gained in the online lessons, virtual classes and the following tutorials/resources:

• https://www.setcorrect.com/portfolio/work11/
• https://github.com/noffle/art-of-readme/blob/master/README.md
• https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
• https://www.w3schools.com/css/css_intro.asp
• https://guides.github.com/features/mastering-markdown/

Technology Used

• 
  • 
  • 

License