From 0ac3bd55bce470f60f011fc7da451bc2b18c9b99 Mon Sep 17 00:00:00 2001 From: Dev Date: Sat, 4 Oct 2025 14:43:33 +0500 Subject: [PATCH] Linked pages with explore button to add information related to challenges --- backendChallenges.html | 20 +++- backendChallenges1.html | 83 +++++++++++++++++ backendChallenges2.html | 90 ++++++++++++++++++ backendChallenges3.html | 100 ++++++++++++++++++++ backendChallenges4.html | 87 +++++++++++++++++ backendChallenges5.html | 72 ++++++++++++++ exploremore.css | 98 ++++++++++++++++++++ frontendChallenges.html | 20 +++- frontendChallenges1.html | 102 ++++++++++++++++++++ frontendChallenges2.html | 107 +++++++++++++++++++++ frontendChallenges3.html | 99 ++++++++++++++++++++ frontendChallenges4.html | 95 +++++++++++++++++++ frontendChallenges5.html | 126 +++++++++++++++++++++++++ gitChallenges.html | 181 ++++++++++++++++++++++-------------- gitChallenges1.html | 68 ++++++++++++++ gitChallenges2.html | 84 +++++++++++++++++ gitChallenges3.html | 71 ++++++++++++++ gitChallenges4.html | 65 +++++++++++++ gitChallenges5.html | 76 +++++++++++++++ jslogics.html | 196 +++++++++++++++++++++------------------ jslogics1.html | 79 ++++++++++++++++ jslogics2.html | 64 +++++++++++++ jslogics3.html | 75 +++++++++++++++ jslogics4.html | 71 ++++++++++++++ jslogics5.html | 73 +++++++++++++++ uiChallenges.html | 179 +++++++++++++++++++++-------------- uiChallenges1.html | 34 +++++++ uiChallenges2.html | 35 +++++++ uiChallenges3.html | 34 +++++++ uiChallenges4.html | 35 +++++++ uiChallenges5.html | 38 ++++++++ 31 files changed, 2314 insertions(+), 243 deletions(-) create mode 100644 backendChallenges1.html create mode 100644 backendChallenges2.html create mode 100644 backendChallenges3.html create mode 100644 backendChallenges4.html create mode 100644 backendChallenges5.html create mode 100644 exploremore.css create mode 100644 frontendChallenges1.html create mode 100644 frontendChallenges2.html create mode 100644 frontendChallenges3.html create mode 100644 frontendChallenges4.html create mode 100644 frontendChallenges5.html create mode 100644 gitChallenges1.html create mode 100644 gitChallenges2.html create mode 100644 gitChallenges3.html create mode 100644 gitChallenges4.html create mode 100644 gitChallenges5.html create mode 100644 jslogics1.html create mode 100644 jslogics2.html create mode 100644 jslogics3.html create mode 100644 jslogics4.html create mode 100644 jslogics5.html create mode 100644 uiChallenges1.html create mode 100644 uiChallenges2.html create mode 100644 uiChallenges3.html create mode 100644 uiChallenges4.html create mode 100644 uiChallenges5.html diff --git a/backendChallenges.html b/backendChallenges.html index d9339503..1b1962a0 100644 --- a/backendChallenges.html +++ b/backendChallenges.html @@ -18,35 +18,45 @@

Backend Basics Challenges

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

Challenge: Create a Simple API Server

+ +
+

Objective

+

+ Build a basic API server using Express (Node.js) or Flask (Python). The + API should return JSON data and provide at least one endpoint. +

+ +

Key Features to Implement

+
    +
  1. + Basic Server Setup: +
      +
    • + Use Express (JavaScript) or Flask (Python) to create a server. +
      • +
    • + Run the server locally on a specific port (e.g., 3000 or 5000). +
      • +
    +
    2. +
  2. + Endpoints: +
      +
    • + Create a root endpoint (/) that returns a welcome + message in JSON. +
      • +
    • + Add at least one more endpoint (e.g., /users or + /products) that returns sample data in JSON format. +
      • +
    +
    3. +
  3. + JSON Response: +
      +
    • Return properly formatted JSON objects/arrays.
      • +
    • + Include multiple fields like id, name, + price, etc. for practice. +
      • +
    +
    4. +
  4. + Optional Enhancements: +
      +
    • + Add query parameters (e.g., /users?id=1 to fetch a + specific user). +
      • +
    • Add error handling (e.g., return 404 if data not found).
      • +
    • Enable CORS so the API can be consumed by frontend apps.
      • +
    +
    5. +
+ +

Tools & Techniques to Practice:

+ + +

Challenge Goals

+ +
+ + diff --git a/backendChallenges2.html b/backendChallenges2.html new file mode 100644 index 00000000..385ce427 --- /dev/null +++ b/backendChallenges2.html @@ -0,0 +1,90 @@ + + + + + + + Backend Challenges + + +

Challenge: Build a Form Submission Backend

+ +
+

Objective

+

+ Create a backend server that accepts form data sent from a frontend + using the POST method. The server should validate, process, and store + the data. +

+ +

Key Features to Implement

+
    +
  1. + Server Setup: +
      +
    • + Use Express (Node.js) or Flask (Python) to set up the backend. +
      • +
    • + Enable body parsing to handle incoming POST request data (e.g., + JSON or URL-encoded). +
      • +
    +
    2. +
  2. + Form Endpoint: +
      +
    • + Create a /submit endpoint that accepts POST requests. +
      • +
    • + Collect data such as name, email, + message. +
      • +
    • + Validate the input (e.g., check required fields, valid email). +
      • +
    +
    3. +
  3. + Data Handling: +
      +
    • + Store form submissions in an in-memory array (for practice) or a + JSON file. +
      • +
    • + Return a success response with the submitted data in JSON format. +
      • +
    • Handle errors gracefully (missing fields, invalid data).
      • +
    +
    4. +
  4. + Optional Enhancements: +
      +
    • Save data into a database (SQLite, MongoDB, PostgreSQL).
      • +
    • Send an email notification on each form submission.
      • +
    • Add CORS support to allow frontend apps to connect.
      • +
    +
    5. +
+ +

Tools & Techniques to Practice:

