Web ICP2 - abndnc/CS5590-0003 GitHub Wiki

HTML task:

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

2.The page should contain

•paragraphs•Headings

•unordered list

•ordered list

•at least two div & span elements

•at least four block and inline elements

•images at appropriate locations in the HTML file and should be clickable,i.e.,when you click the image, it should redirect you to the location of the image in a new tab

•any relevant video/YouTube video. The video should have controls like play, pause, etc.

I am new to Web programming tasks so I have played around with HTML and this is what I have gotten:

HTML1

HTML2

CSS Task:

1.Download the Source Code and run the starter code given in the'Inclass'folder with WebStorm.

CSSTask1

This one is pretty straight forward.

  1. As shown in the ImageI, add the notifications icon and your image in the corner of the page and the recently opened tabs below the search bars of Google.

CSSTask2

I have successfully managed to put the notification and my picture icon to the page despite that it took me fairly a while. With the help of developer tool(F12), I could find the place that I need to put the icon, which is in the nav-bar id. For the recent web task, I tried to recreate its format, which is the eight boxes, by using FlexBox and have them in the center.

  1. As shown in the Image II, create a 'cube-shaped color grid' using HTML
    , elements and CSS elements

    CSSTask3

    For this task, I have used 9 different span classes to color the box. For the size of them, I only need to modify the span parent with height and width to 70px.

⚠️ **GitHub.com Fallback** ⚠️