-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
207 lines (174 loc) · 7.43 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coursera-test R1</title>
</head>
<body>
<h1>Table of Content</h1>
<h2>Part One</h2>
<ol><li>Front-end Development</li><li>Back-end Development</li></ol>
<h2>Part Two</h2>
<ol><li>UI Design</li><li>UX Design</li></ol>
<h1>Part One: Front-end and Back-end Development</h1>
<img src="images/Front.jpg" width="500" height="300">
<h2>1. Front-end development</h2>
<p>Front-end development is the practice of converting data to a graphic interface,<br> through the use of technologies such as HTML, CSS, and JavaScript;<br> this enables users to view and interact with data.</p>
<h2>2. Back-end development</h2>
<p>Backend development is that area of web development that focuses on how a<br> website or web application works. Backend developers write codes<br> that enable web browsers to communicate with databases and servers.<br>The primary role of a backend developer is to ensure that end-users get the<br> data or services they requested without a glitch and on time.</p>
<h1>Part Two: UI and UX Designs</h1>
<img src="images/uiandux.jpg" width="500" height="300">
<h2>1. UI Design</h2>
<p>User interface design or user interface engineering is the design of<br> user interfaces for machines and software, such as computers,<br> home appliances, mobile devices, and other electronic devices,<br> with the focus on maximizing usability and the user experience</p>
<h2>2. UX Design</h2>
<p>User experience design is the process of supporting user behavior through usability,<br> usefulness, and desirability provided in the interaction with a product.</p>
<h1>Unordered list</h1>
<div>
My typical dinner shopping list:
<ul>
<li>Milk</li>
<li>Donuts</li>
<li>Cookies</li>
<ul>
<li>Chocolate</li>
<li>Sugar</li>
<li>Peanut Butter</li>
</ul>
</li>
<li>Pepto Bismol</li>
</ul>
</div>
<h1>Ordered list</h1>
<div>
Oreo cookie eating procedure:
<ol>
<li>Open box</li>
<li>Take out cookie</li>
<li>Make a Double Oreo
<ol>
<li>Peel off the top part</li>
<li>Place another cookie in the middle</li>
<li>Put back the top part</li>
</ol>
</li>
<li>Enjoy!</li>
</ol>
</div>
<h1>LINKS</h1>
<h1>Internal links</h1>
<section>
We can link to a file in the same directory as this HTML file like this:
<a href="same-directory.html" title="same dir link">Linking to a file in the same directory</a>
<a href="same-directory.html" title="same dir link">
<div> DIV Linking to a file in the same directory</div>
</a>
</section>
<h1 id="top">External links</h1>
<section>
<p>
Let's link to a Facebook Fan page I created for this course!
<!-- link to Facebook page WITH TARGET-->
<a href="http://www.facebook.com/CourseraWebDev"
target="_blank" title="Like Our Page!">Course Facebook Page</a>
</p>
</section>
<h1 id="top">Links to Sections of The Same Page</h1>
<section>
<ul>
<!-- Link to every section in the page -->
<li><a href="#section1">#section1</a></li>
<li><a href="#section2">#section2</a></li>
<li><a href="#section3">#section3</a></li>
<li><a href="#section4">#section4</a></li>
<li><a href="#section5">#section5</a></li>
<li><a href="#section6">#section6</a></li>
</ul>
</section>
<section id="section1">
<h3>(#section1) Section 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dignissimos aut quasi quibusdam aspernatur possimos </p>
</section>
<section id="section2">
<h3>(#section2) Section 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis voluptatibus facere repallat deserun sint.</p>
</section>
<section id="section3">
<h3>(#section3) Section 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitabus ut, vel quasi nesciunt nisi laboriosam repellendus quod</p>
</section>
<section id="section4">
<h3>(#section4) Section 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus culpa, voluptabus obcaecati sunt reiciendis, a eveniet</p>
</section>
<section id="section5">
<h3>(#section5) Section 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur libero, a voluptate, quasi rem id! Molitia nostrum quo</p>
</section>
<div>
<h2><a name="section6">(#section6) Section 6</a></h2>
<p>
Back to the top: <a href="#top">Back to the Top</a>
</p>
</div>
<h1>Displaying Images</h1>
<h1>Don't be afraid to be < than a 100% success:</h1>
<p>
<img src="picturewithquote.jpg" width="400" height="235" alt="Picture with a quote"> "It is not the critic who counts; not<br> the man
who points out how the the strong man stumbles, or where the<br> doer of deeds could have done them better. The credit belongs to<br> the
man who is actually in the arena, whose face is marred by<br> dust and sweat and blood; who strives valiantly; who errs, who<br> comes short
again and again, because there is no effort without<br> error and shortcoming; but who does actually strive to do the<br> deeds; who knows great
enthousiasms, the great devotions, who<br> spends himself in a worthy cause; who at the best knows in the<br> triumph of high achievement, and
who at the worst, if he<br> fails, at least fails while daring greatly, so that his place<br> shall never be with those cold and timid souls
who neither know<br> victory nor defeat."
</p>
<p>
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fgames-cdn.washingtonpost.com%2Fimages%2Fprod%2Fquiz%2F9cecc198-e7f8-4861-80e2-ab9d3dcac345%2F94484e28-24fc-4b9d-b26c-d0fb98ccbcb3-edited.jpg%3Fts%3D1458079466039&imgrefurl=https%3A%2F%2Fwww.washingtonpost.com%2Ftheodore-roosevelt-1910%2F152550b1-6ca5-4520-be0c-30c9fde2624b_note.html&tbnid=uzA8DR-OGEKB8M&vet=12ahUKEwjcvpn_lNPwAhUSmhoKHTMXC7sQMygCegUIARDEAQ..i&docid=i1Rja5w6BkpzTM&w=373&h=339&q=theodore%20roosevelt%201910%20jpg&safe=strict&ved=2ahUKEwjcvpn_lNPwAhUSmhoKHTMXC7sQMygCegUIARDEAQ" width="400" height="300">
</p>
<p>Theodore Roosevelt 1910 ©</p>
</body>
</html>
------------------------------------------------------
<!--
<head>
<title>Unordered Lists</title>
</head>
<body>
<h1>Unordered list</h1>
<div>
My typical dinner shopping list:
<ul>
<li>Milk</li>
<li>Donuts</li>
<li>Cookies</li>
<ul>
<li>Chocolate</li>
<li>Sugar</li>
<li>Peanut Butter</li>
</ul>
</li>
<li>Pepto Bismol</li>
</ul>
</div>
</body> -->
<!-- <head>
<title>Ordered Lists</title>
</head>
<body>
<h1>Ordered list</h1>
<div>
Oreo cookie eating procedure:
<ol>
<li>Open box</li>
<li>Take out cookie</li>
<li>Make a Double Oreo
<ol>
<li>Peel off the top part</li>
<li>Place another cookie in the middle</li>
<li>Put back the top part</li>
</ol>
</li>
<li>Enjoy!</li>
</ol>
</div>
</body>
</html> -->