+ + +

Challenge Goals

+ +
+ + diff --git a/backendChallenges3.html b/backendChallenges3.html new file mode 100644 index 00000000..e9d621b9 --- /dev/null +++ b/backendChallenges3.html @@ -0,0 +1,100 @@ + + + + + + + Backend Challenges + + +

Challenge: Implement User Authentication Basics

+ +
+

Objective

+

+ Build a simple authentication system that allows users to sign up, log + in, and remain authenticated using sessions or JSON Web Tokens (JWT). +

+ +

Key Features to Implement

+
    +
  1. + Signup: +
      +
    • + Create a /signup endpoint to register new users. +
      • +
    • + Accept fields like username, email, and + password. +
      • +
    • Hash passwords before storing (use libraries like bcrypt).
      • +
    +
    2. +
  2. + Login: +
      +
    • + Create a /login endpoint that checks credentials. +
      • +
    • + On success, issue a session (cookie-based) or JWT (token-based). +
      • +
    • + On failure, return an error response with proper status codes. +
      • +
    +
    3. +
  3. + Protected Routes: +
      +
    • + Create a /profile or /dashboard endpoint + that requires authentication. +
      • +
    • + Verify session cookies or validate JWT before allowing access. +
      • +
    +
    4. +
  4. + Logout: +
      +
    • Clear session or invalidate JWT on logout request.
      • +
    +
    5. +
  5. + Optional Enhancements: +
      +
    • Add token expiration and refresh logic.
      • +
    • Include role-based access control (admin vs. user).
      • +
    • + Connect with a database (MongoDB, PostgreSQL, etc.) for persistent + storage. +
      • +
    +
    6. +
+ +

Tools & Techniques to Practice:

+ + +

Challenge Goals

+ +
+ + diff --git a/backendChallenges4.html b/backendChallenges4.html new file mode 100644 index 00000000..93449cac --- /dev/null +++ b/backendChallenges4.html @@ -0,0 +1,87 @@ + + + + + + + Backend Challenges + + +

Challenge: Build a CRUD API with SQLite

+ +
+

Objective

+

+ Create a REST API for a simple Todo application using SQLite as the + database. The API should support full Create, Read, Update, and Delete + (CRUD) operations. +

+ +

Key Features to Implement

+
    +
  1. + Database Setup: +
      +
    • Use SQLite to store todo items.
      • +
    • + Each todo should have at least: id, + title, description, + status (e.g., pending/completed). +
      • +
    +
    2. +
  2. + API Endpoints: +
      +
    • POST /todos → Create a new todo item.
      • +
    • GET /todos → Retrieve all todos.
      • +
    • + GET /todos/:id → Retrieve a specific todo by ID. +
      • +
    • PUT /todos/:id → Update an existing todo.
      • +
    • DELETE /todos/:id → Delete a todo item.
      • +
    +
    3. +
  3. + Validation & Error Handling: +
      +
    • Validate required fields (title, description).
      • +
    • + Return proper status codes (201 for create, 404 if not found, + etc.). +
      • +
    • Handle database errors gracefully.
      • +
    +
    4. +
  4. + Optional Enhancements: +
      +
    • Add filtering (e.g., /todos?status=completed).
      • +
    • Implement pagination for large todo lists.
      • +
    • Add due dates and sorting (e.g., by date or priority).
      • +
    +
    5. +
+ +

Tools & Techniques to Practice:

+ + +

Challenge Goals

+ +
+ + diff --git a/backendChallenges5.html b/backendChallenges5.html new file mode 100644 index 00000000..6da883e5 --- /dev/null +++ b/backendChallenges5.html @@ -0,0 +1,72 @@ + + + + + + + Backend Challenges + + +

Challenge: Document Your API

+ +
+

Objective

+

+ Create detailed documentation for your API endpoints using tools like + Swagger (OpenAPI) or Postman. The documentation should clearly explain + how developers can use your API. +

+ +

Key Features to Implement

+
    +
  1. + Setup Documentation: +
      +
    • + For Swagger: Define your API endpoints in an + openapi.json or openapi.yaml file. +
      • +
    • + For Postman: Create a Postman collection with requests for each + endpoint. +
      • +
    +
    2. +
  2. + Endpoint Details: +
      +
    • List all endpoints (GET, POST, PUT, DELETE).
      • +
    • Include request format (body, query params, headers).
      • +
    • Include example responses (success, error).
      • +
    +
    3. +
  3. + Interactive Testing (Optional): +
      +
    • + Use Swagger UI to allow users to test endpoints directly in the + browser. +
      • +
    • + Share a Postman collection link so others can import and test. +
      • +
    +
    4. +
+ +

Tools & Techniques to Practice:

+ + +

Challenge Goals

