Apprendre les techniques professionnelles de développement CSS Techniques de construction de projets de construction

Description
Nous rassemblons un curriculum où vous apprendrez tous les trucs et astuces de la conception CSS et HTML tout en construisant dix projets géniaux, ce qui vous aidera à maîtriser les différents aspects de la programmation frontale et vous montrera toutes les meilleures pratiques de développement.

Projet 1 - Conception de la page d'atterrissage

Description : Nous allons créer une page d'atterrissage HTML5/CSS qui comprendra un en-tête et un pied de page, une liste avec des puces d'images, un formulaire HTML5 et un bloc de témoignage, la page sera complètement réactif et s'adaptera à toutes les tailles d'écran en utilisant des requêtes CSS3.

Fonctionnalités/Technologies : HTML5, CSS3, Formulaires Web, Listes, Réinitialiser les fichiers, Conception Web réactive.

Projet 2 - Calendrier sans table réactif

Description : Nous allons créer une page de calendrier web en utilisant HTML5/CSS, contrairement à de nombreux calendriers qui utilisent des tableaux HTML pour le positionnement et la présentation, notre calendrier n'utilisera que des feuilles de style CSS.

Fonctionnalités/Technologies : HTML5, CSS3, Listes, Design Web réactif, Mise en page de type tableau utilisant uniquement le CSS, Espacement des boîtes, Rembourrage et marges.

Projet 3 - Glisseur d'images CSS pures

Description : La plupart des curseurs d'images que vous voyez sur le Web sont propulsés par JavaScript ou une bibliothèque JavaScript comme JQuery, nous allons construire un curseur d'image entièrement fonctionnel avec du CSS pur, nous aurons des vignettes qui, lorsqu'on clique, font glisser l'image plus grande en place et nous utiliserons des animations CSS/images-clés pour y parvenir.

Fonctionnalités/Technologies : HTML5, CSS3, Animation, Images-clés, z-index & Positionnement

Projet 4 - Menu déroulant de transition

Description : Nous allons construire un menu déroulant multi-niveaux en utilisant des transitions CSS pour l'effet d'animation de la liste déroulante, nous utiliserons juste un peu de JQuery pour ajouter dynamiquement un élément div.

Fonctionnalités/Technologies : HTML5, CSS3, Listes imbriquées, Conception Web réactive, Transitions CSS, JQuery.

Projet 5 - Calendrier de la SCN

Description : Dans ce projet, nous construirons une ligne du temps en utilisant HTML5/CSS. ce projet s'éloignera de la mise en page commune en forme de boîte que nous voyons tout le temps. il y aura des points pour des années et des événements avec des descriptions, ce qui pourrait être utilisé pour beaucoup de choses comme le suivi professionnel/de l'emploi et personnel/du style de vie.

Fonctionnalités/Technologies : HTML5, CSS3, Conception Web réactive, Mise en page fluide, Images de fond et positionnement.

Projet 6 - Tables avec SASS

Description : SASS est un pré-processeur CSS qui nous permet de faire d'excellentes choses comme l'utilisation de variables, de mélanges et de styles imbriqués.

Fonctionnalités/Technologies : HTML5, CSS3, Listes, conception Web réactive, mise en page fluide, installation, configuration et travail avec SASS.

Projet 7 - Galerie d'images CSS

Description : Nous construirons une galerie d'images avec l'aide de JQuery, la mise en page sera stylisée avec CSS et nous utiliserons JQuery pour le filtrage dynamique des catégories et le lightbox d'images.

Fonctionnalités/Technologies : HTML5, CSS3, Web Design réactif, Fluid Layout, JQuery, JQuery, JQuery Fancybox Plugin.

Projet 8 - Voiture animée

Description : Nous nous concentrerons sur l'animation CSS3 et les images-clés pour positionner et animer les images, en utilisant l'image d'une voiture et en donnant l'impression qu'elle roule dans la rue.

Fonctionnalités/Technologies : HTML5, CSS3, Animation, Images-clés, Découpage d'images dans Photoshop, Images de fond et positionnement.

Projet 9 - Modèle de Bootstrap animé

Description : Twitter Bootstrap est le framework HTML5/CSS le plus populaire disponible, nous allons construire un modèle de Bootstrap personnalisé ainsi qu'une animation incluant l'animation initialisée par défilement à l'aide de JQuery et CSS.

Fonctionnalités/Technologies : HTML5, CSS3, Animation, Images-clés, Twitter Bootstrap, JQuery.

Projet 10 - Conception de lettres d'information avec LESS

Description : LESS est un autre préprocesseur CSS comme SASS, nous allons créer un modèle de newsletter lisse pour un restaraunt, nous allons implémenter LESS et utiliser des fonctionnalités comme les variables, les mixins, les styles imbriqués et l'importation de fichiers.less.

Fonctionnalités/Technologies : HTML5, CSS3, Node.js Installation, installation, configuration et travail avec LESS.

CLIQUEZ ICI pour accéder à ce cours