-
Notifications
You must be signed in to change notification settings - Fork 0
/
firststepshtml5post1.html
145 lines (133 loc) · 6.45 KB
/
firststepshtml5post1.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
<!DOCTYPE HTML>
<html>
<head>
<title>First Steps HTML5</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<a href="index.html" class="logo"><strong>JuneDev</strong> <span>.com</span></a>
<nav>
<a href="#menu">Menu</a>
</nav>
</header>
<!-- Menu -->
<nav id="menu">
<ul class="links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="careerHighlights.html">Career Highlights</a></li>
<li><a href="programmingPortfolio.html">Programming Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="codeprojects.html">Gallery</a></li>
</ul>
<ul class="actions stacked">
<li><a href="https://calendly.com/iamjunedev" class="button primary fit">Schedule Interview</a></li>
<li><a href="https://github.com/JuneDev5779/junedev5779.github.io" class="button fit">Explore This Repo</a></li>
</ul>
</nav>
<!-- Main -->
<div id="main" class="alt">
<!-- One -->
<section id="one">
<div class="inner">
<header class="major">
<h1> First Steps <br> Building Websites</h1>
<h2>HTML5 components, layout, structures</h2>
</header>
<span class="image main"><img src="images/helloworld.jpeg" alt="hello world" /></span>
<p>A '!Doctype html' declaration gives instruction to the browser of what HTML version the page is written in and what type of document is loading. An HTML comment begins with left pointing arrow — and the comment closes with a right pointing arrow, whereas nested Elements are elements inside of other elements.</p>
<p> 'br' line break element breaks lines in the block of a text. A 'br' tag is useful for writing addresses or poems, not for separating paragraphs. A 'br' tag is an empty tag (no end tag). A 'div' tag defines a division or section in an HTML and is used to group block-elements to format them with CSS. A 'section' tag defines sections of a doc, such as chapters, headers, footers. An 'aside' tag is for content that is aside from the main section. The 'h' tags are heading tags for content editing numbered from h1-h6, with larger font authority maintaining order consecutively from 'h1'.</p>
<h3>Here’s a basic layout of HTML5 code for a website . . .</h3>
<span class="image main"><img src="images/ex1firststeps.png" alt="code example" /></span>
<p>To build anything extraordinary you have to master the basics. I would even suggests memorizing this, getting your brain used to the format and layout of the document structure will help you implement creative development when inserting code blocs into your html5 doctype.</p>
<h3>“Talk is cheap. Show me the code.” <br>
― Linus Torvalds</h3>
<div>
</section>
</div>
<!-- Contact -->
<section id="contact">
<div class="inner">
<section>
<form method="post" action="mailto:iamjunedev@gmail.com" enctype="text/plain">
<div class="fields">
<div class="field half">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="field half">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="6"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="primary" /></li>
<li><input type="reset" value="Clear" /></li>
</ul>
</form>
</section>
<section class="split">
<section>
<div class="contact-method">
<span class="icon alt fa-envelope"></span>
<h3>Email</h3>
<a href="#">iamjunedev@gmail.com</a>
</div>
</section>
<section>
<div class="contact-method">
<span class="icon alt fa-phone"></span>
<h3>Phone</h3>
<span>(970) 541-0681 </span>
</div>
</section>
<section>
<div class="contact-method">
<span class="icon alt fa-home"></span>
<h3>Address</h3>
<span>1776 S Garfield St. <br />
Denver, CO 80014<br />
United States of America</span>
</div>
</section>
</section>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<ul class="icons">
<li><a href="https://twitter.com/" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="https://github.com/iamjunedev" class="icon alt fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://www.linkedin.com/in/junibeldelacruz/" class="icon alt fa-linkedin"><span class="label">LinkedIn</span></a></li>
</ul>
<ul class="copyright">
<li>© Unfold, Evolve, Advance </li><li>Develop: <a href="https://JuneDev.com">I am June Dev</a></li>
</ul>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>