+ +
+ + diff --git a/exploremore.css b/exploremore.css new file mode 100644 index 00000000..588a9aa6 --- /dev/null +++ b/exploremore.css @@ -0,0 +1,98 @@ +body, +h1, +h2, +p, +li { + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + sans-serif; + margin: 0; + padding: 0; +} + +body { + background-color: #f8fafc; + color: #1e293b; + line-height: 1.6; + padding: 2rem 1.5rem; +} + +h1, +h2 { + color: #2563eb; + font-weight: 600; + margin-bottom: 1rem; +} + +h1 { + font-size: 2.5rem; + text-align: center; + margin-top: 2rem; +} + +h2 { + font-size: 1.8rem; +} + +p, +li { + font-size: 1.1rem; + margin-bottom: 1rem; +} + +li ul { + margin-top: 0.5rem; + margin-bottom: 1rem; + list-style-type: disc; + padding-left: 1.5rem; +} + +li ul li { + font-size: 1rem; + margin-bottom: 0.5rem; +} + +ol { + margin-left: 1.5rem; + margin-bottom: 1.5rem; +} + +li strong { + color: #2563eb; +} + +@media (max-width: 768px) { + h1 { + font-size: 2rem; + } + h2 { + font-size: 1.5rem; + } + p, + li { + font-size: 1rem; + } +} + +[data-theme="dark"] h1, +[data-theme="dark"] h2 { + color: #3b82f6; +} + +[data-theme="dark"] p, +[data-theme="dark"] li { + color: #f5f5f5; +} +.card { + background: #fff; + padding: 20px; + margin: 20px auto; + border-radius: 12px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + max-width: 3000px; + transition: box-shadow 0.3s ease, transform 0.3s ease; +} + +.card:hover { + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); + transform: translateY(-4px); +} diff --git a/frontendChallenges.html b/frontendChallenges.html index da4ef3cf..74eb916f 100644 --- a/frontendChallenges.html +++ b/frontendChallenges.html @@ -19,7 +19,9 @@

Frontend Challenges

Build a responsive navigation bar with a hamburger menu for mobile view. -
Explore more
+ +
Explore more
@@ -27,7 +29,9 @@

Frontend Challenges

Design and code a modern pricing card layout using flexbox or grid.
-
Explore more
+ +
Explore more
@@ -35,7 +39,9 @@

Frontend Challenges

Create a stylish login/signup form with smooth transitions.
-
Explore more
+ +
Explore more
@@ -44,7 +50,9 @@

Frontend Challenges

Design a hero section with a call-to-action button and a background image.
-
Explore more
+ +
Explore more
@@ -53,7 +61,9 @@

Frontend Challenges

Make a responsive image gallery that adjusts across devices using CSS Grid.
-
Explore more
+ +
Explore more
 diff --git a/frontendChallenges1.html b/frontendChallenges1.html new file mode 100644 index 00000000..407f3917 --- /dev/null +++ b/frontendChallenges1.html @@ -0,0 +1,102 @@ + + + + + + + Frontend Challenges + + +

Challenge: Build a Responsive Navigation Bar

+ +
+

Objective

+

+ Create a navigation bar that works seamlessly on both desktop and mobile + screens. The navbar should adapt its layout based on the screen size and + provide an intuitive user experience. +

+

Key Features to Implement

+
    +
  1. + Desktop Layout: +
      +
    • Display the navigation links horizontally.
      • +
    • Include a logo or brand name on the left side.
      • +
    • Links should be clearly visible and easy to click.
      • +
    +
    2. +
  2. + Mobile Layout: +
      +
    • Hide the regular horizontal links.
      • +
    • Show a hamburger menu icon (☰) that toggles the menu.
      • +
    • + When the hamburger menu is clicked, the links appear in a vertical + dropdown or slide-in menu. +
      • +
    +
    3. +
  3. + Responsive Design: +
      +
    • + Use CSS media queries to adjust the layout for different screen + sizes (e.g., 768px breakpoint for tablets/mobile). +
      • +
    • + Ensure the navbar is visually appealing on all screen sizes. +
      • +
    +
    4. +
  4. + Styling: +
      +
    • + Use CSS for hover effects, active states, and smooth transitions. +
      • +
    • + Optional: add animations when the mobile menu slides in/out. +
      • +
    +
    5. +
  5. + Accessibility (Optional but Recommended): +
      +
    • Make the hamburger button accessible via keyboard.
      • +
    • + Use ARIA attributes like aria-label and aria-expanded for better + screen reader support. +
      • +
    +
    6. +
+ +

Tools & Techniques to Practice:

+ + +

Challenge Goals

+ +
+ + diff --git a/frontendChallenges2.html b/frontendChallenges2.html new file mode 100644 index 00000000..160daa25 --- /dev/null +++ b/frontendChallenges2.html @@ -0,0 +1,107 @@ + + + + + + + Frontend Challenges + + +

Challenge: Build a Modern Pricing Card Layout

+ +
+

Objective

+

+ Design and code a clean, modern pricing card section using Flexbox or + Grid. The layout should be responsive and highlight different pricing + plans with clear calls-to-action. +

+ +

Key Features to Implement

+
    +
  1. + Card Layout: +
      +
    • + Create at least 3 pricing cards (e.g., Basic, Standard, Premium). +
      • +
    • + Use Flexbox or Grid to align the cards horizontally on desktop. +
      • +
    • + Stack the cards vertically on smaller screens for responsiveness. +
      • +
    +
    2. +
  2. + Card Content: +
      +
    • + Each card should include: Plan Name, Price, Features List, and a + Button. +
      • +
    • + Highlight the recommended or popular plan with distinct styling. +
      • +
    • Make pricing and features easy to scan at a glance.
      • +
    +
    3. +
  3. + Styling: +
      +
    • + Use modern design principles: padding, rounded corners, shadows. +
      • +
    • + Use hover effects for the button and card (e.g., scale or shadow). +
      • +
    • + Ensure clear visual hierarchy with font size, weight, and color. +
      • +
    +
    4. +
  4. + Responsive Design: +
      +
    • Use media queries to make the layout mobile-friendly.
      • +
    • Cards should remain visually appealing on all screen sizes.
      • +
    +
    5. +
  5. + Optional Enhancements: +
      +
    • Add animations when hovering or switching between plans.
      • +
    • + Include a toggle for monthly/yearly pricing using JavaScript. +
      • +
    +
    6. +
+ +

Tools & Techniques to Practice:

+ + +

Challenge Goals

+ +
+ + diff --git a/frontendChallenges3.html b/frontendChallenges3.html new file mode 100644 index 00000000..01a8d842 --- /dev/null +++ b/frontendChallenges3.html @@ -0,0 +1,99 @@ + + + + + + + Frontend Challenges + + +

Challenge: Create a Stylish Login/Signup Form

+ +
+

Objective

+

+ Design and code a modern login and signup form with smooth transitions. + The form should be user-friendly, responsive, and visually appealing. +

+ +

Key Features to Implement

+
    +
  1. + Form Layout: +
      +
    • Create a centered login/signup form card.
      • +
    • Include input fields for email/username and password.
      • +
    • Add a “Remember Me” checkbox and “Forgot Password?” link.
      • +
    +
    2. +
  2. + Signup Option: +
      +
    • Include a toggle or switch between Login and Signup forms.
      • +
    • + Signup form should have extra fields (e.g., Confirm Password, Full + Name). +
      • +
    • Ensure smooth transition animations between forms.
      • +
    +
    3. +
  3. + Styling: +
      +
    • + Use padding, rounded corners, and shadows for a modern card look. +
      • +
    • Include hover and focus states for inputs and buttons.
      • +
    • Make use of smooth CSS transitions (fade/slide effects).
      • +
    +
    4. +
  4. + Responsive Design: +
      +
    • + Form should be responsive and look good on all screen sizes. +
      • +
    • + Inputs and buttons should scale properly on smaller screens. +
      • +
    +
    5. +
  5. + Accessibility: +
      +
    • Use proper labels for inputs.
      • +
    • Ensure keyboard navigation works smoothly.
      • +
    • Provide ARIA attributes where necessary for screen readers.
      • +
    +
    6. +
  6. + Optional Enhancements: +
      +
    • + Add icons inside input fields for better UX (e.g., email, lock). +
      • +
    • Include social login buttons (Google, Facebook, GitHub).
      • +
    • Add form validation with helpful error messages.
      • +
    +
    7. +
+ +

Tools & Techniques to Practice:

+ + +

Challenge Goals

+ +
+ + diff --git a/frontendChallenges4.html b/frontendChallenges4.html new file mode 100644 index 00000000..5f2ac79e --- /dev/null +++ b/frontendChallenges4.html @@ -0,0 +1,95 @@ + + + + + + + Frontend Challenges + + +

Challenge: Build a Hero Section for a Landing Page

+ +
+

Objective

+

+ Design and code a hero section for a landing page with a background + image, headline, subheadline, and a strong call-to-action button. The + hero section should grab attention and encourage users to take action. +

+ +

Key Features to Implement

+
    +
  1. + Hero Layout: +
      +
    • + Full-width hero section with a background image or gradient. +
      • +
    • Include a main headline and a subheadline for context.
      • +
    • Add a clear and prominent call-to-action (CTA) button.
      • +
    +
    2. +
  2. + Styling: +
      +
    • + Overlay background with a semi-transparent gradient for text + readability. +
      • +
    • + Use large, bold fonts for the headline to make it stand out. +
      • +
    • + Style the CTA button with hover effects (e.g., color change, + shadow). +
      • +
    +
    3. +
  3. + Responsive Design: +
      +
    • Ensure text and buttons adjust properly on smaller screens.
      • +
    • + Use media queries to adjust font sizes and spacing for mobile + devices. +
      • +
    +
    4. +
  4. + Optional Enhancements: +
      +
    • Add smooth scroll animation when the CTA button is clicked.
      • +
    • + Include subtle animations for text fade-in or slide-in effects. +
      • +
    • + Use a video background instead of an image for a modern look. +
      • +
    +
    5. +
+ +

Tools & Techniques to Practice:

+ + +

Challenge Goals

+ +
+ + diff --git a/frontendChallenges5.html b/frontendChallenges5.html new file mode 100644 index 00000000..e68c4982 --- /dev/null +++ b/frontendChallenges5.html @@ -0,0 +1,126 @@ + + + + + + + Frontend Challenges + + +

Challenge: Build a Responsive Image Gallery

+ +
+

Objective

+

+ Create a responsive image gallery that rearranges itself across devices + using CSS Grid. Focus on visual balance, fast loading, and an intuitive + browsing experience. +

+ +

Key Features to Implement

+
    +
  1. + Grid Layout: +
      +
    • Use CSS Grid to create a flexible multi-column layout.
      • +
    • + Design breakpoints so the gallery shows e.g., 4 columns on + desktop, 2–3 on tablets, 1–2 on mobile. +
      • +
    • + Consider a masonry-like layout (CSS Grid or column approach) for + varied image heights. +
      • +
    +
    2. +
  2. + Images & Performance: +
      +
    • + Use appropriately sized images and srcset for + responsive images. +
      • +
    • + Implement lazy loading (loading="lazy") to improve + performance. +
      • +
    • Optimize file formats (WebP/AVIF where supported).
      • +
    +
    3. +
  3. + Interactions: +
      +
    • Add hover effects (zoom, overlay caption, subtle shadow).
      • +
    • + Provide a lightbox/modal to view images larger with next/prev + controls. +
      • +
    • + Allow keyboard navigation inside the lightbox (arrow keys + Esc). +
      • +
    +
    4. +
  4. + Accessibility: +
      +
    • Use descriptive alt text for all images.
      • +
    • + Ensure focus states are visible and controls are reachable via + keyboard. +
      • +
    • + Use ARIA attributes for modal dialogs (e.g., + aria-modal, aria-label). +
      • +
    +
    5. +
  5. + Styling & Responsiveness: +
      +
    • + Maintain consistent spacing and a clean visual rhythm between + items. +
      • +
    • Use CSS transitions for smooth hover and modal animations.
      • +
    • + Ensure the gallery adapts gracefully to very wide and very narrow + viewports. +
      • +
    +
    6. +
+ +

Tools & Techniques to Practice:

+ + +

Optional Enhancements

+ + +

Challenge Goals

+ +
+ + diff --git a/gitChallenges.html b/gitChallenges.html index 6018dfd9..a034174a 100644 --- a/gitChallenges.html +++ b/gitChallenges.html @@ -1,77 +1,116 @@ - - - Open Source Challenges - - - + .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; + } + + + +

