-
Notifications
You must be signed in to change notification settings - Fork 1
/
youtube.html
executable file
·181 lines (180 loc) · 12 KB
/
youtube.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
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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=Press+Start+2P&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="manifest" href="/site.webmanifest">
<title>DevDum!</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header>
<div id="header">
<svg version="1.1" id="Capa_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"></svg>
</div>
</div>
<div id="mobileMenuToggle" title="Menu">Menu</div>
<div id="headerLeft">
<a href="/"><img alt="Home" title="Home" id="menuToggle" src="DevDum copy (1).png" width="190px"/></a>
</div>
<div id="headerRight">
<nav>
<ul>
<li><a id="github" rel="nofollow" href="https://github.com/" target="_blank">GitHub</a></li>
<li><a id="dailydev"rel="nofollow" href="https://app.daily.dev/" target="_blank">DailyDev</a></li>
<li><a id="w3" rel="nofollow" href="https://www.w3schools.com/" target="_blank">W3Schools</a></li>
<li><a id="mdn" rel="nofollow" href="https://developer.mozilla.org/en-US/" target="_blank">MDN WebDocs</a></li>
<li><a id="stack"rel="nofollow" href="https://stackoverflow.com/" target="_blank">StackOverflow</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="wrapall">
<div id="sidebar">
<div id="stickThis">
<div id="sidebarContent">
<!-- <div id="logo"><imd </h1>
<h4>Less Searching. More Learning.</h4> -->
<aside>
<div><a id="color1" href="html.html"><img alt="HTML" title="HTML" src="icons/output-onlineimagetools-html.png"/></a></div>
<div><a id="color2" href="style.html"><img alt="CSS" title="CSS" src="icons/output-onlineimagetools-css.png"/></a></div>
<div><a id="color3" href="javascript.html"><img alt="JavaScript" title="Javascript" src="icons/output-onlineimagetools-js.png" width="53px"/></a></div>
<div><a id="color4" href="bootstrap.html"><img alt="Bootstrap" title="Bootstrap" src="icons/output-onlineimagetools-bootstrap.png"/></a></div>
<div><a id="color5" href="react.html"><img alt="React" title="React" src="icons/output-onlineimagetools-react.png"/></a></div>
<div><a id="color6" href="nodejs.html"><img alt="Node" title="Node" src="icons/output-onlineimagetools-nodejs.png" width="50px"/></a></div>
<div><a id="color7" href="api.html"><img alt="API" title="API" src="icons/output-onlineimagetools-api.png"/></a></div>
<div><a id="color8" href="mysql.html"><img alt="SQL" title="SQL" src="icons/output-onlineimagetools-sql.png"/></a></div>
<div><a id="color9" href="github.html"><img alt="GitHub" title="GitHub" src="icons/output-onlineimagetools-github.png"/></a></div>
<div><a id="color10" href="youtube.html"><img alt="YouTube" title="YouTube" src="icons/output-onlineimagetools-youtube.png"/></a></div>
<div><a id="color11" href="more.html"><img alt="More" title="More" src="icons/output-onlineimagetools-more.png" width="48px"/></a></div>
<a class="back2Top" href="#"><code>⮝ Back to Top ⮝</code></a>
</aside>
</div>
</div>
<div id="stick-here"></div>
</div>
<div id="main">
<section id="page">
<main>
<article id="yellow">
<h1 class="display-2">YouTube<span class="vim-caret"><img alt="youtube" title="youtube" src="icons/output-onlineimagetools-youtube.png" width="63px"/></span></h1>
<h4><strong>A hanpicked list of YouTube channels and tutorial videos to watch and follow for practicing your web development skills.</strong></h4>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for resources..." title="Type in a name">
</article>
<ul id="myUL">
<article>
<h2><a href="https://www.youtube.com/c/WebDevSimplified" target="_blank">Channel | Web Dev Simplified</a></h2>
<p>Web Dev Simplified is all about teaching web development skills and techniques in an efficient and practical manner.</p>
</article>
<article>
<h2><a href="https://www.youtube.com/channel/UCWWRLPeMNMeDhpfE7R6qCyw" target="_blank"> Channel | The Nerdy Dev</a></h2>
<p>Full Stack Development Tutorials covering Modern Web Development with technologies ranging from React.js, Vue.js, Angular.js, Angular 8 in the frontend to Node.js</p>
</article>
<article>
<h2><a href="https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw" target="_blank">Channel | Kevin Powell</a></h2>
<p>Helping you learn how to make the web, and make it look good while you're at it. With videos every Tuesday and Thursday,
I'll be bringing you How Tos and Tutorials, as well as simple tips and tricks, with a big focus on helping people see how wonderful CSS is!</p>
</article>
<article>
<h2><a href="https://www.youtube.com/channel/UC-T8W79DN6PBnzomelvqJYw" target="_blank">Channel | James Q Quick</a></h2>
<p>Want to learn more about Web Development? Then, you're in the right place! I LEARN the newest techniques in Web Development, Design, and Tools. I BUILD projects for myself and others.
I TEACH others through online content.</p>
</article>
<article>
<h2><a href="https://www.youtube.com/c/CodingArtist" target="_blank">Channel | Coding Artist </a></h2>
<p>Coding Artist provides free HTML, CSS and Javascript tutorials along with practical examples.</p>
</article>
<article>
<h2><a href="https://www.youtube.com/channel/UCqrILQNl5Ed9Dz6CGMyvMTQ" target="_blank">Channel | Clever Programmer</a></h2>
<p>You can find awesome programming lessons here! Also, expect programming tips and tricks that will take your coding skills to the next level.</p>
</article>
<article>
<h2><a href="https://www.youtube.com/c/CodingAddict/featured" target="_blank">Channel | Coding Addict</a></h2>
<p>Coding Addict contains tutorial videos and projects for html, css, javascript, nodejs, reactjs, bootstrap, snippers, plugins, libraries, and more...</p>
</article>
<article>
<h2><a href="https://www.youtube.com/c/CoderOne" target="_blank"> Channel | Coder One </a></h2>
<p>CoderOne is a Learning Channel For Web Development, Software Enginnering and Coding All in one place with a High quality Video/Written
Tutorials along side a Learning Platform that allows you to dig deep and learn everything that comes new.</p>
</article>
<article>
<h2><a href="https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA" target="_blank">Channel | Traversy Media </a></h2>
<p>tutorials for all of the latest web technologies from the building blocks of HTML, CSS & JavaScript to frontend frameworks like React and Vue to backend technologies like Node.js, Python and PHP.</p>
</article>
<article>
<h2><a href="https://www.youtube.com/channel/UCxX9wt5FWQUAAz4UrysqK9A" target="_blank">Channel | CS Dojo </a></h2>
<p>tutorials for all of the latest web technologies from the building blocks of HTML, CSS & JavaScript to frontend frameworks like React and Vue to backend technologies like Node.js, Python and PHP.</p>
</article>
<article>
<h2><a href="https://www.youtube.com/watch?v=hdI2bqOjy3c target="_blank"> Tutorial| Javascript Crash course</a></h2>
<p>In this crash course we will go over the fundamentals of JavaScript including more modern syntax like classes, arrow functions, etc. This is the starting point on my channel for learning JS.</p>
</article>
<article>
<h2><a href="https://www.youtube.com/watch?v=fBNz5xF-Kx4&t=1s" target="_blank">Tutorial | Node.js Crash Course</a></h2>
<p>In this crash course we will explore Node.js fundamentals including modules such as path, url, fs, events and we will create an HTTP server from scratch without Express and deploy to Heroku.</p>
</article>
<article>
<h2><a href="https://www.youtube.com/watch?v=w7ejDZ8SWv8" target="_blank">Tutorial | React.js Crash Course</a></h2>
<p>Get started with React in this crash course. We will be building a task tracker app and look at components, props, state,
hooks, working with an API and more.</p>
</article>
<article>
<h2><a href="https://www.youtube.com/watch?v=6PC_hz5TMYY" target="_blank"> Tutorial | Build a Calculator with React</a></h2>
<p>By the end of this video you will have learned how to build your own calculator with react JS.</p>
</article>
<article>
<h2><a href="https://www.youtube.com/watch?v=ZVznzY7EjuY" target="_blank"> Tutorial | Build a Zoom Clone with Nodejs</a></h2>
<p>By the end of this video you will have learned how to build your own Zoom Clone with Nodejs.</p>
</article>
<article>
<h2><a href="https://www.youtube.com/watch?v=p3qvj9hO_Bo" target="_blank">Tutorial | Learn SQL in 60 minutes</a></h2>
<p>SQL is the standard language for interacting with and manipulating data in a relational database system, and is one of the most important concepts you can learn in programming.
It allows you to create, read, update, and delete data which is something nearly every application will need to do.</p>
</article>
<article>
<h2><a href="https://www.youtube.com/watch?v=OE7kml0pigw&t=3s" target="_blank">Tutorial | Build a Weather App With Javascript </a></h2>
<p>Integrating with APIs is a crucial skill for any web developer to succeed. In this video we will be integrating with the DarkSky Weather API and the Google Places API. Using these APIs we will learn how to connect to an API from both the client and the server. </p>
</article>
</ul>
</main>
<footer>
<p>2022©DevDum! Less searching. More learning. <a rel="nofollow" href="https://github.com/rdevans87/DevDum" target="_blank" rel="nofollow">Hosted on GitHub!</a></p>
<a href="https://www.buymeacoffee.com/ryanevans" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 42px !important;width: 180px !important;" ></a>
<a href="https://www.producthunt.com/posts/devdum-code-smarter-not-harder?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-devdum-code-smarter-not-harder" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=343032&theme=light"
alt="DevDum! Code Smarter. Not Harder. - 200+ Resources for web developers. It's a no brainer! | Product Hunt" style="width: 200px; height: 43px;" width="250" height="54" /></a>
</footer>
</section>
</div>
</div>
<script>
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
article = ul.getElementsByTagName("article");
for (i = 0; i < article.length; i++) {
a = article[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
article[i].style.display = "";
} else {
article[i].style.display = "none";
}
}
}
</script>
</body>
</html>