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
2. Using HTML, CSS change the styling of text selection. Go to the editor
3. Using HTML, CSS create display an image overlay effect on hover. Go to the editor
4. Using HTML, CSS create display a text on top of an image using an overlay. Go to the editor
5. Using HTML, CSS create a list with floating headings for each section. Go to the editor
6. Using HTML, CSS create a custom hover and focus effect for navigation items, using CSS transformations. Go to the editor
7. Using HTML, CSS create a scrollable container that will snap on elements when scrolling. Go to the editor
8. Using HTML, CSS, JavaScript create a hover effect where the gradient follows the mouse cursor. Go to the editor
9. Using HTML, CSS apply a perspective transform with a hover animation to an element. Go to the editor
10. Using HTML, CSS create a staggered animation for the elements of a list. Go to the editor
11. Using HTML, CSS, JavaScript create a typewriter effect animation. Go to the editor
12. Using HTML, CSS create a pulse effect loader animation using the animation-delay property. Go to the editor
13. Using HTML, CSS create a bouncing loader animation. Go to the editor
14. Using HTML, CSS create a rotate effect for the image on hover. Go to the editor
15. Using HTML, CSS create an animated underline effect when the user hovers over the text. Go to the editor
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.
HTML-CSS: Tips of the Day
What is the difference between id and class in CSS, and when should I use them?
Example:
<div id="header_id" class="header_class"> Text </div>
#header_id {font-color:#fff} .header_class {font-color:#000}
(Note that CSS uses the prefix # for IDs and . for Classes.)
However color was an HTML 4.01 <font> tag attribute deprecated in HTML 5. In CSS there is no "font-color", the style is color so the above should read:
Example:
<div id="header_id" class="header_class"> Text </div>
#header_id {color:#fff} .header_class {color:#000}
The text would be white.
Ref: https://bit.ly/39Stv4P
- New Content published on w3resource:
- HTML-CSS Practical: Exercises, Practice, Solution
- Java Regular Expression: Exercises, Practice, Solution
- Scala Programming Exercises, Practice, Solution
- Python Itertools exercises
- Python Numpy exercises
- Python GeoPy Package exercises
- Python Pandas exercises
- Python nltk exercises
- Python BeautifulSoup exercises
- Form Template
- Composer - PHP Package Manager
- PHPUnit - PHP Testing
- Laravel - PHP Framework
- Angular - JavaScript Framework
- Vue - JavaScript Framework
- Jest - JavaScript Testing Framework