CS699: Software Foundation Lab
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 this file:

CS699_Lab1_Linux_Basics.pdf

Additional Resources:

NOTE: 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:

Aim

Create a fancy webpage about yourself on 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 at least 5 fields namely Home​, Projects, Hobbies​, Education, Register.

Few standards you must follow

  • Home

    • A descriptive introduction of yours (keep in mind this is your first impression and you would want it to be good)

    • At least one image [preferably yours, but not mandatory]

    • An introduction Video [preferably the about yourself, length should be at least 1 minutes 30 secs]. It's best way for your friends to know about you. So be creative and expressive.

    • 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]

  • Projects

    • Ordered list / Bulleted list of projects you have done.
  • Hobbies

    • Use check-boxes to give the option to choose hobbies and a submit button.
      • Clicking on submit a popup should take confirmation from the user showing all selected hobbies.

      • When the user confirms, a description of all selected hobbies should appear on webpage.

  • Education​

    • A table of your academic record
  • Register

    • 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​).

Tools to explore

  • CSS

    • Make use of class and id selectors
    • Try all ways to insert CSS
    • Inline: Properties are specified inside the HTML tag
    • Internal: Properties are specified within the head section
    • External: Properties are specified in an external style sheet
    • Change background and font colors
    • Play around with font sizes and family
    • Center align the table as a whole
    • 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:

  • 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.
  • Please ensure the web page is rendering properly in all the browsers [chrome, Firefox, Edge (yes, even Edge!)].
  • If you are using any images or videos or icons, please cite the source of the same.
  • You need to put links to all the references you have referred for making this webpage in a readme​ file.
  • 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 named as ​<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:

    • 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]
    • 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.


ALL THE BEST