Be part of dojicreates.com Development - Submit Your HTML Tutorial

This page is currently under development.

Help Us Grow the HTML Section!

Yes po, I know this is a very ambitious project and involves a lot of work. Alam ko rin po na hindi ko kaya gawin ito mag-isa. Kaya naisip ko, mas magiging masaya at meaningful ito kung magiging bahagi kayo ng development na ito by submitting your own content in PDF format.

What's in it for you? Credit!
Yes po, I'm planning to include your name as credit in the title itself, just like what you'll see in the image below.

And hindi lang po basta simple credits lang, clickable link po ito!
You can include a clean link like your social media account if you want followers, or leave it blank if you prefer.

Your credits will remain as long as walang ibang submission na mas mahusay ang explanation. So just because a topic already has content doesn't mean you can't submit anymore. You're always welcome to try and submit your own version. With that said, we're now accepting your best works, send them in now!

Submission Guidelines

1. Content Requirements

Write tutorials in Filipino (Tagalog)
You can choose a topic from the scroll spy on the left side
Focus on one HTML topic per submission
Include practical HTML code examples with proper syntax
Provide step-by-step explanations
Show expected outputs (e.g., screenshots or descriptions)

Code Example Format

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple HTML Page</title>
</head>
<body>
    <h1>Welcome sa Aking Website</h1>
    <p>Ito ay isang simpleng halimbawa ng HTML page.</p>
    <a href="https://www.dojicreates.com">Bisitahin ang dojicreates</a>
</body>
</html>

2. Recommended HTML Topics

Recommended: Blank topics like this have more higher chances of getting selected.
HTML Semantic Elements
HTML Forms and Validation
HTML Canvas
HTML SVG
HTML Accessibility
HTML Responsive Design

How to Submit

Create a PDF of your HTML tutorial following our guidelines
Join our Facebook group
Upload/Post your PDF with topic name and brief description on our FB Group
Wait for feedback from our team

Example

Check our HTML | Setting Up as a model for your submission.

HTML Tutorial Submission Guidelines

Required Format for HTML Educational Content

Maintained by: dojicreates

Thank you for your interest in contributing educational HTML content to our platform! To maintain consistency and quality across all tutorials, please follow these detailed guidelines when preparing your submission.

Basic Page Structure

1. Tutorial Title

Always use this format: "HTML Tutorials: [Your Topic]"

Example: "HTML Tutorials: Semantic Elements"

2. Main Topic Header

Format your main heading as: HTML [Your Topic]

Example: HTML Semantic Elements

3. Introduction Paragraph

Provide a clear explanation of the concept with key terms in bold.

Example: "Ang semantic elements sa HTML ay mga elements na nagbibigay ng meaningful structure sa iyong webpage. Ginagamit ang mga ito para sa better accessibility at SEO optimization..."

Required Content Sections

1. Importance of the Topic

Section Header: Bakit Mahalaga ang [Your Topic]?

Content Format: List benefits with checkmarks ✔

Example:

✔ Nagbibigay ng mas malinaw na structure sa webpage.
✔ Pinapabuti ang accessibility para sa screen readers.
✔ Tumutulong sa search engine optimization (SEO).

2. How the Concept Works

Section Header: Paano Gumagana ang [Your Topic]?

Content Format: Step-by-step explanation with ordered or unordered lists

Example:

Sa HTML, ang semantic elements ay may tatlong pangunahing bahagi:

✔ Element declaration – tinutukoy ang semantic tag tulad ng <header> o <footer>.
✔ Content nesting – inilalagay ang content sa loob ng tamang semantic element.
✔ Proper usage – ginagamit ang element ayon sa layunin nito.

3. Code Example

Section Header: Halimbawa ng [Your Topic]

Content Format: Complete, valid HTML code in a code block with Tagalog comments

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic HTML Example</title>
</head>
<body>
    <header>
        <h1>Welcome sa Aking Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <article>
                <h2>Tungkol sa Amin</h2>
                <p>Ito ay isang halimbawa ng semantic HTML.</p>
            </article>
        </section>
    </main>
    <footer>
        <p>© 2025 dojicreates</p>
    </footer>
</body>
</html>

4. Code Explanation

Section Header: Paliwanag ng Code

