w3resource

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

HTML-CSS Practical [16-30 exercises with solution]

16. Using HTML, CSS creates a horizontally scrollable container that will snap on elements when scrolling. Go to the editor


Click me to see the solution

17. Using HTML, CSS ensures that an element self-clears its children. Go to the editor


Click me to see the solution

18. Using HTML, CSS creates an input with a visual, non-editable prefix. Go to the editor


Click me to see the solution

19. Using HTML, CSS changes the appearance of a form if any of its children are focused. Go to the editor


Click me to see the solution

20. Using HTML, CSS customizes the scrollbar style for elements with scrollable overflow. Go to the editor


Click me to see the solution

21. Using HTML, CSS applies styles to an element when in fullscreen mode. Go to the editor


Click me to see the solution

22. Using HTML, CSS displays a hamburger menu which transitions to a cross button on hover. Go to the editor


Click me to see the solution

23. Using HTML, CSS reveals an interactive popout menu on hover/focus. Go to the editor


Click me to see the solution

24. Using HTML, CSS fades out the siblings of a hovered item. Go to the editor


Click me to see the solution

25. Using HTML, CSS evenly distributes child elements within a parent element. Go to the editor


Click me to see the solution

26. Using HTML, CSS vertically and horizontally centers a child element within its parent element, using display: table. Go to the editor


Click me to see the solution

27. Using HTML, CSS horizontally and vertically centers a child element within a parent element using flexbox. Go to the editor


Click me to see the solution

28. Using HTML, CSS creates a polka dot background pattern. Go to the editor


Click me to see the solution

29. Using HTML, CSS creates a checkerboard background pattern. Go to the editor


Click me to see the solution

30. Using HTML, CSS creates a zig zag background pattern. 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.



HTML-CSS: Tips of the Day

How can I show dots ("...") in a span with hidden overflow?

For this you can use text-overflow: ellipsis; property. Write like this

span {
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>

Ref: https://bit.ly/2RqEbdh