Scribd
Upload
6 views

CS699_Lab1_Problem_Statement

CS699_Lab1_Problem_Statement

Uploaded by

Kumar Shaswat
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

CS699_Lab1_Problem_Statement

CS699_Lab1_Problem_Statement

Uploaded by

Kumar Shaswat
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CS699 Lab 1: Linux Basics and HTML, CSS, JavaScript, Bootstrap

PART 1 - Linux Basics

Practice basic Linux commands you will require them in your next lab and throughout the
course. Some of the commands are listed in file “CS699_Lab1_Linux_Basics.pdf”

Additional Resources:
https://www.hostinger.in/tutorials/linux-commands
https://www.unixtutorial.org/basic-unix-commands

This part of the assignment does not require a submission from your end but is
necessary for practice. Please do not skip this as it is essential that you get comfortable with
BASh for the rest of the course.

PART 2 - HTML, CSS, JavaScript, Bootstrap

References:
● https://www.w3schools.com/html/default.asp
● https://www.w3schools.com/css/default.asp
● https://www.w3schools.com/js/default.asp
● https://www.w3schools.com/bootstrap4/default.asp

Create a fancy webpage about yourself for IITB CSE Department students info page using
HTML5​, CSS​, JavaScript and ​Bootstrap. [Make it as attractive as you can]

Your webpage should have a side navigation menu with atleast 5 fields namely Home​,
Projects​, Hobbies​, Education, Register.

Few standards you must follow:-


1. For Home
a. A descriptive introduction of yours (keep in mind this is your first impression
and you would want it to be good)
b. At least one image [preferably yours, but not mandatory]
c. An introduction Video [about yourself, length should be at least 1 minutes 30
secs]. It's the best way for your friends to know about you. So be creative and
expressive.
d. A ​contact me field with some of your social media profile links [hopefully, that
can be used for better reach by your colleagues], if you don’t want to put
social media links at least put your LinkedIn and ​gitcse profile link [links
should redirect to a new tab/window]
2. For Projects
a. Ordered list/ Bulleted list of projects you have done.
3. For ​Hobbies
a. Use checkboxes to give the option to choose hobbies and a submit button.
b. Clicking on submit a popup should take confirmation from the user showing
all selected hobbies.
c. When the user confirms, a description of all selected hobbies should appear
on the webpage.
4. For Education​
a. A table of your academic record
5. For Register
a. Have a form with text fields name​, email ​id and Tell me about Yourself (you
can add more...) for your fellow mates to tell you about themselves and share
their opinion on your webpage (you may embed a google form​).
CSS:

1. Make use of class and id selectors


2. Try all ways to insert CSS,
a. Inline: Properties are specified inside the HTML tag
b. Internal: Properties are specified within the head section
c. External: Properties are specified in an external style sheet
3. Change background and font colors
4. Play around with font sizes and family
5. Center align the table as a whole
6. All images should have a hover description

JAVASCRIPT/BOOTSTRAP:

In the Hobbies, clicking on submit a popup should take confirmation from the user showing
all selected hobbies. (Use JavaScript events)

The question that you need to ask yourself is whether your webpage renders the same on
mobile / tablet as it does on PC. Does it? Maybe not. Try adding ​Bootstrap​to your page so
that it renders the same everywhere. Pages with bootstrap get extra credit! ;)

NOTE:
1. As this submission will be your Homepage on IIT Bombay CSE website​. So make it
as informative and attractive as you can. Use this opportunity to create something
interesting instead of doing it just for the sake of an assignment.
2. Please ensure the web page is rendering properly in all the browsers [chrome,
Firefox, Edge (yes, even Edge!)].
3. If you are using any images or videos or icons, please cite the source of the same.
4. You need to put links to all the references you have referred for making this webpage
in a readme​file.
5. Every element specified in the problem description carries some marks(Until it is
specified optional) so make sure you include all of them.
Submission Guidelines:

For this problem statement, you are required to upload your completed webpage in a tar file
(​<roll_number>.tar.gz) and host your webpage on the CSE server.

Your submission must contain a README file with the following information.
README
├── <Roll Number>
├── <Name>
├── <CSE LDAP ID>
└── References
NOTE​: The CSE LDAP ID would be used to evaluate your assignment which you will
also host your webpage on the CSE server.

The submission directory structure should be as follows (nothing more nothing less):
<roll_number>
├── public_html
│ └── index.html
│ └── other html, css, js, files
│ └── images/icons
│ └── video
└── README

You can use the following command to create a tarball file (equivalent of zip):
tar -cvzf <roll_number>.tar.gz <roll_number>
where <roll_number>.tar.gz is the file you will create and <roll_number> is the folder
containing public_html [which contains all the html, css and js files, images, videos, ...] and
README file.

You can use the following command for hosting your webpage to CSE Server:
scp -r public_html/* <user_name>@mars.cse.iitb.ac.in:public_html/
where <user_name> is your CSE LDAP ID

NOTE​:
1. You will need to start IITB VPN to access the CSE Server. If you have not set up IITB
VPN yet, please follow this link​. [Use your Institute LDAP credentials to login]
2. If you are getting “ssh: connect to host mars.cse.iitb.ac.in port 22: No route to host
lost connection” error, just restart VPN.

You might also like