Task I: Personal Website using HTML/CSS

Due Date: 28 January Build your personal website using HTML and CSS. The website must contain the following

• Landing page
  This is the page that is seen when the link to your website is clicked.
• Education page
• Hobbies/Interests page
  May give links to external sites that are related to your stated interests and hobbies. For example, if you are interested in cricket, you may give a link to cricinfo website.
• Technical interests page
• Miscellaneous page (optional)
  You may give any additional information that you find interesting.
• Contact page

Your grade will be based on answers to the following questions (which you may incidentally link from your webpage!). Otherwise, you can write them on paper and hand over to your TA or instructor.

Questions

1. What are the two main sections of an HTML file?
2. Did you separate your HTML and CSS into separate files or put the CSS within the HTML file?
   • If you separated them, which HTML tags did you use to link the two?
   • If you didn't separate them, what HTML tags did you use to specify the CSS content?
   • In which section of the HTML file, did you put them?
3. Did you use any W3schools template? If so, which template did you use? How did you link it with your HTML file?
4. Did you use any web fonts? If so, which ones and how did you link them into your HTML file?
5. Is your website organised as a single HTML file with sections or multiple HTML files linked through anchor tags
6. How much time did you spend choosing the fonts and colour combinations 😅?
7. Does your webpage have a sidebar or a drop-down menu? If so, what HTML tags did you use?
8. If you answered YES to the previous question, then answer this.
   Did you see any javscript code for such features? Were you able to understand it?
9. Is your webpage responsive? What do you mean by it?

Task II: Dynamic and Responsive Webpages

Due Date: 11 February Add some dynamic aspects to your website created in Task I. Using javascript, add some elements which allow users to interact with your website.

Follow the W3 Schools Tutorial on Javascript

Pick one of the following two, implement your ideas and show them to your instructor or the TA before leaving the lab.

• Look at the School Website and take any one section such as Academics, Research, Activities, etc. Use the interactive elements that you learnt and redesign the section you have chosen. You don't need to fill in all the information but must show at least a skeleton in sufficient detail. It should be possible to see the different interactive aspects clearly and how they are useful to someone reading the webpage.
• Go back to your webpage created as Task I. Add interactive elements to one of its sections so that it is now filled with appropriate information. For example, if you have a Hobbies or any other section in your webpage, see how you can add interactive elements and make that section complete.
• Our School time-table is very big and complex with many rows per day of classes. As a result, displaying it even on a big screen is not sufficient to show the class details clearly. Redesign the time-table of our school using interactive elements so that the information needed at any given time is clearly shown.

Be creative! For example, we can think of attaching course homepages, whenever available, with the time-table. What other ideas can you come up to make the sections/webpages more lively? Explain your design features clearly and demonstrate their functioning. If sufficiently good, we may attach your work(s) to the School webpage for displaying better the sections.

Questions

Answer the following questions as per your webpage design and not based on generic templates found on the WWW.

1. Which website/section of the website did you choose? Why?
2. What did you identify as weaknesses in that page?
3. What are your main ideas for improving the page?
4. Which interactive elements did you incorporate into your design?
5. Give two specific examples from the page that you think are better after your redesign. Explain why.
6. Which mouse and keypress elements did you use?
7. How does mouseover event differ in its effects from mouseenter and mouseleave events? You can use WWW searches to answer this question.

Task II (Extra): Practice your HTML/CSS/JS Skills

Due Date: 18 February Create a specific website today to showcase your CV/Bio-data in an attractive manner.

Follow the W3 Schools Tutorial on Javascript as well as the W3 Schools CSS templates in this lab.

Create an online HTML/CSS version of your CV/Biodata. You must use the parallax effect. The background must be your photo over which the different sections of the CV slide showing the parallax effect. Also, divide your CV page into two vertical parts where the left part occupies 1/4 of the width and the right part is the other 3/4. The left part contains clickable anchors to the different sections of your CV, such as education, projects, hobbies, etc. The right half is the actual contents of the CV. There should also be two special links to change the colour combination of your CV, e.g. from the standard black text on white screen to, say, blue text on a cream coloured screen and back to normal.

Be creative! Try other ways of using the parallax effect to make your CV more interesting. Think of how you can use colours to project the left and right parts of the webpage more effectively. Think of how you want to use responsiveness to make the CV look good on both big and small screens.

You must name your webpage as <roll number>_cv.html and place it in your public_html_directory. Otherwise, it may not be graded at all!

Questions

Answer the following questions as per your webpage design and not based on generic templates found on the WWW.