Open Source Challenges

+

+ Start contributing to open source by completing these beginner-friendly + tasks: +

-

Open Source Challenges

-

Start contributing to open source by completing these beginner-friendly tasks:

- -
-
-
Find a Good First Issue
-
Use GitHub filters to find beginner-friendly open issues and comment on one.
-
Explore more
-
-
-
Fork & Clone a Repo
-
Fork a project, clone it, and set up the local dev environment.
-
Explore more
-
-
-
Make a Pull Request
-
Fix a typo or small bug and raise a PR to get your first contribution.
-
Explore more
+
+
+
Find a Good First Issue
+
+ Use GitHub filters to find beginner-friendly open issues and comment + on one. +
+ +
Explore more
 +
+
+
Fork & Clone a Repo
+
+ Fork a project, clone it, and set up the local dev environment. +
+ +
Explore more
 +
+
+
Make a Pull Request
+
+ Fix a typo or small bug and raise a PR to get your first contribution. +
+ +
Explore more
 +
+
+
Improve a README
+
+ Find a project with a weak README and add helpful info or setup steps. +
+ +
Explore more
 +
+
+
Join a GitHub Discussion
+
+ Participate in an open-source discussion thread and share suggestions. +
+ +
Explore more
 +
-
-
Improve a README
-
Find a project with a weak README and add helpful info or setup steps.
-
Explore more
-
-
-
Join a GitHub Discussion
-
Participate in an open-source discussion thread and share suggestions.
-
Explore more
-
-
- - + diff --git a/gitChallenges1.html b/gitChallenges1.html new file mode 100644 index 00000000..8fd53bdd --- /dev/null +++ b/gitChallenges1.html @@ -0,0 +1,68 @@ + + + + + + + Open Source Challenges + + +

