-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·137 lines (131 loc) · 6.62 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
<!doctype html>
<html>
<head>
<title>No JS Web Developer</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="assets/fonts/style.css" rel="stylesheet" type="text/css" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body id="indexpage">
<a name="top"></a>
<header>
<a id="logo" href="index.html">
<img src="assets/logo.png" alt="site logo"/>
</a>
<nav id="topnav">
<a id="toggle-topmenu" href="#topmenu"><span></span></a>
<ul id="topmenu">
<li id="close-topmenu"><a href="#top">×</a>
</li>
<li><a href="index.html">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contactme">Contact</a></li>
<li><a href="./portofolio.html">Portfolio</a></li>
<li><a href="#">Experiments</a>
<ul>
<li><a href="./portofolio-bootstrap.html">Bootstrap Grid</a></li>
<li><a href="./experiments/flexbox.html">Flexbox</a></li>
<li><a href="./experiments/cssgrid.html">CSS Grid</a></li>
<li><a href="./experiments">See all...</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<div id="content">
<aside>
<p>
<a href="https://github.com/elengart/2017-06-HTML-CSS" target="_blank">view on github</a>
</p>
<div class="social">
<a href="#" class="icon-facebook" taget="_blank" aria-label="facebook"></a>
<a href="#" class="icon-twitter" target="_blank" aria-label="twitter"></a>
</div>
<iframe src="https://www.youtube.com/embed/arj7oStGLkU" frameborder="0" >
</iframe>
</aside>
<div id="main">
<hgroup id="main-hgroup">
<h1>No JS Web Developer</h1>
<h3>This site is a coding playground for learning HTML and CSS - no JS allowed!</h3>
</hgroup>
<section>
<p>
Hi, I am a web development instructor at <a href="https://www.codeimmersives.com/" target="_blank">Code Immersives</a> career school. My students and I put together this site during instruction hours for the purpose of learning various HTML and CSS features and techniques, including, but not limited to:
</p>
<ul>
<li>html5 tags and attributes</li>
<li>foreground and background images, sprites</li>
<li>media queries and responsive layout</li>
<li>dropdown menu and pure CSS responisve menu</li>
<li>css3 selectors, properties, transforms, animations</li>
</ul>
<article id="how-to-use">
<h4>How to use this site:</h4>
<ul>
<li>click around and <a href="https://www.computerhope.com/issues/ch000746.htm" target="_blank">view source</a></li>
<li>inspect using <a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3" target="_blank">Chrome DevTools' Elements Tab</a></li>
<li>view or download source from <a href="https://github.com/elengart/2017-06-HTML-CSS" target="_blank">github</a></li>
</ul>
<p>
<em>
We intentionally NOT using any css frameworks on the main page of the site. Also the content is gibberish for the most part. Still, I hope this site will provide a useful reference for my students and, purhaps, to someone who begins learning HTML and CSS from scratch.
</em>
</p>
</article>
</section>
<section id="about">
<h2>
Why do I want to be a web developer? Students say...
</h2>
<div class="simple-container">
<figure id="profile-logo" class="c50">
<img src ="./assets/puppy.jpg" alt="puppy" />
<figcaption>
cute puppy
</figcaption>
</figure>
<article id="whydev" class="c50">
<ul>
<li>I want a career as a web developer
</li>
<li>
I want to be wealthy
</li>
<li>I want to express creativity
</li>
<li>
I want to control technology
</li>
<li>
I want to teach technology
</li>
<li>
I want to be my own webmaster
</li>
</ul>
<p><a href="https://skillcrush.com/2015/07/07/decide-between-web-designer-or-developer/" target="_blank">Learn More...</a>
</p>
</article>
</div>
</section>
<section id="contactme">
<h2>Contact Me</h2>
<h4>Sorry... this is just a demo form, it won't send anything</h4>
<form method="post" action="#">
<p>
<textarea rows="4" cols="50" placeholder="your message here"></textarea>
</p>
<button>Send Email</button>
</form>
</section>
</div>
</div>
<footer>
<a href="#top">Back To Top</a>
<p class="footer-copyright">© 2017 Elena Gartshtein</p>
</footer>
</body>
</html>