Pages

Préparation au DS

Révisions : Révision flex

L1 session 1

test : flex-test

Flex : de la théorie à la pratique

 

🥇Objectifs :

Passez de la théorie à la pratique ! 

Tentez d'améliorer des comportements




🥷Lien github


 Aide 

DM à Rendre !

 Deadline : 1 mai 12H

Live Demo 

The project "My resume" can be found at :  https://github.com/dupontdenis/myResume.git



Vous pouvez vous aider de copilot 

Flex

🚀Flex : vidéo & Co 

Article à lire : 🆘lien

Cours : lien

Projet : use case

🔎DM : Microsoft


📼Vidéo

 

Plan

 

Plan : 

  1. Editeur
  2. Balises de base
  3. Attribut
  4. Sélecteur
  5. Inspecteur (tous les jours sur notre fil rouge)
  6. Projet
  7. 🚀Flex box
  8. Flexible
  9. DS
  10. Bootstrap


Les références de cours :

https://web.dev/learn/
https://www.w3schools.com/
https://developer.mozilla.org/en-US/docs/Learn

Quizz

Difficulté : easy

Difficulté : medium

Difficulté :

Algorithmique en JS

 Après les vacances on découvrira la programmation avec JS !



🥷Trouver le code pour transformer un tableau en somme de valeurs contiguës de même signe.

Exemple : 

t = [ 1, 4, -30, 4, 5, -1, -2, -4, 10 ]

est transformé en : 

newt = [ 5, -30, 9, -7, 10] 

Préparation au DS

 Indiquez les lignes selectionnées par le selecteur


🆘Exemple : 

  1.   <article>

  2.     <p title="Strophe1" id="st"></p>

  3.     <header>

  4.     <h1></h1>

  5.     <h2></h2> </header>

  6.     <p class="refrain"></p>

  7.     <p title="Strophe4" id="str"></p>

  8.     <p class="refrain" id="ref4"></p>

  9.     <footer> date (1880 - 1918) </footer></article>

sélecteur


p


article>h1





ligne(s)


2,6,7,8


rien


🪛A compléter

  1.   <article>

  2.     <p title="Strophe1" id="st"></p>

  3.     <header>

  4.     <h1></h1>

  5.     <h2></h2> </header>

  6.     <p class="refrain"></p>

  7.     <p title="Strophe4" id="str"></p>

  8.     <p class="refrain" id="ref4"></p>

  9.     <footer> date (1880 - 1918) </footer></article>

sélecteur

ligne(s)

p ~ p ~ p


p:nth-child(2)


article  :last-child:not(p)


[class $="n"]


article  :nth-of-type(-n+1)

Préparation aux examens

 📈Les selecteurs

Plus d'infos »

Installer GIT

🪛 https://docs.google.com/document/d/1LzSSJEc3UqfF6WaESwDw7rgvoGdAiKeinSkRQRPcvTU/edit?usp=sharing


🆘 Contacter l'association des étudiants ! 

🆒Préparation au DS

 



Voici la liste des sélecteurs : Révision !

Code HTML

<div class="top">div : class top
          <h1>h1</h1>
          <ul id="tmpPlants" class="tmpExample">
             <li class="A B tmpExample" id="item.A">li : class =A et B id=item.A</li>
             <li class="A tmpExample" id="b">li : class =A id=b</li>
             <li class="B tmpExample" id="c">li : class =B id=c</li>
          </ul>
          <footer> footer </footer>
</div>

Pour chaque sélecteur, encadrer les éléments sélectionnés

Selecteurs ('ul, li')
Selecteurs ('li:not(#b)')
Selecteurs ( "#item.A" )
Selecteurs ( ".A.B" )
Selecteurs ( ".top :first-child" )
Selecteurs ( "ul:first-child" )
Selecteurs ( "li:not(:hover)" )
Selecteurs ( "li.B + *" )
Selecteurs (".top :nth-child(2)")
Selecteurs (".top :nth-of-type(1)")
Selecteurs (".top :not(:last-child)")

Exemple : 

Selecteurs ('h1')


------------- Auto correction
div : class top

h1

  • li : class =A et B id=item.A
  • li : class =A id=b
  • li : class =B id=c

footer

Flex

🚀Flex : vidéo & Co 

Article à lire : 🆘lien

Cours : lien

 Projet : use case

Flex : animation

 


Plus d'infos »

Plan

 

Plan : 

  1. Editeur
  2. Balises de base
  3. Attribut
  4. Sélecteur
  5. Inspecteur (tous les jours sur notre fil rouge)
  6. Projet
  7. 🚀Flex box
  8. Flexible
  9. DS
  10. Bootstrap