Challenge: Find a Good First Issue

+ +
+

Objective

+

+ Learn how to discover beginner-friendly open source issues on GitHub and + engage by leaving a helpful comment. This helps you take your first step + in contributing to real-world projects. +

+ +

Key Steps to Implement

+
    +
  1. + Search Issues: +
      +
    • + Go to GitHub and search with filters like + label:"good first issue" or + label:"beginner". +
      • +
    • + Explore repositories participating in Hacktoberfest or other open + source events. +
      • +
    +
    2. +
  2. + Review Issue Details: +
      +
    • Check the issue description to ensure it’s understandable.
      • +
    • Confirm it’s still open and not already assigned.
      • +
    +
    3. +
  3. + Comment on the Issue: +
      +
    • Introduce yourself briefly.
      • +
    • Politely ask if you can work on the issue.
      • +
    • Show enthusiasm to contribute.
      • +
    +
    4. +
+ +

Tools & Techniques to Practice:

+
    +
  • GitHub issue filters and search operators.
    • +
  • Open source etiquette (polite communication with maintainers).
    • +
  • Understanding issue descriptions and requirements.
    • +
+ +

Challenge Goals

+
    +
  • Learn how to navigate GitHub issues effectively.
    • +
  • Understand how to identify beginner-friendly tasks.
    • +
  • Take your first step in the open-source contribution journey.
    • +
+
+ + diff --git a/gitChallenges2.html b/gitChallenges2.html new file mode 100644 index 00000000..94f2d67a --- /dev/null +++ b/gitChallenges2.html @@ -0,0 +1,84 @@ + + + + + + + Open Source Challenges + + +

Challenge: Fork & Clone a Repo

+ +
+

Objective

+

+ Learn how to fork an existing project on GitHub, clone it to your local + machine, and set up the development environment so you can start + contributing. +

+ +

Key Steps to Implement

+
    +
  1. + Fork the Repository: +
      +
    • + Click the Fork button on the project’s GitHub page. +
      • +
    • This creates a copy of the repository in your account.
      • +
    +
    2. +
  2. + Clone Locally: +
      +
    • + Use + git clone + https://github.com/<your-username>/repo-name.git. +
      • +
    • + Navigate into the project folder using cd repo-name. +
      • +
    +
    3. +
  3. + Set Up Development Environment: +
      +
    • + Read the project’s README.md for setup instructions. +
      • +
    • + Install required dependencies (e.g., npm install, + pip install -r requirements.txt). +
      • +
    • + Run the app locally (e.g., npm run dev, + python app.py). +
      • +
    +
    4. +
+ +

Tools & Techniques to Practice:

+
    +
  • GitHub workflow: forking and cloning.
    • +
  • Command-line usage of Git.
    • +
  • Following setup documentation and installing dependencies.
    • +
+ +

Challenge Goals

+
    +
  • Get hands-on experience with GitHub repositories.
    • +
  • + Learn how to set up a local dev environment for an open-source + project. +
    • +
  • + Prepare to make your first contributions to open-source codebases. +
    • +
+
+ + diff --git a/gitChallenges3.html b/gitChallenges3.html new file mode 100644 index 00000000..409156d8 --- /dev/null +++ b/gitChallenges3.html @@ -0,0 +1,71 @@ + + + + + + + Open Source Challenges + + +

Challenge: Make a Pull Request

+ +
+

Objective

+

+ Learn how to contribute to an open-source project by fixing a small + typo, improving documentation, or resolving a minor bug, and then + raising a Pull Request (PR) to merge your changes into the main project. +

+ +

Key Steps to Implement

+
    +
  1. + Make a Change: +
      +
    • Pick a small issue (e.g., typo, formatting, minor bug fix).
      • +
    • Edit the file locally in your forked repository.
      • +
    • + Commit your changes with a clear message (e.g., + git commit -m "Fix typo in README"). +
      • +
    +
    2. +
  2. + Push Changes: +
      +
    • + Push your changes to your fork: + git push origin branch-name. +
      • +
    • Ensure the branch only contains relevant changes.
      • +
    +
    3. +
  3. + Open a Pull Request: +
      +
    • Go to the original repository on GitHub.
      • +
    • Click Compare & pull request.
      • +
    • Write a clear description of what you changed and why.
      • +
    • Submit the PR for review.
      • +
    +
    4. +
+ +

Tools & Techniques to Practice:

+
    +
  • Git basics: commit, push, and branch management.
    • +
  • GitHub Pull Request workflow.
    • +
  • Writing clear and concise PR descriptions.
    • +
+ +

Challenge Goals

+
    +
  • Learn how to make your first open-source contribution.
    • +
  • Understand the Pull Request review process.
    • +
  • + Gain confidence in collaborating with maintainers and contributors. +
    • +
+
+ + diff --git a/gitChallenges4.html b/gitChallenges4.html new file mode 100644 index 00000000..4059c350 --- /dev/null +++ b/gitChallenges4.html @@ -0,0 +1,65 @@ + + + + + + + Open Source Challenges + + +

Challenge: Improve a README

+ +
+

Objective

+

+ Contribute to open source by improving a project’s + README.md. A good README helps new contributors and users + understand the project and how to use it effectively. +

+ +

Key Steps to Implement

