Skip to main content

​
Prerequisites

Before setting up the project locally, ensure you have the following installed:
  • A modern web browser (Chrome, Firefox, Safari, or Edge)
  • A code editor (VS Code, Sublime Text, or similar)
  • A local web server (optional, but recommended for testing)
  • Git (for version control)

​
Project Structure

The project follows a simple static website structure: 
dni-cita-previa/
├── index.html              # Homepage
├── iniciar-solicitud.html  # Start request page
├── seleccionar-cita.html   # Appointment selection page
├── resumen.html            # Summary page
├── css/
│   ├── style.css           # Global styles
│   ├── headerfooter.css    # Header and footer styles
│   ├── index.css           # Homepage styles
│   ├── iniciar-solicitud.css
│   └── seleccionar-cita.css
├── js/
│   └── index.js            # Navigation functionality
└── images/
    ├── logo.png
    ├── logo-ministerio.png
    └── ...

​
Installation

​
1. Clone or Download the Repository

git clone <repository-url>
cd dni-cita-previa

​
2. Set Up a Local Server

# Using Python 3
python -m http.server 8000

​
3. Open in Browser

Navigate to http://localhost:8000 in your web browser.
You can also open the HTML files directly in your browser by double-clicking them, but using a local server is recommended to avoid CORS issues and better simulate production behavior.

​
Development Workflow

​
Editing HTML Files

All HTML files are located in the root directory. Open them in your code editor: 
# Example: Edit the homepage
code index.html

​
Editing Styles

CSS files are organized by page and component:
  • style.css - Global variables and reset styles
  • headerfooter.css - Header and footer component styles
  • [page].css - Page-specific styles
# Example: Edit global styles
code css/style.css

​
Live Reload (Optional)

For automatic browser refresh on file changes, use a tool like Live Server: 
# VS Code Extension
# Install "Live Server" extension
# Right-click HTML file and select "Open with Live Server"

​
Testing

​
Visual Testing

Test the application on desktop browsers:
  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)
Verify all pages render correctly at standard desktop resolutions (1920x1080, 1366x768).
Test responsive behavior on tablet devices:
  • iPad (768x1024)
  • Android Tablets (various sizes)
Use browser DevTools to simulate tablet viewports:
Chrome: F12 → Toggle Device Toolbar (Ctrl+Shift+M)
Test mobile responsiveness:
  • iPhone (375x667, 390x844)
  • Android phones (360x640, 412x915)
Verify:
  • Mobile navigation toggle works
  • Forms are usable on small screens
  • Text is readable without zooming
  • Buttons are easily tappable

​
Functional Testing

  1. Header Navigation
    • Click all header links
    • Verify external links open in new tabs
    • Test mobile menu toggle on small screens
  2. Page Flow
    • Homepage → Iniciar Solicitud → Seleccionar Cita → Resumen
    • Verify back buttons work correctly
    • Test form submission flow

​
Form Validation Tests

<!-- Example form validation to test -->
<input type="text" id="numero-dni" pattern="[0-9]{8}[A-Za-z]" required>
Test cases:
  • Empty fields (should show validation error)
  • Invalid DNI format (e.g., “123” instead of “12345678X”)
  • Valid data submission
  • Date field constraints

​
Performance Testing

Use browser DevTools to audit performance:
  1. Open Chrome DevTools (F12)
  2. Go to Lighthouse tab
  3. Run audit for Performance, Accessibility, Best Practices, and SEO
  4. Aim for scores above 90 in all categories

​
Accessibility Testing

​
Keyboard Navigation

  • Tab through all interactive elements
  • Verify focus indicators are visible
  • Test form submission with keyboard only

​
Screen Reader Testing

  • Test with NVDA (Windows) or VoiceOver (Mac)
  • Verify all images have alt text
  • Check form labels are properly associated

​
Color Contrast

Verify color contrast ratios meet WCAG AA standards:
  • Normal text: 4.5:1 minimum
  • Large text: 3:1 minimum
/* Example: Check these color combinations */
--primary-blue: #003366;  /* Against white background */
--text-gray-light: #6a6f7b;  /* Against white background */

​
Common Issues

​
Images Not Loading

Problem: Images appear broken or don’t load. Solution: Verify image paths are correct and files exist: 
ls images/

​
CSS Not Applying

Problem: Styles don’t appear or are outdated. Solution: Hard refresh the browser:
  • Chrome/Firefox: Ctrl + F5 (Windows) or Cmd + Shift + R (Mac)
  • Clear browser cache if issue persists

​
Mobile Menu Not Working

Problem: Menu toggle button doesn’t respond. Solution: Check JavaScript is loaded: 
<!-- Verify this line exists before </body> -->
<script src="./js/index.js"></script>

​
Browser Compatibility

The project is compatible with:
BrowserMinimum Version
Chrome90+
Firefox88+
Safari14+
Edge90+
Modern CSS features like :has(), @container, and advanced flexbox/grid are used. Older browsers may require polyfills or fallbacks.

​
Next Steps

Once your local environment is set up:
  1. Explore Components - Review the Header and Footer documentation
  2. Understand Forms - Read about Form Components
  3. Deploy - Check Hosting Options when ready to deploy

​
Support

For development issues:
  • Check browser console for errors (F12)
  • Verify all file paths are correct
  • Ensure you’re running a local server, not opening files directly
  • Review the Components documentation for usage examples

Build docs developers (and LLMs) love

Get started for freeTalk to us