Skip to content

Latest commit

 

History

History
 
 

Web Development

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Readme.md
Readme.md
 
 

Readme.md

This file consists of Web Development tasks that will help you begin your journey in the programming world and move one step ahead to be part of Team TechnoJam.

TASKS:

There are 3 tasks divided into 3 categories according to their difficulty levels.

Note : The YouTube video links are provided only for reference. Do not create an exact copy of the referenced websites.

Easy:

Build a responsive card component layout using CSS Grid.

  • Requirements:
    • Create an HTML file (index.html) and a CSS file (styles.css).
    • The card should include:
      • An image (use a placeholder image if necessary)
      • A title (e.g., "Card Title")
      • A description (a brief text about the card content)
      • A button (e.g., "Learn More")
    • Use CSS Grid to arrange the elements and ensure responsiveness for different screen sizes.
  • Example Link: https://www.figma.com/5xTV...

Medium:

Build a translation tool that can accurately translate text between different languages

  • Requirements:

    • Use HTML, CSS, and JavaScript to build the tool.
    • The translation tool should include:
      • An input field for users to enter text.
      • A dropdown menu for selecting the target language.
      • A button to submit the translation request.
      • A display area to show the translated text.
    • Integrate a public translation API (e.g., Google Translate API) to fetch translations.

  • Example Video: Translation Tool Tutorial

Hard:

Develop a secure user authentication system, utilizing JWT tokens and session expiration.

  • Requirements:

    • JWT Authentication: Use JWT tokens to secure user sessions. When a user logs in, generate a token, and store it securely on the client-side (e.g., using cookies or local storage).

  • User Authentication:

    • Sign-Up: Allow users to create an account with a username/email and password.
    • Sign-In: Implement login functionality to authenticate users.
    • Protect sensitive routes (such as the dashboard) so that they are only accessible to authenticated users.

  • Session Expiration: Implement session expiration using the JWT token's expiry feature.

  • Example Video: JWT Authentication Example