-
Notifications
You must be signed in to change notification settings - Fork 30
/
index.html
178 lines (157 loc) · 8.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="fr">
<!--
Auteur : Jérémy Mouzin (www.javascriptdezero.com)
Twitter : https://twitter.com/jeremymouzin
GitHub du code source de ce site : https://github.com/javascriptdezero/ressources-dev-web
👀 N'hésitez pas à jeter un oeil au code source ! C'est fait pour ça 👍.
Tout le code source de ce site (HTML, CSS, JavaScript) est disponible et commenté en français sur GitHub dans un but pédagogique. N'hésitez pas à partager ce site à vos amis débutants dans le développement web. Merci ❤️.
-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- Ajout de Google Analytics pour suivre le trafic sur ce site -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-114307881-4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-114307881-4');
</script>
<!-- Utilisation de plausible également pour suivre le trafic -->
<script defer data-domain="ledevweb.fr" src="https://plausible.jeremymouzin.com/js/script.js"></script>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<!-- Chargement de polices de caractères sympathiques -->
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<!--
On fait en sorte que le design apparaisse de la même façon sur tous les navigateurs.
C'est la façon moderne d'appliquer un reset CSS, j'utilise Normalize.css pour ça.
Plus d'infos sur https://necolas.github.io/normalize.css/
-->
<link rel="stylesheet" href="./css/normalize.css" />
<!-- On ajoute le style.css de notre cru ! -->
<link rel="stylesheet" href="./css/style.css" />
<!--
On ajoute du code pour l'affichage du site dans Twitter (Twitter Cards)
Doc : https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html
-->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@JeremyMouzin">
<meta name="twitter:creator" content="@JeremyMouzin">
<meta property="og:url" content="https://www.ledevweb.fr" />
<meta property="og:title" content="Les meilleures ressources pour apprendre le développement web" />
<meta property="og:description" content="Découvrez les meilleures ressources en français pour apprendre le développement web. Chaînes YouTube, formations, podcasts, sites internet, le contenu s'améliore grâce à vos contributions." />
<meta property="og:image" content="https://www.ledevweb.fr/images/twitter-card.jpg" />
<title>Les chaînes YouTube françaises sur le développement web</title>
</head>
<body>
<header>
<h1>
Les chaînes <img src="images/youtube.png" alt="logo youtube" />YouTube françaises sur le développement web
</h1>
<section id="slogan">
<p>
Pas facile de trouver les meilleurs développeurs web français sur YouTube...<br /><br />
Ne cherchez plus.<br />Je les ai listés pour vous.
</p>
<div id="vignettes">
<img src="images/anthony-welc.jpg" alt="Anthony Welc" />
<img src="images/apprendre-a-coder.jpg" alt="Apprendre à coder" />
<img src="images/benjamin-code.jpg" alt="Benjamin Code" />
<img src="images/dev-theory.jpg" alt="Dev Theory" />
<img src="images/developpeur-libre.jpg" alt="Développeur Libre" />
<img src="images/god-of-macro.jpg" alt="GodOfMacro" />
<img src="images/grafikart.jpg" alt="Grafikart" />
<img src="images/jeremy-mouzin.jpg" alt="Jérémy Mouzin" />
<img src="images/graven.jpg" alt="Graven" />
<img src="images/les-teachers-du-net.jpg" alt="Les teachers du Net" />
<img src="images/lior-chamla.jpg" alt="Lior Chamla" />
<img src="images/mike.jpg" alt="Mike Codeur" />
<img src="images/pierre-giraud.jpg" alt="Pierre Giraud" />
<img src="images/pierre-terrat.jpg" alt="Pierre Terrat" />
<img src="images/primfx.jpg" alt="PrimFX" />
<img src="images/thibaud-dauce.jpg" alt="Thibaud Dauce" />
</div>
</section>
</header>
<section class="infos">
<div class="bloc-info" id="make-it-grow">
<span class="mini-titre">Make it grow</span>
<p>
Ajoutez votre chaîne préférée ou demandez une fonctionnalité : un tweet sur
<a href="https://twitter.com/jeremymouzin">@JeremyMouzin</a> me suffira.
</p>
</div>
<div class="bloc-info" id="merci">
<span class="mini-titre">Merci !</span>
<p>
Merci à tous ceux qui ont déjà partagé leurs chaînes préférées et m'ont fait des retours constructifs sur ce
site !
</p>
</div>
<div class="bloc-info" id="share-the-love">
<span class="mini-titre">Share the love</span>
<p>Vous aimez cette liste ? Vous voulez la voir grossir ? Alors partagez-là avec le bouton ci-dessous :</p>
<p><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large" data-text="Découvrez la #liste de tous les #webdev français sur #YouTube. Parfait pour apprendre le développement web en vidéo !" data-url="https://www.ledevweb.fr" data-via="JeremyMouzin" data-related="JeremyMouzin" data-lang="fr" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>
</div>
<div class="bloc-info" id="coming-soon">
<span class="mini-titre">Coming soon</span>
<p>
Filtrage par langage, framework, outil. Classement par nombre de vues, nombre de vidéos et d'abonnés. Ajout
des comptes Twitter.
</p>
</div>
<div class="bloc-info" id="un-affichage-juste">
<span class="mini-titre">Un affichage juste</span>
<p>
La liste est affichée de façon aléatoire à chaque chargement pour permettre aux chaînes peu connues de se
faire connaître.
</p>
<p id="mini-texte">(Car on ne lit jamais une longue liste toute entière, seulement le début 😅)</p>
</div>
<div class="bloc-info" id="vocation-pedagogique">
<span class="mini-titre">Un code à vocation pédagogique</span>
<p>L'intégralité du <a href="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/javascriptdezero/ressources-dev-web">code source de ce site</a> a été rédigé et commenté en français dans un but pédagogique. J'explique aussi tous mes choix techniques.</p>
</div>
</section>
<!-- Shameless plug! (Je fais ma pub, non j'ai pas honte 🤣) -->
<section id="votre-serviteur">
<div class="contenu">
<img src="images/jeremy-mouzin.jpg" alt="Jérémy Mouzin" />
<div class="bloc-info">
<span class="mini-titre">Votre serviteur</span>
<p>
Je suis le créateur de la formation vidéo
<a href="https://www.javascriptdezero.com">JavaScript de Zéro</a> qui vous apprend à programmer sans
connaissance préalable.
</p>
</div>
</div>
</section>
<section id="section-liste">
<h2 id="titre-la-liste">La liste</h2>
<!-- Compteur dynamique du nombre total de chaînes YouTube affichées -->
<div id="conteneur-compteur"><p id="compteur">chaînes YouTube</p></div>
<!--
Voici l'élément liste non ordonnée (<ul>) qui va contenir la liste des développeurs web !
La liste est vide ici car elle sera alimentée dynamiquement par le code dans script.js.
-->
<ul id="liste">
</ul>
</section>
<script src="./js/script.js"></script>
<footer>
<p>Design & Code par <a href="https://twitter.com/jeremymouzin">Jérémy Mouzin</a>.</p>
<p><a href="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/javascriptdezero/ressources-dev-web">Code source sur GitHub</a>, commenté en 🇫🇷 français avec ❤️.</p>
</footer>
</body>
</html>