5ème étape de la série de tutoriel sur comment faire son propre site web personnel le plus simplement possible et pour pas très cher, diffusés une fois par semaine sur mon stream twitch. Vous pouvez retrouver la vidéo sur ma chaine youtube
Activer le SSL ( et le https ) sur ovh
Pour obtenir un certificat SSL et enfin résoudre le problème de https, il faut d'abord se rendre sur l'onglet
multisite, cliquer sur les "...", puis "modifier son domaine" et cocher "SSL". Une fois cette étape passée et
après une petite dizaine de minutes on peut commander un certificat SSL dans la section "configuration" de
l'onglet "Informations générales".
Sélecteurs CSS
Le langage html décrit le contenu de notre page et la manière dont s'emboite ce contenu. Grâce au langage css on peut appliquer un style à certains contenus en utilisant des selecteurs css, par exemple :
/* Selection de plusieurs élements à la fois avec une virgule */
h1, h2, h3 {
color: #FF7800;
}
/* Sélection des élèments à l'interieur d'un autre élèment */
main > h2 {
font-size: 3rem
}
Media querie et design responsive
Avec les outils de développement, accessibles dans le navigateur en faisant "clique droit > inspecter" ou en pressant "f12" dans le navigateur, on peut tester à quoi ressemblerait note site sur mobile ou tablette. Ensuite, grâce aux media queries, on peut appliquer un style different selon la taille de l'écran ou son orientation. Par exemple :
/* ce qui est à l'intérieur de ces accolades ne s'appliquera que quand on imprime la page web. */
@media print {
h1,
h2,
p {
color: var(--main-color-letters);
}
#homepage-main-hero {
border-color: var(--main-accent);
border-style: none;
}
}
/** Ce style ne s'appliquera que pour une vision
* sur écran ET quand la largeur de l'ecran est
* au moins de 1000px. Pratique pour faire un style
* différent pour les écrans d'ordinateurs et
* les smartphone.
*/
@media screen and (min-device-width: 1000px) {
.main-hero {
padding: 20px;
width: 450px;
margin: auto;
}
}
/** On peut même faire un style qui ne s'applique
* que quand on pivote son smartphone et
* le tiens en position "landscape"
* ( à l'horizontale)
@media screen and (orientation: landscape) {
p {
color: var(--main-color-letters);
}
}
Dans la prochaine étape ,on essaiera sans doute de faire des media queries adaptées aux appareils les plus répandues !