Skip to content

Add individual challenge pages (Frontend, JS Logic, UI, etc.) #226

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
faisal07777 merged 1 commit into from
Jul 27, 2025
Merged

Add individual challenge pages (Frontend, JS Logic, UI, etc.) #226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions backendChallenges.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Backend Basics Challenges</title>
<style>
body { font-family: 'Segoe UI', sans-serif; background: #fefefe; padding: 2rem; }
h1 { color: #2d3748; }
p.description { color: #4a5568; margin-bottom: 2rem; }
.challenge-list { display: grid; gap: 1.2rem; }
.challenge {
background: white;
padding: 1rem 1.5rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
transition: 0.3s ease;
}
.challenge:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.challenge-title { font-weight: 600; color: #e53e3e; }
.challenge-desc { color: #718096; font-size: 0.95rem; }
</style>
</head>
<body>

<h1>Backend Basics Challenges</h1>
<p class="description">Start your backend journey by completing these API and server-side logic tasks:</p>

<div class="challenge-list">
<div class="challenge">
<div class="challenge-title">Simple API Server</div>
<div class="challenge-desc">Create a basic Express or Flask API that returns JSON data.</div>
</div>
<div class="challenge">
<div class="challenge-title">Form Submission Backend</div>
<div class="challenge-desc">Accept and store form data sent from a frontend using POST.</div>
</div>
<div class="challenge">
<div class="challenge-title">User Auth Basics</div>
<div class="challenge-desc">Implement simple login/signup logic using sessions or JWT.</div>
</div>
<div class="challenge">
<div class="challenge-title">CRUD with SQLite</div>
<div class="challenge-desc">Build a Create/Read/Update/Delete API for a todo app.</div>
</div>
<div class="challenge">
<div class="challenge-title">API Documentation</div>
<div class="challenge-desc">Use Swagger or Postman to document your API endpoints.</div>
</div>
</div>

</body>
</html>
100 changes: 100 additions & 0 deletions frontendChallenges.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Frontend Challenges</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f8f9fc;
margin: 0;
padding: 2rem;
}
h1 {
color: #2d3748;
margin-bottom: 0.5rem;
}
p.description {
color: #4a5568;
margin-bottom: 2rem;
}
.challenge-list {
display: grid;
gap: 1.2rem;
}
.challenge {
background: white;
padding: 1rem 1.5rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
transition: 0.3s ease;
}
.challenge:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.challenge-title {
font-weight: 600;
color: #2b6cb0;
margin-bottom: 0.4rem;
}
.challenge-desc {
color: #718096;
font-size: 0.95rem;
}
.explorebtn {
margin-top: 0.5rem;
padding: 0.3rem 0.8rem;
background-color: #0778f1;
color: white;
border-radius: 8px;
text-align: right;
cursor: pointer;
transition: background-color 0.3s ease;
font-size: 0.92rem;
float: right;
}
.explorebtn:hover {
background-color: #034081;
}
</style>
</head>
<body>

<h1>Frontend Challenges</h1>
<p class="description">Sharpen your HTML, CSS, and JavaScript skills with these real-world UI building tasks:</p>

<div class="challenge-list">
<div class="challenge">
<div class="challenge-title">Responsive Navbar</div>
<div class="challenge-desc">Build a responsive navigation bar with a hamburger menu for mobile view.</div>
<div class="explorebtn"> Explore more </div>
</div>

<div class="challenge">
<div class="challenge-title">Pricing Card</div>
<div class="challenge-desc">Design and code a modern pricing card layout using flexbox or grid.</div>
<div class="explorebtn"> Explore more </div>
</div>

<div class="challenge">
<div class="challenge-title">Login Form UI</div>
<div class="challenge-desc">Create a stylish login/signup form with smooth transitions.</div>
<div class="explorebtn"> Explore more </div>
</div>

<div class="challenge">
<div class="challenge-title">Landing Page</div>
<div class="challenge-desc">Design a hero section with a call-to-action button and a background image.</div>
<div class="explorebtn"> Explore more </div>
</div>

<div class="challenge">
<div class="challenge-title">Image Gallery</div>
<div class="challenge-desc">Make a responsive image gallery that adjusts across devices using CSS Grid.</div>
<div class="explorebtn"> Explore more </div>
</div>
</div>

</body>
</html>
55 changes: 55 additions & 0 deletions gitChallenges.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Open Source Challenges</title>
<style>
body { font-family: 'Segoe UI', sans-serif; background: #fefefe; padding: 2rem; }
h1 { color: #2d3748; }
p.description { color: #4a5568; margin-bottom: 2rem; }
.challenge-list { display: grid; gap: 1.2rem; }
.challenge {
background: white;
padding: 1rem 1.5rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
transition: 0.3s ease;
}
.challenge:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.challenge-title { font-weight: 600; color: #dd6b20; }
.challenge-desc { color: #718096; font-size: 0.95rem; }
</style>
</head>
<body>

<h1>Open Source Challenges</h1>
<p class="description">Start contributing to open source by completing these beginner-friendly tasks:</p>

<div class="challenge-list">
<div class="challenge">
<div class="challenge-title">Find a Good First Issue</div>
<div class="challenge-desc">Use GitHub filters to find beginner-friendly open issues and comment on one.</div>
</div>
<div class="challenge">
<div class="challenge-title">Fork & Clone a Repo</div>
<div class="challenge-desc">Fork a project, clone it, and set up the local dev environment.</div>
</div>
<div class="challenge">
<div class="challenge-title">Make a Pull Request</div>
<div class="challenge-desc">Fix a typo or small bug and raise a PR to get your first contribution.</div>
</div>
<div class="challenge">
<div class="challenge-title">Improve a README</div>
<div class="challenge-desc">Find a project with a weak README and add helpful info or setup steps.</div>
</div>
<div class="challenge">
<div class="challenge-title">Join a GitHub Discussion</div>
<div class="challenge-desc">Participate in an open-source discussion thread and share suggestions.</div>
</div>
</div>

</body>
</html>
10 changes: 5 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ <h5 class="card-Header">Frontend Challenges</h5>

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

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

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

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

<div class="card-CTAButton">
<!-- === Create webpages of open source challenge and add link here === -->
<a href="#" class="card-Btn">Join Now</a>
<a href="gitChallenges.html" class="card-Btn">Join Now</a>
</div>
</div>
</div>
Expand Down
80 changes: 80 additions & 0 deletions jslogics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Logic Challenges</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f8f9fc;
margin: 0;
padding: 2rem;
}
h1 {
color: #2d3748;
margin-bottom: 0.5rem;
}
p.description {
color: #4a5568;
margin-bottom: 2rem;
}
.challenge-list {
display: grid;
gap: 1.2rem;
}
.challenge {
background: white;
padding: 1rem 1.5rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
transition: 0.3s ease;
}
.challenge:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.challenge-title {
font-weight: 600;
color: #d69e2e;
margin-bottom: 0.4rem;
}
.challenge-desc {
color: #718096;
font-size: 0.95rem;
}
</style>
</head>
<body>

<h1>JavaScript Logic Challenges</h1>
<p class="description">Improve your problem-solving and core JavaScript skills with these logic-based challenges:</p>

<div class="challenge-list">
<div class="challenge">
<div class="challenge-title">Palindrome Checker</div>
<div class="challenge-desc">Write a function to check if a string reads the same backward as forward.</div>
</div>

<div class="challenge">
<div class="challenge-title">FizzBuzz</div>
<div class="challenge-desc">Classic logic problem to print numbers with special rules for multiples of 3 and 5.</div>
</div>

<div class="challenge">
<div class="challenge-title">Anagram Validator</div>
<div class="challenge-desc">Create a function that checks whether two strings are anagrams.</div>
</div>

<div class="challenge">
<div class="challenge-title">Factorial Calculator</div>
<div class="challenge-desc">Write a function that calculates the factorial of a number using recursion.</div>
</div>

<div class="challenge">
<div class="challenge-title">Array Flattener</div>
<div class="challenge-desc">Flatten a deeply nested array using recursion or iterative logic.</div>
</div>
</div>

</body>
</html>
55 changes: 55 additions & 0 deletions uiChallenges.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UI Design Tasks</title>
<style>
body { font-family: 'Segoe UI', sans-serif; background: #f9fafb; padding: 2rem; }
h1 { color: #2d3748; }
p.description { color: #4a5568; margin-bottom: 2rem; }
.challenge-list { display: grid; gap: 1.2rem; }
.challenge {
background: white;
padding: 1rem 1.5rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
transition: 0.3s ease;
}
.challenge:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.challenge-title { font-weight: 600; color: #38a169; }
.challenge-desc { color: #718096; font-size: 0.95rem; }
</style>
</head>
<body>

<h1>UI Design Tasks</h1>
<p class="description">Strengthen your UI/UX skills by building visually appealing components:</p>

<div class="challenge-list">
<div class="challenge">
<div class="challenge-title">Profile Card UI</div>
<div class="challenge-desc">Design and build a profile card with image, name, and social links.</div>
</div>
<div class="challenge">
<div class="challenge-title">Pricing Table</div>
<div class="challenge-desc">Create a clean and responsive pricing component for a SaaS app.</div>
</div>
<div class="challenge">
<div class="challenge-title">Login Page UI</div>
<div class="challenge-desc">Design a modern login form with input validation UI.</div>
</div>
<div class="challenge">
<div class="challenge-title">Navbar with Dropdown</div>
<div class="challenge-desc">Build a responsive navigation bar with dropdown support.</div>
</div>
<div class="challenge">
<div class="challenge-title">Dark Mode Toggle</div>
<div class="challenge-desc">Add a dark mode toggle switch with a smooth transition effect.</div>
</div>
</div>

</body>
</html>
Loading