-
Notifications
You must be signed in to change notification settings - Fork 0
/
cross-reference.html
192 lines (173 loc) · 11.3 KB
/
cross-reference.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
<!DOCTYPE html>
<html>
<head>
<!--
Author: Maksym Kuzmenko
Date: April 11, 2018
Filename: 0.cross-reference.html
Supporting files: html files: -
css files: -
js.files: -
-->
<title>Cross Reference Page</title>
</head>
<body>
<h1>Cross Reference Page</h1>
<h2>2.1 - 9 Web Sites in total are required from 9 different domains as listed below.</h2>
<h2>Web Sites – Similar sites to your site, re: similar business nature </h2>
<ul>
<li><a href="http://simbacom.net/" target="_blank">Simbacom.net</a></li>
<p>I picked this website as a sample of how good my page should look like. It's responsive, and animations are smooth and nice. This is a quality of the page I was looking and aiming for.</p>
<li><a href="http://www.pcdoctor.ca/" target="_blank">PcDoctor.ca</a></li>
<p>I chose this website as a great example on how no to create web pages. To be honest, this one of the most terrible designs that I have ever seen(early-late 2000's doesn't count)</p>
<li><a href="http://thehackery.ca/" target="_blank">TheHackery.ca</a></li>
<p>Abother terrible website I have found while I was looking for inspiration, for my website. Again I have found only the example of how I SHOULD NEVER DO.</p>
</ul>
<h2>Web Sites – Downloadable Sites</h2>
<ul>
<li><a href="http://all-free-download.com/free-website-templates" target="_blank">Free web site tamplates</a></li>
<p>I have used this one to find a good loking header with high resolution. But you also can find here a lot of free templates, if you stuck on coming up with the design part.</p>
<li><a href="https://www.youtube.com" target="_blank">YouTube</a></li>
<p>I've used this one to download three videos I have on <a href="quick-fix.html">Quick Fix</a> page. I know how to embed the youtube video code, however I feel that the default design of html video player fits my page more, than the youtube one.</p>
<li><a href="https://www.google.ca/" target="_blank">Google</a></li>
<p>Google is the best friend of any developer. You can find everything on it. I used google for social-pages icons, fonts, and also retrieving pictures for my <a href="index.html">Home Page.</a></p>
</ul>
<h2>Web Sites – Technical Information</h2>
<ul>
<li><a href="http://www.w3schools.com/" target="_blank">W3Schools</a></li>
<p>This site is a Koran and Holy Bible for every web developer. There is everything about anything you might and will need while working on a web project.</p>
<li><a href="http://stackoverflow.com/" target="_blank">Stack Overflow</a></li>
<p>This is the best forum place for everyone, who considers themselves as a coders. There are a lot of professionals in different fields of comp. science. If you stuck somewhere or need a clear explanation, just live a message over there and you'll get a quick response.</p>
<li><a href="https://codepen.io/" target="_blank">Codepen</a></li>
<p>Is a really good place to learn everything about HTML5, CSS3, and JS having the examples right in front of your face. You can also play with a code, created by the community, to understand how it works.</p>
</ul>
<h2>2.3.1 HTML5 Minimum Requirements Features</h2>
<dl>
<dt>1. Implement HTML5 structural elements, including header groups to group html headers.</dt>
<dd>header-wrapper</dd>
<dd>footer</dd>
<dt>2. Use of anchor references</dt>
<dd>Everything — for example index.html and cross-reference.html</dd>
<dt>3. Links to appropriate resources, additional info ... pertaining to the nature of the business.(FIRST Tab)</dt>
<dd>"Partners" tab at the bottom of every page.</dd>
<dt>4. Use of hotspots, image maps or bookmarks to skip to a location on a given page, as well as to another page on your site and to an external related web site(s). </dt>
<dd>hotspots — </dd>
<dt>5. Insert inline images and line breaks.</dt>
<dd>line break — in footer</dd>
<dd>inline images — </dd>
<dt>6. Mark page headings, paragraphs, block quotes and addresses appropriately.</dt>
<dd>Every single header and paragraph are like that</dd>
<dd>Adress in footer</dd>
<dt>7. Create appropriate ordered, unordered and description lists.</dt>
<dd>dl — x-ref HTML requirements</dd>
<dd>ul — rest of x-ref page</dd>
<dd>ol — our partners tab</dd>
<dt>8. Insert special characters from extended character sets.</dt>
<dd>Address in footer</dd>
<dt>9. Implement HTML5 meta character set, meta name as author and content with the business name, meta name as description and content describing the nature of the business in one short simple sentence, meta name as keywords and content with at least five keywords that would describe the nature of the business in words. </dt>
<dd>See html files.</dd>
<dt>10. Your home page must have a footer when the web site was last updated or modified.</dt>
<dd>Footer</dd>
</dl>
<h2>2.3.2 Cascading Style Sheets Minimum Requirements Features</h2>
<ul>
<li>1. Create one example on your home page that would show that you know how to style a single element using an inline style for your first h1 heading on your home page.</li>
<p>style="display:inline"</p>
<li>2. Style your home page using embedded style sheet.</li>
<p>"Style" part in index.html</p>
<li>3. For the remaining pages create styles using external CSS file(s).</li>
<p>All files that are in </p>
<li>4. Use CSS3 to format the appearance of paragraphs, lists, headers, background images, tables, forms. Use the following CSS3 contextual selectors (e1, e2, e3; e f; e > f; e + f) in your web pages.</li>
<p>p, ol, ul { margin-top: 0 auto; }</p>
<p>ol > li { list-style: none; }</p>
<p>div + p { border-style: hidden; }</p>
<li>5. Use of CSS3 styles for color (RGBA & HSLA) and show one instance of progressive enhancement for colors.</li>
<p>#menu .current_page a { text-decoration: none; color: rgba(255, 255, 255, 0.8); }
</p>
<li>6. Use of CSS3 styles to format the appearance of web pages text, including at least the following: font-family, font-size, kerning, tracking, leading, text-indent, font-weight, font-style, text-decoration, text-transform and font-variant.</li>
<p>#menu a:hover, #menu .current_page a</p>
<p>ol > li</p>
<p>div + p</p>
<li>7. Use of the following pseudo-classes to highlight hyperlinks states of link, visited, active, hover; focus pseudo-classes and one appropriate structural pseudo-class.</li>
<p>a:hover</p>
<p>a:visited</p>
<p>a:focus</p>
<p>a:active</p>
<p>input:required</p>
<li>8. Use of CSS3 background styles (background size, background-clip, background-origin, padding, margins, borders, use of an appropriate border style, use of rounded corners and the use of an outline style.</li>
<p>It's used all over the css files</p>
<li>9. Your home page should have a drop cap created with CSS3.</li>
<p>dropcap</p>
<li>10. Define document content with the class and id properties and create styles for them.</li>
<p>#contact-us</p>
<p>.image</p>
<li>11. Mark document content with the
<div></div> and <span></span> tags and create styles for them.</li>
<p>div is used everywhere(+styles)</p>
<p>span is used in footer(+style)ul.contact li span { display: none; margin: 0; padding: 0; }
</p>
<li>12. Use cascading styles to control page layout by using float attribute and positioning.</li>
<p>#social { position: relative; float: right; }
</p>
<li>13. Use of a Web Font.</li>
<p>Is used everywhere</p>
<li>14. Use of CSS3 text and box shadows.</li>
<p>Contact us button</p>
<li>15. Use of CSS3 transform rotate feature.</li>
<p>#rotate</p>
</ul>
<h2>2.3.3 Web Form Required Features</h2>
<ul>
<li>1. Use of appropriate form elements including some of the new HTML5 form elements.</li>
<p>reset button (placeholder)</p>
<li>2. Apply appropriate styles to Web Forms.</li>
<p>autofocus</p>
<li>3. Validate form data using the required attribute.</li>
<p>required</p>
<li>4. Apply inline form validation by using the focus pseudo-class to appropriate form elements.</li>
<p>inline</p>
</ul>
<h2>2.3.4 Multimedia Minimum Required Features</h2>
<ul>
<li>1. Use of sound and video somewhere on your site. Ensure these are of short duration preferably about 30 seconds in duration.</li>
<p>3 videos and background music on index.html</p>
</ul>
<h2>2.3.5 Creating a Well-Formed, Valid Document</h2>
<ul>
<li>1. Your home page should be well formed, valid web page under either transitional, strict XHTML DTD or HTML5.</li>
</ul>
<h2>2.3.6 JavaScript Minimum Required Features</h2>
<ul>
<li>1. Use of variables, arithmetic, comparison and logical operators, subroutines, functions, array, conditional statements, conditional operators, running time commands.</li>
<p>show-Message.js</p>
<p>show-Time.js</p>
<li>2. Display system date on the home page of the web site.</li>
<p>Footer</p>
<li>3. Validating form input by using appropriate JavaScript functions.</li>
<li>4. Use of JavaScript alerts for validation purposes.</li>
<p>Send button</p>
</ul>
<h2>2.4 Web Project Documentation</h2>
<ul>
<li>You must include in your web project documentation the following elements in pdf format.</li>
<li>Include a site map/schematic diagram of the entire web project with dependency tree supported with documentation of application flow and functionality that is clear, precise and concise. Use of Visio or other similar tools is encouraged to create a professional look to your schematic diagram</li>
<li>MUST include a “Read Me First” text file to be placed outside your root folder, which explains how the user would navigate the web site, usually starting from the index page<br>Out side of Root Folder
</li>
</ul>
<h2>2.5 Demonstration Evaluation Form</h2>
<ul>
<li><a href="docs/evalutaion-form.pdf">Evaluation form</a></li>
<li><a href="docs/checked-evaluation-form.pdf">Checked evaluation form</a></li>
</ul>
<h2>2.6 Extended Features</h2>
<ul>
<li>None that I can consider. The website itself is pretty minimalistic, so I don't want to overload it with features that are not needed, because the site will not be that beautiful, as it is right now.</li>
</ul>
<h2>2.7.2 Web Presence Style Guidelines for deliverables</h2>
<ul>
<li><a href="docs/Documentation.pdf">Site map</a></li>
<li>README.txt is in the main folder.</li>
<li><a href="docs/Bibliography.pdf">Bibliography</a></li>
</ul>
</body>
</html>