Module 1 Challenge ⭐
01 HTML CSS Git: Code Refactor
Download your starter code for module 1 challenge
For this Challenge and unzip the zip file.
Video Speed Run
if you get stuck
📺 Module 01 Challenge Video Walkthrough 🏃♀️🏃
| Module | Mac 🍎 | Duration | Window 🖼️ | Duration |
|---|---|---|---|---|
| 01 | Video 📺 | 53:10 ⏲️ | Video 📺 | 46:16 ⏲️ |
Objective 🎯
Your Task
Note: Be sure to review the Challenge Guide and the Good README Guide before you start working on this assignment!
This week your challenge is an on-the-job ticket, which means you’ll begin with starter code that you need to modify. This week’s challenge involves a very important aspect of web development: accessibility.
One of the most common tasks for front-end and junior developers is to take existing code and refactor it (recall that to refactor code is to improve it without changing what it does) to meet a certain set of standards or implement a new technology. In this challenge, a marketing agency has hired you to refactor an existing site to make it more accessible.
Web accessibility is an increasingly important consideration for businesses. It ensures that people with disabilities can access a website using assistive technologies such as video captions, screen readers, and braille keyboards. Making a website accessible is also good for business for many reasons, one of them being that accessible sites are better positioned in search engines like Google. It also helps companies avoid litigation that can occur when people with disabilities cannot access their website.
Even though accessibility is a broad topic that can include complex requirements, your tech lead has given you a small list of specific criteria to satisfy the project. These criteria are documented below in the Acceptance Criteria.
Important: An important rule to follow when working with someone else’s code is the Scout Rule, which recommends that you always leave the code a little cleaner than when you found it.
To impress clients, you should always go the extra mile and improve the codebase for long-term sustainability. For example, make sure that all links are functioning correctly. Also, rework the CSS to make it more efficient by consolidating CSS selectors and properties, organizing them to follow the semantic structure of the HTML elements, and including comments before each element or section of the page.
Are you ready to jump in? Here are this week’s challenge requirements:
User Story
AS A marketing agency
I WANT a codebase that follows accessibility standards
SO THAT our own site is optimized for search engines
Acceptance Criteria
Your website must meet accessibility standards. You can achieve this completing the following:
- Semantic HTML elements can be found throughout the source code
- HTML elements follow a logical structure independent of styling and positioning
- Image and icon elements contain accessible
altattributes - Heading attributes fall in sequential order
- Title elements contain a concise, descriptive title
Resources:
Mock-Up
The following image shows the web application’s appearance and functionality:
Note: This layout is designed for desktop viewing, so you may notice that some of the elements don’t look like the mock-up at a resolution smaller than 768px. Eventually you’ll learn how to make elements responsive so that your web application is optimized for any screen size.
Getting Started
Follow these instructions to create your project and deploy it to GitHub Pages:
- Download your starter code for this Challenge and unzip the zip file.
Create a new repository on your GitHub account and clone it to your computer.
Add the starter code to the new repo on your computer and work through the Challenge.
When you’re ready to deploy, use the
git add,git commit, andgit pushcommands to save and push your code to your GitHub repository.Navigate to your GitHub repository in the browser and then select the Settings tab on the right side of the page.
On the Settings page, scroll down to the GitHub Pages section. Then, in the section labeled Source, select the main branch as your source.
Navigate to
and you will find that your new webpage has gone live! For example, if your GitHub username is “lernantino” and the project is “css-demo-site”, then your URL would be .
You can also refer to this YouTube video on enabling GitHub Pages for more guidance.
Important: It might take a few minutes for GitHub pages to display your site correctly. If your project does not deploy or display correctly, check that all file paths in your application are relative and use the right casing. GitHub is case-sensitive, an inccorect capital or lowercase letter could cause problems in deployment.
Be sure to add, commit, and push your work to see the most up-to-date version of your app!
Requirements
This challenge is assessed on the following criteria:
Technical Acceptance Criteria: 40%
Satisfies all of the above 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.
Deployment: 32%
Application deployed at live URL.
Application loads with no errors.
Application GitHub URL submitted.
GitHub repository that contains application code.
Application Quality: 15%
- Application resembles (at least 90%) screenshots provided in the challenge instructions.
Repository Quality: 13%
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.
Review
You are required to submit the following for review:
The URL of the deployed application.
The URL of the GitHub repository. Give the repository a unique name and include a README describing the project.