-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
427 lines (415 loc) · 25.6 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
<!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="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="./pages/index.css">
<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=Inter:wght@400;600;800&display=swap" rel="stylesheet">
<title>Practicum 100 Web Development Toolkit</title>
</head>
<body class="page">
<div class="page__container">
<header class="header">
<img src="./images/logo_place_header.png" alt="practicum logo" class="logo logo_place_header">
<p class="header__slogan">Anyone Can Do It!</p>
</header>
<main>
<section class="lead">
<p class="lead__subtitle">Web Developer | Tool-Kit Compendium</p>
<h1 class="lead__title"><span class="lead__accent">Helpful</span> tools & links to <span
class="lead__accent">get started</span> with web-development.</h1>
<p class="lead__subtitle">What are you waiting for? <span class="lead__accent">Let’s go!</span></p>
<img src="./images/developer.jpg" alt="" class="lead__image">
</section>
<nav class="nav">
<ul class="nav__group">
<li class="nav__item">
<a href="#tools" class="nav__link">
<i class="fas fa-toolbox nav__icon"></i>
Tools
</a>
</li>
<li class="nav__item">
<a href="#html" class="nav__link">
<i class="fab fa-html5 nav__icon"></i>
HTML
</a>
</li>
<li class="nav__item">
<a href="#css" class="nav__link">
<i class="fab fa-css3-alt nav__icon"></i>
css
</a>
</li>
<li class="nav__item">
<a href="#js" class="nav__link nav__link_disabled">
<i class="fab fa-js nav__icon"></i>
js
</a>
</li>
<li class="nav__item">
<a href="#fonts" class="nav__link">
<i class="fas fa-font nav__icon"></i>
fonts
</a>
</li>
<li class="nav__item">
<a href="#colors" class="nav__link">
<i class="fas fa-palette nav__icon"></i>
colors
</a>
</li>
<li class="nav__item">
<a href="#icons" class="nav__link">
<i class="fas fa-icons nav__icon"></i>
icons
</a>
</li>
<li class="nav__item">
<a href="#images" class="nav__link">
<i class="far fa-images nav__icon"></i>
images
</a>
</li>
</ul>
</nav>
<section class="group group__dev-tools" id="tools">
<div class="group__container">
<i class="fas fa-toolbox group__icon"></i>
<h2 class="group__heading">cool development tools</h2>
<ul class="resource-container">
<li class="resource">
<img src="./images/vscode.png" alt="visual studio code" class="resource__image">
<a href="https://code.visualstudio.com/" class="resource__link" target="_blank">
<h3 class="resource__heading">Visual Studio Code</h3>
</a>
<p class="resource__text">The best text editor in the world. The first
software you need to install.</p>
</li>
<li class="resource">
<img src="./images/codepen.png" alt="Codepen logo" class="resource__image">
<a href="https://codepen.io/trending" class="resource__link" target="_blank">
<h3 class="resource__heading">Codepen</h3>
</a>
<p class="resource__text">Codepen is an essential tool to quickly test out ideas.</p>
</li>
<li class="resource">
<img src="./images/emmet.png" alt="emmet cheatsheet" class="resource__image">
<a href="https://docs.emmet.io/cheat-sheet/" class="resource__link" target="_blank">
<h3 class="resource__heading">Emmet Cheat Sheet</h3>
</a>
<p class="resource__text">Emmet is an essential tool for writing HTML. This is a very handy
cheat sheet to get started.</p>
</li>
</ul>
</div>
</section>
<section class="group group__html" id="html">
<div class="group__container">
<i class="fab fa-html5 group__icon"></i>
<h2 class="group__heading">HTML 5 Tools & Links</h2>
<ul class="resource-container">
<li class="resource">
<img src="./images/mdn.png" alt="mdn logo" class="resource__image">
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" class="resource__link"
target="_blank">
<h3 class="resource__heading">HTML5 Reference by MDN</h3>
</a>
<p class="resource__text">You don't need to know every HTML element. But there are some
really helpful information here.</p>
</li>
<li class="resource">
<img src="./images/css-tricks-3.png" alt="css tricks" class="resource__image">
<a href="https://css-tricks.com/snippets/html/glyphs/" class="resource__link"
target="_blank">
<h3 class="resource__heading">HTML Entity Reference by CSS-Tricks</h3>
</a>
<p class="resource__text">Super useful reference, gives you HTML entity name, numeric code,
hex code and ISO code.</p>
</li>
</ul>
</div>
</section>
<section class="group group__css" id="css">
<div class="group__container">
<i class="fab fa-css3-alt group__icon"></i>
<h2 class="group__heading">CSS Resources</h2>
<ul class="resource-container">
<li class="resource">
<img src="./images/mdn.png" alt="mdn logo" class="resource__image">
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference" class="resource__link"
target="_blank">
<h3 class="resource__heading">CSS3 Reference by MDN</h3>
</a>
<p class="resource__text">As with HTML, you don't need to know every CSS property. Use this
reference instead.</p>
</li>
<li class="resource">
<img src="./images/codrops.png" alt="coddrops logo" class="resource__image">
<a href="http://tympanus.net/codrops/css_reference/" class="resource__link" target="_blank">
<h3 class="resource__heading">CSS3 Reference by Codrops</h3>
</a>
<p class="resource__text">Another excellent CSS reference, this time from Codrops. Make sure
to check this one out, too.</p>
</li>
<li class="resource">
<img src="./images/caniuse.png" alt="can i use logo" class="resource__image">
<a href="https://caniuse.com/" class="resource__link" target="_blank">
<h3 class="resource__heading">Can I Use?</h3>
</a>
<p class="resource__text">Up-to-date browser support tables for front-end technologies on
desktop and mobile browsers.</p>
</li>
<li class="resource">
<img src="./images/tutplus.png" alt="tutplus logo" class="resource__image">
<a href="https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048"
class="resource__link" target="_blank">
<h3 class="resource__heading">30 CSS Selectors by Tutplus</h3>
</a>
<p class="resource__text">A handy list of the 30 most important CSS
selectors from Tutplus.</p>
</li>
<li class="resource">
<img src="./images/css-guide.png" alt="css guide logo" class="resource__image">
<a href="https://paulcpederson.com/articles/css-for-people-who-hate-css/"
class="resource__link" target="_blank">
<h3 class="resource__heading">CSS for People Who Hate CSS</h3>
</a>
<p class="resource__text">Excellent guide on how to write better, cleaner and more reusable
CSS code.</p>
</li>
<li class="resource">
<img src="./images/clippy.png" alt="clippy logo" class="resource__image">
<a href="https://bennettfeely.com/clippy/" class="resource__link" target="_blank">
<h3 class="resource__heading">Clippy</h3>
</a>
<p class="resource__text">A small tool to help you using the new and powerful clip-path
property.</p>
</li>
<li class="resource">
<img src="./images/easings.png" alt="css easing logo" class="resource__image">
<a href="https://easings.net/" class="resource__link" target="_blank">
<h3 class="resource__heading">CSS easing functions</h3>
</a>
<p class="resource__text">An amazing collection of easing functions bo be used in CSS
transitions and animations.
</p>
</li>
</ul>
</div>
</section>
<section class="group group__fonts" id="fonts">
<div class="group__container">
<i class="fas fa-font group__icon"></i>
<h2 class="group__heading">Font & Typography Resources</h2>
<ul class="resource-container">
<li class="resource">
<img src="./images/googlefonts.png" alt="google fonts logo" class="resource__image">
<a href="https://fonts.google.com/" class="resource__link" target="_blank">
<h3 class="resource__heading">Google Fonts</h3>
</a>
<p class="resource__text">The #1 resource for free and easy-to-use webfonts. Has a huge
library of fonts.</p>
</li>
<li class="resource">
<img src="./images/creativebloq.jpeg" alt="creative bloq logo" class="resource__image">
<a href="https://www.creativebloq.com/graphic-design-tips/best-free-fonts-for-designers-1233380"
class="resource__link" target="_blank">
<h3 class="resource__heading">The 100 best free fonts by Creative Bloq</h3>
</a>
<p class="resource__text">List of free fonts, from vintage-inspired typefaces to slab
serifs, for a range of projects.</p>
</li>
<li class="resource">
<img src="./images/typeguide.svg" alt="type guide logo" class="resource__image">
<a href="http://www.typogui.de/" class="resource__link" target="_blank">
<h3 class="resource__heading">A Pocket Guide to Typography
</h3>
</a>
<p class="resource__text">Amazing resource to learn about typography. Learn typography
basics in less than 30 minutes.</p>
</li>
</ul>
</div>
</section>
<section class="group group__colors" id="colors">
<div class="group__container">
<i class="fas fa-palette group__icon"></i>
<h2 class="group__heading">GREAT COLOR TOOLS</h2>
<ul class="resource-container">
<li class="resource">
<img src="./images/opencolor.png" alt="open color logo" class="resource__image">
<a href="https://yeun.github.io/open-color/" class="resource__link" target="_blank">
<h3 class="resource__heading">Open Color</h3>
</a>
<p class="resource__text">An open-source color scheme, optimized for UI.</p>
</li>
<li class="resource">
<img src="./images/flatuicolors.png" alt="flat ui colors logo" class="resource__image">
<a href="https://flatuicolors.com/" class="resource__link" target="_blank">
<h3 class="resource__heading">Flat UI Colors</h3>
</a>
<p class="resource__text">A good starting point for choosing a flat design color for your
next project.</p>
</li>
<li class="resource">
<img src="./images/colorhunt.gif" alt="colorhunt palletes logo" class="resource__image">
<a href="https://www.colorhunt.co/" class="resource__link" target="_blank">
<h3 class="resource__heading">Colorhunt Palettes</h3>
</a>
<p class="resource__text">Don't know what colors to use for your website? Colorhunt helps
you with beautiful color palettes.</p>
</li>
<li class="resource">
<img src="./images/uigradients.png" alt="ui gradients logo" class="resource__image">
<a href="https://uigradients.com/" class="resource__link" target="_blank">
<h3 class="resource__heading">UI Gradients</h3>
</a>
<p class="resource__text">Collection of beautiful color gradients for you to choose from and
export to your project.</p>
</li>
<li class="resource">
<img src="./images/tintnshadegen.png" alt="tint and shade generrator logo"
class="resource__image">
<a href="https://maketintsandshades.com/" class="resource__link" target="_blank">
<h3 class="resource__heading">Tint and Shade Generator</h3>
</a>
<p class="resource__text">Easily create lighter and darker versions of any base color.
Perfect for hovers, borders and gradients.</p>
</li>
<li class="resource">
<img src="./images/coolors.png" alt="coolors contrast checker logo" class="resource__image">
<a href="https://coolors.co/contrast-checker/112a46-acc8e5" class="resource__link"
target="_blank">
<h3 class="resource__heading">Coolors Contrast Checker</h3>
</a>
<p class="resource__text">Tool to check whether two colors have a good contrast ratio.
Essential for building accessible websites!</p>
</li>
</ul>
</div>
</section>
<section class="group group__icons" id="icons">
<div class="group__container">
<i class="fas fa-icons group__icon"></i>
<h2 class="group__heading">icons & tools</h2>
<ul class="resource-container">
<li class="resource">
<img src="./images/fontawesome.png" alt="fontawesome logo" class="resource__image">
<a href="https://fontawesome.com/" class="resource__link" target="_blank">
<h3 class="resource__heading">Font Awesome</h3>
</a>
<p class="resource__text">A highly popular icon font, consisting of 1000+ icons spread
across countless categories.</p>
</li>
<li class="resource">
<img src="./images/Icons8.png" alt="icon8 logo" class="resource__image">
<a href="https://icons8.com/line-awesome" class="resource__link" target="_blank">
<h3 class="resource__heading">Line Awesome</h3>
</a>
<p class="resource__text">Font awesome is a very simple alternative.</p>
</li>
<li class="resource">
<img src="./images/iconmonstr.png" alt="iconmonstr logo" class="resource__image">
<a href="https://iconmonstr.com/" class="resource__link" target="_blank">
<h3 class="resource__heading">Iconmonstr</h3>
</a>
<p class="resource__text">4500+ free and simple icons in 300+ collections, perfect if you
need a single icon and not a whole set.</p>
</li>
<li class="resource">
<img src="./images/icomoon.png" alt="icomoon logo" class="resource__image">
<a href="https://icomoon.io/" class="resource__link" target="_blank">
<h3 class="resource__heading">Icomoon</h3>
</a>
<p class="resource__text">Tool to convert icon fonts to SVG icons and sprites.</p>
</li>
</ul>
</div>
</section>
<section class="group group__images" id="images">
<div class="group__container">
<i class="far fa-images group__icon"></i>
<h2 class="group__heading">images & videos</h2>
<ul class="resource-container">
<li class="resource">
<img src="./images/unsplash.png" alt="unsplash logo" class="resource__image">
<a href="https://unsplash.com/" class="resource__link" target="_blank">
<h3 class="resource__heading">Unsplash</h3>
</a>
<p class="resource__text">A free high-resolution photos. There are more photos here than you
can imagine!</p>
</li>
<li class="resource">
<img src="./images/pexels.png" alt="pexels logo" class="resource__image">
<a href="https://www.pexels.com/" class="resource__link" target="_blank">
<h3 class="resource__heading">Pexels</h3>
</a>
<p class="resource__text">Another great resource for free stock photos and videos, created
by photographers around the world.</p>
</li>
<li class="resource">
<img src="./images/pixaby.png" alt="pixaby logo" class="resource__image">
<a href="https://pixabay.com/" class="resource__link" target="_blank">
<h3 class="resource__heading">Pixaby</h3>
</a>
<p class="resource__text">Over 2M free stock photos, vectors and art illustrations you can
use anywhere.</p>
</li>
<li class="resource">
<img src="./images/undraw.png" alt="undraw logo" class="resource__image">
<a href="https://undraw.co/illustrations" class="resource__link" target="_blank">
<h3 class="resource__heading">unDraw</h3>
</a>
<p class="resource__text">Hundreds of free and open-source illustrations for your websites,
and colors are even customizable.</p>
</li>
<li class="resource">
<img src="./images/drawkit.png" alt="drawkit logo" class="resource__image">
<a href="https://www.drawkit.io/" class="resource__link" target="_blank">
<h3 class="resource__heading">DrawKit</h3>
</a>
<p class="resource__text">Hand-drawn vector illustration and icon resources, perfect for
your next project.</p>
</li>
<li class="resource">
<img src="./images/uifaces.png" alt="uifaces logo" class="resource__image">
<a href="https://uifaces.co/" class="resource__link" target="_blank">
<h3 class="resource__heading">UI Faces</h3>
</a>
<p class="resource__text">Avatar photos, perfect for mockups or placeholders.</p>
</li>
<li class="resource">
<img src="./images/randomuser.png" alt="random user generator logo" class="resource__image">
<a href="https://randomuser.me/" class="resource__link" target="_blank">
<h3 class="resource__heading">Random User Generator</h3>
</a>
<p class="resource__text">Generate random user data, including photos. Like Lorem Ipsum, but
for people.</p>
</li>
<li class="resource">
<img src="./images/coverr.png" alt="coverr logo" class="resource__image">
<a href="https://coverr.co/" class="resource__link" target="_blank">
<h3 class="resource__heading">Coverr</h3>
</a>
<p class="resource__text">Best resource for beautiful and free videos about every imaginable
topic, easily searchable.</p>
</li>
</ul>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__container">
<img src="./images/logo_place_footer.png" alt="" class="logo logo_place_footer">
<p class="footer__copyright">© 2021. Created by Sharon Segal</p>
</div>
</footer>
</div>
</body>
</html>