Skip to content

Refactor move css of two pages + formated 2 pages #629

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
adityai0 merged 4 commits into from
Sep 14, 2025
Merged

Refactor move css of two pages + formated 2 pages #629

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
95745bc
formated bakend page
Sep 14, 2025
cb3a6f3
formated frontend page
Sep 14, 2025
cfd2612
css page for bakendchallenges
Sep 14, 2025
fd91209
css page for frontendchallenges
Sep 14, 2025
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
120 changes: 48 additions & 72 deletions backendChallenges.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,53 @@
<!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; }
<head>
<meta charset="UTF-8" />
<title>Backend Basics Challenges</title>
<link rel="stylesheet" href="styles/backendChallenges.css" />
</head>
<body>
<h1>Backend Basics Challenges</h1>
<p class="description">
Start your backend journey by completing these API and server-side logic
tasks:
</p>


.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>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 class="explorebtn"> Explore more </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 class="explorebtn"> Explore more </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 class="explorebtn"> Explore more </div>
<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 class="explorebtn">Explore more</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 class="explorebtn">Explore more</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 class="explorebtn">Explore more</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 class="explorebtn">Explore more</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 class="explorebtn">Explore more</div>
</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 class="explorebtn"> Explore more </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 class="explorebtn"> Explore more </div>
</div>
</div>

</body>
</body>
</html>
142 changes: 51 additions & 91 deletions frontendChallenges.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,100 +1,60 @@
<!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>
<head>
<meta charset="UTF-8" />
<title>Frontend Challenges</title>
<link rel="stylesheet" href="styles/frontendChallenges.css" />
</head>
<body>
<h1>Frontend Challenges</h1>
<p class="description">
Sharpen your HTML, CSS, and JavaScript skills with these real-world UI
building tasks:
</p>

<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-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">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">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">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 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>
</div>

</body>
</body>
</html>
51 changes: 51 additions & 0 deletions styles/backendChallenges.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
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;
}

.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;
}
53 changes: 53 additions & 0 deletions styles/frontendChallenges.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
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;
}
Loading