Web developers are always looking for ways to improve their workflow and make their lives easier. In this article, we’ll introduce 21 useful & 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. HTML CSS 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>
    
  </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">

</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

This story contains new, firsthand information uncovered by the writer.

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

21 Valuable HTML & CSS Code Snippets for Web Developers

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps