Web Design & Development

In the Web Design & Development internship program, you will gain practical skills and knowledge required to create visually appealing, responsive, and accessible websites. This internship will cover essential topics such as HTML, CSS, JavaScript, responsive design principles, and version control. You will also learn to use modern tools and frameworks to design user-friendly and well-structured websites.

Level 1 – Easy Projects

 

Task 1: Simple Personal Portfolio Website

Problem Statement: Create a basic portfolio website to showcase your name, photo, skills, and contact info.

Steps to Complete:

• • Use plain HTML and CSS to create a one-page website.

• • Add sections: About Me, Skills, and Contact.

• • Make sure it looks good on desktop and mobile (basic responsive design).

 Tools/Platform: HTML, CSS, VS Code

 

Task 2: Basic Product Landing Page

Problem Statement: Build a simple landing page for a fictional product with a header, feature list, and a call-to-action button.

Steps to Complete:

• • Structure the page with HTML sections: Header, Features, and Footer.

• • Style it using CSS for colors, fonts, and layout.

• • Add a clickable button linking to an email or dummy signup form.

Tools/Platform: HTML, CSS

 

Task 3: Image Gallery with Hover Captions

Problem Statement: Create a grid of images that show captions when the user hovers over them.

Steps to Complete:

• • Use HTML to build the gallery grid.

• • Style with CSS Grid or Flexbox.

• • Add CSS hover effect to show captions (no JavaScript needed).

Tools/Platform: HTML, CSS

 

Level 2: Intermediate Projects

 

Task 4: Multi-Page Portfolio Website

Problem Statement: Create a portfolio website with multiple pages: Home, Projects, About, and Contact.

Steps to Complete:

• • Use HTML & CSS for multiple linked pages.

• • Add navigation menu to switch between pages.

• • Include images and project descriptions on the Projects page.

• • Add a simple contact form (HTML form only, no backend).

 Tools/Platform: HTML, CSS

 

Task 4: Responsive Product Page Layout

Problem Statement: Build a responsive product detail page with product   image, description, price, and an “Add to Cart” button (no backend).

Steps to Complete:

• • Design the layout using CSS Flexbox/Grid for responsiveness.

• • Style buttons and text for clarity.

• • Add interactive hover effects on buttons using CSS.

Tools/Platform: HTML, CSS

 

Task 5: Interactive To-Do List

Problem Statement: Make a simple to-do list where users can add and delete tasks using JavaScript.

Steps to Complete:

• • Create input field and button to add tasks.

• • Display tasks in a list below.

• • Add delete button for each task to remove it.

• • No need to store tasks after page reload (no localStorage).

Tools/Platform: HTML, CSS, JavaScript

 

Level 3: Advanced Projects

 

Task 6: Simple SPA with Vanilla JavaScript

Problem Statement: Build a single page app that switches between “Home”, “About”, and “Contact” sections without reloading the page.

Steps to Complete:

• • Use HTML to create all three sections.

• • Use JavaScript to show/hide sections based on menu clicks.

• • Style the navigation and content area.

• • Make it responsive

 Tools/Platform: HTML, CSS, JavaScript

 

Task Title: Basic Weather App (API Fetch)

Problem Statement: Build a simple app that lets users enter a city name and shows the current weather fetched from a free weather API.

Steps to Complete:

• • Create a search input and button.

• • Use JavaScript fetch API to get weather data.

• • Display temperature, conditions, and icon on the page.

• • Handle errors like invalid city name.

 Tools/Platform: HTML, CSS, JavaScript, OpenWeatherMap API (free tier)

 

Task 9: Dashboard UI with Static Data

Problem Statement: Design a clean dashboard layout with a sidebar and main content showing static charts or data tables (no backend).

Steps to Complete:

• • Create a sidebar with navigation links.

• • Use CSS Grid or Flexbox to layout main dashboard area.

• • Display simple charts or tables using static sample data.

• • Add hover effects and basic responsiveness.

 Tools/Platform: HTML, CSS, Chart.js (optional)