Skip to main content

​
Overview

The Siloé Perú website is a single-page HTML application with no build process required. This guide will help you set up a local development environment for making changes and testing modifications.

​
Prerequisites

You’ll need the following tools installed on your system:

Web Browser

Modern browser (Chrome, Firefox, Safari, or Edge)

Code Editor

VS Code, Sublime Text, or any text editor

Local Server (Optional)

For testing (Python, Node.js, or VS Code Live Server)

Git (Optional)

For version control and collaboration
No Node.js, npm, or build tools are required! This is a vanilla HTML/CSS/JavaScript project.

​
File Structure

The project has a simple, straightforward structure: 
Web-Siloe/
├── index.html              # Main HTML file (858 lines)
├── style.css              # Complete stylesheet (1662 lines)
├── img voluntario/        # Volunteer section images
│   ├── fondo.png
│   ├── img2.png
│   ├── img entrega de pañales.jpg
│   ├── img voluntario navidad.jpg
│   └── ...
├── img clow/              # Clown section images
│   ├── 568201215_*.png
│   ├── 570037802_*.png
│   └── ...
└── img logo de mensajeria.png  # WhatsApp button image

​
Quick Start

1

Download or Clone the Repository

Get the source code to your local machine:
git clone https://github.com/darlycv/Web-Siloe.git
cd Web-Siloe
Or download the ZIP file from GitHub and extract it.
2

Open with a Local Server (Recommended)

For the best experience, use a local development server:Option 1: VS Code Live Server Extension
  1. Install the “Live Server” extension in VS Code
  2. Right-click on index.html
  3. Select “Open with Live Server”
  4. Your browser will open at http://localhost:5500
Option 2: Python HTTP Server
# Python 3
python -m http.server 8000

# Then visit http://localhost:8000 in your browser
Option 3: Node.js HTTP Server
npx http-server -p 8000

# Then visit http://localhost:8000 in your browser
3

Or Open Directly in Browser

You can also open the file directly:
  1. Navigate to the project folder
  2. Double-click index.html
  3. It will open in your default browser
Some features may not work properly when opened via file:// protocol. Use a local server for development.
4

Test Navigation

Click through the four main sections:
  • ℹ️ Nosotros (About Us)
  • 👥 Voluntariado Siloé (Volunteers)
  • 🤡 Clow de Siloé (Hospital Clowns)
  • 🤝 Nuestros Aliados (Partners)

​
VS Code Extensions

For the best development experience, install these VS Code extensions:

Live Server

Auto-reload on file changes

HTML CSS Support

Enhanced HTML/CSS IntelliSense

Prettier

Code formatting

Auto Rename Tag

Automatically rename paired HTML tags

​
Browser Developer Tools

Use your browser’s developer tools for debugging:
  • Chrome DevTools: Press F12 or Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac)
  • Firefox Developer Tools: Press F12
  • Safari Web Inspector: Enable in Preferences → Advanced, then press Cmd+Option+I

​
Git Workflow

If you’re contributing to the project, follow this workflow:
1

Fork and Clone

Fork the repository on GitHub, then clone your fork:
git clone https://github.com/YOUR_USERNAME/Web-Siloe.git
cd Web-Siloe
2

Create a Feature Branch

Create a new branch for your changes:
git checkout -b feature/your-feature-name
3

Make Your Changes

Edit index.html, style.css, or add images as needed.
4

Test Thoroughly

  • Test on multiple browsers
  • Test on mobile devices or using browser responsive mode
  • Click through all navigation buttons
  • Test all flip cards
  • Test form validation
5

Commit and Push

git add .
git commit -m "Add descriptive commit message"
git push origin feature/your-feature-name
6

Create Pull Request

Go to GitHub and create a pull request from your branch.

​
Testing Checklist

Before submitting changes, verify:
  • ✅ Volunteer form submits correctly
  • ✅ Clown form submits correctly
  • ✅ Required field validation works
  • ✅ Checkbox validation works
  • ✅ Flip cards flip on click
  • ✅ Only one card flips at a time
  • ✅ WhatsApp button is visible
  • ✅ WhatsApp button links correctly
  • ✅ Layout works on mobile (< 768px)
  • ✅ Layout works on tablet (768px - 1024px)
  • ✅ Layout works on desktop (> 1024px)
  • ✅ Images scale properly
  • ✅ Text is readable on all screen sizes
  • ✅ Works in Chrome
  • ✅ Works in Firefox
  • ✅ Works in Safari
  • ✅ Works in Edge

​
Common Development Tasks

​
Hot Reloading Setup

With VS Code Live Server:
  1. Install the “Live Server” extension
  2. Open index.html with Live Server
  3. Any changes to HTML or CSS will automatically reload the page
  4. JavaScript changes may require a manual refresh

​
Debugging JavaScript

The website includes console logging for debugging (index.html:727-824): 
console.log('✓ Script cargado correctamente');
console.log('✓ DOM Cargado');
console.log('✓ Elementos obtenidos:', {
    btnVoluntarios: !!btnVoluntarios,
    btnClow: !!btnClow,
    // ...
});
Open your browser’s Console to see these debug messages.

​
CSS Hot Reload

For instant CSS updates without page reload:
  1. Open browser DevTools
  2. Make changes in the “Styles” panel
  3. Once satisfied, copy changes to style.css
  4. The page will reload with your changes

​
Performance Optimization

For production deployment, consider:
  • Minifying style.css using online tools
  • Compressing images with TinyPNG or ImageOptim
  • Enabling gzip compression on your web server
  • Adding cache headers for static assets

​
Troubleshooting

Problem: Images appear brokenSolution:
  • Check that image paths are correct (note: folder names have spaces)
  • Use a local server instead of file:// protocol
  • Verify image files exist in the correct directories
Problem: Navigation or flip cards don’t workSolution:
  • Check browser Console for errors
  • Verify script is at the bottom of index.html (lines 726-856)
  • Ensure no syntax errors were introduced
  • Clear browser cache and reload
Problem: Styles don’t appear or look wrongSolution:
  • Verify style.css is linked correctly (line 13)
  • Check for CSS syntax errors
  • Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)
  • Verify CSS variables are defined in :root

​
Next Steps

Styling Guide

Learn about the CSS architecture and styling system

JavaScript Features

Understand the JavaScript functionality and event handling

Responsive Design

Explore mobile-first responsive design patterns

Color Customization

Customize the color scheme for your organization

Build docs developers (and LLMs) love

Get started for freeTalk to us