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.

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—for now.
• 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!

Easy Level Tasks:

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.

Medium Level Tasks:

1. 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.

2. 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.

3. 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.

4. 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.

Hard Level Tasks:

1. 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.

2. 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.

3. 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.

4. 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

FAQ

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

Should you encounter issues during tasks within your named folder, don't hesitate to raise concerns in the repository's Issue Tab by opening an issue ticket. Our team will swiftly attend to your needs.

Can I utilize other resources to better comprehend these tasks?

Yes, indeed! Look up authoritative references such as the official documentation and reliable tutorials on sites like YouTube, FreeCodeCamp, Udemy, or Coursera. Moreover, delve into stack overflow discussions addressing typical challenges developers confront.

Must I strictly abide by deadlines for tasks residing within my named folder?

While firm deadlines aren't imposed, consistent progression through tasks helps optimally absorb concepts and harness acquired skills effectively. By keeping pace, you ensure steady advancement over the internship duration.

Finishing Up

By actively engaging in these tasks and arranging outcomes within your named folder, you fortify indispensable abilities pivotal to triumph in genuine software engineering scenarios. Have fun, and excel in your coding venture!