21 Valuable HTML & CSS Code Snippets for Web Developers

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.

Also published here.