CSEdge Web Development Internship

Title: CSEdge Web Development Internship Tasks
Subtitle: CSEdge Internship Program
Author: Team CSEdge
Level: Easy, Medium, Hard
Questions per Level: 4
Total Questions: 12
Last Modified Date: 04/06/2024

Setup

To get started with the projects, follow these steps:

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

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

2. Navigate to the cloned directory:

   cd CSEdge-Web-Development-Internship

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

   mkdir YourFullName-with-level && cd YourFullName-with-level

4. Begin working on the tasks within your named folder. Once you finish each task, instead of creating a pull request, push your solution to your personal Github account by following these additional steps:

Initialize a new repository on your Github account called 'CSEdge Web Development Internship'.

1. Link the remote repository to your local project folder:

git remote add origin <your_repository_url>

2. Add and commit your solution files:

git add .
git commit -m "<commit_message>"

3. Push your solution to your personal repository:

git push -u origin master

Table of Contents

Introduction

Welcome to the Web Development Internship with CSEdge! During this journey, you'll tackle various tasks aimed at expanding your knowledge and expertise in Web Development. This document presents 12 tasks divided into three categories—Easy, Medium, and Hard.

Instructions

• Attempt the tasks according to their difficulty level, beginning with the easiest ones.
• Focus on solving only one category—Easy, Medium, or Hard
• Write functions, classes, modules, tests, and documentation where required.
• Keep your code organized, modular, and easy to read.
• Comment your solutions thoroughly, explaining how they work and why you made certain decisions.
• Save your finished work in appropriately labeled folders under your named folder.
• Push your entire collection of source codes, along with necessary instructions, to your designated repository on your personal Github account.

Evaluation Criteria

• Correctness of implemented algorithms and logic
• Quality of code (structure, comments, naming conventions, etc.)
• Performance and optimization efforts
• Efficient use of external libraries when needed
• Problem-solving creativity and originality Now let's dive into the tasks!

Beginner Level:

1. Parallax Website

• Create a multi-section website with individual background images & parallax scrolling effect.
• Features: Navigation menu, content sections, animation effects, optimization, responsive design.
• Tips: Don't copy code or design from elsewhere.

2. User Info Based Resume Maker

   • Data Collection: Gather user's professional details, e.g., name, contact info, summary, skills, education, experience, projects, certifications, languages, references.
   • Rich Text Editor: Support detailed entries in sections requiring extensive writing.
   • Template Choices: Allow selecting from various resume designs suiting industries or preferences.
   • Live Preview: Display a real-time view of the created resume alongside edits.
   • Format Choices: Offer output choices like PDF, Docx, or txt.

3. Simple Landing Page

• Design a one-page website with these sections: navbar, slogan, about, services, offers, footer.
• Ensure responsive design for readability on devices.
• Tip: Create original design and code.

4. Tribute Page

• Design a responsive page to pay tribute to someone or something.
• Elements: Header, main content, images/media, timeline/highlights, optional quotes/testimonials.
• Focus on styling and responsive design.
• Tip: Generate unique design instead of copying.

Intermediate Level:

Medium Task Level:

5. Interactive Picture Album

• Create an interactive picture album with dynamic filtering & lightbox attribute.
• Functions: Responsive grid, filter alternatives, lightbox inspection, hover outcomes, JS-driven 'load more'.
• Advice: Shun copied code or design.

6. Personal Portfolio Website

• Establish a profile site exhibiting initiatives, talents & contact specifics.
• Attributes: Adaptive layount, principal pane, biography division, ventures exhibition, connection method.
• Prerequisites: Cohesive flow amongst divisions, validated type handling, incorporated chart.

7. Your College Website

• Manufacture a university portal sharing facts concerning faculty, branches, activities & touch points.
• Features: Main entrance, heritage, offices, festivities, reach tab.
• Needs: Screen-size versatile plan, lively constituents like rotators & confirmation checks.

8. Customizable Desktop wallpaper Expansion

• Engineer a web browser expansion making it possible for customers to select and apply substitute wallpapers effortlessly.
• Characteristics: Search characteristic, class separation, sneak peek approach, set up choice, randomized wallpaper pick.
• Considerations: Suitable functioning around differing web browsers, optimum consumer expertise.
• Reminders: Decline adhering to the exact same strategy or code utilized by opposite developers.

Advanced Level:

9. E-commerce Webpage

• Create a working e-shopping site permitting consumers to browse merchandise.
• Headers: Navbar supplying connections towards varied segments.
• Primary Material Area: Spotlight highlighted goods plus bargains.
• Product Records: Exhibit things in charge card layout w/images, labels, costs, explanations.
• Slider: Highlight many visuals or promos turning dynamically.
• Footer: Further hyperlinks, connectivity deets, lawful webpages, subscribe form.
• Essentials: Attractive design, productive surfing, straightforward checkout.
• Proposal: Prevent following somebody else's model/code.

10. AR Website with 3D Object Placement

• Build a simple website integrated with AR.js library to allow placing 3D objects in the real world.
• User interactions: Click or scan marker to initiate AR mode, drag and drop or click to place 3D objects.
• Technical requirements: Select compatible 3D objects, optimize for web environment, test across devices.
• Success metrics: Consistent user behavior, positive reviews, low abandonment rate.

11. Weather Update Panel

• Construct a panel showing recent weather conditions and future predictions for various towns.
• Core Aspects:
  • Snapshots of prevailing climate & prognosis
  • Illustrations indicating temp alterations gradually
  • Insert/delete urban centers from roster
  • Grant locale authorization for vicinity climate notifications
  • Emphasize simplicity, clarity, and practicality while maintaining adequate weather reporting and user-centric design. Minimize complexity but retain overall function and purpose.

12. Markdown Blog Platform

• Produce a blogging system designed specifically for Markdown data, ensuring a delightful and user-friendly experience.
• Vital Segments:
  • Post composer leveraging Markdown syntax
  • Well-organized archive of published blogs
  • Commentary region encouraging visitor participation
  • Author administration console governing publishing, modifying, and removing articles
  • Lightweight, clean, and welcoming design promoting seamless navigation

Our Contributors ✨

FAQ

How can I overcome obstacles faced during tasks in my named folder?

Should you encounter issues during tasks within your named folder, feel free to reach out for assistance. You may consult online resources, seek help from experienced developers, or ask questions in relevant communities. Remember to maintain confidentiality regarding intellectual property and avoid sharing sensitive information publicly.

Can I utilize other resources to better comprehend these tasks?

Absolutely! Utilize authoritative references such as official documentation, tutorials, and educational videos to strengthen your understanding of the concepts involved in each task. Delving deeper into related topics can enhance your overall experience and proficiency in Web Development.

Are strict deadlines enforced for tasks residing within my named folder?

Although no rigid deadlines are set, regular progress is encouraged to make the most of the learning opportunity. Consistently tackling tasks allows you to reinforce newly acquired skills and fosters continuous growth throughout the internship period.