Web_ICP2 - Ggr9d/Web-and-Mobile-Programming GitHub Wiki

In Class Programming 2:

HTML task: 1.Create an HTML document named "index.html"

I have created an HTML document named “index.html” to perform HTML task as part of ICP2.

Code: https://github.com/Ggr9d/Web-and-Mobile-Programming/blob/main/ICP2/Documentation/HTML%20task/code1.png

  1. The page generated from the above HTML file has paragraphs, headings, unordered list, ordered list and two div and span elements as per below screenshot.

Code: https://github.com/Ggr9d/Web-and-Mobile-Programming/blob/main/ICP2/Documentation/HTML%20task/code2.png

Output: https://github.com/Ggr9d/Web-and-Mobile-Programming/blob/main/ICP2/Documentation/HTML%20task/output1.png

• Used at least four block and inline elements

Code: https://github.com/Ggr9d/Web-and-Mobile-Programming/blob/main/ICP2/Documentation/HTML%20task/code3.png

Output: https://github.com/Ggr9d/Web-and-Mobile-Programming/blob/main/ICP2/Documentation/HTML%20task/output2.png

• Got the images at the appropriate locations in the HTML file and are clickable, it redirects to the location of image in the new tab.

Code: https://github.com/Ggr9d/Web-and-Mobile-Programming/blob/main/ICP2/Documentation/HTML%20task/code4.png

Output: https://github.com/Ggr9d/Web-and-Mobile-Programming/blob/main/ICP2/Documentation/HTML%20task/output3.png

• Placed the video and it has controls like play, pause and forward etc.

https://github.com/Ggr9d/Web-and-Mobile-Programming/blob/main/ICP2/Documentation/HTML%20task/output4.png

CSS task:

Task1: Add the notifications icon and your image in the corner of the page and the recently opened tabs below the search bars of Google. In order to do this task, I have used the source code provided in class as a reference and have included the notifications icon and my profile picture to the code.

HTML code https://github.com/Ggr9d/Web-and-Mobile-Programming/blob/main/ICP2/Documentation/CSS%20task1/code1.png

https://github.com/Ggr9d/Web-and-Mobile-Programming/blob/main/ICP2/Documentation/CSS%20task1/code2.png

CSS code: https://github.com/Ggr9d/Web-and-Mobile-Programming/blob/main/ICP2/Documentation/CSS%20task1/css%20code.png

Output: https://github.com/Ggr9d/Web-and-Mobile-Programming/blob/main/ICP2/Documentation/CSS%20task1/output.png

Task2:

I have used the div, span and the CSS elements to generate a cube as shown in the output screenshot.

HTML Code: https://github.com/Ggr9d/Web-and-Mobile-Programming/blob/main/ICP2/Documentation/CSS%20task2/code.png

CSS code: https://github.com/Ggr9d/Web-and-Mobile-Programming/blob/main/ICP2/Documentation/CSS%20task2/css%20code.png

Output: https://github.com/Ggr9d/Web-and-Mobile-Programming/blob/main/ICP2/Documentation/CSS%20task2/output.png

Video link: https://youtu.be/LP8ZE-i6_gg