ICP2 - VINEETHREDDYSHERI/WebMobile-2021Fall GitHub Wiki

Welcome to In-class Programming Assignment-2

Objective: Getting to know about the HTML tags and styling the page using CSS as per the given problem requirement.

Implementation:

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.

Created index.html file. Made use of headings(h1,h4), paragraphs(p), unordered(ul) and ordered(ol) list tags. The below screenshot also contains 10 block level elements (article, header, section, hr, ol, ul, li, p, h1, h4) and 5 inline elements (b, i, br, abbr, strong).

The below screenshots contains div and snap elements. And also video and image tags. The image when clicked, will redirect to the image location in new tab.

Output

CSS Task

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

2.As shown in 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.

Downloaded the Inclass code. Added the Notification and Profile Icon at top right end of the screen.

Added the images of the recently opened tabs and on click of the image will route to that particular page.

CSS changes as per the recently Opened tabs.

Output

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

•Each color grid should be 70 × 70

•The cube should be center-aligned

•No mandatory of colors (you can choose colors you like)

Made use of div, snap and CSS elements to create the cube-shaped color grid. The below screenshots contains HTML changes.

The below two screenshots contains CSS changes.

Output

Video Link: ICP2 VideoLink

Conclusion:

In these ICP2, I learned about the various HTML tags (block and inline elements). And styling the page using CSS and their property that will help in changing the backgroundColor, alignment, margin, color, transform etc.

The challenge I faced is while trying to align the Question3 cube-shaped grid vertically center. It got resolved by using the vh value instead of % or pixel value. Every page will be divided into 100vw width and 100vh height irrespective of screen Size.