Skip to content

Commit fef322e

Browse files
marjan-ahmedmarjan-ahmed
committed
first commit
1 parent c4950e2 commit fef322e

File tree

6 files changed

+325
-1
lines changed

6 files changed

+325
-1
lines changed

‎README.md

+18-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,18 @@
1-
# html-css-quiz-project
1+
# Accessibility by building a Quiz
2+
3+
In this project, you will be able to access the navbar links by keys (shortcut keys). This project will be different from others. However, It is simple but some accesskeys that will be more efficient for user experience.
4+
5+
- Key for **INFO** is: `alt`+`i`
6+
- Key for **HTML** is: `alt`+`h`
7+
- Key for **CSS** is: `alt`+`c`
8+
9+
<h2>How to Access these Keys?</h2>
10+
11+
- **For Windows:** Typically, the shortcut is activated using **`Alt`** + **`accesskey`**. In some browsers, you might need to use **`Alt`** + **`Shift`** + **`accesskey`**.
12+
13+
- **For Mac:** Usually, the shortcut is activated using **`Control`** + **`Option`** + **`accesskey`**.
14+
15+
# Result
16+
17+
![alt text](image.png)
18+
![alt text](image-1.png)

‎images/image-1.png

36 KB
Loading

‎images/image-2.png

36 KB
Loading

‎images/image.png

43.1 KB
Loading

‎index.html

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
7+
<title>Accessibility Quiz</title>
8+
<link rel="stylesheet" href="styles.css" />
9+
</head>
10+
<body>
11+
<header>
12+
<img id="logo" alt="freeCodeCamp" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
13+
<h1>HTML/CSS Quiz</h1>
14+
<nav>
15+
<ul>
16+
<li><a accesskey="i" href="#student-info">INFO</a></li> <!-- alt + accesskey[i] -->
17+
<li><a accesskey="h" href="#html-questions">HTML</a></li> <!-- alt + accesskey[h] -->
18+
<li><a accesskey="c" href="#css-questions">CSS</a></li> <!-- alt + accesskey[c] -->
19+
</ul>
20+
</nav>
21+
</header>
22+
<main>
23+
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
24+
<section role="region" aria-labelledby="student-info">
25+
<h2 id="student-info">Student Info</h2>
26+
<div class="info">
27+
<label for="student-name">Name:</label>
28+
<input type="text" name="student-name" id="student-name" />
29+
</div>
30+
<div class="info">
31+
<label for="student-email">Email:</label>
32+
<input type="email" name="student-email" id="student-email" />
33+
</div>
34+
<div class="info">
35+
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
36+
<input type="date" name="birth-date" id="birth-date" />
37+
</div>
38+
</section>
39+
<section role="region" aria-labelledby="html-questions">
40+
<h2 id="html-questions">HTML</h2>
41+
<div class="question-block">
42+
<p>1</p>
43+
<fieldset class="question" name="html-question-one">
44+
<legend>
45+
The legend element represents a caption for the content of its
46+
parent fieldset element
47+
</legend>
48+
<ul class="answers-list">
49+
<li>
50+
<label for="q1-a1">
51+
<input type="radio" id="q1-a1" name="q1" value="true" />
52+
True
53+
</label>
54+
</li>
55+
<li>
56+
<label for="q1-a2">
57+
<input type="radio" id="q1-a2" name="q1" value="false" />
58+
False
59+
</label>
60+
</li>
61+
</ul>
62+
</fieldset>
63+
</div>
64+
<div class="question-block">
65+
<p>2</p>
66+
<fieldset class="question" name="html-question-two">
67+
<legend>
68+
A label element nesting an input element is required to have a
69+
for attribute with the same value as the input's id
70+
</legend>
71+
<ul class="answers-list">
72+
<li>
73+
<label for="q2-a1">
74+
<input type="radio" id="q2-a1" name="q2" value="true" />
75+
True
76+
</label>
77+
</li>
78+
<li>
79+
<label for="q2-a2">
80+
<input type="radio" id="q2-a2" name="q2" value="false" />
81+
False
82+
</label>
83+
</li>
84+
</ul>
85+
</fieldset>
86+
</div>
87+
</section>
88+
<section role="region" aria-labelledby="css-questions">
89+
<h2 id="css-questions">CSS</h2>
90+
<div class="formrow">
91+
<div class="question-block">
92+
<label for="selector">Can the CSS margin property accept negative values?</label>
93+
</div>
94+
<div class="answer">
95+
<select name="selector" id="selector" required>
96+
<option value="">Select an option</option>
97+
<option value="yes">Yes</option>
98+
<option value="no">No</option>
99+
</select>
100+
</div>
101+
<div class="question-block">
102+
<label for="css-textarea">Do you have any questions:</label>
103+
</div>
104+
<div class="answer">
105+
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
106+
</div>
107+
</div>
108+
</section>
109+
<button type="submit">Send</button>
110+
</form>
111+
</main>
112+
<footer>
113+
<address>
114+
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
115+
San Francisco<br />
116+
California<br />
117+
USA
118+
</address>
119+
</footer>
120+
</body>
121+
</html>

