Análisis de Proyectos Estudiantiles para Mejorar tus Iniciativas

Contenido del curso

Introducción

Sitios Code con HTML y CSS

Despliega tu página a internet

Sitios No-code con WordPress

Conclusiones

Esta clase es especial. Quiero que te tomes un tiempo para acceder y conocer algunos proyectos que han creado otros estudiantes, quienes ya finalizaron el curso.

Mi portafolio
Página web personal
Clon de Youtube
Proyectos que te permitirán reconocer tu propio avance, así como saber qué elementos o visiones no consideraste, siendo el momento indicado para incluirlos y una oportunidad de implementación hacia un proyecto o iniciativa a futuro en tu contexto más cercano.

Recuerda que la experimentación, validación y ajustes te ayudan a entender constantemente tu proceso ¡Deja de lado el miedo a errar, que es parte de la experiencia, y disfruta experimentar en todo momento!

No olvides compartir tu proyecto; los demás también podrán aprender de tu resultado.

Análisis de Proyectos Estudiantiles para Mejorar tus Iniciativas

Escarlet Montilla

Estudiante

{ margin: 0; padding: 0; box-sizing: border-box; }

body{ font-family: Arial, Helvetica, sans-serif;

}

.image-container { display: flex; } .image-container img { width: 100%; }

/* los esilos de header*/ header{ background: #1f1f1f; padding: 10px 50px; }

#logo { width: 50px; }

#logo img { border-radius: 100%; border: 2px solid #ffff; }

/* los esilos de la seccion hero*/ #hero { position: relative; }

#hero #computadora { display: inline-block; width: 100%; }

#hero .informacion-contenedor { position: absolute; top:50%; transform: translateY(-50%); left: 0; display: flex; width: 100%; color: #ffff; padding: 0 50px; } #hero .informacion-contenedor #foto { width:200px; } #hero .informacion-contenedor #foto img { border-radius: 100%;

} #hero .informacion-contenedor .informacion { margin-left: 20px; font-weight: bold; width: calc(100% - 200px); } #hero .informacion-contenedor .informacion span { display: inline-block; color: #b5b5b5; margin-bottom: 70px;

} /* los esilos del main */ main { padding: 100px; } main .social-icons { display: flex; justify-content: center; margin-top: 40px;

} main .social-icons li { margin-left: 8px; list-style: none;

}

main .social-icons .social-icon { display: flex; justify-content: center; align-items: center; background: red; padding: 15px;

border-radius: 5px;
width: 100%;
height: 100%;

}

main .social-icons #linkedin { background: #0077b0; }

main .social-icons #github { background: #23272d; }

main .social-icons #twitter { background: #1da1f2; }

main .social-icons #youtube { background: #f70000; } main .social-icons #platzi { background: #121f3d; }

Jaime Iriarte

Jerson Hernán Uribe Montenegro

Richard Alexander Ayza Ureña

Luis Villegas Vargas

David Sánchez Urzúa

paula.sanchez8236

Mateo Zapata Marin

Daniel Romero

Mateo Gamboa

Omar Andres Guerrero Herrera

Julian David Sierra Cabrera

Humberto Guardado

Cristian Caled Flores Vasquez

eduar guerrero

Jonathan Lozano Alcalá

Alejandro Ariza

tu1997cawi

Jhon Alexander Gomez Muñoz

Natalia Abello

Marcos Monteverde

Daniel Steven Carrera Osorno

franco almada

Franchesca Fatima Zelaya Contreras

Introducción

Curso Actualizado

Creación de Páginas Web: HTML, CSS y Publicación Online

HTML, CSS y JavaScript en el Frontend

Qué hace el backend de un sitio web

Sitios Code con HTML y CSS

Qué son las etiquetas en HTML

Primeras líneas de código en HTML

HTML del hero con ids y clases

Iconos de redes sociales en HTML

Selectores y propiedades CSS explicados

box-sizing border-box explicado visualmente

Estiliza tu primer header con CSS

position absolute y relative en el hero

Centrado vertical con CSS transform

Colorea iconos sociales con Flexbox

Optimización de CSS y Enlaces en HTML para Portafolios Web

Despliega tu página a internet

Cómo subir tu página web a Internet paso a paso

Despliegue de Sitios Web Gratis con Netlify

Conecta tu dominio de Namecheap a Netlify

Compra y configuración de hosting web compartido con HostGator

Sitios No-code con WordPress

Creación de Sitios Web sin Código con WordPress

Instalación de WordPress en hosting propio

Instalación y configuración de Elementor en WordPress

Creación de una Página Web desde Cero con Elementor

Maquetación de Héroes con Elementor para Páginas Web

Creación de Páginas Web con WordPress y Plantillas Prediseñadas

Conclusiones

Análisis de Proyectos Estudiantiles para Mejorar tus Iniciativas

Desarrollo Web Básico: HTML, CSS y WordPress

Obtención del Diploma en Desarrollo Web Profesional