Développeur Web

Partie 1 : Développement web

Présentation du cours

• Les outils nécessaires
• Sublime Text – Installation, extensions et découverte de l’interface HTML
• Le HTML c’est quoi
• La syntaxe du HTML
• La structure de base d’un fichier HTML
• Les balises Meta
• Les titres et paragraphes
• Le formatage de texte
• Les liens
• Les images
• Les listes
• Les tableaux
• Les formulaires
• Les blocs et balises de structure CSS
• A quoi sert le CSS
• Où écrire le CSS
• Syntaxe du CSS
• Les id
• Les class
• Que choisir entre balise, id et class
• Styliser du texte
• Découvrons l’inspecteur de Firefox
• Arrières-plans
• Types de disposition des éléments (display)
• Le display flex
• Redimensionner et positionner des éléments
• Les marges
• Les bordures
• Les éléments flottants
• Les pseudo-class
• Les transitions
• Les media-queries

PHP et SQL

• A quoi sert le PHP
• Installation de Wamp
• Syntaxe du PHP
• Les variables
• Les tableaux
• Comparer des valeurs
• Les conditions
• Les boucles
• Les fonctions isset() et empty()
• Variables superglobales – Les variables d’URL
• Variables superglobales – Récupérer les données d’un formulaire
• Variables superglobales – Récupérer des informations sur le client
• Variables superglobales – Stocker des informations de session
• Variables superglobales – Sauvegarder des informations dans des cookies
• Introduction à MySQL et phpMyAdmin
• Notre première requête SQL
• L’objet PDO
• Formater la date en SQL
• Créer une page dynamique (avec SQL et variable d’URL)
• Insérer des données dans la base de données
• Mettre à jour des données dans la base de données
• Supprimer des données de la base de données

TP Blog

• Introduction et schéma du blog (layout)
• Structure des fichiers (architecture)
• Création de la base de données
• Front-end – Création du menu du site
• Front-end – Création de la section principale et des miniatures des articles
• Front-end – Création de la navigation latérale (sidebar)
• Front-end – Création du footer
• Front-end – Création de la page d’articles
• Création et sécurisation de l’espace d’administration
• Espace d’administration – Ajouter des catégories
• Espace d’administration – Ajouter des articles
• Affichage des articles sur la page d’accueil (depuis la base de données)
• Affichage dynamique des articles (page d’article unique)
• Mise en place de l’espace commentaires
• Affichage des catégories et des commentaires récents dans la sidebar
• Tri des articles par catégorie
• Mise en place de la barre de recherche pour les articles

POO

• Introduction à la POO
• Notre première classe
• Les attributs
• Les méthodes
• Le constructeur – Une méthode particulière
• Méthodes et attributs statiques et constantes de classes
• La visibilité – public, private et protected
• Les getters et setters
• L’héritage
• Charger ses classes automatiquement – spl_autoload_register()

Ressources dev web

• Blog.zip
• Vocabulaire
• Extensions sublime Text

Partie 2 : Bootstrap

Bootstrap a quoi ça sert

• Qu’allons-nous apprendre et prérequis

Installer Bootstrap

• Installation via les fichiers sources
• Installation via les CDN

La structure de Bootstrap (Layout)

• Les containers
• La grille Bootstrap – Lignes et colonnes
• Lignes avec colonnes de taille égales
• Imbriquer des lignes et colonnes
• Modifier l’alignement des colonnes
• Modifier l’ordre des colonnes
• Décaler des colonnes
• Espacer ses colonnes avec les gouttières

Premier projet : Reproduire Instagram

• Introduction
• Dissection de l’interface d’Instagram
• Le header
• Les stories
• Les postes
• La sidebar

Formater du contenu avec Bootstrap

• Les textes
• Les citations
• Les images et figures
• Les tableaux
• Les formulaires
• Les attributs d’accessibilité ARIA

Les composants Bootstrap

• Introduction
• Les boutons
• Les groupes de boutons
• Les carousels
• Les listes déroulantes (dropdown)
• Les cartes (card)
• Les menus de navigation (nav)
• Les onglets (nav tabs)
• Les barres de navigation (navbar)
• Les modales (modal)
• Les popovers et tooltips
• Les notifications (toasts)
• Les fils d’Ariane (breadcrumb)
• La pagination

Second projet : Créer une boutique e-commerce

• Introduction
• Le header
• Le carousel
• Les breadcrumbs et list group
• Les cards
• La pagination et le footer
• Le toast

Projet final : Reproduire Twitch

• Introduction
• Le header partie 1
• Le header partie 2
• La sidebar partie 1
• La sidebar partie 2
• Le main partie 1
• Le main partie 2
• La modal

Ressources Bootstrap

• Fichiers Instagram
• Fichiers Twitch
• Place à la pratique – E-commerce
• Place à la pratique – Instagram
• Place à la pratique – Twitch

Quiz final

• Quiz