1. Did you use any W3 Schools templates or did you design the parallax on your own.
2. Which sections did you put in your CV?
3. What colour combinations did you give? Anything more than the usual dark mode?
4. Which interactive elements did you incorporate into your design?
5. Briefly explain your Javascript code for interactive portions of the webpage.
6. Did you use different coloured backgrounds to distinguish between the left and right parts? Which colours and why?

Task III: Virtual Reality in Webpages using AFrame Technology

Due Date: 5 March We do basic experiments to understand the use of AFrame primitives for creating VR environments.

Follow the AFrame Website.

AFrame provides a set of HTML primitives for VR and can be used as standard HTML tags with attributes. Go to the "DOCS" section in the website above and specifically learn using the following primitives:

• a-box
• a-curvedimage
• a-circle
• a-curvedimage
• a-link
• a-plane
• a-sky
• a-video

Create a VR environment in which some or all of the above are present and demo it to the TA or the instructor before leaving the lab.

In particular, create a room of length 4m, width 3m and height 3m. On one of the walls, place a display panel showing an image or a video. There can be other objects in the room as long as they are arranged nicely. The definition of nice is left entirely to you! If it is a video, the video should toggle playing when you click on it.

Here is a video for your use if you do not have any uploaded into your computer.

This file contains a HTML stub into which you can add your VR stuff. Download this file using the right mouse button. You cannot just click it and get the file.

Task III (Final): Create a VR Environment

Use your AFrame Technology skills and create any one of the following. Create a file

<your roll number>_VR.html in your public_html directory. This file will be used in evaluating this lab task.

---

This task must be completed and be ready for evaluation
NO LATER THAN 6:00 PM on Sunday, 8 MARCH 2026.

---

• Online Lecture Room: Create a room as shown in the figure below. The room must have four walls, a floor and a ceiling. The walls must all have the same colour while the floor and the ceiling must be each different. Use any resource available on the WWW or use appropriate colours. The room must have lxwxh of 9x6x5 metres (Note the new height; earlier it was given as 3.5m by mistake.). There must be a raised stage of dimensions 7x1.5x1.2 metres against the backwall. There is a display panel on the backwall whose width is 7m, height is 3.25m and thickness is 5cm. The display panel shows videos on the left side in an area given by 5.15mx3m. On the right are 4 to 6 buttons for 4 to 6 areas of computer science, e.g. Intro to CS, OOP, OS and COA. When the user clicks a button, it displays an appropriate video in the designated area on the left. Video playing is toggled by clicking on the video area. You are free to choose your own CS areas and videos from the WWW.
• Poster Display Session: Create a room showing 12 poster stands. You can get poster stands using the Javascript file scis_posters.js which may be linked as
  <script src="https://scis.uohyd.ac.in/~chakcs/WebVRAssets/scis_poster.js">
  </script>
  Poster stands are primitive objects and may be used the same way as any AFrame object, i.e. <a-standee attribute=value></a-standee> The attributes are
  • position: you already know this!
  • rotate: y-axis rotation rotates the whole stand so that you place it parallel to walls, etc. x-axis rotation causes the display area to tilt either forward or back. Try rotate="10 85 0" for fun!
  • aspect: is the ratio of the width to height. If greater than 1, the poster stand is in landscape mode; otherwise, portrait mode.
  • size: left as an exercise for you to figure out!
  • poster: the poster that you wish to display on the stand. It should be an image.
  • color: the colour of the poster stand display area.
  Create an interesting display of posters about Computer Science and may be your courses. Ask the PhD students for their recent posters in the India AI Impact Summit. May be some of them will give you their poster images and you can display them on your stands.
• Create Object Primitives: This is a little bit more challenging. You need to create any two of the following objects using the AFrame primitives.You cannot use any 3D models or modelling software such as blender! Once you create them place them in a VR environment alongside the other AFrame primitives. You can look at the scis_poster.js file for inspiration!
  • Office Desk with Drawers Look in any of the faculty offices for inspiration or search the WWW for simple office desks like the picture below. Be creative; use your own style and colours!
  • Almirah with shelves See how you can simulate glass effect. Look at the picture below as an example.
  Again, you can use your own style and colours.
  • Chairs Try the one below.

Task IV: Building Python Applications for the Web - Part I

We use Flask Framework for buidling Python applications for the web.

The first part, that is today's work, is to use pandas module in Python to read, process and analyse csv files. We then port the data from the CSV files to the web using Flask framework, thus demonstrating how to build a basic application using Python and the web. In the next week, we see how to combine reactjs with Python and Flask to build full-fledged, powerful web applications.