Content Format: Bullet points explaining each important part of the code

Example:

<header> → Ginagamit para sa introductory content o navigation.
<main> → Naglalaman ng pangunahing content ng page.
<footer> → Naglalaman ng closing information tulad ng copyright.

5. Practical Application (Optional)

Section Header: [Variation] ng [Your Topic]

Content Format: Additional examples with short code snippets

Example:

Ang semantic elements ay maaari ding gamitin sa forms:

<form>
    <fieldset>
        <legend>Personal Information</legend>
        <label for="name">Pangalan:</label>
        <input type="text" id="name" name="name">
    </fieldset>
</form>

6. Expected Output

Section Header: Expected Output:

Content Format: Description or screenshot of rendered webpage

Example:

A webpage with a header containing a title and navigation menu, a main section with an article, and a footer with copyright information.

7. Success Message

Content Format: Encouraging message with checkmark and celebration emoji

Example:

✅ Kapag lumabas ang webpage na nakikita sa itaas, matagumpay mong nagawa ang iyong HTML semantic elements example! 🎉

Formatting Requirements

1. Text Formatting

Use bold text for all important concepts and terms
Use backticks for all code elements, tag names, attributes, and technical terms
Place all section headers in bold
Use consistent spacing between sections (one blank line minimum)

2. Code Blocks

Every HTML code example must be properly indented (2 or 4 spaces)
All code must be valid and render correctly in browsers
Add helpful comments in Tagalog to explain complex parts
Follow standard HTML5 formatting guidelines
Use consistent attribute naming (e.g., lowercase attributes)

3. Visual Elements

Use tables for comparing related concepts (e.g., different HTML elements)
Use ordered lists for sequential steps or processes
Use unordered lists for non-sequential items or options
Use checkmarks (✔) to highlight positive points or key features

4. Language Guidelines

Write primary content in Tagalog for better local understanding
Keep all technical terms in English and format them with backticks
Use a friendly, encouraging tone throughout the tutorial
Address the reader directly with second-person perspective (e.g., "mong", "mo")
Explain complex concepts with simple, clear language

Code Example Guidelines

Example of Well-Formatted HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Form Example</title>
    <style>
        /* Simpleng CSS para sa form styling */
        .form-container {
            max-width: 400px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <form>
            <fieldset>
                <legend>Magrehistro</legend>
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required><br><br>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required><br><br>
                <button type="submit">Submit</button>
            </fieldset>
        </form>
    </div>
</body>
</html>

Important HTML Code Formatting Rules:

Include proper DOCTYPE and meta tags (e.g., ` `)
Add comments in Tagalog to explain complex parts
Use consistent tag and attribute formatting (e.g., lowercase tags)
Include meaningful white space for readability
Add descriptive Tagalog comments for key elements
Use proper line breaks and indentation
Break long lines for better readability (80-120 characters maximum)
Maintain consistent naming conventions throughout code samples
Include complete HTML structure for runnable examples

HTML-Specific Guidelines

1. Document Structure

Always include necessary DOCTYPE and meta tags
Organize elements logically within <head> and <body>
Use proper semantic elements where applicable
Include comments for each major section's purpose

2. HTML Standards

Use HTML5 as the standard
Mention if specific features require modern browsers
Avoid deprecated tags or attributes
Ensure cross-browser compatibility

3. Common HTML Elements and Attributes

For forms, use standard elements like <input>, <label>, <form>
For images, demonstrate proper use of alt attributes
For semantic structure, use elements like <header>, <main>, <footer>
For accessibility, include ARIA attributes where applicable

How to Submit Your Tutorial

Prepare your content following all format guidelines above
Test all code examples to ensure they render correctly in browsers
Format in HTML using the same structure as our existing tutorials
Submit via email to doji.adds@gmail.com with subject line "HTML Tutorial Submission: [Your Topic]"
Or Submit via posting your version on our Facebook group: https://www.facebook.com/groups/cspinas

All submissions will be reviewed for technical accuracy, quality of explanation, and adherence to these formatting guidelines before publication. We may request revisions to ensure consistency with our platform standards.

By submitting content, you agree to allow dojicreates to publish and modify your work as needed while maintaining attribution to you as the original author.

Submit via FB Group Download Blank Format