pixel facebook
 

Html-Css | Creer un site One Page partie 2

Ce que vous allez Apprendre

Création complète d'une première page Web Responsive avec la mise en place d'un One Page Layout.

 

Deuxième vidéo de notre création de site Internet avec la mise en place de la partie Header de notre page.

 

Nous expliquons l'un des grands principes du framework Bootstrap, qui est le concept de grille et son découpage en lignes et colonnes. l'occasion de revoir un principe déjà evoqué avec le système des FlexBox.

 

Nous verrons aussi :

  • Comment charger et utiliser de nouvelles polices à partir de Google Fonts.
  • La création de formes géométriques en CSS avec la propriété clip path
  • L'ajout d'un formulaire en ligne et d'un input de type date
  • La possibilité de faire des mises formes uniquement sur certains écrans grâce au Media Query
  • la propriété display et sa valeur none afin de masquer un élément dans la page

Commentaires 2


Votre adresse mail ne sera en aucun cas divulguée ou utilisée, elle nous permet de garantir la pertinence des commentaires affichés

Claudeb2@sympatico.ca - 27/08/2019 19:53:23

Bonjour


Sur les navigateurs Chrome et Firefox, tout s'affiche correctement


Sur Explorer en vrsion cellulaire le formulaire des disponibilités est remonté complètement en haut. On ne voit que la fin du formualire, et le slogan de la partie droite est disparu.


Sur Safari, c'est le bordel, tout s'affiche de travers.


J'ai toutes les dernières versions de navigateurs.


Je suis sous Windows


Est-ce qu'il y a quelqe chose à faire ?


Vos vidéos m'ont quand même donné beaucoup d'informations et je vous en remercie

Admin - 28/08/2019 09:50:59

Bonjour,


La vidéo était consacrée à la base du html/css, elle n'a pas vocation à montrer un site fini complètement, car il y aurait encore beaucoup de chapitre à rajouter.


Pour le problème de compatibilité CSS, le problème est qu'il faut préfixer certaines propriétés selon les navigateurs.


Cela pourra être l'occasion de prochaines vidéos. En attendant vous pouvez comprendre le problème ici :


https://www.alsacreations.com/article/lire/1159-prefixes-vendeurs-css-proprietaires.html


Et si vous débutez, vous pouvez commencer par auto-préfixer le css avec des extensions d'éditeur de code. Par exemple pour brackets il existe cette extension qui fonctionne très bien :


https://github.com/mikaeljorhult/brackets-autoprefixer


Cordialement

Chabert - 03/03/2019 10:27:53

.header {

background-image: url(../img/vue.jpg);
}

Bonjour,


Impossible d'inserer l'image,


merci pour vos vidéos bien expliqués


Admin - 03/03/2019 11:59:09

Bonjour,
Il y a beaucoup de piège dans cette partie :



  • Vérifier l'organisation de vos dossiers -> les images sont dans un dossier "img et les css dans le dossier "css"
    Si jamais vous avez une autre organisation il faut modifier le chemin

  • Attention aux espaces dans les noms de fichier (Sans espace c'est préférable, sinon il faut les remplacer par des %20)

  • Vérifier l'extension des fichiers jpg, jpeg, png ...