w3resource

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

HTML-CSS Practical [15 exercises with solution]

1. Using HTML, CSS create a styled checkbox with animation on state change. Go to the editor

Click me to see the solution

2. Using HTML, CSS change the styling of text selection. Go to the editor

Click me to see the solution

3. Using HTML, CSS create display an image overlay effect on hover. Go to the editor

Click me to see the solution

4. Using HTML, CSS create display a text on top of an image using an overlay. Go to the editor

Click me to see the solution

5. Using HTML, CSS create a list with floating headings for each section. Go to the editor

Click me to see the solution

6. Using HTML, CSS create a custom hover and focus effect for navigation items, using CSS transformations. Go to the editor

Click me to see the solution

7. Using HTML, CSS create a scrollable container that will snap on elements when scrolling. Go to the editor

Click me to see the solution

8. Using HTML, CSS, JavaScript create a hover effect where the gradient follows the mouse cursor. Go to the editor

Click me to see the solution

9. Using HTML, CSS apply a perspective transform with a hover animation to an element. Go to the editor

Click me to see the solution

10. Using HTML, CSS create a staggered animation for the elements of a list. Go to the editor

Click me to see the solution

11. Using HTML, CSS, JavaScript create a typewriter effect animation. Go to the editor

Click me to see the solution

12. Using HTML, CSS create a pulse effect loader animation using the animation-delay property. Go to the editor

Click me to see the solution

13. Using HTML, CSS create a bouncing loader animation. Go to the editor

Click me to see the solution

14. Using HTML, CSS create a rotate effect for the image on hover. Go to the editor

Click me to see the solution

15. Using HTML, CSS create an animated underline effect when the user hovers over the text. Go to the editor

Click me to see the solution

HTML-CSS-JAVASCRIPT 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 set a fixed width column with CSS flexbox?

You should use the flex or flex-basis property rather than width. Read more on MDN.

.flexbox .red {
  flex: 0 0 25em;
} 

The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space. It contains:

flex-grow: 0;     /* do not grow   - initial value: 0 */
flex-shrink: 0;   /* do not shrink - initial value: 1 */
flex-basis: 25em; /* width/height  - initial value: auto */ 

A simple demo shows how to set the first column to 50px fixed width.

.flexbox {
  display: flex;
}
.red {
  background: red;
  flex: 0 0 50px;
}
.green {
  background: green;
  flex: 1;
}
.blue {
  background: blue;
  flex: 1;
}

<div class="flexbox">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div> 

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