Resources

A curated collection of essential tools, libraries, and references to help developers code efficiently and effectively. Whether you’re building websites, experimenting with JavaScript, or styling layouts, these resources provide the foundations, shortcuts, and inspirations you need to accelerate your workflow.

Inside, you’ll find:

HTML & CSS Guides: Boilerplates, resets, and quick layout tips.
JavaScript Essentials: Snippets, event handling, and interactive components.
Fonts & Icons: Easy-to-use solutions like Google Fonts and Font Awesome.
Plugins & Utilities: Tools that simplify development and enhance productivity.

Think of this section as your developer’s survival kit—everything you need in one place to get projects done faster and smarter.

HTML

HTML Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Your website description here">
    <title>My Website</title>
    
    <!-- Google Fonts Example -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

    <!-- CSS -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <header>
        <nav>
            <div class="logo">Logo</div>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h1>Welcome to My Website</h1>
        <p>This is a sample HTML boilerplate.</p>
    </main>

    <footer>
        <p>&copy; 2025 My Website</p>
    </footer>

    <!-- JavaScript -->
    <script src="script.js"></script>
</body>
</html>

CSS

CSS GUIDE

/* Reset / Normalize */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-family: 'Roboto', sans-serif;
}

body {
    line-height: 1.6;
    background-color: #121212;
    color: #fff;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/*Flexbox*/

.flex {
    display: flex;
}

/* Direction */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }

/* Alignment */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }

/* Flex child */
.flex-grow { flex-grow: 1; }
.flex-shrink { flex-shrink: 1; }
.flex-wrap { flex-wrap: wrap; }

/*Grid*/

.grid {
    display: grid;
    gap: 1rem; /* spacing between items */
}

/* Columns */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Rows */
.grid-rows-2 { grid-template-rows: repeat(2, 1fr); }
.grid-rows-3 { grid-template-rows: repeat(3, 1fr); }

/* Place items */
.justify-items-start { justify-items: start; }
.justify-items-center { justify-items: center; }
.justify-items-end { justify-items: end; }

.align-items-start { align-items: start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: end; }

Mediaquery

BREAKPOINTS GUIDE

/* Traditional Media Queries - Desktop-First (Industry Standard + 480px) */

/* Extra Large Screens */
@media (min-width: 1200px) {
    /* CSS for large desktops / widescreens */
}

/* Large Screens */
@media (min-width: 992px) and (max-width: 1199px) {
    /* CSS for desktops */
}

/* Medium Screens */
@media (min-width: 768px) and (max-width: 991px) {
    /* CSS for tablets */
}

/* Small Screens */
@media (min-width: 576px) and (max-width: 767px) {
    /* CSS for small tablets / large phones */
}

/* Very Small Screens (480px) */
@media (min-width: 480px) and (max-width: 575px) {
    /* CSS for smaller phones */
}

/* Extra Small Screens */
@media (max-width: 479px) {
    /* CSS for phones smaller than 480px */
}