Acreditación Oficial de Google (40 Horas)

Desarrollo Web con HTML5, CSS3 y Tailwind CSS

Formación sólida e integral en la construcción de sitios web modernos. Desde la maquetación semántica y la arquitectura cliente-servidor, hasta el flujo de trabajo ágil e interfaz responsive con Tailwind CSS.

HTML5 Semántico

CSS3 & Flex/Grid

Tailwind CSS

Univ. de Alicante

Ver cómo aplico Tailwind CSS Verificar en Google

Certificado Introducción al Desarrollo Web I Google Actívate Francisco Plaza Quintero

Clic para ampliar certificado

Emisión: 27/03/2023 Válido y Oficial

Introducción al Desarrollo Web I (40 horas)

Otorgado a: Francisco Plaza Quintero

Programa Oficial Evaluado

Fundamentos Web de Google Actívate & Univ. de Alicante

Contenidos clave completados y certificados por el Dpto. de Lenguajes y Sistemas Informáticos.

1. Historia de la Web

Evolución de los estándares W3C, nacimiento de HTML y la transformación digital de la red.

2. Funcionamiento Web

Arquitectura cliente-servidor, protocolo HTTP/HTTPS, funcionamiento de DNS y renderizado en navegador.

3. Escritura Web

Creación de la primera estructura con etiquetas HTML, atributos, textos, imágenes, enlaces y formularios.

4. Publicación de Sitios

Gestión de dominios, proveedores de hosting, transferencia FTP/SSH y despliegue continuo de sitios web.

5. Estructura Robusta

Buenas prácticas de maquetación semántica, accesibilidad web (a11y) y preparación para SEO.

Evolución del Workflow

De HTML/CSS tradicional a la potencia de Tailwind CSS

Haber dominado los cimientos del lenguaje HTML5 y CSS3 nativo me permitió dar un salto cualitativo hacia framework moderno utilitario como **Tailwind CSS**. Esto me permite diseñar interfaces web con mayor velocidad, consistencia y rendimiento.

Diseño Mobile-First & Responsive

Aprovecho el sistema de puntos de interrupción (`sm:`, `md:`, `lg:`, `xl:`) para garantizar una visualización perfecta en smartphones, tablets y pantallas de escritorio.

Sin archivos CSS gigantestos e inmanejables.
Flexbox y CSS Grid directo en la estructura.

Componentización & Consistencia

Defino paletas de colores corporativas, tipografías e iluminación homogénea mediante la configuración centralizada de Tailwind.

Integración directa con Kotlin / Jetpack Compose o JavaScript.
UI limpia y con soporte nativo de Modo Oscuro (`dark:`).

Máxima Velocidad de Carga

Gracias al compilador JIT (Just-In-Time) de Tailwind, sólo se envía al navegador el CSS exacto que la página utiliza.

Excelente puntuación en Google PageSpeed / Lighthouse.
Código liviano, óptimo para redes móviles.

Demostración Práctica

¿Cómo maqueto en mis proyectos?

web-component.html — franchepqm

<!-- 🚀 Componente maquetado con Tailwind CSS por franchepqm -->
<article class="bg-slate-900 border border-slate-800 p-6 rounded-2xl shadow-xl hover:border-brand-500 transition-all">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-xl font-bold text-white tracking-tight">Desarrollo Web Pro</h3>
        <span class="px-2.5 py-1 text-xs font-semibold rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">Certificado</span>
    </div>
    <p class="text-slate-300 text-sm leading-relaxed">
        Estructura semántica, diseño adaptable y alto rendimiento garantizado.
    </p>
</article>

/* 📜 Enfoque Tradicional HTML + CSS separado */
.card-container {
    background-color: #0f172a;
    border: 1px solid #1e293b;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Proyectos Web & Frontend

¿Necesitas un sitio web moderno, rápido y adaptado a tus necesidades?

Combino el rigor técnico de la maquetación web con la estética contemporánea para entregar sitios atractivos, seguros y optimizados.

Contactar por Email (francheplazaq@gmail.com)