Exercice fromscratch

Créer une page responsive

Étape 1

Avoir un bon éditeur de code

Un éditeur de texte au cœur de la boîte à outils d'un développeur.

Atom est un éditeur de texte libre pour macOS, GNU/Linux et Windows développé par GitHub. Il prend en charge des plug-ins écrits en Node.js et implémente Git Control. La plupart des extensions sont sous licence libre et sont maintenues par la communauté.

Télécharger ATOM

Étape 2

Utiliser le framework Bootstrap

Créez des sites rapides et réactifs avec Bootstrap

Bootstrap est une collection d'outils utiles à la création du design de sites et d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option.

Découvrir le site Bootstrap

Étape 3

Créer un menu responsive

Exemple de menu responsive

Voici un exemple de code pour créer un Menu Responsive avec bouton burger qui se change en croix de fermeture en utulisant les bonnes pratiques de 2021.
Étudier le code proposé par Codepen et visionnez le tutoriel vidéo présent en bas de page.

Voir le code

Étape 4

Insérer des vidéos responsive

Comment rendre vos intégrations iframe youtube Responsive ?

L’intégration d’une vidéo Youtube ou Vimeo via iframe peut vous poser problème sur votre site en Responsive Design. Initialement les vidéo Youtube et Vimeo ne s’adapte pas à toutes les devices. Pour remédier à ce problème et afin que votre vidéo s’adapte automatiquement à la résolution de votre écran, il suffit d’ajouter les quelques lignes CSS et HTML.

Lire l'article