Code Snippets

A collection of useful code snippets for various programming languages

HTML

Responsive Navbar

A responsive navbar with mobile menu toggle

<nav class="bg-white shadow-sm">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex items-center">
        <a href="#" class="text-xl font-bold text-gray-900">Logo</a>
      </div>
      <div class="hidden md:flex items-center space-x-8">
        <a href="#" class="text-gray-500 hover:text-gray-900">Home</a>
        <a href="#" class="text-gray-500 hover:text-gray-900">About</a>
        <a href="#" class="text-gray-500 hover:text-gray-900">Contact</a>
      </div>
    </div>
  </div>
</nav>

Card Component

A responsive card component with image and content

<div class="bg-white rounded-lg shadow-sm overflow-hidden">
  <img src="image.jpg" alt="Card image" class="w-full h-48 object-cover">
  <div class="p-6">
    <h3 class="text-xl font-semibold text-gray-900 mb-2">Card Title</h3>
    <p class="text-gray-600 mb-4">Card description goes here</p>
    <a href="#" class="text-indigo-600 font-medium">Learn more</a>
  </div>
</div>

CSS

Flexbox Center

Center elements horizontally and vertically using flexbox

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Responsive Grid

A responsive grid layout using CSS Grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

JavaScript

Fetch API

Make HTTP requests using the Fetch API

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Debounce Function

A debounce function to limit the rate at which a function can fire

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

Python

Flask App

A simple Flask web application

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello, World!'

if __name__ == '__main__':
    app.run(debug=True)

Read JSON File

Read and parse a JSON file in Python

import json

with open('data.json', 'r') as f:
    data = json.load(f)
    print(data)

About This Page

This page collects useful code snippets for various programming languages, making it easy for developers to quickly find and use code snippets for common tasks.

All code snippets are tested and ready to use in your projects.