benjaminwilson13 / pixelperfectclone

Pixel Perfect Clone Long Practice

As a developer, there will be times when someone will ask you to create a new web page based on a designer-created render showing exactly what the page must look like. For interviews, you may be asked to do this or replicate an exact copy of an existing web page. You should have the tools and knowledge to be able to create a web page that looks aesthetically pleasing with multiple CSS effect features on it. At the same time, you must ensure that your homepage is accessible. This is your chance to show off your skill and precision.

Project overview

The objective of this project is to make a copy of a homepage of your choosing. You can either pick a homepage of a website you wish to copy or choose from a list we have provided. Use what you've learned about wireframes, accessibility, HTML, and CSS to apply styles to various elements.

You will accomplish this goal through completing the following phases:

• Phase 0: Planning and Setup
• Phase 1: Create the Clone
• Phase 2: Deploy the Project
• Phase 3: Evaluate for Accessibility
• Phase 4: Refactor the Clone
• Phase 5: Re-Deploy the Project
• Phase 6: Re-Evaluate for Accessibility
• BONUS Phase 7: Evaluate the Original Website

If you run into any trouble during this project, check the Troubleshooting Notes at the bottom of this README file.

Phase 0: Planning and Setup

Choose a homepage to clone. If you are unsure of which you would like to work with, consider choosing from this list:

• Medium
• Yelp
• Genius
• Flickr
• Hipcamp
• Wufoo

Your goal is to try to make as close to a pixel-perfect copy as possible with all of the CSS features that are presented on their homepage.

Make sure you identify all of the HTML and CSS elements on the page. For example, if there is a hover effect over a button or an image carousel feature on the page, try to replicate that down to the pixel.

Set up a new project in VSCode, with an HTML file and CSS file.

Phase 1: Create the Clone

Based on your planning notes, create your HTML and CSS files. Incorporate all of the HTML elements and any interactions that are present on the original homepage.

Phase 2: Deploy the Project

Deploy your clone project, following the instructions in the homework reading.

Phase 3: Evaluate for Accessibility

Once your clone homepage is successfully deployed, navigate to the Accessibility Checker tool.

Type the URL for your deployed clone homepage into the Accessibility Checker.

Read and analyze the results from the Accessibility Check.

Is your website accessible and compliant?

• If your clone is compliant, look at any secondary issues. What can be done to improve the accessibility of your clone?
• If your clone is NOT compliant, make a plan to address all urgent issues first. Then, consider whether you can make improvements to any secondary issues that come up in the results.

Phase 4: Refactor the Clone

Based on the results of phase 3, update your HTML and CSS files to improve the accessibility of your clone. As you refactor to improve accessibility, try to keep the site as pixel-perfect as possible, unless doing so creates an accessibility red flag.

Phase 5: Re-Deploy the Project

Re-deploy your updated clone project, following the instructions in the homework reading.

Phase 6: Re-Evaluate for Accessibility

Navigate to the Accessibility Checker tool a second time.

Type the URL for your updated deployed clone homepage into the Accessibility Checker.

Read and analyze the results from the Accessibility Check.

• Were you able to improve the accessibility of your site?
• What was improved? Where is there more room for improvement?
• Is there anything on the original site, that when cloned perfectly, creates an accessibility red flag?

BONUS Phase 7: Evaluate the Original Website

If time allows, run the oiginal website that you chose to clone through the Accessibility Checker.

• What are the similarities between your clone's results, and the original website's results?
• What are the differences between your clone's results, and the original website's results?
• In what ways does the original website have room for improvement, in terms of accessibility?
• In what ways does your clone still have room for improvement, in terms of accessibility?

If any time remains, continue making improvements to your clone project in order to make it as pixel-perfect and accessible as possible.

Troubleshooting Notes

The recommended Accessibility Checker limits how many websites you can scan in a day. If you reach your daily limit, you can use one of the other accessibility tools below to gather similar information about your website.

• AChecker
• WAVE

If you have trouble deploying your clone, you can use the AChecker tool to scan your code for accessibility. This tool allows you to upload an HTML file or copy / paste HTML code instead of using the URL of a deployed site.