Maîtriser CSS3 et ReactJs en développant 3 projets

Nous allons couvrir toutes les bases de CSS3 et ReactJs dans ce cours. Vous apprendrez également à réfléchir à la manière de créer une interface à la fois réactive et prête pour la production.

Toutes les bases de la création de composants dans React seront enseignées, puis vous apprendrez des choses plus compliquées comme les routes statiques et dynamiques.

Nous réaliserons trois projets :

Site Web de portefeuille réactif: Project One

• Configurer la mise en page du projet
• Travail sur le contour du menu
• C’est la première partie du style de la section Menu.
• C’est la deuxième partie du style de la section Menu.
• Lorsque vous stylisez le menu, c’est la troisième partie.
• Styliser la partie du corps Partie 1
• Partie 2 : Styliser le corps
• Pour rendre le site Web plus réactif, vous devez le rendre plus petit et plus

C’est le deuxième projet. Nous voulons rendre la page Nos services plus élégante.

• Mise en place de la structure
• Apporter des modifications au balisage et à la mise en page.
• Travail sur le style et la réactivité du site

Le troisième projet consiste à créer un site Web permettant aux gens de répertorier leurs maisons.

• Github-Repo-Configuration locale
• Créer-réagir-app
• Nettoyage de code
• Ajout de polices de Google
• React-Comment-ça-fonctionne-VSC-Extension
• Création-TopBar-Composant
• Compréhension-JSX
• Travailler sur le composant qui liste les éléments.
• En CSS, vous pouvez utiliser des variables pour modifier l’apparence d’une page
• Je travaille sur l’écran Aperçu de l’annonce.
• Liste des articles par catégorie et heure
• Liste de style : la description de chaque élément.
• Cela fait un moment que je n’ai pas travaillé sur la mise en page de la partie Détails de l’annonce.
• Sur la page Détails de l’annonce, j’ai ajouté une barre latérale.
• Il est facile de modifier l’apparence de la page Détails de l’annonce.
• Travailler sur la section des métadonnées de la page Détails de l’annonce
• Comment modifier l’affichage des images sur la page des détails de l’annonce
• Comment styliser le titre et l’action sur une page de liste
• Modification de l’apparence de la section Auteur et heure de publication de la page Détails de l’annonce
• La section de description de la page des détails de l’annonce peut être stylisée comme vous le souhaitez.
• Lorsque vous consultez la page de détails d’une annonce, vous pouvez styliser la première lettre de la description.
• La mise en page de la page Créer une annonce doit être configurée.
• En cours de création d’une page de référencement.
• Je travaille sur l’ajout d’une icône à la page Créer une annonce.
• Styliser la page où vous faites une liste
• L’installation de la bibliothèque React Router Dom vous aidera à vous déplacer entre les composants.
• Les éléments du menu peuvent maintenant avoir une navigation et des itinéraires ajoutés.
• La navigation dynamique est utilisée pour afficher les détails de la propriété.

Vous obtiendrez également le code source des trois projets, vous pourrez donc les utiliser comme guide à tout moment.