-
Notifications
You must be signed in to change notification settings - Fork 19
/
exercise1.html
50 lines (47 loc) · 3.13 KB
/
exercise1.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
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Begin Jekyll SEO tag v2.6.1 -->
<title>Exercise 1 HTML Tutorial Push Dev | html-tutorial</title>
<meta name="generator" content="Jekyll v3.8.5" />
<meta property="og:title" content="Exercise 1 HTML Tutorial Push Dev" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="HTML Concepts for beginners" />
<meta property="og:description" content="HTML Concepts for beginners" />
<link rel="canonical" href="https://pushdev-code.github.io/html-tutorial/exercise1.html" />
<meta property="og:url" content="https://pushdev-code.github.io/html-tutorial/exercise1.html" />
<meta property="og:site_name" content="html-tutorial" />
<script type="application/ld+json">
{"@type":"WebSite","headline":"Exercise 1 HTML Tutorial Push Dev","url":"https://pushdev-code.github.io/html-tutorial/","name":"html-tutorial","description":"HTML Concepts for beginners","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="/html-tutorial/assets/css/style.css?v=a3ade225d4ef0e19e95b7223876061685f87b039">
<script src="/html-tutorial/assets/js/scale.fix.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<ul>
<li>TODO@you: Code an HTML form with semantic tags, accessibility and SEO best practices:
<ol>
<li>Create a new branch named <code class="language-plaintext highlighter-rouge">feature/html-form</code>.</li>
<li>Inside the root of git repo, create <code class="language-plaintext highlighter-rouge">form.html</code>.</li>
<li>Copy the layout from <a href="3-semantic-html">3-semantic-html</a> into the <code class="language-plaintext highlighter-rouge">form.html</code> file.</li>
<li>Inside the <code class="language-plaintext highlighter-rouge"><section></code> element, copy the <code class="language-plaintext highlighter-rouge"><form></code> from <a href="5-Accessibility">5-Accessibility</a>.</li>
<li>Follow the steps to optimize the form for SEO.</li>
<li>Enable your fork repo to use github pages by going to repo settings and selecting <code class="language-plaintext highlighter-rouge">feature/html-form</code> branch as Source.</li>
<li>Go to your <code class="language-plaintext highlighter-rouge">github.io/html-tutorial/form.html</code> url. Use that url for the next steps.</li>
<li>Install <a href="https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=es">Lighthouse Chrome plugin</a>.</li>
<li>Run a lighthouse test in the form url you just published, without selecting <code class="language-plaintext highlighter-rouge">progressive web app</code> and check the results.</li>
<li>Can you make more optimizations?</li>
</ol>
</li>
</ul>
</div>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
</body>
</html>