diff --git a/backendChallenges.html b/backendChallenges.html index d933950..1b1962a 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 0000000..d90798d --- /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 0000000..385ce42 --- /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 0000000..e9d621b --- /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 0000000..93449ca --- /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 0000000..6da883e --- /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 0000000..588a9aa --- /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 da4ef3c..74eb916 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 0000000..407f391 --- /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 0000000..160daa2 --- /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 0000000..01a8d84 --- /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 0000000..5f2ac79 --- /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 0000000..e68c498 --- /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 6018dfd..a034174 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 0000000..8fd53bd --- /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:

+ + +

Challenge Goals

+ +
+ + diff --git a/gitChallenges2.html b/gitChallenges2.html new file mode 100644 index 0000000..94f2d67 --- /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:

+ + +

Challenge Goals

+ +
+ + diff --git a/gitChallenges3.html b/gitChallenges3.html new file mode 100644 index 0000000..409156d --- /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:

+ + +

Challenge Goals

+ +
+ + diff --git a/gitChallenges4.html b/gitChallenges4.html new file mode 100644 index 0000000..4059c35 --- /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:

+ + +

Challenge Goals

+ +
+ + diff --git a/gitChallenges5.html b/gitChallenges5.html new file mode 100644 index 0000000..fd9cc26 --- /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:

+ + +

Challenge Goals

+ +
+ + diff --git a/jslogics.html b/jslogics.html index 7a99075..50d5e6d 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 0000000..3e754a0 --- /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 0000000..b87b710 --- /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 0000000..302e56a --- /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 0000000..09ce057 --- /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 0000000..04c5df3 --- /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 601609e..48a78e2 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 0000000..e41feac --- /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 0000000..2d2089a --- /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 0000000..503cd79 --- /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 0000000..8ff27c4 --- /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 0000000..ff303fd --- /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
    • +
+
+ +