This page is currently under development.

Help Us Grow the CSS 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 CSS topic per submission
• Include practical code examples with proper syntax
• Provide step-by-step explanations
• Show expected visual outputs (e.g., screenshots or descriptions)

Code Example Format

/* Estilo para isang card component */
.card {
    /* Box model properties */
    width: 300px;
    padding: 20px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    
    /* Visual styling */
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    
    /* Text styling */
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
}

/* Hover effect para sa interactivity */
.card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

2. Recommended CSS Topics

• Recommended: Blank topics like this have more higher chances of getting selected.
• CSS Flexbox
• CSS Grid
• Responsive Design with Media Queries
• CSS Animations
• CSS Variables
• Accessibility in CSS

How to Submit

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

Example

Check our CSS | Flexbox as a model for your submission.

Thank you for your interest in contributing educational CSS 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: "CSS Tutorials: [Your Topic]"

Example: "CSS Tutorials: Flexbox"

2. Main Topic Header

Format your main heading as: CSS [Your Topic]

Example: CSS Flexbox

3. Introduction Paragraph

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

Example: "Ang Flexbox sa CSS ay isang layout model na nagbibigay-daan sa flexible at responsive na arrangement ng mga elemento sa isang container. Ginagamit ito para madaling ayusin ang mga item sa isang row o column na may dynamic na spacing at alignment..."

Required Content Sections

1. Importance of the Topic

2. How the Concept Works

3. Code Example

                                <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
</div>

                                /* Estilo para sa flex container */
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background-color: #e0e0e0;
}

/* Estilo para sa mga flex items */
.flex-item {
    background-color: #4285f4;
    color: white;
    padding: 15px;
    border-radius: 5px;
}

4. Code Explanation

5. Practical Application (Optional)

                                <nav class="nav-bar">
    <a href="#" class="nav-item">Home</a>
    <a href="#" class="nav-item">About</a>
    <a href="#" class="nav-item">Contact</a>
</nav>

                                /* Estilo para sa navigation bar */
.nav-bar {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px;
    background-color: #333;
}

/* Estilo para sa mga nav items */
.nav-item {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
}

.nav-item:hover {
    background-color: #555;
    border-radius: 5px;
}

6. Expected Output

7. Success Message

Formatting Requirements

1. Text Formatting

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

2. Code Blocks

• Every code example must be properly indented (2 or 4 spaces)
• All code must be valid and render correctly in modern browsers
• Add helpful comments in Tagalog to explain complex parts
• Follow CSS coding conventions (e.g., lowercase selectors, hyphenated class names)
• Use consistent naming conventions for classes and IDs

3. Visual Elements

• Use tables for comparing related concepts (e.g., `flex` vs `grid`)
• 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 CSS Code:

                            <section class="hero-section">
    <h1>Welcome to My Website</h1>
    <p>This is a responsive hero section styled with CSS.</p>
    <button class="hero-button">Learn More</button>
</section>

                            /* Estilo para sa hero section */
.hero-section {
    /* Flexbox layout para sa centering */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: linear-gradient(135deg, #4285f4, #34c759);
    color: white;
    text-align: center;
    padding: 20px;
}

/* Estilo para sa heading */
.hero-section h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* Estilo para sa paragraph */
.hero-section p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

/* Estilo para sa button */
.hero-button {
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #ffffff;
    color: #4285f4;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Hover effect para sa button */
.hero-button:hover {
    background-color: #e0e0e0;
}

Important CSS Code Formatting Rules:

• Include related HTML markup for context
• Add comments in Tagalog to explain key CSS rules
• Use vendor prefixes only when necessary (e.g., for older browser support)
• Include meaningful white space for readability
• Use proper line breaks and indentation (2 or 4 spaces)
• Break long lines for better readability (120 characters maximum)
• Maintain consistent naming conventions (e.g., hyphenated class names)
• Ensure code works in modern browsers (Chrome, Firefox, Edge)

CSS-Specific Guidelines

1. Project Structure

• Include both HTML and CSS code for complete examples
• Organize CSS rules logically by component or section
• Use semantic class names (e.g., `.hero-section` instead of `.box`)
• Group related styles together with comments

2. Browser Compatibility

• Test code in at least Chrome, Firefox, and Edge
• Mention any browser-specific limitations or requirements
• Avoid deprecated properties (e.g., `float` for layout)
• Use modern CSS features (e.g., `flex`, `grid`, `custom properties`)

3. Common CSS Examples

• Include responsive design examples using `media queries`
• Show accessibility features (e.g., focus styles, color contrast)
• Use `rem` and `em` units for scalability
• Demonstrate CSS frameworks (e.g., Tailwind, Bootstrap) if relevant

How to Submit Your Tutorial

1. Prepare your content following all format guidelines above
2. Test all code examples to ensure they render correctly in modern browsers
3. Format in HTML using the same structure as our existing tutorials
4. Submit via email to doji.adds@gmail.com with subject line "CSS Tutorial Submission: [Your Topic]"
5. 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.