Les références de cours :

https://web.dev/learn/
https://www.w3schools.com/
https://developer.mozilla.org/en-US/docs/Learn

Balises inline/block !

 Certains se posent la question sur la largeur des paragraphes ! 

Voici quelques informations.


Voici des exemples sur le comportement display:bloc

 Notez dans l'exemple 2 : La somme des largeurs des p est inférieure à la largeur du body ; ceci n'implique pas que les paragraphes sont en ligne !

Un ancien étudiant travaillant chez microsoft vous parle !


Git, GitHub

 Vous devez installer sur votre machine GIT et avoir un compte GitHub


🆒how to

🆘 Les étudiants peuvent vous aider à installer les outils

🆘Langage C : visualisateur

🆒Visualiser le code




Vous pouvez voir le code se dérouler étape par étape 


Installation de CPP dans visual code


DD@DESKTOP-1UTD9HP CLANG64 ~
$ pacman -S --needed base-devel mingw-w64-ucrt-x86_64-toolchain
:: There are 19 members in group mingw-w64-ucrt-x86_64-toolchain:
:: Repository ucrt64
   1) mingw-w64-ucrt-x86_64-binutils  2) mingw-w64-ucrt-x86_64-crt-git
   3) mingw-w64-ucrt-x86_64-gcc  4) mingw-w64-ucrt-x86_64-gcc-ada
   5) mingw-w64-ucrt-x86_64-gcc-fortran  6) mingw-w64-ucrt-x86_64-gcc-libgfortran
   7) mingw-w64-ucrt-x86_64-gcc-libs  8) mingw-w64-ucrt-x86_64-gcc-objc
   9) mingw-w64-ucrt-x86_64-gdb  10) mingw-w64-ucrt-x86_64-gdb-multiarch
   11) mingw-w64-ucrt-x86_64-headers-git  12) mingw-w64-ucrt-x86_64-libgccjit
   13) mingw-w64-ucrt-x86_64-libmangle-git  14) mingw-w64-ucrt-x86_64-libwinpthread-git
   15) mingw-w64-ucrt-x86_64-make  16) mingw-w64-ucrt-x86_64-pkgconf
   17) mingw-w64-ucrt-x86_64-tools-git  18) mingw-w64-ucrt-x86_64-winpthreads-git
   19) mingw-w64-ucrt-x86_64-winstorecompat-git

Enter a selection (default=all): y
error: invalid number: y

Enter a selection (default=all):
resolving dependencies...
looking for conflicting packages...


Après installation : 

C:\Users\DD>node --version
v20.7.0

C:\Users\DD>gcc --version
gcc (Rev3, Built by MSYS2 project) 13.2.0
Copyright (C) 2023 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.


C:\Users\DD>g++ --version
g++ (Rev3, Built by MSYS2 project) 13.2.0
Copyright (C) 2023 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.


C:\Users\DD>gdb --version
GNU gdb (GDB) 14.1
Copyright (C) 2023 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.

🥷J'ai du reinstallé GIT qui semblait bloquer la compilation !

Sélecteur en action !

Try



🥷Correction de bug chez microsoft

 👏Corriger des bug chez Microsoft



👏Comme M. Dupont corriger des bug chez Microsoft ... 

Les sélecteurs

 

Sélecteurs

Vidéos

https://sites.google.com/view/duponthtml/selecteurs?authuser=0 


Cours

http://dupontcss.blogspot.com/p/selecteurs.html


Exemple de vidéo


Des outils sont disponibles pour simuler du CSS : Exemples


TD Sélecteurs


Plan du Cours

Plan : 

  1. Editeur
  2. Balises de base
  3. Attribut
  4. 🚀Sélecteur
  5. Inspecteur
  6. Projet
  7. Flex box
  8. Flexible
  9. Empilement
  10. DS
  11. Bootstrap


Les références de cours :

https://web.dev/learn/
https://www.w3schools.com/
https://developer.mozilla.org/en-US/docs/Learn

Notre fil rouge

 


Un monde vivant !




L'outil de 3D est en panne !

 🆘 https://github.com/MicrosoftEdge/DevTools/issues/186

🥷Défi du WE : Sauvez la princesse Lélia !


Cliquez pour accéder à la page où le bouton permet la destruction de l'étoile. Mais le bouton semble vérouillé !

🆘Trouvez une faille dans la protection de l'étoile


🪛
Autre défi ! trouve le code secret 







🚀 Microsoft

Edge

cas d'étude !


Voir : https://microsoftedge.github.io/Demos/



🚀Et Autres Produits


Inscription à : Articles (Atom)