-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
454 lines (381 loc) · 40.6 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
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
<!doctype html><!--HTML5 doctype declaration -->
<html lang="en"><!--default language of the document content -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" media="screen and (min-width: 947px) and (max-width: 1920px)" href="css/index.css">
<link rel="stylesheet" media="screen and (min-width: 601px) and (max-width: 946px)" href="css/tablet.css">
<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 600px)" href="css/smartphone.css">
<title>Tom's Learning Journal</title>
</head>
<body>
<h1 id="LJ-Title" class="All-Titles">Learning Journal</h1>
<nav class="Nav-Bar"><!--The primary navigation of the website-->
<ul>
<li id="LJ-Button"><a href='#'>Learning Journal</a></li>
<li id="Tutorial-Button"><a href="tutorial.html">Tutorial</a></li>
<li id="Contact-Button"><a href="contact.html">Contact me</a></li>
</ul>
</nav>
<h2 id="LJ-Sub-Title" class="All-Sub-Titles">Tom's Web-Development Chronicles:</h2>
<main> <!--Start of weekly content-->
<article id="Week-1"> <!--Week 1-->
<div class="LJ-WK1 All-LJ-Weeks">
<div class="All-Weeks"><header><h3>Week 1:</h3></header></div>
<h4 class="All-Weekly-Headers">Introduction to Web Development</h4>
<p id="P1">In the first week of web development, we learned about the very basic fundamentals of HTML (Hypertext
Markup Language) and briefly went over CSS (Cascading Style Sheets), which we will use to design our websites. HTML and CSS
are the standard languages that are used to structure and style websites. HTML uses things called 'tags' to identify
and decide which function to assign something. With a few exceptions, almost all tags require an 'end tag' which contain a '/'
so that they are distinguishable from their matching start tag. Start and end tags are used to nest the specified content,
and also assign it a function. In a nutshell, HTML has various tags for different purposes, so that it can efficiently
structure a webpage.</p>
<p id="P2">We were also taught how to access Brighton Domains so that we can navigate to the correct folders in order to upload our
updated versions of the website. The first thing that we created was a 'text/HTML' file called 'index.html', which contains
the main source code.Next, we made 3 folders called 'ci435', 'images' and 'css'. The ci435 folder stays within the 'public_html'
directory, and the other 2 folders are moved inside of it, along with index.html. This is done so that we can work on our
websites in an organized fashion without losing track of our work.</p>
<div class="All-Publish-Dates"><small>© Published: 8/10/2020</small></div>
</div>
</article>
<article id="Week-2"> <!--Week 2-->
<div class="All-Weeks-Positioning All-LJ-Weeks">
<div class="All-Weeks"><header><h3>Week 2:</h3></header></div>
<h4 class="All-Weekly-Headers">HTML5 Markup Basics</h4>
<p>This week, we learned the basics of HTML markup, which includes: syntax (rules) of tags, blocks, inline
elements and how to create well-formed markup. HTML has what's called a 'lax' syntax meaning that it is 'backwards compatible'.
This essentially means that obsolete tags such as 'u' and 'font' are still recognized and used correctly by the translator; however, they are almost never
used any more. This is due to the fact that CSS makes styling much easier, and specifies how the browser's content should be presented.
The way that the languages are integrated is by referencing the CSS stylesheet in the head of the HTML document.</p>
<p>If a website's presentation is defined solely in a stylesheet, it is far easier to edit an entire website's styling rather than finding and
editing every tag's attribute styles individually. This will be explained in more detail in a later post. One of the most important things in
web-development is creating well-formed markup. To do this, elements must be correctly nested inside one another, and laid out efficiently enough
so that the developer can read between their own code. This screenshot from the (current) source code shows this:</p>
<img src="images/weekslayout.PNG" alt="Source Code Layout" id="Code-Layout-SS">
<p id="P4">We also learned about 'anchors' and the 'href' attribute. The anchor is what outlines the clickable link,
and the 'href' (meaning hypertext reference) is the links destination, which must be included in the HTML source code.
This is crucial because we are required to have 3 different pages on our website that must be linked together using
these anchors. Block and inline elements are simple. Block elements e.g. 'h1' (headings), 'p' (paragraphs), 'ol' and 'ul' (lists) are
elements that are always in the HTML document, and can nest inline elements and other block elements inside of them. Inline elements
such as 'em' and 'strong' cannot contain block elements, only other inline elements. Tags and their attribute names should always be lower case.
For example, my folders 'ci435' and 'images' were not named with any capitals because XML is case sensitive when differentiating
tags and their attribute values.</p>
<p><small>P.S. It makes no difference to the HTML translator, but if things are not laid out correctly, the developer
might get confused when trying to fix something</small></p>
<div class="All-Publish-Dates"><small>© Published: 14/10/2020</small></div>
</div>
</article>
<article id="Week-3"> <!--Week 3-->
<div class="All-Weeks-Positioning All-LJ-Weeks">
<div class="All-Weeks"><header><h3>Week 3:</h3></header></div>
<h4 class="All-Weekly-Headers">HTML5 Document Structure and Hypertext</h4>
<p>During week 3, we covered the 'div' element, how the Learning Journal should be structured, absolute & relative
links and the 'viewport' meta command. To create a well-structured Learning Journal (or website), elements must be correctly nested inside
one another. For example, 'header' is the main title of the page, and should be located at the top. As we already know, an element is made up of
start and end tags, with content in-between.</p>
<p id="P6">The body of the page consists of 'section elements', which are used to identify/ separate different
types of content, to make the site more readable. The 'article' tag outlines the informative content of the page, meaning it nests things like
paragraphs and embedded images. The 'main' tag is used to mark-up the main content that is unique to <em>that</em> specific page,
not the entire website. For the Learning Journal, things like 'References' and the nav bar would not be included in 'main'. 'Aside' is essentially
the opposite of 'main', since it nests the primary content of the website, which we just went over. Finally the 'footer'
of the website is located at the bottom, and may include bibliography, copyrights and contact info. Using this diagram,
developers can create well-structured websites.</p>
<img src="images/layoutdiagram.jpg" alt="HTML Website Layout" id="HTML-Layout-Diagram">
<p id="P7">Two of the most important tag attributes in any webpage are 'class' and 'id'. They are very different,
however, they are used similarly. The 'class' attribute refers to all tags with that same class name, meaning that the <strong>same</strong> class
attribute can be applied to <strong>multiple</strong> tags. This is extremely useful for developers and saves them a lot of work, because
it means that instead of styling every tag individually, one class can be made with a specific rule-set that applies to all tags containing it.</p>
<div id="#WK3-Diagram-Reference"></div>
<p id="P8">The 'id' attribute is only used to target <strong>one</strong> tag to provide it with a unique set of rules, which only apply to that specific
tag. One scenario where a developer would use id instead of class would be if they wanted to float an image to the right of a paragraph
(like the one above). That paragraph can still have a class, but would also have an id to make <em>it</em>, and <em>only</em> it float to
the left of the image. The screenshots below show the classes, id's and corresponding stylesheets of the paragraph and image above.</p>
<h5 id="HTML-Subtitle">HTML:</h5>
<h5 id="CSS-Subtitle">CSS:</h5>
<img src="images/paragraph&imageids.PNG" alt="Paragraph & Image Source" id="Para-Image-Source-SS">
<div id="Separator"></div>
<img src="images/paragraph&imagecss.PNG" alt="Paragraph & Image CSS" id="Para-Image-Styles">
<p><small>P.S. The 'viewport' meta command is when HTML makes it so that whatever the width of the screen is, the content can be scaled to fit the browser
window.</small></p>
<div class="All-Publish-Dates"><small>© Published: 22/10/2020</small></div>
</div>
</article>
<article id="Week-4"> <!--Week 4-->
<div class="All-Weeks-Positioning All-LJ-Weeks">
<div class="All-Weeks"><header><h3>Week 4:</h3></header></div>
<h4 class="All-Weekly-Headers">Cascading Style Sheets</h4>
<p>We covered many things in week 4, including: CSS 3 syntax, embedded and inline styling, 'selectors', inheritance and
specificity and the 'normalize.css' stylesheet. Although it is a very efficient and logical formatting language, HTML alone, has some limitations.
This is because all it can really do is define things such as titles, lists, paragraphs; embed images, videos etc. This is where Cascading
Style Sheets comes in. Nowadays, it is solely used to edit the layout and presentation of webpages, and it does
this by interacting with the HTML tags, as we already know. Certain styles used to only be possible using JavaScript, or photo-shopping
images beforehand, but with CSS 3, developers are now able to apply the following styles:</p>
<ul class="All-Content-Lists">
<li>Shadow on text and boxes</li>
<li>Opacity settings using rgba</li>
<li>The 'border-radius' attribute</li>
<li>Decorative borders</li>
<li>Importing fonts from the internet</li>
<li>Gradients</li>
<li>Animations (transition & transform)</li>
</ul>
<p>CSS also has some very important syntax rules. For example, classes are defined with a dot (.) in a stylesheet document, whereas id's are
defined with a hashtag (#). In the stylesheet doc, the name of the classes and id's are known as selectors, because they select the specific tag and tag-type
that the developer wants to style. The diagram in <a class="Content-Rel-Links" href="#Week-3">Week 3</a> is an example of this.
Another rule would be that specific types of styling can only be applied to certain elements e.g. 'border-radius' can only be applied to elements that already
have an existing background/ image/ border, as it wouldn't make sense to try to apply it to anything else.</p>
<p>Embedded and inline styling is very simple. Embedded styling is when the styling properties are <strong>literally</strong> embedded into an HTML document using
the 'style' tag. This should <strong>only</strong> be done if the developer is creating a <strong>single-page website</strong>. Inline styling (which is how this
website is styled) is when a HTML5 document has a reference in the 'head' to a separate text/css document. The HTML doc would have lots and lots of classes and
id's which would contain all styling properties for the website's elements. The applying styles for only classes and id's is known as specificity. This is
because the class/id is more specific than inherited styling i.e. '.p {font-size: 12px;}' would set all paragraphs of text to have a font size of 12 pixels,
<em>until</em> a specified class/id overrules it.</p>
<p><small>P.S. The 'normalize.css' stylesheet is what's known as a 'reset' stylesheet. Since different & older versions of browsers don't recognize all HTML5 elements,
all that normalize.css does, is render the elements more consistently and up-to-date with modern standards. It also only targets the styles that need normalizing.</small></p>
<div class="All-Publish-Dates"><small>© Published: 5/11/2020</small></div>
</div>
</article>
<article id="Week-5"> <!--Week 5-->
<div class="All-Weeks-Positioning All-LJ-Weeks">
<div class="All-Weeks"><header><h3>Week 5:</h3></header></div>
<h4 class="All-Weekly-Headers">CSS Box Model and Measurement</h4>
<p>In week 5, we covered:</p>
<ul class="All-Content-Lists">
<li>The 'cascade' specificity/rules</li>
<li>The CSS box-model
<ul>
<li>Styling the box</li>
<li>The background property</li>
</ul>
</li>
<li>CSS relative units of measurement
<ul>
<li>px</li>
<li>%</li>
<li>em & rem</li>
<li>vw & vh</li>
</ul>
</li>
</ul>
<h5 class="All-Weekly-Headers">The 'cascade' specificity</h5>
<p>The cascade specificity is another set of rules, which is about how browsers determine which styling rule(s) to apply to a specific
element or multiple elements. The screenshot on the right, which was taken from the source code of this website is an example of this. There are rules being
applied to the body of the website, and also the paragraphs.
<p id="P10">For this demonstration, I temporarily added conflicting font families for the preset styles of
the body and paragraphs of the website. The reason that I put a cross next to the bodies' font family, and a tick next to the paragraphs' one, is because the
paragraph's styling rules <strong>override</strong> the bodies'. This is because paragraphs should always be located within the body, therefore making
them <strong>more specific</strong> than the body of a page. If a developer does not want a specific title or paragraph to inherit the default styles that they
set, they should give it a class or id depending on the purpose. </p>
<img src="images/cascadespecss.jpg" alt="Cascade Specificity Example" id="Cascade-Spec-SS">
<h5 class="All-Weekly-Headers">The CSS box-model</h5>
<img src="images/cssboxmodelss.jpg" alt="CSS Box Model Example" id="CSS-Box-Model-SS">
<p>This screenshot is an example of the CSS box model for this page in the website. With some rough annotations, I have tried to break it down to make it
easier to visualize the box model. The 'Menu-Container' class consists of the websites' references (left container) and, in this case, the weekly content navigation
(right container). Using the box model is very useful for developers, as it allows them to <em>easily</em> reposition/resize the containers for different viewports,
or in my case, creating two different boxes of content with the same styles but different positions. I did this by giving both containers different classes for
different purposes. The 'Left-Container' and 'Right-Container' classes specify the positioning and size of each, and the 'Container-Styles' class assigns
the containers some basic preset styles. These cannot be included in the same class because, although I want the styling the same, I also want the containers to
float left and right of the main content, meaning they need <strong>different</strong> locations
</p>
<h5 class="All-Weekly-Headers">CSS relative units of measurement</h5>
<p><strong>px - computer screen pixels,</strong> e.g. a laptop monitor has more pixels than a smartphone, therefore must be styled differently</p>
<p><strong>% - percentage relative to its parent element,</strong> e.g. 'margin-left: 10%;' will move an element more drastically if it is located in the body of the
page than if it was located inside a small container</p>
<p><strong>em & rem - relative to the font size of the element/root element,</strong> e.g. if a document's font size is 14px, 2rem would be 28px as it is 2x the size
of the root element, whereas em is relative to whatever its <strong>parent</strong> element is.</p>
<p><strong>vw & vh - relative to 1% of the viewports width/height</strong> e.g. 1vw is larger on a tablet than on a smartphone, equally, 1vh on a desktop monitor
would be larger than 1vh on a tablet.</p>
<div class="All-Publish-Dates"><small>© Published: 16/11/2020</small></div>
</div>
</article>
<article id="Week-6"> <!--Week 6-->
<div class="All-Weeks-Positioning All-LJ-Weeks">
<div class="All-Weeks"><header><h3>Week 6:</h3></header></div>
<h4 class="All-Weekly-Headers">Introduction to Responsive Web Design</h4>
<p>This week was all about keeping the website responsive/ optimized for devices of all different screen-sizes. As previously talked about, the 'viewport' meta
command allows developers to scale the <strong>width</strong> of the viewport to the correct screen-size of the specified device. The reason that only the width
is talked about is because the website's content can be rearranged to be further up or down on the page, and can be navigated to via scrolling and/ or a button.
By default, doing this may cause certain things to be mispositioned or incorrectly-sized. This is where HTML/CSS 'media queries' come in.</p>
<h5 id="HTML-Subtitle-2">HTML (Conditional) Media Query:</h5>
<img src="images/htmlmediaqueryss.PNG" alt="HTML Media Query Example" id="HTML-MQ-SS">
<div id="Separator-3"></div>
<h5 id="CSS-Subtitle-2">CSS (Specific) Media Query:</h5>
<img src="images/cssmediaqueryss.PNG" alt="CSS Media Query Example" id="CSS-MQ-SS">
<p>A media query is essentially an 'if' statement, of sorts; and can apply conditions to an entire stylesheet and/ or for a specific element/ set of elements within a
stylesheet. These screenshots above are examples of both. The first one was taken from this pages HTML doc 'index.html', and is <strong>only</strong> applied to
the website under certain conditions. In this case, the conditions for the referenced stylesheets 'index.css' and 'tablet.css' are that they can only apply when the
devices screen-width is between a certain number of pixels. Index.css uses 'min-width: 947px' and 'max-width: 1920px' since these are the standard widths for most laptop
and desktop monitors, and I only want index.css to apply to those screens. Tablet.css works in the same way, however
<p>The other media query, which should be put in the CSS doc, is an example of more specific media query. In this case, the paragraph floats to the left of the image by
default. However, as the viewport shrinks, the paragraph starts to look very squashed and narrow. To fix this, I added a cut off point using '(max-width: 1100px)'
so that when the viewport is any less than 1100 pixels, the image no longer floats to the right. Instead, the image is displayed in the center, below the image.
The reason I didn't add a 'min-width' argument is because it is already defined in the HTML doc, and if I did add one and it was any larger than 947 pixels, it
would revert back to floating before getting to the minimum width.</p>
<div class="All-Publish-Dates"><small>© Published: 20/11/2020</small></div>
</div>
</article>
<article id="Week-7"> <!--Week 7-->
<div class="All-Weeks-Positioning All-LJ-Weeks">
<div class="All-Weeks"><header><h3>Week 7:</h3></header></div>
<h4 class="All-Weekly-Headers">Flexible Media</h4>
<p>Week 7 was the progress-check week, which involved the web development lecturers providing some casual feedback on the Fridays of weeks 8, 9 and 10 (in our tutorial sessions).
My knowledge of HTML and CSS was very basic at this time, as I've learned a lot more about both languages since then. I distinctly remember forgetting to show evidence of HTML/CSS
validation, which is why I will definitely show evidence of validation on the 15th :). We were told to create a zip file containing the ci435 folder, and our (now) 3 text/html
files: index.html, tutorial.html and contact.html. These are the three pages of the website, which were linked using <strong>relative links</strong>. A relative link sends the
user to another page/ place within the same website, whereas an <strong>external</strong> link sends the user to a different website altogether.
<p>We also learned about 'flexible media'. Flexible media is about making the embedded images and videos of the website responsive. This can be done in a
multitude of ways, the two best ways that I've found are using min-width and max-width and using media queries. In this case, I have used media queries for the informative
images on this page, and min-width & max-width for the ones on the Tutorial page. For more information about media queries, see <a class="Content-Rel-Links" href="#Week-6">Week 6</a>.
Whether the developer is using min-width, max-width, media queries, or both; the width of the image should always be defined. To make the image 'flexible' for min and max-width,
the developer <strong>must</strong> use a relative unit of measurement, such as %, so that it fits in its container no matter the viewport size, and also cannot exceed or fall
below the specified minimum and maximum widths. The new height of the image is automatically recalculated depending on the change in width, so as long as <strong>only</strong>
the width style is included, the image will not look stretched.</p>
<h5 class="Flex-Media-Sub">Image & Paragraph 1101px and above:</h5>
<img src="images/flexiblemediass1.PNG" alt="Image Floating Right of Paragraph" id="Flexible-Media-Pic-1">
<h5 class="Flex-Media-Sub">Image & Paragraph 1100px and below:</h5>
<img src="images/flexiblemediass2.PNG" alt="Image Underneath Paragraph" id="Flexible-Media-Pic-2">
<p>An alternative to this is using media queries, which can include relative or static measurements for the image sizes. This is convenient for developers as it allows them
to resize and reposition any image, for any given screen width. Although, one issue with using relative units of measurement is that the images shrink in proportion to the width
of the screen, until another media query (which would resize the image) is implemented. This <em>does</em> mean that the images would be slightly smaller before that cut-off point,
however, as long as the image is still readable <strong>on said screen</strong>, this shouldn't be too much of a problem. When using static/ absolute units of measurement
such as millimeters or centimeters, the image will always remain its given size, regardless of the screens', meaning the image would have to be positioned in a way where
it never would overlap the site's content.</p>
<div class="All-Publish-Dates"><small>© Published: 3/12/2020</small></div>
</div>
</article>
<article id="Week-8"> <!--Week 8-->
<div class="All-Weeks-Positioning All-LJ-Weeks">
<div class="All-Weeks"><header><h3>Week 8:</h3></header></div>
<h4 class="All-Weekly-Headers">Responsive Layout</h4>
<p>The whole point of media queries is to ensure that the website's content remains readable, and easily accessible across all the possible devices that a potential user/ customer could
view the website on. In week 8, we were taught about the 'flexbox layout' and 'multi-columns'. These are common ways that a developer would lay out their website in order to make it
fully responsive, meanwhile keeping it simple. The flexbox layout is referred to as a 'card interface', which either have 1, 2 or 3 columns for the website's content, depending on
the device. For a laptop/ desktop view, there would be 3 columns, for tablets, 2 and smartphones would typically have just a single column. This is why almost all developers keep
their website's navigation in a fixed position; because even if the user is on a smaller device e.g. an iPhone 6, they are still able to navigate to other parts of the website no
matter how far they scroll. This is convenient and provides a good user experience, so it's a win-win for the user and developer.</p>
<h5 class="Website-View-Subtitle">Website on a Desktop:</h5>
<img src="images/website1920px.PNG" alt="Website Desktop View" id="px1920">
<h5 class="Website-View-Subtitle">Website on a Tablet:</h5>
<img src="images/website768px.PNG" alt="Website Tablet View" id="px768">
<h5 class="Website-View-Subtitle">Website on a Smartphone:</h5>
<img src="images/website375px.PNG" alt="Website Mobile View" id="px375">
<p>Although I was unable to make the website fully responsive, these screenshots are meant to be indicators of how I wanted the website to look for each device and device variant.
What I mean by 'device variant' are all the different types of each device. For example, the smartphone view is only optimized for the iPhone 6, 7 and 8 as, unfortunately, I did not
have time to make the website responsive for the iPhone X, 11, 12 or any of the Galaxy or Huawei phones. Similarly, the tablet view is only optimized for the Apple iPad, but not
the iPad Pro. The desktop view should work on all kinds of monitors, as I had the time to make media queries to fix any layout issues for smaller monitors.</p>
<p>Changing the layout of the website for different devices requires quite a bit of imagination, since the developer must bear in mind that the layout should remain convenient, but
also readable. This is why I have followed the flexbox layout rule, as it seemed, logically the best way to do this. Due to the screen being much smaller, I had to make a subtle
change to the websites' containers for the smartphone view. Instead of being fixed, at the side, the content navigation is located at the top of the website, so that as soon as a
user enters the Learning Journal or Tutorial Page, they can instantly navigate to their chosen week/ quarantine study tip. The 'References' container is below <a class="Content-Rel-Links"
href="#Week-10">Week 10</a> in the smartphone version because even though it is important, it is not as high-a-priority as the website's navigation, since it's part of the website's
<strong>functionality</strong></p>
<div class="All-Publish-Dates"><small>© Published: 9/12/2020</small></div>
</div>
</article>
<article id="Week-9"> <!--Week 9-->
<div class="All-Weeks-Positioning All-LJ-Weeks">
<div class="All-Weeks"><header><h3>Week 9:</h3></header></div>
<h4 class="All-Weekly-Headers">HTML and CSS Forms</h4>
<p>Week 9 covered:</p>
<ul class="All-Content-Lists">
<li>Role of forms on websites</li>
<li>HTML form elements
<ul>
<li>The <em>input</em> element and input <em>types</em></li>
<li>Form controls</li>
<li>HTML5 form validation</li>
<li>Other form elements</li>
</ul>
</li>
<li>Styling forms with CSS
<ul>
<li>Responsive forms</li>
</ul>
</li>
</ul>
<h5 class="All-Weekly-Headers">Role of Forms in Websites</h5>
<p>Website forms are <strong>essential</strong> for both functionality, and interactivity. The presence of a form turns casual website browsers into potential customers. The more engaging
and responsive a form is, the more likely a customer is to fill it out. When a customer fills out a form, the business can then use the information provided, to get a more accurate
representation of what their customers want. This is called data mining, it is a huge part of digital marketing, and is <strong>very</strong> beneficial for the business in question.</p>
<h5 class="All-Weekly-Headers">HTML Form Elements</h5>
<p>All form elements must be nested inside the 'form' element. The form element must have an 'action' attribute, as this is what specifies the website's Uniform Resource Indicator, which
processes information that users put into the form. Another essential attribute in the form element is the 'method' attribute, which can either be 'get' or 'post'. These are the HTTP
methods for submitting form data to the server. The 'input' element is where the interactive part comes in. There are various types of input, each one used to specify the type of control
(widget) to display, and the type of data that is allowed to be typed into the widget. The types of inputs include:</p>
<img src="images/inputtypestable.PNG" alt="Input Types Table" id="Input-Types">
<p>For example, the 'email' input type is a text field that requires an '@' symbol in the typing area, and the 'password' is a text field with a control type that obscures the data entered,
and cannot contain line breaks (spaces). The 'label' element is pretty self explanatory, it is used to label the input type, to make it readable to for the user. For the 'Your Experience'
fieldset, I have used the radio type for the contact form in the website, which only allows the user to select one of the multiple checkboxes. This is so that when the user gets to the
question 'Did you enjoy the website?', they can only choose 1 of 3 options: 'Yes', 'No' or 'Kind of'. In order to have a valid HTML5 form, it must have required fields. The developer can
add the boolean (true or false) 'required' attribute to accomplish this. One last handy attribute, to make the form more interactive is 'placeholder'. It displays text inside the widget
until the user starts typing, which usually has a word or phrase to briefly let them know how to fill in the field.</p>
<img src="images/formradioexampless.PNG" alt="Radio Button Example" id="Radio-Button-Example">
<h5 class="All-Weekly-Headers">Styling forms with CSS</h5>
<p>Since forms are part of the functionality and interactivity of the website, it is important that they provide a good user experience. Styling the form was not too difficult. I had to bear
in mind that it must fit with the theme of the contact page, and also be laid out conveniently and responsively. Using a class for the general text fields, such as first name, last name
and email, I made it so that each field's colour is set to black, with a 2-pixel green border and a 2mm gap between each field and its label. I also gave both fieldsets the 'display: block'
style, so that all fields inside are displayed vertically downwards rather than horizontally.</p>
<img src="images/fieldset1exampless.PNG" alt="General Text Fields Class Example" id="General-Text-Fields-Class-SS">
<div class="All-Publish-Dates"><small>© Published: 16/12/2020</small></div>
</div>
</article>
<article id="Week-10"> <!--Week 10-->
<div class="All-Weeks-Positioning All-LJ-Weeks">
<div class="All-Weeks"><header><h3>Week 10:</h3></header></div>
<h4 class="All-Weekly-Headers">Testing and Evaluating</h4>
<p>Week 10 was about testing and evaluating the website. Since I came into this course with zero HTML/ CSS knowledge at all, I had to do a <strong>lot</strong> of testing. Every time I made a
change that I knew would alter the website considerably, I would always hit 'CTRL + S' to save the work, then switch to the local version in the browser and hit 'CTRL + R' to refresh it.
I did this so that I could constantly perform tests by switching between VSCode and the browser quickly and conveniently. In retrospect, I could have done a lot of things better on the
website, such as making the website responsive for all devices, and making the source code more concise. On the other hand, I also feel like I have done a decent job on the website, considering
that I have only been learning HTML/CSS since october.</p>
<p>For the evaluation, we had to ensure that the website met all aims and objectives. These aims and objectives are essentially the user requirements of what would be in a generic website of this
sort. In my case, this website has images, paragraphs, headers, sub headers, a form and 3 linked pages and a fixed navigation. These are the base requirements for a functional,
interactive website. We also had to ensure that we met the requirements of the brief, which was more specific. I solely based the making of the website on the brief and weekly
PowerPoints, so I can confidently say that this website meets most of the requirements set for the assessment.
</p>
<div class="All-Publish-Dates"><small>© Published: 03/01/2021</small></div>
</div>
</article>
<!--References & Weekly Navigation container-->
<div class="Menu-Container">
<div class="Left-Container Container-Styles"> <!--References (Bibliography)-->
<h2 class="References">References:</h2>
<a href="https://developer.mozilla.org/en-US/">
<img id="MDN-Site-Reference" src="images/mdnreference.jpg" alt="MDN Site Reference">
</a>
<a href="https://www.w3schools.com/">
<img id="W3s-Site-Reference" src="images/w3schoolsref.jpg" alt="W3schools Site Reference">
</a>
<a href="https://stackoverflow.com/">
<img id="SOF-Site-Reference" src="images/stackoverflowref.png" alt="StackOverflow Site Reference">
</a>
<a href="https://www.fabriziovanmarciano.com/button-styles/">
<img id="FVM-Site-Reference" src="images/fvmref.jpg" alt="Fabrizio Van Marciano Site Reference">
</a>
</div>
<div class="Right-Container Container-Styles"> <!--Weekly navigation menu-->
<h2 id="Weekly-Navigation">Weekly Navigation:</h2>
<h3 id="WKS1-5">Weeks 1 - 5:</h3>
<h3 id="WKS6-10">Weeks 6 - 10:</h3>
<ul id="Left-Buttons">
<li><a class="All-Buttons-Left" href="#Week-1">Week 1</a></li>
<li><a class="All-Buttons-Left" href="#Week-2">Week 2</a></li>
<li><a class="All-Buttons-Left" href="#Week-3">Week 3</a></li>
<li><a class="All-Buttons-Left" href="#Week-4">Week 4</a></li>
<li><a class="All-Buttons-Left" href="#Week-5">Week 5</a></li>
</ul>
<ul id="Right-Buttons">
<li><a class="All-Buttons-Right" href="#Week-6">Week 6</a></li>
<li><a class="All-Buttons-Right" href="#Week-7">Week 7</a></li>
<li><a class="All-Buttons-Right" href="#Week-8">Week 8</a></li>
<li><a class="All-Buttons-Right" href="#Week-9">Week 9</a></li>
<li><a class="All-Buttons-Right" href="#Week-10">Week 10</a></li>
</ul>
<div id="Separator-2"></div>
</div>
</div>
</main>
</body>
</html>