w3resource

HTML-CSS Practical Part-III: Exercises, Practice, Solution

HTML-CSS Practical [31-45 exercises with solution]

31. Using HTML, CSS creates a stripes background pattern. Go to the editor


Click me to see the solution

32. Using HTML, CSS creates a triangular shape with pure CSS. Go to the editor


Click me to see the solution

33. Using HTML, CSS creates a circular shape with pure CSS. Go to the editor


Click me to see the solution

34. Using HTML, CSS creates a responsive image mosaic. Go to the editor


Click me to see the solution

35. Using HTML, CSS creates a responsive layout with a content area and a sidebar. Go to the editor


Click me to see the solution

36. Using HTML, CSS aligns items horizontally using display: inline-block to create a 3-tile layout. Go to the editor


Click me to see the solution

37. Using HTML, CSS Displays a menu overlay when the user hovers over the image. Go to the editor


Click me to see the solution

38. Using HTML, CSS Fits an positions an image appropriately inside its container while preserving its aspect ratio. Go to the editor


Click me to see the solution

39. Using HTML, CSS hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible. Go to the editor


Click me to see the solution

40. Using HTML, CSS creates a masonry-style layout that is especially useful when working with images. Go to the editor


Click me to see the solution

41. Using HTML, CSS resets all styles to default values using only one property. Go to the editor


Click me to see the solution

42. Using HTML, CSS customizes the style of inline quotation marks. Go to the editor


Click me to see the solution

43. Using HTML, CSS truncates text that is longer than one line. Go to the editor


Click me to see the solution

44. Using HTML, CSS limit multiline text to a given number of lines. Go to the editor


Click me to see the solution

45. Using HTML, CSS creates a zoom in zoom out animation. Go to the editor


Click me to see the solution

HTML-CSS Editor:

See the Pen HTML-CSS-JAVASCRIPT-BLANK-EDITOR by w3resource (@w3resource) on CodePen.


More to Come !

Do not submit any solution of the above exercises at here, if you want to contribute go to the appropriate exercise page.



Share this Tutorial / Exercise on : Facebook and Twitter

HTML-CSS: Tips of the Day

How to change scroll bar position with CSS?

Using CSS only:

Right/Left Flippiing:

.Container
{
    height: 200px;
    overflow-x: auto;
}
.Content
{
    height: 300px;
}

.Flipped
{
    direction: rtl;
}
.Content
{
    direction: ltr;
}

Top/Bottom Flipping:

.Container
{
    width: 200px;
    overflow-y: auto;
}
.Content
{
    width: 300px;
}

.Flipped, .Flipped .Content
{
    transform:rotateX(180deg);
    -ms-transform:rotateX(180deg); /* IE 9 */
    -webkit-transform:rotateX(180deg); /* Safari and Chrome */
} 

Ref: https://bit.ly/3G9jCNU