+
    +
  1. + Identify a Project: +
      +
    • Find a repository with a minimal or unclear README.
      • +
    • Ensure the repo is active and welcomes contributions.
      • +
    +
    2. +
  2. + Enhance the README: +
      +
    • Add a clear project description and purpose.
      • +
    • Include installation and setup instructions.
      • +
    • Provide usage examples and screenshots if available.
      • +
    • List contribution guidelines and license info.
      • +
    +
    3. +
  3. + Submit Your Changes: +
      +
    • Commit your README improvements in your fork.
      • +
    • Open a Pull Request with a summary of what you improved.
      • +
    • + Explain why the changes improve the project’s accessibility. +
      • +
    +
    4. +
+ +

Tools & Techniques to Practice:

+
    +
  • Markdown formatting for clean and readable documentation.
    • +
  • Using badges, links, and code snippets in READMEs.
    • +
  • Effective communication through documentation.
    • +
+ +

Challenge Goals

+
    +
  • Learn how to write beginner-friendly documentation.
    • +
  • Understand the importance of clear setup instructions.
    • +
  • Make open-source projects more accessible to contributors.
    • +
+
+ + diff --git a/gitChallenges5.html b/gitChallenges5.html new file mode 100644 index 00000000..fd9cc268 --- /dev/null +++ b/gitChallenges5.html @@ -0,0 +1,76 @@ + + + + + + + Open Source Challenges + + +

Challenge: Join a GitHub Discussion

+ +
+

Objective

+

+ Learn how to engage with the open-source community by participating in + GitHub Discussions. Share your thoughts, suggestions, or questions in an + active project’s discussion thread. +

+ +

Key Steps to Implement

+
    +
  1. + Find a Project with Discussions Enabled: +
      +
    • + Look for repositories that have the Discussions tab + enabled. +
      • +
    • + Browse open discussion threads (ideas, Q&A, feature requests). +
      • +
    +
    2. +
  2. + Choose a Topic: +
      +
    • + Pick a thread where you can add value (suggestion, solution, + feedback). +
      • +
    • + Alternatively, start a new discussion if you have a relevant + question or idea. +
      • +
    +
    3. +
  3. + Contribute to the Conversation: +
      +
    • Write a clear, respectful, and constructive comment.
      • +
    • + Support your opinion with examples or references if possible. +
      • +
    • Be polite and follow community guidelines.
      • +
    +
    4. +
+ +

Tools & Techniques to Practice:

+
    +
  • Using GitHub Discussions as a collaboration tool.
    • +
  • Open-source communication and community etiquette.
    • +
  • Sharing ideas effectively and constructively.
    • +
+ +

Challenge Goals

+
    +
  • + Learn how to participate in open-source communities beyond code. +
    • +
  • Improve collaboration and idea-sharing skills.
    • +
  • Build confidence by engaging with other developers publicly.
    • +
+
+ + diff --git a/jslogics.html b/jslogics.html index 7a990756..50d5e6d2 100644 --- a/jslogics.html +++ b/jslogics.html @@ -1,101 +1,115 @@ - - - JavaScript Logic Challenges - - - + + + JavaScript Logic Challenges + + + +

JavaScript Logic Challenges

+

+ Improve your problem-solving and core JavaScript skills with these + logic-based challenges: +

-
-
-
Palindrome Checker
-
Write a function to check if a string reads the same backward as forward.
-
Explore more
-
+
+
+
Palindrome Checker
+
+ Write a function to check if a string reads the same backward as + forward. +
+
Explore more
 +
-
-
FizzBuzz
-
Classic logic problem to print numbers with special rules for multiples of 3 and 5.
-
Explore more
-
+
+
FizzBuzz
+
+ Classic logic problem to print numbers with special rules for + multiples of 3 and 5. +
+
Explore more
 +
-
-
Anagram Validator
-
Create a function that checks whether two strings are anagrams.
-
Explore more
-
+
+
Anagram Validator
+
+ Create a function that checks whether two strings are anagrams. +
+
Explore more
 +
-
-
Factorial Calculator
-
Write a function that calculates the factorial of a number using recursion.
-
Explore more
-
+
+
Factorial Calculator
+
+ Write a function that calculates the factorial of a number using + recursion. +
+
Explore more
 +
-
-
Array Flattener
-
Flatten a deeply nested array using recursion or iterative logic.
-
Explore more
+
+
Array Flattener
+
+ Flatten a deeply nested array using recursion or iterative logic. +
+
Explore more
 +
-
- - + diff --git a/jslogics1.html b/jslogics1.html new file mode 100644 index 00000000..3e754a03 --- /dev/null +++ b/jslogics1.html @@ -0,0 +1,79 @@ + + + + + + + JavaScript Challenges + + +

Challenge: Palindrome Checker

+ +
+

Objective

+

+ Write a function that checks whether a given string reads the same + backward as forward. Palindromes are strings like + racecar or level. +

+ +

Key Features to Implement

+
    +
  1. + Function Definition: +
      +
    • Create a function that accepts a string input.
      • +
    • + Return true if the string is a palindrome, + false otherwise. +
      • +
    +
    2. +
  2. + Case & Whitespace Handling: +
      +
    • + Ignore capitalization (treat Aba as + aba). +
      • +
    • + Optionally, ignore spaces and punctuation for phrases like "A man + a plan a canal Panama". +
      • +
    +
    3. +
  3. + Examples: +
      +
    • palindromeChecker("level") → true
      • +
    • palindromeChecker("hello") → false
      • +
    • + palindromeChecker("RaceCar") → true + (case-insensitive) +
      • +
    +
    4. +
+ +

Tools & Techniques to Practice:

+
    +
  • String manipulation in JavaScript.
    • +
  • + Looping or using built-in functions like split(), + reverse(), and join(). +
    • +
  • + Handling edge cases like capitalization, spaces, and special + characters. +
    • +
+ +

Challenge Goals

+
    +
  • Understand string reversal techniques.
    • +
  • Practice writing clean, reusable functions.
    • +
  • Learn how to handle real-world string formatting issues.
    • +
+
+ + diff --git a/jslogics2.html b/jslogics2.html new file mode 100644 index 00000000..b87b7100 --- /dev/null +++ b/jslogics2.html @@ -0,0 +1,64 @@ + + + + + + + JavaScript Challenges + + +

Challenge: FizzBuzz

