-
Notifications
You must be signed in to change notification settings - Fork 1
/
resources.html
168 lines (168 loc) · 7.88 KB
/
resources.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="./main.css">
<link rel="preconnect" href="https://fonts.googleapis.com/">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="">
<script src="./jquery-3.2.1.min.js"></script>
<title>Resources / DESMA 161</title>
</head>
<body>
<section>
<header>
<h1>Network Media / DESMA 161</h1>
</header>
<div id="content">
<nav role="navigation">
<ul>
<li class="nav-item">
<a href="./index.html">Syllabus</a>
</li>
<li class="nav-item">
<a href="./projects.html">Projects</a>
</li>
<li class="nav-item">
<a href="./resources.html">Resources</a>
</li>
<li class="nav-item">
<a href="./schedule.html">Schedule</a>
</li>
<li class="nav-item">
<a href="./weeklies.html">Weeklies</a>
</li>
</ul>
</nav>
<main>
<h1 id="resources">Resources</h1>
<h2 id="tools">Tools</h2>
<ul>
<li>
<a href="https://www.google.com/chrome/browser/">Chrome</a> / browser that will be used for demos in class (use any browser you like, but some developer tools or menus may look different)
</li>
<li>
<a href="http://brackets.io/">Brackets</a> / a text editor for HTML, CSS, and JavaScript code that will be used for in-class demo. You are welcome to use another editor, if you prefer.
</li>
<li>
<a href="https://cyberduck.io/?l=en">Cyberduck</a> / FTP tool for uploading files to a server
</li>
<li>
<a href="./howtoftp.html">How to FTP</a> / uploading your files to the DMA server with Cyberduck
</li>
<li>
<a href="https://howchoo.com/macos/always-show-file-extensions-in-macos">Showing File Extensions on Mac</a>
</li>
</ul>
<h2 id="web-design">Web Design</h2>
<ul>
<li>
<a href="http://www.lipsum.com/">Lorem Ipsum generator</a> / placeholder text to use for your layout
</li>
<li>
<a href="https://en.wikipedia.org/wiki/Web_colors">Web colors list</a>
</li>
<li>
<a href="https://color.adobe.com/create/color-wheel/">Color palette creator</a>
</li>
</ul>
<h2 id="web-typography">Web Typography</h2>
<ul>
<li>
<a href="http://web.mit.edu/jmorzins/www/fonts.html">Web safe fonts list</a> / free webfonts
</li>
<li>
<a href="https://fonts.google.com/">Google Fonts</a> / more free webfonts
</li>
<li>
<a href="http://webtypography.net/toc/">The Elements of Typographic Style Applied to the Web</a> / Great resource for web type best practices.
</li>
<li>
<a href="https://www.typewolf.com/cheatsheet">Typewolf Typography Cheat Sheet</a> / source for keyboard shortcuts and Html Entity names for common typographic marks, like dashes and typographer’s quotes.
</li>
<li>
<a href="https://www.w3.org/wiki/Common_HTML_entities_used_for_typography">W3C: Common HTML entities used for typography</a> / similar to the above, but also includes unicode values
</li>
</ul>
<h2 id="html-and-css">HTML and CSS</h2>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">HTML Element Reference</a>
</li>
<li>
<a href="https://www.codecademy.com/articles/glossary-html">Codecademy HTML Glossary</a>
</li>
<li>
<a href="http://htmldog.com/references/css/properties/">CSS Property Reference</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors">CSS Selectors</a> / list of simple and advanced selectors
</li>
<li>
<a href="https://www.codecademy.com/learn/web">Codecademy: HTML & CSS</a>
</li>
<li>
<a href="https://www.khanacademy.org/computing/computer-programming/html-css">Khan Academy: Intro to HTML & CSS</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">MDN: Intro to HTML</a>
</li>
<li>
<a href="http://learn.shayhowe.com/html-css/">Learn HTML & CSS</a> / another great tutorial
</li>
<li>
<a href="http://learnlayout.com/">Learn CSS Layout</a>
</li>
<li>
<a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Guide to Flexbox</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Mozilla Flexbox documentation</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>
</li>
<li>
<a href="https://gridbyexample.com/">Grid by Example</a>
</li>
<li>
<a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS Tricks: Complete Guide to Grids</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor">Cursor Property for changing the Cursor</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Media Queries</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a>
</li>
<li>
<a href="https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/">Look Ma, No Media Queries! Responsive Layouts Using CSS Grid</a> / Guide to responsives grids with examples and documentation
</li>
</ul>
<h2 id="alt-text">Alt Text and Image Description</h2>
<ul>
<li>
<a href="https://webaim.org/techniques/alttext/">WebAIM Alternate Text guide</a> / General Guide for Alt Text across numerous uses, address art images
</li>
<li>
<a href="https://uxdesign.cc/how-to-write-an-image-description-2f30d3bf5546">How to write an image description</a> / General guide for alt text across multiple uses, addresses identity and and art images
</li>
<li>
<a href="https://www.cooperhewitt.org/cooper-hewitt-guidelines-for-image-description/">Cooper Hewitt Museum: How to write an image description</a> / Guide for image description from art museum, deals with art+design work specifically
</li>
<li>
<a href="https://docs.google.com/document/d/15oSMuDX5OnYaJ6ZTe5QVTC2fB7kE-EDY5wPQMmD-3BA/edit#heading=h.ba9i3db2hy9y">Alt Text as Poetry Workbook</a> / Deals with more evocative alt text, from two working artists
</li>
<li>
<a href="https://veroniiiica.com/2019/11/29/how-to-write-alt-text-for-amateur-art/">How to Write Alt Text for Amatuer Art</a> / Guide addressed to art makers
</li>
</ul>
</main>
</div>
</section>
</body>
</html>