Skip to content

Commit 85154ec

Browse files
faisal07777faisal07777
authored
Merge pull request #226 from HayatZarine/add-challenges
Add individual challenge pages (Frontend, JS Logic, UI, etc.)
2 parents 5b852a3 + 6546a0d commit 85154ec

File tree

6 files changed

+350
-5
lines changed

6 files changed

+350
-5
lines changed

‎backendChallenges.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Backend Basics Challenges</title>
6+
<style>
7+
body { font-family: 'Segoe UI', sans-serif; background: #fefefe; padding: 2rem; }
8+
h1 { color: #2d3748; }
9+
p.description { color: #4a5568; margin-bottom: 2rem; }
10+
.challenge-list { display: grid; gap: 1.2rem; }
11+
.challenge {
12+
background: white;
13+
padding: 1rem 1.5rem;
14+
border-radius: 12px;
15+
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
16+
transition: 0.3s ease;
17+
}
18+
.challenge:hover {
19+
transform: translateY(-3px);
20+
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
21+
}
22+
.challenge-title { font-weight: 600; color: #e53e3e; }
23+
.challenge-desc { color: #718096; font-size: 0.95rem; }
24+
</style>
25+
</head>
26+
<body>
27+
28+
<h1>Backend Basics Challenges</h1>
29+
<p class="description">Start your backend journey by completing these API and server-side logic tasks:</p>
30+
31+
<div class="challenge-list">
32+
<div class="challenge">
33+
<div class="challenge-title">Simple API Server</div>
34+
<div class="challenge-desc">Create a basic Express or Flask API that returns JSON data.</div>
35+
</div>
36+
<div class="challenge">
37+
<div class="challenge-title">Form Submission Backend</div>
38+
<div class="challenge-desc">Accept and store form data sent from a frontend using POST.</div>
39+
</div>
40+
<div class="challenge">
41+
<div class="challenge-title">User Auth Basics</div>
42+
<div class="challenge-desc">Implement simple login/signup logic using sessions or JWT.</div>
43+
</div>
44+
<div class="challenge">
45+
<div class="challenge-title">CRUD with SQLite</div>
46+
<div class="challenge-desc">Build a Create/Read/Update/Delete API for a todo app.</div>
47+
</div>
48+
<div class="challenge">
49+
<div class="challenge-title">API Documentation</div>
50+
<div class="challenge-desc">Use Swagger or Postman to document your API endpoints.</div>
51+
</div>
52+
</div>
53+
54+
</body>
55+
</html>

‎frontendChallenges.html‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Frontend Challenges</title>
6+
<style>
7+
body {
8+
font-family: 'Segoe UI', sans-serif;
9+
background-color: #f8f9fc;
10+
margin: 0;
11+
padding: 2rem;
12+
}
13+
h1 {
14+
color: #2d3748;
15+
margin-bottom: 0.5rem;
16+
}
17+
p.description {
18+
color: #4a5568;
19+
margin-bottom: 2rem;
20+
}
21+
.challenge-list {
22+
display: grid;
23+
gap: 1.2rem;
24+
}
25+
.challenge {
26+
background: white;
27+
padding: 1rem 1.5rem;
28+
border-radius: 12px;
29+
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
30+
transition: 0.3s ease;
31+
}
32+
.challenge:hover {
33+
transform: translateY(-3px);
34+
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
35+
}
36+
.challenge-title {
37+
font-weight: 600;
38+
color: #2b6cb0;
39+
margin-bottom: 0.4rem;
40+
}
41+
.challenge-desc {
42+
color: #718096;
43+
font-size: 0.95rem;
44+
}
45+
.explorebtn {
46+
margin-top: 0.5rem;
47+
padding: 0.3rem 0.8rem;
48+
background-color: #0778f1;
49+
color: white;
50+
border-radius: 8px;
51+
text-align: right;
52+
cursor: pointer;
53+
transition: background-color 0.3s ease;
54+
font-size: 0.92rem;
55+
float: right;
56+
}
57+
.explorebtn:hover {
58+
background-color: #034081;
59+
}
60+
</style>
61+
</head>
62+
<body>
63+
64+
<h1>Frontend Challenges</h1>
65+
<p class="description">Sharpen your HTML, CSS, and JavaScript skills with these real-world UI building tasks:</p>
66+
67+
<div class="challenge-list">
68+
<div class="challenge">
69+
<div class="challenge-title">Responsive Navbar</div>
70+
<div class="challenge-desc">Build a responsive navigation bar with a hamburger menu for mobile view.</div>
71+
<div class="explorebtn"> Explore more </div>
72+
</div>
73+
74+
<div class="challenge">
75+
<div class="challenge-title">Pricing Card</div>
76+
<div class="challenge-desc">Design and code a modern pricing card layout using flexbox or grid.</div>
77+
<div class="explorebtn"> Explore more </div>
78+
</div>
79+
80+
<div class="challenge">
81+
<div class="challenge-title">Login Form UI</div>
82+
<div class="challenge-desc">Create a stylish login/signup form with smooth transitions.</div>
83+
<div class="explorebtn"> Explore more </div>
84+
</div>
85+
86+
<div class="challenge">
87+
<div class="challenge-title">Landing Page</div>
88+
<div class="challenge-desc">Design a hero section with a call-to-action button and a background image.</div>
89+
<div class="explorebtn"> Explore more </div>
90+
</div>
91+
92+
<div class="challenge">
93+
<div class="challenge-title">Image Gallery</div>
94+
<div class="challenge-desc">Make a responsive image gallery that adjusts across devices using CSS Grid.</div>
95+
<div class="explorebtn"> Explore more </div>
96+
</div>
97+
</div>
98+
99+
</body>
100+
</html>

‎gitChallenges.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Open Source Challenges</title>
6+
<style>
7+
body { font-family: 'Segoe UI', sans-serif; background: #fefefe; padding: 2rem; }
8+
h1 { color: #2d3748; }
9+
p.description { color: #4a5568; margin-bottom: 2rem; }
10+
.challenge-list { display: grid; gap: 1.2rem; }
11+
.challenge {
12+
background: white;
13+
padding: 1rem 1.5rem;
14+
border-radius: 12px;
15+
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
16+
transition: 0.3s ease;
17+
}
18+
.challenge:hover {
19+
transform: translateY(-3px);
20+
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
21+
}
22+
.challenge-title { font-weight: 600; color: #dd6b20; }
23+
.challenge-desc { color: #718096; font-size: 0.95rem; }
24+
</style>
25+
</head>
26+
<body>
27+
28+
<h1>Open Source Challenges</h1>
29+
<p class="description">Start contributing to open source by completing these beginner-friendly tasks:</p>
30+
31+
<div class="challenge-list">
32+
<div class="challenge">
33+
<div class="challenge-title">Find a Good First Issue</div>
34+
<div class="challenge-desc">Use GitHub filters to find beginner-friendly open issues and comment on one.</div>
35+
</div>
36+
<div class="challenge">
37+
<div class="challenge-title">Fork & Clone a Repo</div>
38+
<div class="challenge-desc">Fork a project, clone it, and set up the local dev environment.</div>
39+
</div>
40+
<div class="challenge">
41+
<div class="challenge-title">Make a Pull Request</div>
42+
<div class="challenge-desc">Fix a typo or small bug and raise a PR to get your first contribution.</div>
43+
</div>
44+
<div class="challenge">
45+
<div class="challenge-title">Improve a README</div>
46+
<div class="challenge-desc">Find a project with a weak README and add helpful info or setup steps.</div>
47+
</div>
48+
<div class="challenge">
49+
<div class="challenge-title">Join a GitHub Discussion</div>
50+
<div class="challenge-desc">Participate in an open-source discussion thread and share suggestions.</div>
51+
</div>
52+
</div>
53+
54+
</body>
55+
</html>

‎index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ <h5 class="card-Header">Frontend Challenges</h5>
176176

177177
<div class="card-CTAButton">
178178
<!-- === Create webpage of frontend challenge and add link here === -->
179-
<a href="#" class="card-Btn">Join Now</a>
179+
<a href="frontendChallenges.html" class="card-Btn">Join Now</a>
180180
</div>
181181
</div>
182182
</div>
@@ -202,7 +202,7 @@ <h5 class="card-Header">JavaScript Logics</h5>
202202

203203
<div class="card-CTAButton">
204204
<!-- === Create webpage of javascript logics and add link here === -->
205-
<a href="#" class="card-Btn">Join Now</a>
205+
<a href="jslogics.html" class="card-Btn">Join Now</a>
206206
</div>
207207
</div>
208208
</div>
@@ -228,7 +228,7 @@ <h5 class="card-Header">Backend Basics</h5>
228228

229229
<div class="card-CTAButton">
230230
<!-- === Create webpage of backend bbasic and add link here === -->
231-
<a href="#" class="card-Btn">Join Now</a>
231+
<a href="backendChallenges.html" class="card-Btn">Join Now</a>
232232
</div>
233233
</div>
234234
</div>
@@ -254,7 +254,7 @@ <h5 class="card-Header">UI Design Tasks</h5>
254254

255255
<div class="card-CTAButton">
256256
<!-- === Create webpage of ui design challenge and add link here === -->
257-
<a href="#" class="card-Btn">Join Now</a>
257+
<a href="uiChallenges.html" class="card-Btn">Join Now</a>
258258
</div>
259259
</div>
260260
</div>
@@ -280,7 +280,7 @@ <h5 class="card-Header">Open Source Challenges</h5>
280280

281281
<div class="card-CTAButton">
282282
<!-- === Create webpages of open source challenge and add link here === -->
283-
<a href="#" class="card-Btn">Join Now</a>
283+
<a href="gitChallenges.html" class="card-Btn">Join Now</a>
284284
</div>
285285
</div>
286286
</div>

‎jslogics.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JavaScript Logic Challenges</title>
6+
<style>
7+
body {
8+
font-family: 'Segoe UI', sans-serif;
9+
background-color: #f8f9fc;
10+
margin: 0;
11+
padding: 2rem;
12+
}
13+
h1 {
14+
color: #2d3748;
15+
margin-bottom: 0.5rem;
16+
}
17+
p.description {
18+
color: #4a5568;
19+
margin-bottom: 2rem;
20+
}
21+
.challenge-list {
22+
display: grid;
23+
gap: 1.2rem;
24+
}
25+
.challenge {
26+
background: white;
27+
padding: 1rem 1.5rem;
28+
border-radius: 12px;
29+
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
30+
transition: 0.3s ease;
31+
}
32+
.challenge:hover {
33+
transform: translateY(-3px);
34+
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
35+
}
36+
.challenge-title {
37+
font-weight: 600;
38+
color: #d69e2e;
39+
margin-bottom: 0.4rem;
40+
}
41+
.challenge-desc {
42+
color: #718096;
43+
font-size: 0.95rem;
44+
}
45+
</style>
46+
</head>
47+
<body>
48+
49+
<h1>JavaScript Logic Challenges</h1>
50+
<p class="description">Improve your problem-solving and core JavaScript skills with these logic-based challenges:</p>
51+
52+
<div class="challenge-list">
53+
<div class="challenge">
54+
<div class="challenge-title">Palindrome Checker</div>
55+
<div class="challenge-desc">Write a function to check if a string reads the same backward as forward.</div>
56+
</div>
57+
58+
<div class="challenge">
59+
<div class="challenge-title">FizzBuzz</div>
60+
<div class="challenge-desc">Classic logic problem to print numbers with special rules for multiples of 3 and 5.</div>
61+
</div>
62+
63+
<div class="challenge">
64+
<div class="challenge-title">Anagram Validator</div>
65+
<div class="challenge-desc">Create a function that checks whether two strings are anagrams.</div>
66+
</div>
67+
68+
<div class="challenge">
69+
<div class="challenge-title">Factorial Calculator</div>
70+
<div class="challenge-desc">Write a function that calculates the factorial of a number using recursion.</div>
71+
</div>
72+
73+
<div class="challenge">
74+
<div class="challenge-title">Array Flattener</div>
75+
<div class="challenge-desc">Flatten a deeply nested array using recursion or iterative logic.</div>
76+
</div>
77+
</div>
78+
79+
</body>
80+
</html>

‎uiChallenges.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>UI Design Tasks</title>
6+
<style>
7+
body { font-family: 'Segoe UI', sans-serif; background: #f9fafb; padding: 2rem; }
8+
h1 { color: #2d3748; }
9+
p.description { color: #4a5568; margin-bottom: 2rem; }
10+
.challenge-list { display: grid; gap: 1.2rem; }
11+
.challenge {
12+
background: white;
13+
padding: 1rem 1.5rem;
14+
border-radius: 12px;
15+
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
16+
transition: 0.3s ease;
17+
}
18+
.challenge:hover {
19+
transform: translateY(-3px);
20+
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
21+
}
22+
.challenge-title { font-weight: 600; color: #38a169; }
23+
.challenge-desc { color: #718096; font-size: 0.95rem; }
24+
</style>
25+
</head>
26+
<body>
27+
28+
<h1>UI Design Tasks</h1>
29+
<p class="description">Strengthen your UI/UX skills by building visually appealing components:</p>
30+
31+
<div class="challenge-list">
32+
<div class="challenge">
33+
<div class="challenge-title">Profile Card UI</div>
34+
<div class="challenge-desc">Design and build a profile card with image, name, and social links.</div>
35+
</div>
36+
<div class="challenge">
37+
<div class="challenge-title">Pricing Table</div>
38+
<div class="challenge-desc">Create a clean and responsive pricing component for a SaaS app.</div>
39+
</div>
40+
<div class="challenge">
41+
<div class="challenge-title">Login Page UI</div>
42+
<div class="challenge-desc">Design a modern login form with input validation UI.</div>
43+
</div>
44+
<div class="challenge">
45+
<div class="challenge-title">Navbar with Dropdown</div>
46+
<div class="challenge-desc">Build a responsive navigation bar with dropdown support.</div>
47+
</div>
48+
<div class="challenge">
49+
<div class="challenge-title">Dark Mode Toggle</div>
50+
<div class="challenge-desc">Add a dark mode toggle switch with a smooth transition effect.</div>
51+
</div>
52+
</div>
53+
54+
</body>
55+
</html>

0 commit comments

Comments
 (0)