‎styles.css

+186
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
@media (prefers-reduced-motion: no-preference) {
2+
* {
3+
scroll-behavior: smooth;
4+
}
5+
}
6+
7+
body {
8+
background: #f5f6f7;
9+
color: #1b1b32;
10+
font-family: Helvetica;
11+
margin: 0;
12+
}
13+
14+
header {
15+
width: 100%;
16+
height: 50px;
17+
background-color: #1b1b32;
18+
display: flex;
19+
justify-content: space-between;
20+
align-items: center;
21+
position: fixed;
22+
top: 0;
23+
}
24+
25+
#logo {
26+
width: max(100px, 18vw);
27+
background-color: #0a0a23;
28+
aspect-ratio: 35 / 4;
29+
padding: 0.4rem;
30+
}
31+
32+
h1 {
33+
color: #f1be32;
34+
font-size: min(5vw, 1.2em);
35+
text-align: center;
36+
}
37+
38+
nav {
39+
width: 50%;
40+
max-width: 300px;
41+
height: 50px;
42+
}
43+
44+
nav > ul {
45+
display: flex;
46+
justify-content: space-evenly;
47+
flex-wrap: wrap;
48+
align-items: center;
49+
padding-inline-start: 0;
50+
margin-block: 0;
51+
height: 100%;
52+
}
53+
54+
nav > ul > li {
55+
color: #dfdfe2;
56+
margin: 0 0.2rem;
57+
padding: 0.2rem;
58+
display: block;
59+
}
60+
61+
nav > ul > li:hover {
62+
background-color: #dfdfe2;
63+
color: #1b1b32;
64+
cursor: pointer;
65+
}
66+
67+
li > a {
68+
color: inherit;
69+
text-decoration: none;
70+
}
71+
72+
main {
73+
padding-top: 50px;
74+
}
75+
76+
section {
77+
width: 80%;
78+
margin: 0 auto 10px auto;
79+
max-width: 600px;
80+
}
81+
82+
h1,
83+
h2 {
84+
font-family: Verdana, Tahoma;
85+
}
86+
87+
h2 {
88+
border-bottom: 4px solid #dfdfe2;
89+
margin-top: 0px;
90+
padding-top: 60px;
91+
}
92+
93+
.info {
94+
padding: 10px 0 0 5px;
95+
}
96+
97+
.formrow {
98+
margin-top: 30px;
99+
padding: 0px 15px;
100+
}
101+
102+
input {
103+
font-size: 16px;
104+
}
105+
106+
.info label, .info input {
107+
display: inline-block;
108+
}
109+
110+
.info input {
111+
width: 50%;
112+
text-align: left;
113+
}
114+
115+
.info label {
116+
width: 10%;
117+
min-width: 55px;
118+
text-align: right;
119+
}
120+
121+
.question-block {
122+
text-align: left;
123+
display: block;
124+
width: 100%;
125+
margin-top: 20px;
126+
padding-top: 5px;
127+
}
128+
129+
p {
130+
margin-top: 5px;
131+
padding-left: 15px;
132+
font-size: 20px;
133+
}
134+
135+
p::before {
136+
content: "Question #";
137+
}
138+
139+
.question {
140+
border: none;
141+
padding-bottom: 0;
142+
}
143+
144+
.answers-list {
145+
list-style: none;
146+
padding: 0;
147+
}
148+
149+
button {
150+
display: block;
151+
margin: 40px auto;
152+
width: 40%;
153+
padding: 15px;
154+
font-size: 23px;
155+
background: #d0d0d5;
156+
border: 3px solid #3b3b4f;
157+
}
158+
159+
footer {
160+
background-color: #2a2a40;
161+
display: flex;
162+
justify-content: center;
163+
}
164+
165+
footer,
166+
footer a {
167+
color: #dfdfe2;
168+
}
169+
170+
address {
171+
text-align: center;
172+
padding: 0.3em;
173+
}
174+
175+
.sr-only {
176+
position: absolute;
177+
width: 1px;
178+
height: 1px;
179+
padding: 0;
180+
margin: -1px;
181+
overflow: hidden;
182+
clip: rect(0, 0, 0, 0);
183+
white-space: nowrap;
184+
border: 0;
185+
}
186+

0 commit comments

Comments
 (0)