Dans ce nouveau tuto dédié à la pratique de développement FrontEnd, nous allons voir ensemble comment mettre en place une partie fixe et une partie mobile sur une page web.
La partie gauche de notre page sera toujours visible à l'écran et elle devra occuper la moitié de la largeur de l'écran et toute sa hauteur.
La partie droite quant à elle, sera scrollable.
Pour ce tuto, nous utiliserons la technologie GRID pour la mise en page de notre fichier web ainsi que la technique des positionnements CSS pour les effets donnés à l'image.
En cas de besoin, je mets à votre disposition 2 tutos pour réviser ou apprendre les techniques que nous allons utiliser dans ce cours :
Je mets à votre disposition l'ensemble des codes de cet exercice.
Un QCM de fin vous permettra de valider vos nouvelles connaissances.
Je reste disponible pour répondre à vos éventuelles questions sur ce cours.
Bon tuto !
Table des matières de cette formation CSS (durée : 30m42s)
-
- Présentation du travail gratuit 00:00:58
- Mise en place du code HTML 00:04:30
- Utilisation de la technologie Grid 00:05:01
- Mise en place du côté responsive 00:02:30
- Fixation de l'image 00:06:07
- Retour aux medias queries 00:05:46
- Amélioration du texte 00:03:55
- Conclusion 00:01:55
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Très clair comme d'habitude!
-
Très bien ce petit tuto. Judicieux le background-color pour que le texte en scroll recouvre l'image et devienne bien lisible. J'ai eu la réponse à mon interrogation sur la question. Merci. Ça fait aussi une petite révision avec les grid et les positionnements.
-
Génial merci pour la clarté des informations
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS 3
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Le code source du tuto
note moyenne
avis laissés