Pages

DS

Selecteurs lien


See the Pen Untitled by dupont (@dupontcodepen) on CodePen.

See the Pen Grid by Example 12: No clearing required by dupont (@dupontcodepen) on CodePen.



See the Pen empilement 6 by dupont (@dupontcodepen) on CodePen.



See the Pen DS grid 2 by dupont (@dupontcodepen) on CodePen.

Salle

See the Pen Untitled by dupont (@dupontcodepen) on CodePen.

JS : exercice

See the Pen JS 1 by dupont (@dupontcodepen) on CodePen.

CSS style

Un peu de style pour le fun !



See the Pen Untitled by dupont (@dupontcodepen) on CodePen.

Découvrir la force de JS

 Etude de cas !


Projet : calculette

Interface : le tableau de bord



Fonctionnalité : le moteur


 Retour à notre calculette ! 


Interface : une grille


Fonctionnalité :




🆘Recherchez la logique à implémenter.

20 exercices de JS pour se former

Exercices JS

Plan du cours

 



Plan

  1. Définition des variables et fonctions.
  2. DOM
  3. Interaction
  4. Améliorations
  5. Objet
  6. Design Pattern

Correction code HTML/CSS : Calculette

Correction lien

Code

Au moins 5 codes différents de HTML/CSS de la calculette 🧮 vous sont proposés ici : 



Plan du cours

📢 L'aventure va continuer avec les différentes étapes de la mise en place de l'interface utilisateur.



Introduction Javascript

 

Grid : calculette


Donnez le HTML/CSS

   

Correction du DM grid

 Voici le lien sur GITHUB

https://github.com/dupontdenis/Grid-Video.git


Pour cloner ce code aidez vous de l'article : https://dupontl1.blogspot.com/2023/03/clonez-du-code.html



See the Pen Gallerie Vidéos by dupont (@dupontcodepen) on CodePen.

Clonez du code

 

Prérequis

Vous avez installé Git sur votre machine. Git

Exemple d'utilisation de GIT/GITHUB

Nous voulons récupérer le code d'un projet

↠ Le code est déposé sur un site en cloud : GitHub !


Nous allons voir comment cloner le code de l'application !


Rendez vous à l'adresse : https://github.com/dupontdenis/HTML_TD3

Dans la fenêtre, repérez tout de suite l'onglet Code▾

Nous pouvons copier/coller le code en cliquant sur le bouton


Mais, nous allons utiliser une méthode géniale qui permet de récupérer directement dans VStudio l'ensemble de la structure et le code associé. Il nous faut pour cela installer git et pensez à créer un compte sur gitHub.

Installer git sur votre machine

lien : Git


Vous pouvez suivre une aide pour mettre en place git sur votre machine. 

J'ai rédigé une aide rapide ( lien ).


Télécharger le document depuis VS.

Nous allons télécharger directement depuis VS les fichiers. Je vous ai rédigé une documentation rapide ( lien )

Voici les différentes étapes sous forme de capture d'écran.

1) cliquez sur le code

2) copier le lien 

Lancez Visual Studio Code.

Si VS se lance dans un dossier, commencez par le fermer file->close Folder


Cliquez sur le bouton source control


Cliquez sur Clone Repository (clonez un dépôt)


Mettre l'adresse sélectionnée https://github.com/dupontdenis/HTML_TD3.git


Sélectionnez un dossier existant ou créez un répertoire.

La figure suivante montre comment créer un nouveau répertoire.

souris bouton de droite Nouveau->Dossier


Donnez le nom que vous voulez, par exemple TDHTML


Cliquez sur Select Repository Location


Les documents se chargent automatiquement puis cliquez sur

Les documents apparaissent dans l'exploreur des fichiers.


Workshop Microsoft

 Nous avons mis en place un workshop pour illustrer la mise en ligne de votre CV

Exemple

https://dupontdenis.github.io/CV/

Suivez le guide

Create a resume website in the Browser using HTML, CSS, github.dev, and GitHub Pages

👉 https://github.com/ornelladotcom/resume-website-workshop 👈


⇉ 

Le passage de VStudio à GitHub se fait en un clic !

Illustration :

Le déployement se fait en un clic !

Illustration :



Inspection montre l'utilisation d'une grille CSS.







Git

 Nous allons utiliser git pour charger/publier un dépôt.

Etudiez ces vidéos.