+ +
+

Objective

+

+ Implement the classic FizzBuzz problem: print numbers from 1 to N, but + for multiples of 3 print "Fizz", for multiples of 5 print + "Buzz", and for multiples of both 3 and 5 print + "FizzBuzz". +

+ +

Key Features to Implement

+
    +
  1. + Loop Through Numbers: +
      +
    • Use a loop to iterate from 1 to a given number N.
      • +
    +
    2. +
  2. + Check Multiples: +
      +
    • Print "Fizz" if the number is divisible by 3.
      • +
    • Print "Buzz" if the number is divisible by 5.
      • +
    • Print "FizzBuzz" if divisible by both 3 and 5.
      • +
    • Otherwise, print the number itself.
      • +
    +
    3. +
  3. + Examples: +
      +
    • + Input: 15 → Output: 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, + 11, Fizz, 13, 14, FizzBuzz +
      • +
    +
    4. +
+ +

Tools & Techniques to Practice:

+
    +
  • For loops and iteration.
    • +
  • Conditional statements (if/else).
    • +
  • Modulo operator for divisibility checks (%).
    • +
+ +

Challenge Goals

+
    +
  • Practice basic looping and conditionals in JavaScript.
    • +
  • Learn how to handle multiple conditions elegantly.
    • +
  • Strengthen problem-solving and algorithmic thinking.
    • +
+
+ + diff --git a/jslogics3.html b/jslogics3.html new file mode 100644 index 00000000..302e56a8 --- /dev/null +++ b/jslogics3.html @@ -0,0 +1,75 @@ + + + + + + + JavaScript Challenges + + +

Challenge: Anagram Validator

+ +
+

Objective

+

+ Write a function that checks whether two given strings are anagrams of + each other. Two strings are anagrams if they contain the same characters + in a different order, ignoring spaces and capitalization. +

+ +

Key Features to Implement

+
    +
  1. + Function Definition: +
      +
    • Create a function that accepts two string inputs.
      • +
    • + Return true if they are anagrams, + false otherwise. +
      • +
    +
    2. +
  2. + Case & Whitespace Handling: +
      +
    • + Ignore capitalization (treat "Listen" as + "listen"). +
      • +
    • Optionally, ignore spaces and punctuation for phrases.
      • +
    +
    3. +
  3. + Examples: +
      +
    • anagramValidator("listen", "silent") → true
      • +
    • anagramValidator("hello", "bello") → false
      • +
    • + anagramValidator("Dormitory", "Dirty room") → true + (case-insensitive, ignores spaces) +
      • +
    +
    4. +
+ +

Tools & Techniques to Practice:

+
    +
  • String manipulation in JavaScript.
    • +
  • Sorting characters or using frequency maps.
    • +
  • + Handling edge cases like capitalization, spaces, and punctuation. +
    • +
+ +

Challenge Goals

+
    +
  • Learn techniques for comparing and analyzing strings.
    • +
  • Practice writing clean, reusable functions.
    • +
  • + Understand how to handle real-world formatting and edge cases in + string problems. +
    • +
+
+ + diff --git a/jslogics4.html b/jslogics4.html new file mode 100644 index 00000000..09ce0570 --- /dev/null +++ b/jslogics4.html @@ -0,0 +1,71 @@ + + + + + + + JavaScript Challenges + + +

Challenge: Factorial Calculator

+ +
+

Objective

+

+ Write a function that calculates the factorial of a given number using + recursion. Factorial of a number n (denoted + n!) is the product of all positive integers up to + n. +

+ +

Key Features to Implement

+
    +
  1. + Function Definition: +
      +
    • + Create a recursive function that takes a single integer input + n. +
      • +
    • Return the factorial of n.
      • +
    +
    2. +
  2. + Base Case & Recursion: +
      +
    • + Define a base case for n = 0 or + n = 1 where factorial is 1. +
      • +
    • + Use recursion for n > 1: + factorial(n) = n * factorial(n - 1). +
      • +
    +
    3. +
  3. + Examples: +
      +
    • factorial(5) → 120
      • +
    • factorial(0) → 1
      • +
    • factorial(7) → 5040
      • +
    +
    4. +
+ +

Tools & Techniques to Practice:

+
    +
  • Understanding recursion and base cases.
    • +
  • Writing clean and efficient recursive functions.
    • +
  • Debugging recursive logic and stack usage.
    • +
+ +

Challenge Goals

+
    +
  • Learn how recursion works in JavaScript.
    • +
  • Practice breaking down problems into smaller subproblems.
    • +
  • Understand factorials and recursive mathematical functions.
    • +
+
+ + diff --git a/jslogics5.html b/jslogics5.html new file mode 100644 index 00000000..04c5df30 --- /dev/null +++ b/jslogics5.html @@ -0,0 +1,73 @@ + + + + + + + JavaScript Challenges + + +

Challenge: Array Flattener

+ +
+

Objective

+

+ Write a function that takes a deeply nested array and returns a new + array with all elements flattened into a single level. You can use + recursion or iterative logic to achieve this. +

+ +

Key Features to Implement

+
    +
  1. + Function Definition: +
      +
    • Create a function that accepts a nested array as input.
      • +
    • Return a new array with all nested elements flattened.
      • +
    +
    2. +
  2. + Flattening Logic: +
      +
    • + Recursively check each element: if it’s an array, flatten it, else + push it to the result. +
      • +
    • + Optionally, implement iterative flattening using a stack or loop. +
      • +
    +
    3. +
  3. + Examples: +
      +
    • + flattenArray([1, [2, [3, 4], 5]]) → [1, 2, 3, 4, 5] +
      • +
    • flattenArray([[[1], 2], 3]) → [1, 2, 3]
      • +
    • + flattenArray([1, 2, 3]) → [1, 2, 3] (already flat) +
      • +
    +
    4. +
+ +

Tools & Techniques to Practice:

+
    +
  • Recursive and iterative approaches to problem solving.
    • +
  • + Array manipulation using concat(), push(), + or spread syntax. +
    • +
  • Handling deeply nested data structures efficiently.
    • +
+ +

Challenge Goals

