This internship focuses on enhancing your front-end development skills through practical tasks involving HTML, CSS, and JavaScript. You’ll gain experience in creating user-friendly and visually appealing web interfaces.
Notice: Complete a minimum of 2 tasks from the tasks listed below.
Task 1: Create a Personal Portfolio Website
Problem Statement: Design and develop a personal portfolio website showcasing your projects and skills.
Steps to Complete:
- Create an HTML structure for your website.
- Style the website using CSS, ensuring it’s responsive.
- Include sections for your biography, skills, and project links.
Tools/Datasets/Platforms:
- Code Editor: Visual Studio Code, Sublime Text, or any editor.
- Hosting: GitHub Pages or Netlify (optional for hosting).
You can use any tool/platform or dataset.
How to Submit:
- Record a 10-15 second video walkthrough of your website.
- Upload the video to LinkedIn or YouTube.
- Tag the following in your post:
- Submit the video link in the submission form.
Task 2: Design a Responsive Navigation Bar
Problem Statement: Create a responsive navigation bar that works well on both desktop and mobile devices.
Steps to Complete:
- Use HTML and CSS to create the navigation structure.
- Implement CSS media queries to ensure responsiveness.
- Include hover effects for interactive elements.
Tools/Datasets/Platforms:
- Code Editor: Atom, Notepad++, or any editor.
You can use any tool/platform or dataset.
How to Submit:
- Record a video demonstrating the navigation bar’s responsiveness.
- Upload the video to LinkedIn or YouTube.
- Tag the following in your post:
- Submit the video link in the submission form.
Task 3: Build a Landing Page
Problem Statement: Design a landing page for a fictional product or service.
Steps to Complete:
- Structure your landing page using HTML.
- Apply CSS for layout, typography, and colors.
- Include call-to-action buttons and images.
Tools/Datasets/Platforms:
- Code Editor: Brackets, Visual Studio Code, or any editor.
You can use any tool/platform or dataset.
How to Submit:
- Record a video showcasing your landing page design.
- Upload the video to LinkedIn or YouTube.
- Tag the following in your post:
- Submit the video link in the submission form.
Task 4: Create a Simple Quiz Application
Problem Statement: Develop a simple quiz application using HTML, CSS, and JavaScript.
Steps to Complete:
- Create a basic HTML structure for the quiz.
- Style the quiz using CSS.
- Implement JavaScript to handle user input and score calculation.
Tools/Datasets/Platforms:
- Code Editor: Visual Studio Code, Atom, or any editor.
You can use any tool/platform or dataset.
How to Submit:
- Record a video demonstrating how to take the quiz and show results.
- Upload the video to LinkedIn or YouTube.
- Tag the following in your post:
- Submit the video link in the submission form.
Task 5: Create a CSS Animation
Problem Statement: Design a webpage that incorporates CSS animations for user interface elements.
Steps to Complete:
- Use HTML to create elements that will be animated.
- Apply CSS animations for transitions and effects.
- Demonstrate the animations on interaction (hover, click).
Tools/Datasets/Platforms:
- Code Editor: Notepad++, Visual Studio Code, or any editor.
You can use any tool/platform or dataset.
How to Submit:
- Record a video showcasing the CSS animations in action.
- Upload the video to LinkedIn or YouTube.
- Tag the following in your post:
- Submit the video link in the submission form.
Task 6: Create a Responsive Grid Layout
Problem Statement: Build a responsive grid layout for displaying images or content cards.
Steps to Complete:
- Use HTML to structure the content you wish to display in a grid.
- Apply CSS Grid or Flexbox for layout.
- Ensure the layout adjusts for different screen sizes.
Tools/Datasets/Platforms:
- Code Editor: Brackets, Sublime Text, or any editor.
You can use any tool/platform or dataset.
How to Submit:
- Record a video demonstrating the grid layout on different screen sizes.
- Upload the video to LinkedIn or YouTube.
- Tag the following in your post:
- Submit the video link in the submission form.
Task 7: Create a Contact Form
Problem Statement: Develop a contact form that collects user information and validates input.
Steps to Complete:
- Create a form using HTML with fields for name, email, and message.
- Style the form using CSS.
- Implement basic JavaScript validation to check for empty fields.
Tools/Datasets/Platforms:
- Code Editor: Visual Studio Code, Atom, or any editor.
You can use any tool/platform or dataset.
How to Submit:
- Record a video filling out and submitting the form.
- Upload the video to LinkedIn or YouTube.
- Tag the following in your post:
- Submit the video link in the submission form.
Task 8: Build a Simple To-Do List Application
Problem Statement:
Create a simple to-do list application using HTML, CSS, and JavaScript.
Steps to Complete:
- Structure the application with HTML.
- Style the application using CSS.
- Use JavaScript to add, remove, and mark tasks as completed.
Tools/Datasets/Platforms:
- Code Editor: Visual Studio Code, Sublime Text, or any editor.
You can use any tool/platform or dataset.
How to Submit:
- Record a video showcasing adding and removing tasks.
- Upload the video to LinkedIn or YouTube.
- Tag the following in your post:
- Submit the video link in the submission form.
Task 9: Design a Product Card
Problem Statement: Create a product card layout that displays an image, title, description, and price.
Steps to Complete:
- Use HTML to create the structure of the product card.
- Style the card using CSS for layout and aesthetics.
- Ensure the card is responsive.
Tools/Datasets/Platforms:
- Code Editor: Notepad++, Visual Studio Code, or any editor.
You can use any tool/platform or dataset.
How to Submit:
- Record a video demonstrating your product card design.
- Upload the video to LinkedIn or YouTube.
- Tag the following in your post:
- Submit the video link in the submission form.
Task 10: Create a Simple Blog Page
Problem Statement: Design a simple blog page layout with articles.
Steps to Complete:
- Structure your blog layout using HTML.
- Use CSS to style the articles, headers, and navigation.
- Ensure the layout is user-friendly and visually appealing.
Tools/Datasets/Platforms:
- Code Editor: Visual Studio Code, Brackets, or any editor.
You can use any tool/platform or dataset.
How to Submit:
- Record a video showcasing your blog page.
- Upload the video to LinkedIn or YouTube.
- Tag the following in your post:
- Submit the video link in the submission form.
Task 11: Create a Simple Weather App Interface
Problem Statement: Design a user interface for a weather application.
Steps to Complete:
- Use HTML to create the structure for displaying weather data.
- Style the interface with CSS to make it visually appealing.
- Use placeholders for weather data and display relevant icons.
Tools/Datasets/Platforms:
- Code Editor: Visual Studio Code, Atom, or any editor.
You can use any tool/platform or dataset.
How to Submit:
- Record a video demonstrating your weather app interface.
- Upload the video to LinkedIn or YouTube.
- Tag the following in your post:
- Submit the video link in the submission form.
Task 12: Design a Simple E-commerce Page
Problem Statement:
Create a simple e-commerce product page layout.
Steps to Complete:
- Structure your page using HTML for displaying product details.
- Style the page using CSS to create an attractive layout.
- Include product images, descriptions, and prices.
Tools/Datasets/Platforms:
- Code Editor: Brackets, Visual Studio Code, or any editor.
You can use any tool/platform or dataset.
How to Submit:
- Record a video showcasing your e-commerce page design.
- Upload the video to LinkedIn or YouTube.
- Tag the following in your post:
- Submit the video link in the submission form.
Conclusion
These tasks are designed to give you real-world experience in digital marketing while allowing you to explore various platforms and tools. Remember to tag the company and mentor in your submissions. Good luck, and enjoy your internship journey!
Thank you!