Pour cette première semaine de formation nous avons étudiés le HTML5 et le CSS3, en réalisant une page internet.

Voir la page réalisé pendant cette première semaine.

Le balisage HTML

Pour construire la page en HTML nous nous sommes référés aux recommandations du W3C, en utilisant le balisage sémantique de la page.

Nous avons utilisé la balise <header> et la balise <nav> pour l’entête et le menu. Nous avons alternés les balises <articles> et <section> pour différencier les unités des ensembles, et la balise <footer> pour le pied de page.

Concernant les ressources, pour rendre l’ensemble plus attractif, nous avons utilisé les ressources suivantes :

  • Google font pour sélectionner la police de la page.
  • Font Awesome afin d’utiliser les logo CSS3 et HTML dans des badges réalisés en CSS.
  • Et pexels.com pour les images

Design en CSS

Pendant cette première semaine nous avons étudié la mise en page et l’utilisation des grilles (GRID) qui permet de réaliser rapidement et sans framework des pages adaptative (mais pas encore responsive la page n’a été prévu que pour les écrans d’ordinateurs).

[irp posts=”8205″ name=”CSS grid – Galerie responsive”]

Position absolu du menu

Pour permettre une navigation efficace nous avons fixé la barre de menu avec une classe qui applique défini la position absolu du menu au sommet de l’écran :

 .sticky-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

Le z-index est placé pour éviter que le menu soit masqué par les autres élément absolu de notre page.

Background-clip sur le titre

Nous avons ensuite utilisé la propriété background-clip pour appliqué un dégradé sur le titre de la page.

[irp posts=”5459″ name=”Background-clip Appliquer un dégradé sur vos titres”]

 .clip-text_fifteen {
    background-image: linear-gradient(to bottom, #000000 0%, #333333 100%);
}

style2.css:280
.clip-text {
    line-height: 1;
    margin: .5em .75em;
    color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Déformation des balises

Pour appréhender les différents paramètres de la propriétés transform, nous avons utilisés skew avec une valeur de 2 degrés et nous avons nullifié l’effet pour les balises contenant du texte.

 .skew {
    transform: skew(0deg,2deg);
}
//et sa négation pour les enfant contenant du texte.
.anti_skew {
    transform: skew(0deg,-2deg);
}

Badges et pseudo-élément

Pour bien comprendre le fonctionnement des pseudo élément nous avons ajouté à nos sections des badges réalisé avec ::after et ::before.

 .badge:before {
    transform: rotate(60deg);
}
.badge:after {
    transform: rotate(-60deg);
}
.badge:before, .badge:after {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    }
.html5 {
    background: linear-gradient(to bottom right, #f16529 0%, #e44d26 100%);
    color: #f16529;
}
.badge {
    position: relative;
    width: 4rem;
    height: 6.2rem;
    border-radius: 10px;
    display: inline-block;
    bottom: 7em;
    left: 2em;
    transition: all 0.2s ease;
    text-align: center;
}

La fin du début

Après une semaine de formation l’objectif est largement atteint, nous avons réalisé une page en utilisant des ressources externes et en construisant éléments pas éléments notre page.

nous avons commencé depuis lundi à étudier le PHP en réalisant un calendrier en utilisant les boucles les conditions et les variables.

Comme pour la premières semaines nous réaliserons des page pour présenter l’avancé de la formation, restez connecté et n’hésitez pas à soutenir notre stagiaire.

 

 

Articles Liés