Project #4: Web Developer Training OpenClassrooms
La Panthère - La Panthère before optimization - README FR
- Project Description
- Technologies
- Fictional Scenario
- Assessed Skills
- 14 Optimization Recommendations
- Built With
- Author
My mission was to improve the SEO of La Panthère agency's website by working on the following points:
- Analysis of the current SEO state of the provided site:
- Select at least 10 recommendations to improve the site
- Improvement of the site's SEO:
- Apply the recommendations to the content and its source code
- Provide a comparative optimization report:
- Measure the loading speed before and after optimizing the site
- HTML
- CSS
Our web design agency, La Panthère, had a very successful first year, but today we are losing momentum. Competition is fierce, and our digital strategy is not up to par. When searching for "Web design company Lyon," we notice that our site appears on the second page. An update to both the SEO and the site itself has been requested by Sophie, the founder.
- 📝 Write maintainable HTML and CSS code
- 📈 Optimize the SEO of a website
- 🚀 Optimize the size and speed of a website
- ♿ Ensure the accessibility of a website
- 📚 Conduct research on best practices in web development
SEO:
- Add content to the empty
<meta description>tag - Add a title to the empty
<title>tag - Add a
<meta robots>tag - Restructure the order of hn headings by adding an
<h2>tag
Accessibility:
- Increase the contrast between text and background
- Adapt "alt" text to the content of images
- Increase font size
- Add text to social media links
- Modify redundant links
- Link
<input>elements to<label>elements in the form - Add focus to clickable elements (links, buttons, forms)
Performance:
- Optimize images in terms of format and size and apply width and height
- Minify certain CSS and JavaScript files
- Add the property and value "font-display: swap" to the @font-face block
- Visual Studio Code
- W3C Validator
- Lighthouse (Performance, Accessibility, SEO)
- Pagespeed (Performance, Accessibility, SEO)
- Wave (Accessibility)
- Colour Contrast Analyzer
- Pingdom (For site and file/folder size)
- Dev tool Google Chrome
- GitHub
- GitHub Pages
Projet #4 : Formation Développeur Web OpenClassrooms
- Description du Projet
- Technologies
- Scénario Fictif
- Compétences Évaluées
- 14 Recommendations d'Optimisation
- Développé Avec
- Auteur
Ma mission était d'améliorer le référencement du site de l'agence La Panthère en travaillant les points suivants:
- Analyser de l’état actuel de SEO du site fourni:
- Sélectionner au moins 10 recommendations pour améliorer le site
- Amélioration du SEO du site:
- Appliquer les recommendations au contenu et à son code source
- Fournir un rapport d'optimisation comparative:
- Mesurer la vitesse de chargement avant et après l'optimisation du site
- HTML
- CSS
Notre agence de web design La Panthère a connu est très bon départ la première année mais aujourd’hui nous sommes en perte de vitesse. La concurrence se fait sentir et notre stratégie digitale n’est pas au point. En tapant « Entreprise de web design Lyon » nous constatons que notre site apparaît en deuxième page. Une mise à jour du SEO et du site à été donc demandé par Sophie la fondatrice.
- 📝 Écrire un code HTML et CSS maintenable
- 📈 Optimiser le référencement d'un site web
- 🚀 Optimiser la taille et la vitesse d’un site web
- ♿ Assurer l'accessibilité d'un site web
- 📚 Réaliser une recherche des bonnes pratiques en développement web
SEO:
- Ajouter du contenu à la balise
<meta description>vide - Ajouter un titre dans la balise
<title>vide - Ajouter une balise
<meta robots> - Restructurer l’ordre des titres hn en ajoutant une balise
<h2>
Accessibilité:
- Augmenter le contraste entre le texte et l’arrière-plan
- Adapter les textes « alt » au contenu des images
- Augmenter la taille de la police
- Ajouter du texte aux liens des réseaux sociaux
- Modifier les liens redondants
- Lier des éléments
<input>à des éléments<label>dans le formulaire - Ajouter le focus aux éléments activables (liens, boutons, formulaire)
Performance:
- Optimiser les images en termes de format et de taille et leur appliquer une largeur et une hauteur
- Minifier certains fichiers CSS et Javascript
- Ajouter les propriété et valeur « font-display : swap » au bloc @font-face
- Visual Studio Code
- Validateur W3C
- Lighthouse (Performance, Accessibilité, SEO)
- Pagespeed (Performance, Accessibilité, SEO)
- Wave (Accessibilité)
- Colour Contrast Analyzer
- Pingdom (Pour la taille du site et des dossiers/fichiers)
- Dev tool Google Chrome
- GitHub
- GitHub Pages