-
Notifications
You must be signed in to change notification settings - Fork 0
/
pseudoclass.html
97 lines (97 loc) · 6.9 KB
/
pseudoclass.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pseudoclass Materials</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="https://codepen.io/timcoomar/">Tim's Codepen - Examples from class saved here</a>
<section class="section-html">
<h2 class="section-title">HTML</h2>
<ul class="html-articles">
<h3 class="section-subtitle">Articles</h3>
</ul>
<ul class="html-tutorials">
<h3 class="section-subtitle">Tutorials</h3>
<li class="begginers video"><a href="https://scrimba.com/g/ghtml" target="_blank">Introduction to HTML - Scrimba</a></li>
</ul>
<ul class="html-reference">
<h3 class="section-subtitle">Reference</h3>
<li class="begginers"><a href="http://apps.workflower.fi/vocabs/html/en" target="_blank">HTML Vocabulary - Workflower</a></li>
<li class="begginers"><a href="https://htmlreference.io" target="_blank">HTML Reference - Jeremy Thomas</a></li>
</ul>
<ul class="html-tools">
<h3 class="section-subtitle">Tools</h3>
<li class="html-tools"><a href="http://apps.workflower.fi/elemental/site/">HTML Alt Web Inspector - Workflower</a></li>
</ul>
</section>
<section class="section-css">
<h2 class="section-title">CSS</h2>
<ul class="css-articles">
<h3 class="section-subtitle">Articles</h3>
<li class="begginers"><a href="https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/" target="_blank">CSS Inheritance and Cascade - Heydon Pickering</a></li>
<li class="intermediate"><a href="https://tympanus.net/codrops/css_reference/custom-properties/" target="_blank">Custom properties - Tympanus</a></li>
<li class="begginers"><a href="https://css-tricks.com/introduction-fr-css-unit/" target="_blank">Intro the the 'fr' unit - CSS-Tricks</a></li>
<li class="intermediate"><a href="https://css-tricks.com/fun-viewport-units/" target="_blank">Fun with viewpoint units - CSS-Tricks</a></li>
<li class="intermediate"><a href="https://alistapart.com/article/redesign-with-css-shapes" target="_blank">CSS Shapes - Eric Meyer</a></li>
<li class="intermediate"><a href="https://alistapart.com/article/css-shapes-101" target="_blank">CSS Shapes 101 - Sara Soueidan</a></li>
</ul>
<ul class="css-tutorials">
<h3 class="section-subtitle">Tutorials</h3>
<li class="begginers video"><a href="https://scrimba.com/g/gintrotocss" target="_blank">Introduction to CSS - Scrimba</a></li>
<li class="begginers video"><a href="https://scrimba.com/g/gflexbox" target="_blank">Learn Flexbox for free - Scrimba</a></li>
<li class="begginers"><a href="https://scrimba.com/g/gR8PTE" target="_blank">Learn CSS Grid for free - Scrimba</a></li>
<li class="begginers"><a href="https://www.mozilla.org/en-US/developer/css-grid/" target="_blank">CSS Grid Tutorial - Mozilla</a></li>
<li class="begginers video"><a href="https://gridbyexample.com/video/">CSS Grid Videos - Rachel Andrews</a></li>
<li class="begginers"><a href="https://gridbyexample.com/examples/">CSS Grid Examples - Rachel Andrews</a></li>
<li class="begginers video"><a href="https://www.youtube.com/watch?v=FEnRpy9Xfes">CSS Grid Basics - Jen Simmons</a></li>
<li class="begginers"><a href="https://learncssgrid.com" target="_blank">Learn CSS Grid - Jonathan Suh</a></li>
<li class="intermediate video"><a href="https://scrimba.com/g/gcssvariables" target="_blank">Learn CSS Variables for free - Scrimba</a></li>
<li class="intermediate"><a href="https://robots.thoughtbot.com/css-animation-for-beginners" target="_blank">CSS Animation for Beginners - Rachel Cope</a></li>
<li class="advanced"><a href="http://svgpocketguide.com/book/" target="_blank">Pocket Guide to Writing SVG - Joni Bologna</a></li>
<li class="advanced"><a href="http://jonibologna.com/svg-viewbox-and-viewport/" target="_blank">SVG Viewbox and Viewport - Joni Bologna</a></li>
</ul>
<ul class="css-reference">
<h3 class="section-subtitle">Reference</h3>
<li class="begginers"><a href="http://apps.workflower.fi/vocabs/css/en" target="_blank">CSS Vocabulary - Workflower</a></li>
<li class="begginers"><a href="https://tympanus.net/codrops/css_reference/" target="_blank">CSS Reference - Tympanus</a></li>
<li class="begginers"><a href="https://cssreference.io" target="_blank">CSS Reference - Jeremy Thomas</a></li>
<li class="begginers"><a href="https://adam-marsden.co.uk/css-cheat-sheet" target="_blank">CSS Cheat Sheet - Adam Marsden</a></li>
<li class="begginers"><a href="http://apps.workflower.fi/css-cheats/?name=flexbox" target="_blank">Flexbox Cheatsheet / Terminology - Workflower</a></li>
<li class="begginers"><a href="https://benhowdle.im/cssselectors/" target="_blank">Learn CSS Pseudoclass Selectors - Ben Howdle</a></li>
</ul>
<ul class="css-learning-tools">
<h3 class="section-subtitle">Learning Tools</h3>
<li class="begginers"><a href="https://www.cssgridplayground.com/" target="_blank">CSS Grid Playground</a></li>
<li class="begginers"><a href="http://griddy.io" target="_blank">Griddy - Learn CSS Grid</a></li>
<li class="begginers"><a href="http://cssgridgarden.com" target="_blank">CSS Grid Garden - Game</a></li>
<li class="begginers"><a href="http://grid.malven.co" target="_blank">Grid Malven - CSS Grid Examples</a></li>
<li class="advanced"><a href="http://nthmaster.com" target="_blank">Nth child selectors - nthmaster.com</a></li>
</ul>
<ul class="css-build-tools">
<h3 class="section-subtitle">Build Tools</h3>
<li class="intermediate"><a href="http://livestyle.io" target="_blank">Livestyle - Bi-directional Live Editing for CSS</a></li>
<li class="intermediate"><a href="https://bennettfeely.com/clippy/" target="_blank">CSS Clip Path Editor</a></li>
</ul>
</section>
<section class="section-dev">
<h2 class="section-title">Dev Tools</h2>
<ul class="dev-handbooks">
<h3 class="section-subtitle">Handbooks & Guide</h3>
<li class="advanced"><a href="https://frontendmasters.com/books/front-end-handbook/2018/" target="_blank">Front End Handbook 2018 - Cody Lindley</a></li>
<li class="begginers"><a href="https://github.com/thedaviddias/Resources-Front-End-Beginner" target="_blank">Resources for Front End Beginners</a></li>
</ul>
<ul class="dev-tutorials">
<h3 class="section-subtitle">Tutorials</h3>
<li class="advanced"><a href="https://www.openvim.com" target="_blank">Open Vim Tutorial</a></li>
</ul>
</section>
<section class="section-js" hidden>
<h2 class="section-title">Javascript</h2>
<ul class="js-jquery">
<h3 class="section-subtitle">Jquery</h3>
</ul>
</section>
</body>
</html>