Project 4 OpenClassrooms ➡ Live Demo
Screenshots ➡ Click Here
Google Lighthouse ➡ Click Here
Your friend Mike is a freelance web designer who lives in Atlanta. Many local shops have outdated websites, so he approached a few and landed his first clients. But now he would like potential customers to find him when they Google for local freelance web designers to hire.
With your new understanding of quality web development, you realize that his current portfolio website is not optimized for SEO and can be improved with better keyword content, structure, and speed optimization. You also suspect that some users with disabilities will encounter obstacles with his website, posing accessibility issues.
After discussing these concerns with Mike, you receive the following email:
From: Mike To: Me Subject: Website optimization
Hi!
As promised, here are my website files for further analysis.
Thanks again for bringing those issues to my attention. I definitely want this site to reach as many people as possible. It sounds like it would be worthwhile to do a thorough audit of the SEO, performance and accessibility. Please use the attached template to make sure we’re on the same page with the level of detail I’m hoping for.
For the SEO, I want to maximize the odds that my website appears on the first page of search engine results when someone searches “freelance web designer Atlanta.” I have also heard good things about Google’s Lighthouse tool for analyzing speed and performance and would love some insight from it as well.
It's also important for me to know that my website is accessible to everyone. I have friends who are visually impaired and use screen readers, so I have heard firsthand on how difficult it can be for them to navigate websites. I assume there’s a set of widely-recognized standards, but I haven’t looked into that yet. I’ve been told this mobile accessibility checklist is reliable, I would recommend to respect it.
Before you optimize the website itself, could you please document each of your recommendations? I’ll want to be able to track and understand each of the changes. It would be great if you could walk me through them when you’re finished. Then I’ll feel confident in maintaining the website on my own, and this will definitely help me improve my services to my own clients in the future.
Let’s go with the price you quoted me, and we’ll touch base next week to go over your finished work.
Cheers, Mike
Attachments:
- Audit report template
With access to the website files, you’re ready to get started. You decide to proceed as follows:
- Audit the existing website by identifying relevant SEO and accessibility issues, noting an explanation and a credible reference (documentation, research paper, journal…) for each one. Your audit will include a selection of at least 10 actions to take to improve the website’s accessibility and/or SEO (including size and speed).
- Apply your recommendations to the code and submit the full source code of the improved website. The W3C HTML and CSS validator should not reveal any errors.
- Demonstrate that your adjustments have improved the website by providing a before-and-after comparison of the results from Google’s Lighthouse tool, accounting for all action taken to optimize the website. Time to dive in!
- An audit report using the provided template, including a selection of 10 SEO recommended actions (checked in the column “Action recommended”)
- The link to a public Git repo with the full source code for the improved website.
- An optimization report including a before-and-after comparison of the results from Google’s Lighthouse tool, accounting for all actions taken to optimize the website.
You'll do an oral presentation of your project with an assessor in order to imitate real-life conditions. Your assessor in this case will play the role of the client (your friend, Mike). Your evaluation session will proceed as follows:
- Presentation of deliverables (15 minutes)
- Present your audit and actions taken, justifying each of your decisions.
- Discussion (10 minutes)
- Playing the role of client, the assessor will ask you questions about your methodology and your deliverables.
The assessor will challenge your decisions, so be prepared to defend your work. At the end of the session, the assessor will stop playing the role of the client so that you can debrief together.
⚒ Write current, maintainable code in HTML & CSS
⚒ Ensure the accessibility of a website according to WCAG2.0
⚒ Analyze the search engine performance of a website
⚒ Research web development best practices
⚒ Optimize the size and speed of a website
