diff --git a/backendChallenges.html b/backendChallenges.html index 376811aa..d9339503 100644 --- a/backendChallenges.html +++ b/backendChallenges.html @@ -1,77 +1,53 @@ - - - Backend Basics Challenges - - - - -

Backend Basics Challenges

-

Start your backend journey by completing these API and server-side logic tasks:

- -
-
-
Simple API Server
-
Create a basic Express or Flask API that returns JSON data.
-
Explore more
-
-
-
Form Submission Backend
-
Accept and store form data sent from a frontend using POST.
-
Explore more
-
-
-
User Auth Basics
-
Implement simple login/signup logic using sessions or JWT.
-
Explore more
+
+
+
Simple API Server
+
+ Create a basic Express or Flask API that returns JSON data. +
+
Explore more
+
+
+
Form Submission Backend
+
+ Accept and store form data sent from a frontend using POST. +
+
Explore more
+
+
+
User Auth Basics
+
+ Implement simple login/signup logic using sessions or JWT. +
+
Explore more
+
+
+
CRUD with SQLite
+
+ Build a Create/Read/Update/Delete API for a todo app. +
+
Explore more
+
+
+
API Documentation
+
+ Use Swagger or Postman to document your API endpoints. +
+
Explore more
+
-
-
CRUD with SQLite
-
Build a Create/Read/Update/Delete API for a todo app.
-
Explore more
-
-
-
API Documentation
-
Use Swagger or Postman to document your API endpoints.
-
Explore more
-
-
- - + diff --git a/frontendChallenges.html b/frontendChallenges.html index e028389d..da4ef3cf 100644 --- a/frontendChallenges.html +++ b/frontendChallenges.html @@ -1,100 +1,60 @@ - - - Frontend Challenges - - - + + + Frontend Challenges + + + +

Frontend Challenges

+

+ Sharpen your HTML, CSS, and JavaScript skills with these real-world UI + building tasks: +

-

Frontend Challenges

-

Sharpen your HTML, CSS, and JavaScript skills with these real-world UI building tasks:

+
+
+
Responsive Navbar
+
+ Build a responsive navigation bar with a hamburger menu for mobile + view. +
+
Explore more
+
-
-
-
Responsive Navbar
-
Build a responsive navigation bar with a hamburger menu for mobile view.
-
Explore more
-
- -
-
Pricing Card
-
Design and code a modern pricing card layout using flexbox or grid.
-
Explore more
-
+
+
Pricing Card
+
+ Design and code a modern pricing card layout using flexbox or grid. +
+
Explore more
+
-
-
Login Form UI
-
Create a stylish login/signup form with smooth transitions.
-
Explore more
-
+
+
Login Form UI
+
+ Create a stylish login/signup form with smooth transitions. +
+
Explore more
+
-
-
Landing Page
-
Design a hero section with a call-to-action button and a background image.
-
Explore more
-
+
+
Landing Page
+
+ Design a hero section with a call-to-action button and a background + image. +
+
Explore more
+
-
-
Image Gallery
-
Make a responsive image gallery that adjusts across devices using CSS Grid.
-
Explore more
+
+
Image Gallery
+
+ Make a responsive image gallery that adjusts across devices using CSS + Grid. +
+
Explore more
+
-
- - + diff --git a/styles/backendChallenges.css b/styles/backendChallenges.css new file mode 100644 index 00000000..f26eb820 --- /dev/null +++ b/styles/backendChallenges.css @@ -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; +} diff --git a/styles/frontendChallenges.css b/styles/frontendChallenges.css new file mode 100644 index 00000000..763af10c --- /dev/null +++ b/styles/frontendChallenges.css @@ -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; +}