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?