Scribd
Upload
7 views6 pages

Tasks For Web-Selections

Uploaded by

vedanshp757
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views6 pages

Tasks For Web-Selections

Uploaded by

vedanshp757
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Entrepreneurship Cell, IIT Kharagpur

Web Team Task Round

In this round, you need to do at least one task. The tasks are listed in increasing order of
difficulty and hence choose accordingly. Bonus points will be awarded if you complete a
difficult task. You can attempt multiple tasks too.
Tasks made in “REACT” will be provided brownie points.

Try to make all the websites responsive.

Don’t use Bootstrap in Front-end tasks.

Deadline for the task: 08/09/23 by 11:59 PM


Note that your Core Team GD / PI will not affect your Web Team Selections.

1. Create a basic stacked registration form.


● It should ask for 6 entries with 3 rows.
● Make it responsive.

2. Create a card, button, and image carousel animation using HTML & CSS.
● You may use javascript also.

3. Design a course website.


● Navbar: Make a navbar with logo + options(html, css, js, react). On clicking the options,
the corresponding page should open smoothly.
● Sections: There should be sections headed skills(html, css, js, react).
● In every sub-section, there should be at least 3 cards of courses which on clicking
should open a youtube lecture.
You may either add a button to open or directly add the link to the card.
● It must be responsive.

4. Create a modal.
● A modal is a sort of pop up or box that appears on the web page as you click.
● It should be functional on laptops and mobile devices.
5. Is it a match?
● Design two tabs which should take input text and a button saying *match* .
● Both tabs will take strings as input and both tabs would be important, i.e., if the user tries
to press the match button without giving input to both tabs, an alert should pop up
displaying "add to another tab"
● On clicking the match button, if the entries of both tabs are the same, an alert message
of "Great Job" should appear. If not then the message should be "Uh oh, try again."

6. Memory Game:
Build a memory game using HTML, CSS, and JavaScript. The game should have a grid of
cards with hidden symbols, and users should try to match pairs of cards by flipping them
over. Use JavaScript to shuffle the cards and validate user inputs. Calculate the score.

7. PORTFOLIO WEBSITE
Design a portfolio website of yours that would have the following things.
● Responsive navbar (with logo).
● Home-page
*Bonus points would be given if you are able to add a functional button to download
your CV (it should download it in the file manager).*
● About me( showcasing your education and skills)
● Projects( you can have it as cards)
● Contact
Design a form asking for their formal information with a feedback form.
● Footer
Tip: Try to add as many animation effects as you can to make it look more attractive.

8. API-Driven Project:
Create a weather app using HTML, CSS, and JavaScript.
The app should display current weather conditions and allow users to search for weather
information for different locations.
9. Clone amazon prime video
Here attached is the screenshot of homepage of the same.

*You can also see the amazon homepage website for reference*

10. E-commerce Website:


Create an e-commerce website using HTML, CSS, and JavaScript
for the front end and Django/Node for the back end. The website should allow users to :
● Create a profile using the registration portal
● Login and Logout features
● Browse products
● Add items to a shopping cart
● Checkout.

*You can see below image for reference*


Resources:
1) HTML
a) https://www.w3schools.com/html/(Video)
b) https://www.youtube.com/watch?v=QXPWs00RD3A(docs)

2) CSS
a) https://www.youtube.com/watch?v=yfoY53QXEnI (Video)
b) https://www.youtube.com/watch?v=WyxzAU3p8CE (Video)
c) https://www.w3schools.com/css/default.asp (docs)

3) Javascript
a) https://www.youtube.com/watch?v=hdI2bqOjy3c (video)
b) https://www.w3schools.com/js/default.asp (docs)

4) Responsive Design
a) https://www.youtube.com/watch?v=srvUrASNj0s (video)
b) i) Flexbox:- https://www.youtube.com/watch?v=JJSoEo8JSnc (video)
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (docs)
ii) Grid: https://css-tricks.com/snippets/css/complete-guide-grid/
iii) Media Query: https://www.youtube.com/watch?v=j1AhSWFcZpg

5) Miscellaneous Resources:
https://gist.github.com/bradtraversy/61171a9b81586f5bc4c0ca1e2beb59ab
6) Git/Github: First 3-4 lectures/videos of
https://www.edx.org/course/cs50s-webprogramming-with-python-and-javascript
7) Django Playlist:
https://www.youtube.com/playlist?list=PL-51WBLyFTg2vW-_6XBoUpE7vpm
oR3ztO
https://www.youtube.com/playlist?list=PL4cUxeGkcC9ib4HsrXEYpQnTOTZ
E1x0uc
For further help: Code With Harry :
https://www.youtube.com/playlist?list=PLu0W_9lII9ah7DDtYtflgwMwpT3xmjXY9
Django Documentation: https://docs.djangoproject.com/en/4.0/
8) React Tutorial:
React Course - Beginner's Tutorial for React JavaScript Library [2022]
9) Node Tutorial: Node.js and Express.js - Full Course
Contact:

1. Gopu Abhinav Reddy Facebook Linkedin 7981589112


2. Saloni Shaw Facebook Linkedin 8100211720
3. Harsh Bansal Facebook Linkedin 9821391634
4. Kush Chaudhari Facebook Linkedin 7758869084
5. Anurag Pappula Facebook Linkedin 9121767554
6. Priyadarshi Shaket Facebook Linkedin 9693599754
7. Enugu Arjun Reddy Facebook Linkedin 8340974675

You might also like