You may use the following links to learn how to install pandas and Flask, and build applications.

YOU MUST SHOW THAT YOU HAVE BUILT THE SIMPLE APPLICATION GIVEN BELOW BEFORE LEAVING THE LAB TODAY!

• Installing Flask and Pandas
• Learning Pandas in Python
• Building a Flask Application with Python
• Yet another nice tutorial for Flask Applications and Python

Ask your TA, the instructor or the System Administrators if you need help in setting up a virtual environment.

Here are two csv files that you can use in your experiments today.

• SciMago Journal data for the years 1996-2022
  This file contains information about the number of documents, citations, self-citations and such information for the years 1996 - 2022 for several countries. It offers a large scope for analysis.
• Attendance Data for some class in 2018
  This file contains attendance data for the students in a certain class in the year 2018. You can do some preliminary analysis on this data. Think of how you would like to display this data because it is something that you can relate to!

Do the following today:

• Create a file csv-data-app.py that will have a function to read one of the csv files above and send it via Flask to a HTML template file.
• Create a template file that will display the data that you read from the CSV file in a nice looking table via the Flask server port. This is the absolute minimum that you MUST complete today!
• You may also want to try displaying a Python plot from the data via Flask. Follow the steps in this link for finding out how to display Python plots via Flask.
• (Extra for fun and help with next week's experiments) Create a copy of any of your earlier webpages with the data displayed in that page (via the Flask server, of course!)

Task IV: Building Python Applications for the Web - Part II

In the lab today, we will continue building web applications with Python: we add react.js to the mix today. In other words, we will learn how to develop a web application with Python as the back-end, Flask as the framework and with react as the front-end. In part I, we used simple HTML/CSS for the front-end.

For today's lab, read this version of a great blog by Miguel Grinsberg. You need to implement the application described in the the link and show its working to the instructor or the TA before leaving the lab. Also, make sure you answer the questions given below.

1. What is npm and, if you have to install it, do you need super-user permissions to do so?
2. What did the npx command that you ran, do?
3. What are some of the options/commands that you can run with npm command?
4. What happens if you change the argument to app.route() in your .py file?
5. What is the basic feature of JSON format and why has this format become very popular?
6. What is the role of template file in a Flask application?
7. Why did you add the line about port 5000 in your package.json file?
8. Did you try displaying the output of any other Python program through Flask and react on a webpage? If so, which output did you try?

In this lab, you will see how Python output is displayed by react on a webpage. In the next lab, you will learn how user input from a react webpage is sent to a Python backend and two-way communication occurs between Python and react.

By the way, what we have been doing in the previous lab, this one and the next is what the industry calls full-stack web application development. There is a fairly decent incentive for you to learn these skills well in the lab – industry pays you quite well!

Task IV: Building Python Applications for the Web - Part III

This is the third and the last part of our experiments on full-stack applications development. In this lab, we will implement two-way communication between the React Frontend and the Python+Flask backend. The frontend runs on Port 3000 while the backend runs at Port 5000. The initial part of the experiment remains the same as in the previous lab. You don't need to install any software but activate your virtual environment by running the activate command. Then, move into the correct directories and proceed with today's lab.

While there are no specific links for you to get help, a simple search using a phrase that says, "input to python+Flask backend from react frontend" is sufficient!

There are two tasks to complete in this lab.

YOU MUST DEMO BOTH THE TASKS
TO THE TA OR THE INSTRUCTOR
BEFORE LEAVING THE LAB

1. Implement a Currency Convertor: Converts a specified number of US dollars into INR using the specified conversion rate.

   Create a new Python application, usdinr.py which takes the number of dollars and conversion rate as inputs and then returns their value in Indian rupees. The inputs must come from the React frontend (described in the next paragraph) and the output must be displayed on the same frontend.

   Copy the earlier App.js file into another file (e.g. time.js). Edit the App.js file from the last experiment to create the webpage shown below. The default conversion rate is $1 = INR 83.50. Once you hit the convert button, it will give the answer as Result. The basic webpage is on the left while the output display is on the right.

    
2. Implement a .csv file reader: Reads a .csv filename and displays the contents as a table.

   Create a new Python application, csv-read.py which takes a filename as input from a React frontend (see below), uses Pandas to read it into a dataframe and then returns the dataframe to the React frontend. The display must be in the form of a table.

   Create an App.js file that displays the screen below so that a user can enter a .csv filename and then displays its contents as a table. You will have to search the web to see how a dataframe in JSON format can be displayed as a table by React. The basic webpage is on the left while the output page is on the right.