Web-Development-Internship

Title: Web Development Internship Tasks
Subtitle: CSEdge Internship Program
Author: Team CSEdge
Level: Easy, Medium, Hard
Questions per Level: 4
Total Questions: 12

Installation

To begin working on the projects, follow these steps:

1. Clone the repository to your local machine using the command:

git clone https://github.com/CSEdgeOfficial/Web-Development-Internship/

2. Navigate to the cloned directory:

cd Web-Development-Internship

3. Create a new folder with your full name to store your projects:

mkdir YourFullName && cd YourFullName

4. Begin working on the tasks within your named folder.

Pull Request

When you have completed a task, create a separate folder within your named folder for the specific task and submit a pull request to the master branch of this repository. Our team will review your submission and merge it if approved.

Table of Contents:

Introduction:

Greetings,

As a newly joined student of our Web Development Internship program, we would like to congratulate you and wish you a warm welcome. We are confident that you will learn many exciting things during your tenure with us.

To kick off your internship, we have prepared a set of tasks for you to work on. These tasks cover various aspects of web development and aim to give you a taste of what lies ahead. Each question has three levels of difficulty: Easy, Medium, and Hard. Feel free to attempt whichever level suits your skillset best.

Instructions:

• Complete the tasks sequentially starting from the easiest level.
• Choose any one Section Easy or Medium or Hard and work on it only.
• You need to do 4 Tasks if you choose Easy section and You need to do 3 Tasks if you Choose Medium section and You need to do 2 Tasks only if you choose Hard Section
• All tasks must be completed using HTML, CSS, and JavaScript / ReactJs.
• Ensure that your solutions are clean, efficient, and maintainable.
• Document your thought process and approach for each solution.
• Submit the complete package consisting of source code files, screenshots, and descriptions to the designated mentor via link using GitHub.

Evaluation Criteria:

• Accuracy of the solution
• Adherence to coding standards and conventions
• Cleanliness and efficiency of the code
• Ability to solve problems creatively
• Understanding of core concepts

Good luck, and happy coding!

Easy Level Tasks:

1. Simple Landing Page

   • Create a responsive landing page with:
     • Header section with logo and navigation menu
     • Hero section with background image and title
     • Features section highlighting four features of CSEdge
     • Testimonial section featuring two testimonials
     • Contact Us section with a contact form and social media links

2. Photo Gallery

   • Design a lightbox-enabled photo gallery with:
     • Thumbnail previews of all images
     • Clickable thumbnails to open respective images in a modal window
     • Close functionality to exit the modal window
     • Responsive design for optimal viewing on mobile devices

3. Portfolio

   • Create a minimalistic website showcasing five past web development projects with:
     • Title and brief description
     • Screenshot or demo video
     • Technologies used
     • Live preview / GitHub repository link

4. Student Enrollment Form

   • Develop a student enrollment form for a fictional educational institution with fields for:
     • Student's name, email, phone number
     • Course selection
     • Additional comments
   • Implement form validation for accurate data submission

Medium Level Tasks:

5. To-Do List

   • Create a dynamic to-do list application allowing users to:
     • Add, edit, delete, and mark tasks as completed
     • Sort tasks by priority, due date, or completion status

6. Calculator

   • Develop a functional calculator application capable of:
     • Performing basic arithmetic operations
     • Ensuring an intuitive user interface with responsive design

7. Quiz Web

   • Build an interactive quiz web application featuring:
     • Multiple-choice questions on various topics
     • Timer for each question, scoring mechanism, and feedback for answers
     • Option for users to review their quiz results

8. GitHub Profile Readme Generator

   • The GitHub Profile Readme Generator is a tool aimed at simplifying the creation of visually appealing and informative README files for GitHub profiles. It provides users with templates and customization options to showcase their skills, projects, and personality effectively on their GitHub profiles.
     • Template Selection: Choose from a variety of pre-designed templates tailored for different purposes, such as showcasing projects, skills, or personal interests.
     • Customization Options: Customize the selected template with your own information, including profile picture, bio, social media links, project highlights, and more.
     • Markdown Support: Utilize Markdown syntax to format text, add images, links, and other elements to your README.
     • Preview: Preview the generated README file before committing changes to your GitHub profile.
     • Ease of Use: User-friendly interface with intuitive controls for seamless navigation and editing.
     • Version Control Integration: Easily update and maintain your GitHub profile README by integrating it with version control systems like Git.

Hard Level Tasks:

9. Resume Maker

   • Create a comprehensive web application that assists users in building professional resumes:
     • Templates for different career levels and industries
     • Customizable sections for experience, education, skills, and certifications
     • Export options for PDF and HTML formats

10. Tic Tac Toe

    • Implement a classic Tic Tac Toe game with:
      • Multiplayer functionality for real-time competition
      • Game state management, win detection, and responsive design for seamless gameplay

11. Tesla/Apple Web Page Redesign

    • Redesign the official website of Tesla or Apple, focusing on:
      • Modernizing the user interface and enhancing user experience
      • Incorporating innovative design elements using Bootstrap and Tailwind CSS frameworks

12. Blog Using Markdown Articles

    • Create a dynamic blog web application allowing users to publish articles in Markdown format with:
      • User authentication, article CRUD operations, and rich text editing using Markdown syntax
      • Comments section for reader engagement and backend data storage/authentication using Firebase or other cloud services

FAQ

Q: What happens if I encounter an issue or bug while working within my named folder?

A: If you encounter an issue or bug during the development process while working within your named folder, please report it in the Issues tab of this repository. Our team will triage and address reported issues in a timely manner.

Q: Are there any resources available to assist with the tasks within my named folder?

A: Yes, we recommend checking out the official resource page that includes all the neccessary resources Click Here.

Q: Is there a deadline for completing the tasks within my named folder?

A: While there is no hard deadline for completing the tasks within your named folder, we encourage you to finish them within a reasonable amount of time to maximize your learning opportunities.

Final Thoughts

Completing these tasks and storing them within your named folder will not only improve your web development skills, but also demonstrate your dedication to continuous learning. Best of luck, and happy coding!