+
    +
  • Understand recursion and its application in array manipulation.
    • +
  • Learn iterative approaches to flatten arrays without recursion.
    • +
  • Improve problem-solving skills for nested data structures.
    • +
+
+ + diff --git a/uiChallenges.html b/uiChallenges.html index 601609e9..48a78e29 100644 --- a/uiChallenges.html +++ b/uiChallenges.html @@ -1,77 +1,114 @@ - - - UI Design Tasks - - - + .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; + } + + + +

UI Design Tasks

+

+ Strengthen your UI/UX skills by building visually appealing components: +

-

UI Design Tasks

-

Strengthen your UI/UX skills by building visually appealing components:

- -
-
-
Profile Card UI
-
Design and build a profile card with image, name, and social links.
-
Explore more
-
-
-
Pricing Table
-
Create a clean and responsive pricing component for a SaaS app.
-
Explore more
-
-
-
Login Page UI
-
Design a modern login form with input validation UI.
-
Explore more
+
+
+
Profile Card UI
+
+ Design and build a profile card with image, name, and social links. +
+ +
Explore more
 +
+
+
Pricing Table
+
+ Create a clean and responsive pricing component for a SaaS app. +
+ +
Explore more
 +
+
+
Login Page UI
+
+ Design a modern login form with input validation UI. +
+ +
Explore more
 +
+
+
Navbar with Dropdown
+
+ Build a responsive navigation bar with dropdown support. +
+ +
Explore more
 +
+
+
Dark Mode Toggle
+
+ Add a dark mode toggle switch with a smooth transition effect. +
+ +
Explore more
 +
-
-
Navbar with Dropdown
-
Build a responsive navigation bar with dropdown support.
-
Explore more
-
-
-
Dark Mode Toggle
-
Add a dark mode toggle switch with a smooth transition effect.
-
Explore more
-
-
- - + diff --git a/uiChallenges1.html b/uiChallenges1.html new file mode 100644 index 00000000..e41feacb --- /dev/null +++ b/uiChallenges1.html @@ -0,0 +1,34 @@ + + + + + + + Profile Card UI - Figma Challenge + + +

Profile Card UI

+ +
+

Objective

+

Design a modern profile card with image, name, and social links.

+ +

Goals

+
    +
  • + Include profile image, name, role/description, and social icons. +
    • +
  • Visual hierarchy, spacing, and alignment.
    • +
  • Hover/interactivity for social icons.
    • +
  • Responsive design for mobile and desktop.
    • +
+ +

Figma Skills

+
    +
  • Components & Auto Layout
    • +
  • Shadows, gradients, typography hierarchy
    • +
  • Prototype hover interactions
    • +
+
+ + diff --git a/uiChallenges2.html b/uiChallenges2.html new file mode 100644 index 00000000..2d2089a6 --- /dev/null +++ b/uiChallenges2.html @@ -0,0 +1,35 @@ + + + + + + + Pricing Table - Figma Challenge + + +

Pricing Table

+ +
+

Objective

+

+ Design a clean and modern SaaS pricing table showing multiple plans. +

+ +

Goals

+
    +
  • Include at least 3 pricing tiers (Free, Pro, Enterprise).
    • +
  • Highlight recommended plan visually.
    • +
  • Show pricing, billing frequency, and key features clearly.
    • +
  • Include call-to-action buttons.
    • +
  • Responsive layout for desktop and mobile.
    • +
+ +

Figma Skills

+
    +
  • Grids & layout for multiple cards
    • +
  • Typography hierarchy & contrast
    • +
  • Interactive states for buttons
    • +
+
+ + diff --git a/uiChallenges3.html b/uiChallenges3.html new file mode 100644 index 00000000..503cd79d --- /dev/null +++ b/uiChallenges3.html @@ -0,0 +1,34 @@ + + + + + + + Login Page UI - Figma Challenge + + +

Login Page UI

+ +
+

Objective

+

Design a modern login/sign-up page with input validation UI.

+ +

Goals

+
    +
  • + Include username/email, password fields, login button, and links. +
    • +
  • Show input validation states (error, success, focus).
    • +
  • Clean, centered, and mobile-responsive layout.
    • +
  • Optional: subtle background visuals or illustration.
    • +
+ +

Figma Skills

+
    +
  • Auto Layout & components
    • +
  • Variants for input states
    • +
  • Prototyping transitions between forms
    • +
+
+ + diff --git a/uiChallenges4.html b/uiChallenges4.html new file mode 100644 index 00000000..8ff27c40 --- /dev/null +++ b/uiChallenges4.html @@ -0,0 +1,35 @@ + + + + + + + Navbar with Dropdown - Figma Challenge + + +

Navbar with Dropdown

+ +
+

Objective

+

+ Design a responsive navigation bar with dropdown menus for desktop and + mobile. +

+ +

Goals

+
    +
  • Include logo/brand and main navigation links.
    • +
  • Design dropdowns for sub-items with hover/click states.
    • +
  • Create a mobile hamburger menu version.
    • +
  • Ensure spacing, contrast, and hierarchy are clear.
    • +
+ +

Figma Skills

+
    +
  • Components & variants for dropdown states
    • +
  • Prototyping hover and click interactions
    • +
  • Responsive design with Auto Layout & constraints
    • +
+
+ + diff --git a/uiChallenges5.html b/uiChallenges5.html new file mode 100644 index 00000000..ff303fd0 --- /dev/null +++ b/uiChallenges5.html @@ -0,0 +1,38 @@ + + + + + + + Dark Mode Toggle - Figma Challenge + + +

Dark Mode Toggle

+ +
+

Objective

+

+ Design a dark mode toggle switch with smooth transition effect for a + user interface. +

+ +

Goals

+
    +
  • + Create a toggle switch that switches between light and dark themes. +
    • +
  • Ensure smooth animation or transition when toggling.
    • +
  • Consider color contrast and readability in both modes.
    • +
  • Design the toggle for both desktop and mobile layouts.
    • +
+ +

Figma Skills

+
    +
  • Components & variants for toggle states (on/off)
    • +
  • Color styles for light and dark themes
    • +
  • Prototyping smooth transitions
    • +
  • Responsive layout design
    • +
+
+ +