forked from udacity/frontend-nanodegree-styleguide
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
287 lines (242 loc) · 13.8 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Udacity Nanodegree Style Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/normalize.css/normalize.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300|Roboto+Condensed:400,700|Inconsolata">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav>
<ul>
<li><a href="index.html" class="active">HTML</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="javascript.html">JavaScript</a></li>
<li><a href="https://udacity.github.io/git-styleguide/" target="_blank">Git</a></li>
</ul>
</nav>
<h1>Udacity Frontend Nanodegree Style Guide</h1>
<section>
<h2>Introduction</h2>
<p>This style guide acts as the official guide to follow in your projects. Udacity evaluators will use this guide to grade your projects. There are many opinions on the "ideal" style in the world of Front-End Web Development. Therefore, in order to reduce the confusion on what style students should follow during the course of their projects, we urge all students to refer to this style guide for their projects.</p>
</section>
<section>
<h2>General Formatting Rules</h2>
<article>
<h3>
<a href="#capitalization" id="capitalization"><i class="fa fa-link"></i></a>
Capitalization
</h3>
<p>Use only lowercase.</p>
<p>All code has to be lowercase. This applies to HTML element names, attributes, attribute values (unless text/CDATA).</p>
<h4 class="not-recommended">Not Recommended:</h4>
<pre><code class="not-recommended"><A HREF="/">Home</A></code></pre>
<h4 class="recommended">Recommended:</h4>
<pre><code class="recommended"><a href="/">Home</a></code></pre>
</article>
<article>
<h3>
<a href="#trailing-whitespace" id="trailing-whitespace"><i class="fa fa-link"></i></a>
Trailing Whitespace
</h3>
<p>Remove trailing white spaces.</p>
<p>Trailing white spaces are unnecessary and can complicate diffs.</p>
<h4 class="not-recommended">Not Recommended:</h4>
<pre><code class="not-recommended"><p>What?</p>__</code></pre>
<h4 class="recommended">Recommended:</h4>
<pre><code class="recommended"><p>What?</p></code></pre>
<p>If using Sublime Text, this can be done automatically each time you save a file by adding the following to your User Settings JSON file (you should be able to find this within Sublime Text's menu):</p>
<pre><code>"trim_trailing_white_space_on_save": true</code></pre>
</article>
<article>
<h3>
<a href="#indentation" id="indentation"><i class="fa fa-link"></i></a>
Indentation
</h3>
<p>Indentation should be consistent throughout the entire file. Whether you choose to use tabs or spaces, or 2-spaces vs. 4-spaces - just be consistent!</p>
</article>
</section>
<section>
<h2>General Meta Rules</h2>
<article>
<h3>
<a href="#encoding" id="encoding"><i class="fa fa-link"></i></a>
Encoding
</h3>
<p>Use UTF-8 (no BOM).</p>
<p>Make sure your editor uses UTF-8 as character encoding, without a byte order mark. Specify the encoding in HTML templates and documents with <code><meta charset="utf-8"></code>.</p>
</article>
<article>
<h3>
<a href="#comments" id="comments"><i class="fa fa-link"></i></a>
Comments
</h3>
<p>Explain code as needed, where possible.</p>
<p>Use comments to explain code: What does it cover, what purpose does it serve, and why is the respective solution used or preferred?</p>
</article>
<article>
<h3>
<a href="#action-items" id="action-items"><i class="fa fa-link"></i></a>
Action Items
</h3>
<p>Mark todos and action items with <code>TODO:</code>.</p>
<p>Highlight todos by using the keyword <code>TODO</code> only, not other formats like <code>@@</code>. Append action items after a colon like this: <code>TODO: action item</code>.</p>
<h4 class="recommended">Recommended:</h4>
<pre><code class="recommended"><!-- TODO: add other fruits -->
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
</code></pre>
</article>
</section>
<section>
<h2>HTML Style Rules</h2>
<article>
<h3>
<a href="#doctype" id="doctype"><i class="fa fa-link"></i></a>
Document Type
</h3>
<p>Use HTML5.</p>
<p>HTML5 (HTML syntax) is preferred for all HTML documents: <code><!DOCTYPE html></code>.</p>
<p>Do not close self-closing elements, ie. write <code><br></code>, not <code><br /></code>.</p>
</article>
<article>
<h3>
<a href="#validity" id="validity"><i class="fa fa-link"></i></a>
HTML Validity
</h3>
<p>Use valid HTML.</p>
<p>Using valid HTML is a measurable baseline quality that ensures proper HTML usage and contributes to learning about technical requirements and constraints.</p>
<h4 class="not-recommended">Not Recommended:</h4>
<pre><code class="not-recommended"><title>Page Title</title>
<article>This is an article.</code></pre>
<h4 class="recommended">Recommended:</h4>
<pre><code class="recommended"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<article>This is an article.</article>
</body>
</html></code></pre>
</article>
<article>
<h3>
<a href="#semantics" id="semantics"><i class="fa fa-link"></i></a>
Semantics
</h3>
<p>Use HTML according to its purpose.</p>
<p>Use elements for what they have been created for. For example, use heading elements for headings, <code>p</code> elements for paragraphs, <code>a</code> elements for anchor, etc. Using HTML according to its purpose is important for accessibility, reuse and code efficiency reasons.</p>
<h4 class="not-recommended">Not Recommended:</h4>
<pre><code class="not-recommended"><div onclick="goToRecommendations();">All recommendations</div></code></pre>
<h4 class="recommended">Recommended:</h4>
<pre><code class="recommended"><a href="recommendations/">All recommendations</a></code></pre>
</article>
<article>
<h3>
<a href="#media-fallback" id="media-fallback"><i class="fa fa-link"></i></a>
Multimedia Fallback
</h3>
<p>Provide alternative contents for multimedia.</p>
<p>For multimedia, such as images, video, or animated objects via canvas, make sure to offer alternative access. For images that means use of meaningful alternative text and for video and audio transcripts and captions, if available.</p>
<p>Providing alternative contents is important for accessibility reasons. A blind user has few cues to tell what an image is about without the <code>alt</code> attributes, and other users may have no way of understanding what video or audio contents are about either.</p>
<p>For images whose alt attributes would introduce redundancy and for images whose purpose is purely decorative which you cannot immediately use CSS for, use no alternative text, as in <code>alt=""</code>.</p>
<h4 class="not-recommended">Not Recommended:</h4>
<pre><code class="not-recommended"><img src="udacity.png"></code></pre>
<h4 class="recommended">Recommended:</h4>
<pre><code class="recommended"><img src="udacity.png" alt="Udacity logo"></code></pre>
</article>
<article>
<h3>
<a href="#separation-of-concerns" id="separation-of-concerns"><i class="fa fa-link"></i></a>
Separation of Concerns
</h3>
<p>Separate structure from presentation from behavior.</p>
<p>Strictly keep structure (markup), presentation (styling), and behavior (scripting) apart, and try to keep the interaction between the three to an absolute minimum.</p>
<p>That is, make sure documents and templates contain only HTML and HTML that is solely serving structural purposes. Move everything presentational into style sheets, and everything behavioral into scripts. In addition, keep the contact area as small as possible by linking as few style sheets and scripts as possible from documents and templates.</p>
<p>Separating structure from presentation from behavior is important for maintenance reasons. It is almost always more expensive to change HTML documents and templates than it is to update style sheets and scripts.</p>
</article>
<article>
<h3>
<a href="#entity-refs" id="entity-refs"><i class="fa fa-link"></i></a>
Entity References
</h3>
<p>Do not use entity references.</p>
<p>There is no need to use entity references like &mdash;, &rdquo;, or &#x263a;, assuming the same encoding (UTF-8) is used for files and editors as well as among teams.</p>
<p>The only exceptions apply to characters with special meaning in HTML (like < and &) as well as control or “invisible” characters (like no-break spaces).</p>
<h4 class="not-recommended">Not Recommended:</h4>
<pre><code class="not-recommended">The currency symbol for the Euro is &ldquo;&eur;&rdquo;.</code></pre>
<h4 class="recommended">Recommended:</h4>
<pre><code class="recommended">The currency symbol for the Euro is “€”.</code></pre>
</article>
<article>
<h3>
<a href="#type-attrs" id="type-attrs"><i class="fa fa-link"></i></a>
type Attributes
</h3>
<p>Omit type attributes for style sheets and scripts.</p>
<p>Do not use type attributes for style sheets and scripts. Specifying type attributes in these contexts is not necessary as HTML implies <code>text/css</code> and <code>text/javascript</code> as defaults. This can be safely done even for older browsers</p>
<h4 class="not-recommended">Not Recommended:</h4>
<pre><code class="not-recommended"><link rel="stylesheet" href="css/style.css" type="text/css"></code></pre>
<h4 class="recommended">Recommended:</h4>
<pre><code class="recommended"><link rel="stylesheet" href="css/style.css"></code></pre>
<h4 class="not-recommended">Not Recommended:</h4>
<pre><code class="not-recommended"><script src="js/app.js" type="text/javascript"></script></code></pre>
<h4 class="recommended">Recommended:</h4>
<pre><code class="recommended"><script src="js/app.js"></script></code></pre>
</article>
</section>
<section>
<h2>HTML Formatting Rules</h2>
<article>
<h3>
<a href="#general-formatting" id="general-formatting"><i class="fa fa-link"></i></a>
General Formatting
</h3>
<p>Use a new line for every block, list or table element and indent every such child element.</p>
<p>Independent of the styling of an element (as CSS allows elements to assume a different role per display property), put every block, list or table element on a new line.</p>
<p>Also, indent them if they are child elements of a block, list or table element (if you run into issues around whitespace between list items it's acceptable to put all <code>li</code> elements in one line).</p>
<h4 class="recommended">Recommended:</h4>
<pre><code class="recommended"><blockquote>
<p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
<li>Moe</li>
<li>Curry</li>
<li>Larry</li>
</ul>
<table>
<thead>
<tr>
<th scope="col">Income</th>
<th scope="col">Taxes</th>
</tr>
</thead>
<tbody>
<tr>
<td>$5.00</td>
<td>$4.50</td>
</tr>
</tbody>
</table></code></pre>
</article>
<article>
<h3>
<a href="#quotes" id="quotes"><i class="fa fa-link"></i></a>
HTML Quotation Marks
</h3>
<p>When quoting attribute values, use double quotation marks.</p>
<h4 class="not-recommended">Not Recommended:</h4>
<pre><code class="not-recommended"><a href='login/' class='btn btn-secondary'>Login</a></code></pre>
<h4 class="recommended">Recommended:</h4>
<pre><code class="recommended"><a href="login/" class="btn btn-secondary">Login</a></code></pre>
</article>
</section>
</body>
</html>