Comment créer un Portfolio Moderne en HTML & CSS de A à Z et le mettre en Ligne Facilement? - YouTube
Dans ce cours en ligne nous allons créer un site de A à Z dans les règles de l'art, le tout en HTML / CSS et JavaScript pour les animations. Le site en question sera un portfolio 100% responsive, qui utilisera pas mal de concepts clés en CSS. À travers ce projet de Portfolio, vous apprendrez à: Positionner des éléments avec Flexbox, Utiliser les medias queries, Utiliser CSS Grid pour faire une grille, Animer vos éléments avec TypeWriter, Greensock et ScrollMagic, Créer un site de A à Z, tout simplement. Le code source est disponible avec la formation. On se donne rendez-vous de l'autre côté!
L'élément
permet d'insérer un paragraphe de texte en mettant votre texte dans la balise comme cela:
Votre texte
.Dans notre balise
on a aussi inséré une image avant le texte. Pour cela on utilise une balise de type orpheline , src étant la source de l'image pouvant être un lien ou une image de votre ordinateur, on précisera alors le chemin d'accès ex:
. 3. Slider: Pour donner un aperçu de nos projets on a créé un slider dont le but est de faire défiler différentes images (les fonctions pour créer du mouvement seront abordées dans le css). Création de deux div pour contenir le slider ainsi que les slides qui défileront. Les slides sont composées d'images cliquables qui nous envoient vers le projet concerné. Pour ce faire on va ouvrir des balises et y insérer des balises
. Puisque que les images doivent toutes être dans la même slider on leur donne une taille fixée, afin qu'elles soient de même largeur, pour cela on écrit dans
, width= « 500 ». Pour que la troisième image tienne on a aussi du changer sa hauteur avec height= « 380 ». Afin de lier les images à leur projets respectifs sur la page Projets on met en href (prog1/2/3 correspondent à l'id des projets que l'on verra sur la page Projets).
skytimetravel.net, 2024