-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
470 lines (467 loc) · 24.3 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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Coding Resources</title>
</head>
<body>
<header class="header">
<section class="header__info">
<h1 class="header__title center uppercase">Coding Resources</h1>
<p class="header__text">As part of my coding journey, I've come across so many links that I bookmarked
to check out later and then would find it difficult to find the links that I found really helpful. This is where
this resources page started out, to help me locate the links I would want to go back to again. I've found it so
useful that I thought that I would share it with others too! As I progress through my coding journey I will add
on further links to resources that I have found helpful.</p>
</section>
<nav class="nav uppercase">
<ul class="nav__list flex">
<li class="nav__item"><a class="nav__link flex" href="#courses"><ion-icon class="icon nav__icon"
name="book-outline"></ion-icon>Courses</a></li>
<li class="nav__item"><a class="nav__link flex" href="#tools"><ion-icon class="icon nav__icon"
name="hammer-outline"></ion-icon>Tools</a></li>
<li class="nav__item"><a class="nav__link flex" href="#practice"><ion-icon class="icon nav__icon"
name="create-outline"></ion-icon>Practice</a></li>
<li class="nav__item"><a class="nav__link flex" href="#blogs"><ion-icon class="icon nav__icon"
name="information-circle-outline"></ion-icon>Blogs</a></li>
<li class="nav__item"><a class="nav__link flex" href="#fonts"><ion-icon class="icon nav__icon"
name="document-text-outline"></ion-icon>Fonts</a></li>
<li class="nav__item"><a class="nav__link flex" href="#colours"><ion-icon class="icon nav__icon"
name="color-filter-outline"></ion-icon>Colours</a></li>
<li class="nav__item"><a class="nav__link flex" href="#images"><ion-icon class="icon nav__icon"
name="camera-outline"></ion-icon>Images</a></li>
<li class="nav__item"><a class="nav__link flex" href="#icons"><ion-icon class="icon nav__icon"
name="cube-outline"></ion-icon>Icons</a></li>
<!-- <li class="nav__item"><a class="nav__link flex" href="#design"><ion-icon class="icon nav__icon"
name="bulb-outline"></ion-icon>Design</a></li> -->
<li class="nav__item"><a class="nav__link flex" href="#speed"><ion-icon class="icon nav__icon"
name="speedometer-outline"></ion-icon>Speed</a></li>
<li class="nav__item"><a class="nav__link flex" href="#html"><ion-icon class="icon nav__icon"
name="logo-html5"></ion-icon>HTML</a></li>
<li class="nav__item"><a class="nav__link flex" href="#css"><ion-icon class="icon nav__icon"
name="logo-css3"></ion-icon>CSS</a></li>
<li class="nav__item"><a class="nav__link flex" href="#javascript"><ion-icon class="icon nav__icon"
name="logo-javascript"></ion-icon>JavaScript</a></li>
<!-- <li class="nav__item"><a class="nav__link flex" href="#react"><ion-icon class="icon nav__icon"
name="logo-react"></ion-icon>React</a></li> -->
<!-- <li class="nav__item"><a class="nav__link flex" href="#nodejs"><ion-icon class="icon nav__icon"
name="logo-nodejs"></ion-icon>Node.js</a></li> -->
<!-- <li class="nav__item"><a class="nav__link flex" href="#python"><ion-icon class="icon nav__icon"
name="logo-python"></ion-icon>Python</a></li> -->
</ul>
</nav>
</header>
<main>
<section class="group" id="courses">
<header class="group__header flex">
<ion-icon class="icon group__icon" name="book-outline"></ion-icon>
<h2 class="group__title uppercase">Online Courses</h2>
</header>
<article class="container__resource grid">
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://www.udemy.com/">Udemy</a>
</h3>
<p class="resource__text">A large range of online video tutorial courses by many different
instructors.
<span class="resource__price">(Paid / Free)</span>
</p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://www.codecademy.com/">CodeCademy</a></h3>
<p class="resource__text">Online courses on different programming languages and curated career path
courses. <span class="resource__price">(Paid / Free)</span></p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://www.freecodecamp.org/">FreeCodeCamp</a>
</h3>
<p class="resource__text">Online courses on different programming languages. <span
class="resource__price">(Free)</span></p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://www.theodinproject.com/">The Odin
Project</a>
</h3>
<p class="resource__text">Free comprehensive curriculum will equip you to be a full stack developer, no matter
your current experience level. <span class="resource__price">(Free)</span></p>
</div>
<div>
<h3 class="resource__title"><a class="resource__link" href="https://codefirstgirls.com/">Code
First Girls</a></h3>
<p class="resource__text">Live courses on programming languages in various course formats - MOOC
Sprints (4 weeks), MOOC Challenges, Kickstarter Courses (8 weeks) and CFG degree. <span
class="resource__price">(Free)</span></p>
</div>
</article>
</section>
<section class="group" id="tools">
<header class="group__header flex">
<ion-icon class="icon group__icon" name="hammer-outline"></ion-icon>
<h2 class="group__title uppercase">Development Tools</h2>
</header>
<article class="container__resource grid">
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://code.visualstudio.com/">Visual Studio
Code</a></h3>
<p class="resource__text">IDE and code editor. <span class="resource__price">(Free)</span></p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://codesandbox.io/">Code
Sandbox</a></h3>
<p class="resource__text">Online code editor great for collaboration. <span class="resource__price">(Paid /
Free)</span></p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://codepen.io/">Code Pen</a></h3>
<p class="resource__text">Online code editor for front-end designers and developers. Build and deploy a
website, show off your work, build test cases to learn and debug, and find inspiration.. <span
class="resource__price">(Paid / Free)</span></p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://github.com/">GitHub</a></h3>
<p class="resource__text">Online code hosting platform for version control and collaboration. <span
class="resource__price">(Free)</span></p>
<p class="resource__text"><a href="https://www.theodinproject.com/lessons/foundations-git-basics">Git
basics</a>, and <a href="https://cbea.ms/git-commit/">how to write a git commit message</a></p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="">Netlify</a></h3>
<p class="resource__text">Website hosting platform. <span class="resource__price">(Paid / Free)</span></p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link"
href="https://www.theodinproject.com/lessons/foundations-installations">Virtual Machine</a></h3>
<p class="resource__text">The Odin Project shows how to install and setup a virtual machine on a PC with <a
href="https://www.virtualbox.org/wiki/VirtualBox">VirtualBox</a> and <a
href="https://xubuntu.org/">Xubuntu</a>. <span class="resource__price">(Free)</span></p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://www.mysql.com/products/workbench/">MySQL
Workbench</a></h3>
<p class="resource__text">Visually design, model, generate and manage MySQL databases. <span
class="resource__price">(Free)</span></p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://draw.io/">Draw.io</a></h3>
<p class="resource__text">Online diagram software for creating flowcharts, process diagrams etc. <span
class="resource__price">(Free)</span></p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://www.figma.com/">Figma</a></h3>
<p class="resource__text">Online collaborative interface design tool. <span
class="resource__price">(Free)</span></p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://chat.openai.com/">ChatGPT</a></h3>
<p class="resource__text">AI tool, extremely useful for debugging and correcting code (but doesn't always
answer correctly, so use with caution and thoroughly check the AI's suggestion). <span
class="resource__price">(Free)</span></p>
</div>
</article>
</section>
<section class="group" id="practice">
<header class="group__header flex">
<ion-icon class="icon group__icon" name="create-outline"></ion-icon>
<h2 class="group__title uppercase">Practice Your Programming Skills</h2>
</header>
<article class="container__resource grid">
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://www.codewars.com/">Codewars</a>
</h3>
<p class="resource__text">Solve programming tasks (kata), different levels and programming languages
available.</p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://www.frontendmentor.io/">Frontend
Mentor</a></h3>
<p class="resource__text">Frontend web development challenges.</p>
</div>
</article>
</section>
<section class="group" id="blogs">
<header class="group__header flex">
<ion-icon class="icon group__icon" name="information-circle-outline"></ion-icon>
<h2 class="group__title uppercase">Blogs & Forums</h2>
</header>
<article class="container__resource grid">
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://stackoverflow.com/">Stack
Overflow</a></h3>
<p class="resource__text">The go to place to search for answers or ask your programming question.
</p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link"
href="https://bootcamp.uxdesign.cc/create-a-dark-mode-for-your-website-d62e73a4275d">Create A Dark
Mode</a></h3>
<p class="resource__text">An article by Jake McCambley detailing how to create a toggle colour theme button.
</p>
</div>
</article>
</section>
<section class="group" id="fonts">
<header class="group__header flex">
<ion-icon class="icon group__icon" name="document-text-outline"></ion-icon>
<h2 class="group__title uppercase">Font Resources</h2>
</header>
<article class="container__resource grid">
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://fonts.google.com/">Google
Fonts</a></h3>
<p class="resource__text">#1 resource for free webfonts. Over 1500 open source fonts available to
use.</p>
</div>
</article>
</section>
<section class="group" id="colours">
<header class="group__header flex">
<ion-icon class="icon group__icon" name="color-filter-outline"></ion-icon>
<h2 class="group__title uppercase">Colour Resources</h2>
</header>
<article class="container__resource grid">
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://maketintsandshades.com/">Tint
& Shade Generator</a></h3>
<p class="resource__text">The purpose of this tool is to accurately produce lighter and darker
versions of any given hex colour.</p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link"
href="https://coolors.co/contrast-checker/112a46-acc8e5">Coolers Colour Contrast
Checker</a>
</h3>
<p class="resource__text">Calculate the contrast ratio of text and background colours. Essential
accessibility check.</p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link"
href="https://www.rapidtables.com/convert/color/index.html">Colour Code Converter</a>
</h3>
<p class="resource__text">Hex, RGB, HSV and HSL colour conversion tool.</p>
</div>
</article>
</section>
<section class="group" id="images">
<header class="group__header flex">
<ion-icon class="icon group__icon" name="camera-outline"></ion-icon>
<h2 class="group__title uppercase">Image Resources</h2>
</header>
<article class="container__resource grid">
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://www.pexels.com/">Pexels</a>
</h3>
<p class="resource__text">Royalty free stock photos, images and videos. <span
class="resource__price">(Free)</span></p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://unsplash.com/">Unsplash</a>
</h3>
<p class="resource__text">Royalty free stock photos and images. <span class="resource__price">(Paid /
Free)</span></p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://www.gimp.org/">GIMP</a></h3>
<p class="resource__text">Open source image editor. <span class="resource__price">(Free)</span></p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://www.canva.com/">Canva</a>
</h3>
<p class="resource__text">Online graphic design tool - can be used to create presentations, videos,
social media posts, posters etc. <span class="resource__price">(Paid / Free)</span></p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://undraw.co/illustrations">unDraw
Illustrations</a></h3>
<p class="resource__text">Open source illustrations. <span class="resource__price">(Free)</span></p>
</div>
</article>
</section>
<section class="group" id="icons">
<header class="group__header flex">
<ion-icon class="icon group__icon" name="cube-outline"></ion-icon>
<h2 class="group__title uppercase">Icon Resources</h2>
</header>
<article class="container__resource grid">
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://heroicons.com/">Hero
Icons</a>
</h3>
<p class="resource__text">Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.</p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://ionic.io/ionicons">Ion
Icons</a>
</h3>
<p class="resource__text">Premium designed icons for use in web, iOS, Android, and desktop apps.
Support for SVG and web font. Completely open source, MIT licensed and built by Ionic.</p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://icons.getbootstrap.com/">Bootstrap
Icons</a></h3>
<p class="resource__text">Free, high quality, open source icon library with over 1,800 icons.
Include them anyway you like - SVGs, SVG sprite, or web fonts.</p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://phosphoricons.com/">Phosphor
Icons</a>
</h3>
<p class="resource__text">Phosphor is a flexible icon family for interfaces, diagrams, presentations, free and
open source.</p>
</div>
</article>
</section>
<!-- <section class="group" id="design">
<header class="group__header flex">
<ion-icon class="icon group__icon" name="bulb-outline"></ion-icon>
<h2 class="group__title uppercase">Design Ideas & Inspiration</h2>
</header>
<article class="container__resource grid">
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href=""></a></h3>
<p class="resource__text"></p>
</div>
</article>
</section> -->
<section class="group" id="speed">
<header class="group__header flex">
<ion-icon class="icon group__icon" name="speedometer-outline"></ion-icon>
<h2 class="group__title uppercase">Site Speed Testing & Optimisation</h2>
</header>
<article class="container__resource grid">
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://validator.w3.org/">W3C HTML
Validator</a></h3>
<p class="resource__text">Online HTML validation tool - check your HTML via URI, upload or direct
input.</p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://jigsaw.w3.org/css-validator/">W3C CSS
Validator</a></h3>
<p class="resource__text">Online CSS validation tool - check your CSS via URI, upload or direct
input.</p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://squoosh.app/">Sqoosh</a>
</h3>
<p class="resource__text">Free online app that reduces images sizes.</p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://pagespeed.web.dev/">PageSpeed
Insights</a></h3>
<p class="resource__text">Test your webpage speed.</p>
</div>
</article>
</section>
<section class="group" id="html">
<header class="group__header flex">
<ion-icon class="icon group__icon" name="logo-html5"></ion-icon>
<h2 class="group__title uppercase">HTML Resources</h2>
</header>
<article class="container__resource grid">
<div class="resource">
<h3 class="resource__title"><a class="resource__link"
href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN HTML Documentation</a>
</h3>
<p class="resource__text">Full reference documentation for HTML, includes browser compatibility and
depreciation information.</p>
</div>
</article>
</section>
<section class="group" id="css">
<header class="group__header flex">
<ion-icon class="icon group__icon" name="logo-css3"></ion-icon>
<h2 class="group__title uppercase">CSS Resources</h2>
</header>
<article class="container__resource grid">
<div class="resource">
<h3 class="resource__title"><a class="resource__link"
href="https://developer.mozilla.org/en-US/docs/Web/CSS">MDN CSS Documentation</a>
</h3>
<p class="resource__text">Full reference documentation for CSS, includes browser compatibility and
depreciation information.</p>
</div>
<div class="resouce">
<h3 class="resource__title"><a class="resource__link" href="https://caniuse.com/">Can I Use?</a>
</h3>
<p class="resource__text">Provides up-to-date browser support tables for support of front-end web
technologies on desktop and mobile browsers.</p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://getbem.com/naming/">BEM
Naming Convention</a></h3>
<p class="resource__text">A naming convention for CSS classes.</p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://flexbox.malven.co/">Flexbox Malven</a>
</h3>
<p class="resource__text">A visual guide to CSS flexbox settings.</p>
</div>
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href="https://grid.malven.co/">Grid Malven</a></h3>
<p class="resource__text">A visual guide to CSS grid settings.</p>
</div>
</article>
</section>
<section class="group" id="javascript">
<header class="group__header flex">
<ion-icon class="icon group__icon" name="logo-javascript"></ion-icon>
<h2 class="group__title uppercase">JavaScript Resources</h2>
</header>
<article class="container__resource grid">
<div class="resource">
<h3 class="resource__title"><a class="resource__link"
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">MDN JavaScript Documentation</a>
</h3>
<p class="resource__text">Full reference documentation for JavaScript.</p>
</div>
</article>
</section>
<!-- <section class="group" id="react">
<header class="group__header flex">
<ion-icon class="icon group__icon" name="logo-react"></ion-icon>
<h2 class="group__title uppercase">React Resources</h2>
</header>
<article class="container__resource grid">
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href=""></a></h3>
<p class="resource__text"></p>
</div>
</article>
</section> -->
<!-- <section class="group" id="nodejs">
<header class="group__header flex">
<ion-icon class="icon group__icon" name="logo-nodejs"></ion-icon>
<h2 class="group__title uppercase">Node.js Resources</h2>
</header>
<article class="container__resource grid">
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href=""></a></h3>
<p class="resource__text"></p>
</div>
</article>
</section> -->
<!-- <section class="group" id="python">
<header class="group__header flex">
<ion-icon class="icon group__icon" name="logo-python"></ion-icon>
<h2 class="group__title uppercase">Python Resources</h2>
</header>
<article class="container__resource grid">
<div class="resource">
<h3 class="resource__title"><a class="resource__link" href=""></a></h3>
<p class="resource__text"></p>
</div>
</article>
</section> -->
<footer class="center">Copyright © <span class="year">2023</span> by V. Tickner</footer>
</main>
<script src="script.js"></script>
<!-- For Ion Icons -->
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>