Web developers are always looking for ways to improve their workflow and make their lives easier. In this article, we’ll introduce 21 useful HTML & CSS code snippets that can help streamline everyday web development tasks. These code snippets are practical, time-saving, and can be easily customized to suit your needs.
Discover a Collection of Practical Code Snippets
1. Responsive Navigation Menu
A responsive navigation menu is essential for a seamless user experience on different devices. Here’s a simple HTML & CSS snippet to create a responsive navigation menu:
<nav class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
.navbar {
display: flex;
justify-content: space-around;
background-color: #333;
padding: 1rem;
}
.navbar a {
color: white;
text-decoration: none;
padding: 0.5rem;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
2. CSS Reset
Applying a CSS reset can help ensure that your website looks consistent across different browsers. Here’s a simple CSS reset snippet to get started:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
3. Center an Element Vertically and Horizontally
Use Flexbox to easily center an element both vertically and horizontally within its container:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
4. CSS Tooltip
Create a simple tooltip using only HTML and CSS:
<span class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</span>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
5. Stylish Buttons
Add some flair to your buttons with this simple CSS snippet:
.button {
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
padding: 10px 24px;
border-radius: 8px;
transition: background-color 0.3s;
}
.button:hover {
background-color: #45a049;
}
6. Smooth Scroll to Top
Implement a smooth scroll effect to navigate to the top of your webpage:
<a href="#top" class="scroll-to-top">Back to Top</a>
html {
scroll-behavior: smooth;
}
.scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
text-decoration: none;
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border-radius: 8px;
}
7. Responsive Image Gallery
Create a responsive image gallery using CSS Grid:
<div class="image-gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
</div>
.image-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
.image-gallery img {
width: 100%;
height: auto;
}
8. Fixed Table Header
Keep the table header fixed while scrolling through the table content:
<table class="fixed-header">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<!-- Table Content -->
</tbody>
</table>
.fixed-header {
width: 100%;
border-collapse: collapse;
}
.fixed-header thead {
position: sticky;
top: 0;
background-color: #f1f1f1;
}
9. Fullscreen Background Image
Set a fullscreen background image for your webpage:
body {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
}
10. Sticky Footer
Keep your footer at the bottom of the page even when there’s not enough content to fill the viewport:
<div class="page-container">
<div class="content-wrap">
<!-- Your main content here -->
</div>
<footer>Footer content</footer>
</div>
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content-wrap {
flex: 1;
}
footer {
background-color: #f1f1f1;
padding: 1rem;
}
11. Card Layout
Create a modern card layout for showcasing content using Flexbox:
<div class="card">
<img src="image.jpg" alt="Card image">
<div class="card-content">
<h3>Card Title</h3>
<p>Card description.</p>
</div>
</div>
.card {
display: flex;
flex-direction: column;
width: 300px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
.card img {
width: 100%;
height: auto;
}
.card-content {
padding: 1rem;
}
12. Breadcrumbs
Create a simple breadcrumb navigation using HTML and CSS:
<nav class="breadcrumbs">
<a href="#home">Home</a> >
<a href="#section1">Section 1</a> >
<a href="#section2">Section 2</a>
</nav>
.breadcrumbs {
padding: 1rem;
}
.breadcrumbs a {
text-decoration: none;
color: #3498db;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
13. Simple Accordion
Create a simple accordion using HTML and CSS:
<button class="accordion">Section 1</button>
<div class="panel">
<p>Section 1 content.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Section 2 content.</p>
</div>
.accordion {
cursor: pointer;
width: 100%;
text-align: left;
outline: none;
transition: 0.4s;
}
.panel {
display: none;
overflow: hidden;
transition: max-height 0.2s;
}
14. Simple Pagination
Create a simple pagination navigation using HTML and CSS:
<nav class="pagination"><a href="#prev">« Prev</a>
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#4">4</a>
<a href="#next">Next »</a>
</nav>
.pagination {
display: inline-block;
padding: 1rem;
}
.pagination a {
color: #3498db;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
}
.pagination a:hover {
background-color: #f1f1f1;
}
.pagination a.active {
background-color: #3498db;
color: white;
border: 1px solid #3498db;
}
15. Responsive Video Embed
Create a responsive video embed using HTML and CSS:
<div class="video-container">
<iframe src="https://www.youtube.com/embed/your_video_id" frameborder="0" allowfullscreen></iframe>
</div>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
16. CSS Loader
Create a simple CSS loader for your website:
<div class="loader"></div>
.loader {
border: 8px solid #f3f3f3;
border-radius: 50%;
border-top: 8px solid #3498db;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
17. Parallax Scrolling Effect
Add a simple parallax scrolling effect to your webpage:
<div class="parallax"></div>
.parallax {
background-image: url("your-image.jpg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
18. Flexbox Grid System
Create a simple Flexbox grid system for your website:
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div><div class="col">Column 3</div>
</div>
.row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.col {
flex: 1;
padding-left: 15px;
padding-right: 15px;
}
19. Animated Scroll Indicator
Create an animated scroll indicator to show users how far they’ve scrolled:
<div class="progress-container">
<div class="progress-bar"></div>
</div>
.progress-container {
width: 100%;
height: 8px;
background-color: #f3f3f3;
position: fixed;
top: 0;
}
.progress-bar {
height: 8px;
background-color: #3498db;
width: 0%;
}
20. CSS Filter Effects
Apply CSS filter effects to your images:
<img src="your-image.jpg" alt="Your Image" class="filter">
.filter {
filter: grayscale(100%);
}
21. Google Fonts Integration
Integrate Google Fonts into your website:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
body {
font-family: 'Roboto', sans-serif;
}
These 21 useful HTML and CSS code snippets can help you enhance your web development projects and streamline your workflow. Keep them handy for easy reference, and don’t hesitate to modify and adapt them to fit your specific needs.
