fylo dark theme landing page Télécharger - fylo dark theme landing page Téléchargement du code source

fylo dark theme landing page

Composants tiers

1.0.0

Télécharger

fylo dark theme landing page - Frontend Mentor

Salut! Merci d'avoir consulté ce projet !

Il s'agit d'une solution pour un défi Frontend Mentor qui consiste à créer une page de destination aussi proche que possible du design donné. Le but est d'améliorer mes compétences en matière de mise en page web en construisant un projet réaliste.

1. Table des matières ✒️

fylo dark theme landing page - Frontend Mentor
- 1. Table des matières ✒️
- 2. Aperçu
  - Le défi
  - Comment exécuter le projet :
  - Links
- 3. Ma démarche ?
  - Construit avec
  - Ce que j'ai appris
  - Ressources utiles
- 4. Auteur ??

2. Aperçu

Le défi

Les utilisateurs doivent pouvoir :

Afficher la mise en page optimale du site en fonction de la taille de l'écran de leur appareil
Voir les états de survol pour tous les éléments interactifs de la page

Aperçu de la conception pour le <span class= Défi de la page de destination du thème sombre fylo" style="max-width: 100%;">

Vous pouvez consulter les détails du défi sur la page Frontend Mentor.

Comment exécuter le projet :

J'ai choisi d'utiliser le Starter Kit Adalab pour travailler sur ce projet, créé à l'aide de Node et Gulp. Il est donc tout d’abord nécessaire d’installer Node JS pour l’exécuter.

Ouvrez le terminal dans le dossier racine du dépôt.
Installez les dépendances locales à l'aide de la commande suivante dans le terminal :

npm install

Commencez à exécuter le projet à l'aide de la commande suivante qui ouvrira une fenêtre de navigateur affichant une version en direct de la page.

npm start

Links

URL du site en direct : https://leireomadina.github.io/fylo-dark-theme-landing-page/
URL de la solution : à venir

3. Ma démarche ?

Construit avec

Balisage sémantique HTML5
Système de modèles HTML
Propriétés personnalisées CSS3
Boîte flexible
Grille CSS
SASS avec méthodologie BEM
Gorgée
Conception réactive avec flux de travail axé sur le mobile

Ce que j'ai appris

Utilisez @for pour créer des boucles dans SCSS : dans ce cas je voulais sélectionner uniquement la deuxième et la troisième carte de la section témoignage.

 .card {
  @for $i from 2 through 3 {
    & -#{$i} {
      margin-top : 1.8 rem ;
      @media all and ( min-width : 768 px ) {
        margin-top : 0 ;
      }
    }
  }
}

Utiliser et gérer les fichiers svg : utilisez l'attribut viewBox pour modifier sa position et sa dimension, ajoutez un titre et une balise desc pour améliorer l'accessibilité, le style en ligne et CSS, personnalisez les couleurs par remplissage ou contour...
Utilisez les rôles ARIA pour améliorer l'accessibilité du Web : par exemple, jetez un œil à ces rôles dans le menu de navigation.

 < nav class =" header-menu " role =" navigation " >
  < ul class =" header-menu__list " role =" list " >
    < li class =" header-menu__list-item " role =" list-item " >
      < a class =" header-menu__link " href =" # " role =" link " >
        Features
      < a >
    </ li >
    ...
  </ ul >
</ nav >

Ressources utiles

Comment utiliser @for pour créer une boucle Sass : https://www.youtube.com/watch?v=6CbsNFXMYgs. Vous pouvez également consulter la documentation officielle du SASS.
Liste des rôles, états et propriétés ARIA (MDN) : https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
Style SVG en ligne : https://www.youtube.com/watch?v=af4ZQJ14yu8&t=844s
Plus de ressources à venir..