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).
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.
.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.
