OASIS INFOBYTE

Web Development and

Designing

TASK LIST
For 𝐖𝐞𝐛 𝐝𝐞𝐯𝐞𝐥𝐨𝐩𝐦𝐞𝐧𝐭 𝐚𝐧𝐝 𝐝𝐞𝐬𝐢𝐠𝐧 internship you will need to complete any one (either Level 1 or
Level 2 or Level 3) as per your convenience for successful completion of internship.
LEVEL 1 LANDING PAGE

TASK 1 A landing page is one of the best web development projects

for beginners. This project demands a foundational
understanding of HTML and CSS. You will learn how to add
columns, divide sections, arrange items, add headers,
footers. Most importantly, you will use your creativity to
make the page look impressive. The alignments, the
padding, the color palette, boxes and all the other elements
on the page require attention. Use CSS carefully to make
sure the elements on the page do not overlap.
For Demo Click
LEVEL 1 PORTFOLIO

TASK 2 You can create a personal portfolio with the basic skills in
CSS and HTML. This is yet again, one of the most common
projects on web development for beginners. In a personal
portfolio, you get to show a wide range of samples and skills
and add your resume. You can add an image at the top
where you can introduce yourself; below that, you can add
contact information.
For Demo Click
LEVEL 1 TEMPERATURE CONVERTER WEBSITE

TASK 3 The user will input a temperature in either Fahrenheit or Celsius and
press a "convert" button. The converted temperature will then be
displayed with the correct unit.
Your UI should include four main elements:
Input field for the user to type in their temperature - don't forget
to validate that the input is a number!
Dropdown menu or radio button for the user to choose if they are
inputting in Celsius or Fahrenheit
"Convert" button to trigger the temperature conversion
Display area for the final converted temperature and unit
For an extra challenge: You can add in a third conversion option to
convert from and to Kelvin as well.
For Demo Click
LEVEL 2 CALCULATOR

TASK 1 It takes a little skill to create a calculator with basic

mathematical functionalities using CSS, HTML, and
JavaScript. Calculators require an interactive interface to
perform basic functions such as addition, subtraction,
division, and multiplication. It will need a display screen to
display the user’s input and give the results. The grid system
in CSS is for the alignments of buttons on the calculator.
The additional tools you need to build a fully functional
calculator include eventListeners, if-else statements,
operators, loops, and so on.
For Demo Click
LEVEL 2 TRIBUTE PAGE

TASK 2 With a basic understanding of HTML and CSS, you can easily
create a page for someone you admire. Write about what
you adore in the person, add images, give an appealing
layout, use paragraphs appropriately. You can also play
around with different font styles and background colors.
For demo Click
LEVEL 2 A BASIC TO-DO WEBAPP

TASK 3 Develop a basic to-do app that enables a user to add daily tasks.
The to-do web app must allow users to add new items to a list, and items
added to a list must be visible. Also, a user can mark a task “complete”
upon its successful completion, and these completed tasks must appear
on a separate list, say Completed Tasks.
You can also add a separate section titled Pending Tasks that will list all
the tasks that require completion. In such a case, the to-do list will be a
union of the Pending Tasks list and the Completed Tasks list. Irrespective
of the list, a user must be able to delete or edit tasks from it.
To further increase the web app's complexity or make it more detailed,
you can add the date and time when a task is added and/or completed.
For demo Click
LEVEL 2 LOGIN AUTHENTICATION

TASK 4
Create a simple login authentication system using a
programming language of your choice (e.g., Python,
JavaScript, Java, etc.) that allows users to register, login, and
access a secured page.
For more details Click Here
LEVEL 3 PIZZA DELIVERY APPLICATION

TASK 1. Create a full stack app using React, MongoDB, and Nodejs.
2. Create an admin login and a user login with complete registration, authorization, email verification, and forgot
password system.
3. After logging in, users should be able to view the available pizza varieties in the dashboard.
4. Users can start making the custom pizza with the following flow.
Choose any pizza base from 5 options.
Next, choose any sauce from 5 options.
Select a cheese type .
Opt veggies from many options.
5.Integrate the razor pay checkout for payment. Create a dummy account and integrate the test mode. In test
mode, on
clicking success, place and confirm the order.
6. In the admin login, create a mini inventory management system keeping track of available pizza base, sauce,
cheese, veggies, and meat.
7. After an order, update the necessary changes in stock and present them in the admin dashboard.
8. Schedule a notification to the admin email id when the available stock goes beyond the threshold value. (e.g. the
total pizza base is below 20 after so many consecutive orders, trigger an email)
9. Admin must receive the order and change the status of the pizza- as order received, In the kitchen, and Sent to
delivery.
10. For every update from the admin, the status change must be reflected in the user dashboard