Réaliser des interfaces utilisateur statiques web ou web mobile Flashcards
Je veux que le titre principal de ma page soit en bleu par défaut, mais qu’il soit vert en format desktop. Comment puis je faire sans utiliser la moindre librairie externe ?
En utilisant une mediaquery en CSS avec l’instruction @media :
h1 {
color: blue;
}
@media (min-width: 1024px) {
h1 {
color: green;
}
}
Quels langages un navigateur web courant (firefox, chrome, …) est capable d’interpréter ?
Un navigateur web courant comme Firefox ou Chrome est capable d’interpréter les langages HTML pour la structure, CSS pour le style, JavaScript pour les interactions dynamiques.
Pouvez vous expliquer ce qu’est le mobile first ? Pourquoi on privilégie cette approche ?
Le mobile first est une approche de conception où l’on crée d’abord une interface optimisée pour les mobiles avant d’adapter pour les écrans plus grands, car cela garantit une expérience utilisateur fluide sur les appareils les plus utilisés tout en réduisant la complexité et en priorisant l’essentiel.
Quelle est la différence entre l’attribut “id” et l’attribut “class” dans une balise HTML ? pourquoi utiliser des “id” alors qu’on pourrait utiliser des “class” partout ?
L’attribut id identifie un élément HTML de manière unique et spécifique, tandis que l’attribut class peut être partagé entre plusieurs éléments.
Pourquoi utiliser des balises sémantiques alors que je pourrais simplement utiliser des “div” partout ?
Utiliser des balises sémantiques améliore la clarté du code, l’accessibilité et le référencement (SEO), en donnant un sens explicite à chaque section de la page, contrairement aux simples “div” qui n’ont aucune signification particulière.
Vous avez terminé votre page Web, connaissez vous des outils permettant de vérifier si la structure de votre code HTML est correcte ?
Oui, par exemple le validateur W3C qui vérifie si la structure de votre code HTML est correcte et conforme aux standards.
C’est quoi intégrer une maquette ?
Cela consiste à développer la maquette avec HTML, CSS et javascript.
Dans le contexte du développement d’un site Web, qu’est-ce qu’un breakpoint ? À la louche, le breakpoint pour le format desktop pourrait être à combien ?
Un breakpoint est une largeur d’écran définie dans une media query où le design d’un site web change selon les différentes tailles d’appareils. Pour le format desktop, un breakpoint se situe souvent à 1024px .
Y-a-t’il un lien entre l’accessibilité et le SEO ?
Oui, il existe un lien entre l’accessibilité et le SEO, car rendre un site accessible améliore son indexation par les moteurs de recherche. es robots peuvent par exemple détecter dans le code HTML du site si les attributs ‘alt’ des balises ‘img’ sont bien remplis.
Qu’est-ce que l’acronyme d’HTML ?
HyperText Markup Language (Langage de balisage hypertexte).
Qu’est-ce que l’acronyme de CSS ?
Cascading Style Sheets (Feuilles de style en cascade).
Sur un navigateur web, qu’est-ce que le local storage ?
Le local storage est un espace de stockage intégré au navigateur qui permet aux sites web d’enregistrer localement des données simples, comme le mode sombre ou le contenu du panier et de les conserver même après la fermeture du navigateur.
Est-ce que les informations stockées dans le local storage du navigateur sont automatiquement envoyées vers le serveur qui héberge le site ?
Non, les informations stockées dans le local storage ne sont pas automatiquement envoyées au serveur, elles restent uniquement sur l’appareil de l’utilisateur. Il s’agit ici d’une des principales differences avec les cookies.
Pouvez-vous expliquer la différence entre les unités relatives (%, em, rem) et les unités absolues (px) en CSS ?
Les unités absolues (px) ont une taille fixe qui ne change pas selon la taille de l’écran, idéales pour un rendu précis mais moins flexibles. Les unités relatives (%, em, rem) ont une taille dynamique, ce qui les rend plus adaptées au responsive design.
C’est quoi les flexbox ?
Les Flexbox sont un système de mise en page CSS pour organiser, aligner et répartir les éléments dans un conteneur flexible C’est très responsive grâce à leur capacité à s’ajuster automatiquement à l’espace disponible et permettent un contrôle précis du positionnement des élèments. C’est idéal pour des mises en page d’une seule ligne ou d’une seul colonne.
