DeveloperBreeze

Html Programming Tutorials, Guides & Best Practices

Explore 5+ expertly crafted html tutorials, components, and code examples. Stay productive and build faster with proven implementation strategies and design patterns from DeveloperBreeze.

Creating a Countdown Timer with JavaScript

Tutorial October 24, 2024
php

We need a function that takes the end time (the deadline) as input and calculates the difference between the current time and the deadline:

function getTimeRemaining(endtime) {
    const total = Date.parse(endtime) - Date.now();
    const seconds = Math.floor((total / 1000) % 60);
    const minutes = Math.floor((total / 1000 / 60) % 60);
    const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
    const days = Math.floor(total / (1000 * 60 * 60 * 24));

    return {
        total,
        days,
        hours,
        minutes,
        seconds
    };
}

Read More

Exporting Table Row Data to CSV in JavaScript

Tutorial October 24, 2024
php 

<table>
    <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Cherry</td>
        <td><a class="export-btn">Export</a></td>
    </tr>
    <tr>
        <td>Dog</td>
        <td>Cat</td>
        <td>Bird</td>
        <td><a class="export-btn">Export</a></td>
    </tr>
</table>
  • Each row (<tr>) contains three data cells (<td>), followed by an "Export" button that will trigger the export action.
  • The button has a class of export-btn, which we will use to attach event listeners.

Read More

دليل شامل لتطوير الويب: بناء موقع بسيط باستخدام HTML, CSS وJavaScript

Tutorial September 27, 2024
javascript css html

HTML هي لغة ترميز تساعدك في إنشاء الهيكل الأساسي لصفحة الويب. إليك الهيكل الأساسي لموقع ويب بسيط:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>موقعي الشخصي</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>مرحباً بكم في موقعي</h1>
        <nav>
            <ul>
                <li><a href="#home">الرئيسية</a></li>
                <li><a href="#about">من أنا</a></li>
                <li><a href="#contact">تواصل معي</a></li>
            </ul>
        </nav>
    </header>

    <section id="home">
        <h2>مقدمة</h2>
        <p>هذا هو موقعي الشخصي حيث أشارك فيه أفكاري ومشاريعي.</p>
    </section>

    <section id="about">
        <h2>من أنا</h2>
        <p>أنا مطور ويب مهتم بتقنيات الويب الحديثة وتطوير التطبيقات.</p>
    </section>

    <section id="contact">
        <h2>تواصل معي</h2>
        <form id="contact-form">
            <label for="name">الاسم:</label>
            <input type="text" id="name" name="name" required>

            <label for="email">البريد الإلكتروني:</label>
            <input type="email" id="email" name="email" required>

            <label for="message">رسالتك:</label>
            <textarea id="message" name="message" required></textarea>

            <button type="submit">إرسال</button>
        </form>
    </section>

    <footer>
        <p>© 2024 جميع الحقوق محفوظة</p>
    </footer>

    <script src="scripts.js"></script>
</body>
</html>

Read More

HTML5 Cheatsheet

Cheatsheet August 03, 2024
html

  • <h1> to <h6>: Headings, with <h1> as the most important.
  • <p>: Paragraph.
  • <br>: Line break.
  • <hr>: Thematic break (horizontal rule).
  • <strong>: Important text (bold).
  • <em>: Emphasized text (italic).
  • <small>: Smaller text.
  • <mark>: Highlighted text.
  • <blockquote>: Long quotations.
  • <code>: Inline code.
  • <pre>: Preformatted text (preserves whitespace).

HTML supports ordered, unordered, and description lists:

Read More