Base de l'HTML et du CSS, initiation Bootstrap

Revu des bases de l'HTML et du css, puis initiation à Bootstrap.

Résumé

Le but de ce premier MON est de me familiariser avec le langage HTML et le langage CSS, ainsi que de m'initier à l'utilisation du framework Bootstrap. La mise en pratique se fera à travers mon POK "Récupérer les données du jeu vidéo League of Legends" car j'illustrerai mes résultats à travers un site en local. Ce MON passera donc en revue les principes de fonctionnement de l'HTML et du CSS, et mettra l'accent sur un cas pratique de Bootstrap.

Rappels d'HTML

Afin de revoir les bases de l'HTML, j'ai suivi deux ressources en ligne, le tutoriel de Mozilla Developer Network ainsi que le cours HTML d'Openclassrooms Je vous redirige vers le MON de Jeffrey Edisah afin d'avoir un résumé de ce que l'on peut trouver dans ces formations.

Rappels CSS

Pour ce qui est du CSS, j'ai également suivi le tutoriel disponible sur Mozilla Developer Network.

Je vous invite cette fois-ci à regarder le MON de Bermond Timothée que je trouve plutôt complet.

Initiation Bootstrap

Qu'est ce que Bootstrap ?

Bootstrap est un framework front-end open-source qui a révolutionné la manière dont les développeurs web conçoivent et déploient leurs projets en ligne. Bootstrap est un ensemble de ressources préconçues, de styles CSS, de composants interactifs, et de scripts JavaScript qui simplifient considérablement le processus de création d'un site web. Il a été créé par Twitter et est maintenant maintenu par une grande communauté de développeurs. La principale caractéristique de Bootstrap est sa capacité à rendre la conception de sites web réactifs. Les sites créés avec Bootstrap s'adaptent automatiquement à différentes tailles d'écrans, des smartphones aux ordinateurs, offrant ainsi une expérience utilisateur cohérente sur tous les appareils.

Pour qui est Bootstrap ?

Bootstrap est adapté à une large gamme d'utilisateurs, qu'il s'agisse de développeurs débutants cherchant à créer rapidement des sites web fonctionnels ou de professionnels expérimentés souhaitant gagner du temps et maintenir des normes de qualité élevées.

Ressources

Exemple de code utilisant Boostrap

Pour mon premier POK, j'avais besoin de mettre en place une barre de navigation avec des boutons cliquables me permettant de changer de page efficacement et ce de manière esthétique. Bootstrap répondait parfaitement à mon besoin puisque j'ai pu très facilement importé un code HTML me permettant d'afficher une barre de navigation.

Voici un exemple de mon code :

Ce qui donne :

La barre de navigation est défini ici avec des icones !

Le FrameWork Python Flask permet le développement d'application web, c'est ce qui m'a permis de faire ma mini-application en utilisant les données de Riot Games. Ce framework fera sûrement l'objet de mon projet MON !