XHTML

XHTML was used as the foundation for structuring the earliest versions of the Mestizaje website. XHTML enforces stricter syntax rules than traditional HTML, such as properly nested tags, lowercase elements, and compulsory closing tags. Starting the project with XHTML helped ensure clean, well-structured markup and prepared the pages to meet validation standards. This discipline created a stable backbone that made it easier to transition into modern HTML5 features later in development.

HTML5

As the site evolved, I implemented HTML5 to take advantage of its modern semantic elements and multimedia capabilities. HTML5 allowed me to organize content more meaningfully through elements like <header>, <section>, <nav>, and <footer>, improving both readability and accessibility. More importantly, it provided native support for media, interactivity, and graphics.

HTML5 Canvas Element

The HTML5 <canvas> element is included as a creative feature intended for inspiration. Because the website explores Latin American art, the canvas offers visitors a space to “create” and interact, symbolic of the artistic expression found throughout the region. Although the implementation is simple, the canvas serves as a playful addition that invites users to draw shapes or lines, reinforcing the artistic theme embedded in the site.

HTML5 Video Element

The Mestizaje site uses the HTML5 <video> element to embed an educational video that I personally edited. The video integrates music, dance, rhythm, political moments, and natural landscapes from across Latin America. It was chosen specifically because it captures the essence of Latin American cultural identity beyond traditional artwork. By using the HTML5 video element, the site renders the video natively with built-in controls, ensuring compatibility across browsers while enhancing the immersive, cultural experience.

CSS

The visual design of the Mestizaje website relies on a custom CSS theme created to balance simplicity, professional educational layout, and subtle cultural warmth. The color palette includes soft blues, earthy reds, and warm yellows. These tones were inspired by traditional Latin American textiles and natural landscapes, but they were intentionally softened to maintain readability and accessibility. The overall design follows a minimalist approach, clean lines, generous white space, simple grids—so the artwork, facts, videos, and cultural storytelling remain the main focus. However, the cultural color accents allow the website to maintain its Latin American character while still looking modern and professional.

JavaScript

JavaScript plays a major role in making the Mestizaje website interactive and educational. Several core features are powered entirely by JavaScript to enhance user engagement and create a smooth, responsive experience.

• Country Information & Cultural Facts:
  Each country card updates dynamically when the user hovers or clicks. JavaScript loads cultural facts, audio files, and music samples from stored data and displays them in real time.
• Audio Controls:
  Only one cultural music clip can play at a time. JavaScript ensures:
  • stopping previously playing audio
  • updating play/pause button text
  • highlighting the active country card
  This prevents overlapping sounds and creates a smoother user experience.
• Sliders & Carousels:
  The top slider showcases different countries, flags, or artworks. JavaScript controls:
  • slide movement
  • animation timing
  • responsive transitions for all screen sizes
• Theme Switcher:
  The dark/light mode system is fully JavaScript-driven. The script updates CSS variables, toggles icons, and adjusts UI elements to improve readability and accessibility at night.

If needed, I can provide an even more detailed breakdown based on the full JavaScript files used in the project.

Dynamic JavaScript

Dynamic JavaScript was used to update page content without requiring a full reload. Instead of static, pre-written text, several parts of the Mestizaje site generate information on the fly. For example, when a user selects a country, the script fetches the corresponding fun facts, art samples, and audio tracks from data structures and injects them directly into the page. This allows each interaction to feel more immersive and personalized. Dynamic JavaScript also powers real-time updates such as modifying button labels, switching themes, displaying tooltips, and animating the slider, giving the website a more responsive and modern feel.

PHP

PHP was used extensively throughout the Mestizaje website to manage server-side logic, session handling, and dynamic page rendering. Rather than using PHP only for isolated tasks, the site is built with a structured architecture using reusable include files, routing, and modular scripts.

I created a config.php file that stores the database connection and is included at the top of any script that needs access to MySQL. This ensures a centralized configuration and clean, consistent code across the project.

The header.php file contains the site navigation and is dynamically updated using session variables. It displays the logged-in user’s name and the number of artworks they have favorited. Because this file is included at the beginning of every page, the UI remains consistent and responsive to the user's session.

The footer.php file contains closing HTML structure and shared UI components. Including it at the bottom of each page keeps the layout maintainable and ensures that changes to the footer propagate throughout the entire site.

One of the most interactive features is the favorites system, which uses PHP and sessions but avoids unnecessary database reads. When a user clicks the heart icon, PHP reads $_SESSION['user_id'] and either inserts or deletes a row in the favorites table. After updating the table, PHP also updates the session variable and returns a JSON response so the heart icon updates instantly without reloading the page. This gives the site a fast, modern, app-like experience.

Database

The Mestizaje website uses a MySQL database with several relational tables that organize and connect all cultural content across the project. The main tables include:

• users — login credentials and session identity
• artists — names, biographical details, and country association
• artworks — artwork names, image paths, artist IDs, and country IDs
• favorites — relationships between users and saved artworks
• countries — all Latin American countries featured in the project

To efficiently populate the database and maintain correct relationships between tables, I created a custom import_csv.php script. This script loads a UTF-8 CSV file and automatically inserts content into the appropriate tables:

• Countries are inserted into the countries table
• Artists are inserted into the artists table
• Artworks (image path, artist, country) are inserted into the artworks table
• Country and artist names are automatically mapped to their correct IDs

Because many artist and artwork names are in Spanish or Portuguese, special attention was given to ensuring that accented characters and symbols were preserved correctly. I adjusted the table structure and encoding settings to safely store all content as UTF-8.

I also created fetch_gallery.php, a server-side script that generates the gallery dynamically. It receives selected countries from POST data, converts underscores to spaces, matches the correct country_id, retrieves associated artworks, and outputs the HTML for the gallery. This allows the gallery page to update automatically and display only the cultures the user chooses to explore.

SVG Logo

The Mestizaje logo was designed manually and exported as an SVG graphic. The design represents multiple cultures intertwining, symbolizing the blending and coexistence of traditions, identities, and artistic expressions across Latin America. Its geometric flow complements the website’s minimalist aesthetic while visually reinforcing the theme of cultural fusion.

Webserver (XAMPP)

The Mestizaje website was developed and tested using XAMPP, an integrated local webserver environment that includes Apache, PHP, and MySQL. XAMPP provided a complete, self-contained server stack that allowed me to run the website exactly as it would behave in a real deployment environment. Apache handled all incoming HTTP requests and served the HTML, CSS, JavaScript, and image files, while also executing the PHP scripts that power dynamic features such as session management, database queries, and form handling. MySQL, also included in XAMPP, functioned as the relational database management system for storing countries, artists, artworks, and user favorites. Using XAMPP simplified the development process by allowing me to manage the database with phpMyAdmin, test server-side scripts locally, and ensure compatibility between all components of the site. This environment made it possible to work with PHP and MySQL seamlessly while simulating a full production-level backend on my local machine.

XHTML Validation for All Pages

All applicable pages were validated using the official W3C XHTML/HTML validator to ensure they met modern web standards. Validation helped confirm that the markup was properly structured, accessible, and free of syntax errors. This process also improved browser compatibility and supported cleaner, more reliable code. Validating each page reinforced good development practices and ensured that the final version of the Mestizaje website adhered to professional coding conventions.