Voici une description des sites que j'ai réalisés, organisés de façon antichronologique. Chaque projet a eu pour objectif de développer de nouvelles compétences afin de progresser continuellement.
Tous les sites que j'ai réalisés sont accessibles en cliquant sur les images ci-dessous. Et leur code respectif est disponible sur mon GitHub.
1) WordPress:
Définition des objectifs d’un site répondant à des besoins spécifiques. Conception de sa structure en établissant d’abord une arborescence globale, puis en détaillant la disposition des pages à l’aide de wireframes.
| Besoins |
- Créer un portfolio en partageant mes projets.
- Permettre une maintenance et des mises à jour simples (actualisation, ajout de projets...).
|
| Outils utilisés |
- Plugins principaux : elementor, Modal Window, Royal Elementor Addons, Cool Timeline, 3D FlipBook, TranslatePress.
- Ajout de CSS personalisées
- Environnement de travail en local (Logiciel Local)
- Hebergeur et gestionnaire de nom de domaine (PlanetHoster)
|
Site sur lequel vous êtes actuelement.
2) HTML, CSS, JavaScript et Vue.js (avec animations):
Familiarisation avec le framework Vue.js à travers un site complet, composé de plusieurs onglets et options, tout en utilisant le principe d'application web monopage, notamment via le routing.
| Besoins |
- Afficher la mise en page optimale pour chaque page du site en fonction de la taille de l'écran de leur appareil.
- Voir les états au survol de tous les éléments interactifs de la page.
- Afficher chaque page et pouvoir basculer entre les onglets pour voir de nouvelles informations.
|
| Outils utilisés |
- Marquage sémantique HTML5
- Propriétés personnalisées CSS
- Flexbox
- Flux de travail "Desktop-first"
- Vue.js - Framework JavaScript
- Netlify - Cloud computing, avec déploiements automatisés (permetant l'hébergement du site)
|
3) HTML, CSS et JavaScript (avec animations):
Mise en pratique d’animations tout en optimisant les performances d’affichage.
| Besoins |
- Afficher la mise en page optimale du composant en fonction de la taille d'écran de l'appareil
- Voir les états au survol pour tous les éléments interactifs de la page
- Afficher/Masquer la réponse à une question lorsqu'elle est cliquée
|
| Outils utilisés |
- Balises sémantiques HTML5
- Propriétés CSS personnalisées
- Transitions CSS / Keyframes
- Flux de travail "Desktop-first"
|
4) HTML, CSS et JavaScript:
Mise en pratique du JavaScript en effectuant des calculs à partir des données saisies par l'utilisateur, puis en affichant les résultats, ce qui implique une manipulation du DOM.
| Besoins |
- Afficher la mise en page optimale de l'application en fonction de la taille de l'écran de leur appareil
- Voir les états au survol pour tous les éléments interactifs de la page
- Calculer le bon pourboire et le coût total de l'addition par personne
|
| Outils utilisés |
- Balises sémantiques HTML5
- Propriétés CSS personnalisées
- Flexbox
- Flux de travail orienté desktop-first
- JavaScript
|
5) HTML et CSS:
Familiarisation avec un premier projet afin de mettre en pratique mes connaissances, notamment sur la structure d'une page, ses éléments et la disposition de ses éléments.
| Besoins |
- Afficher la mise en page optimale du site en fonction de la taille d'écran de leur appareil
- Voir les états au survol pour tous les éléments interactifs de la page
|
| Outils utilisés |
- Balises sémantiques HTML5
- Propriétés CSS personnalisées
- Flexbox
- Flux de travail orienté desktop-first
- Un peu de JavaScript
|
