Crea tu Web Responsive con HTML5 y CSS3: Edición ChatGPT
Publicado: jueves, jun. 26, 2025 - Post actualizado: jueves, jun. 26, 2025
Enfocaremos en hacer que tu sitio web sea adaptable a diferentes dispositivos
Bienvenido a esta clase: Crea tu Web Responsive con HTML5 y CSS3: Edición ChatGPT
A lo largo de esta experiencia de aprendizaje, exploraremos los fundamentos de la creación de sitios web y nos sumergiremos en el emocionante mundo del diseño responsivo.
Sección 1: Fundamentos de HTML
En esta sección, nos adentraremos en el lenguaje de marcado HTML y aprenderás:
- Qué es HTML y cómo utilizarlo para crear contenido web.
- Las etiquetas HTML esenciales y cómo utilizarlas correctamente.
- Principios para estructurar una página web de manera efectiva.
Sección 2: Introducción a CSS
En esta sección, nos sumergiremos en el mundo del diseño web con CSS y aprenderás:
- Conceptos básicos de CSS y cómo aplicar estilos a tu página.
- Uso de unidades de medida como porcentajes y píxeles.
- Exploración de Flexbox para diseños flexibles.
- Manipulación de colores y diseño de elementos web.
- Construir nuestra primera página web (vamos a hacer un diario)
Sección 3: Diseño Responsivo
En esta sección, nos enfocaremos en hacer que tu sitio web sea adaptable a diferentes dispositivos y aprenderás:
- Historia y evolución del CSS3 y su impacto en el diseño web.
- Optimización de etiquetas HTML para una experiencia de usuario adaptable.
- Implementación de media queries para adaptar el contenido a diferentes pantallas.
- Creación de un menú desplegable (hamburguesa) con JavaScript, sin necesidad de conocimientos de programación.
Sección 4: Proyecto Práctico - Creación de una Landing Page
En esta sección final, pondremos en práctica todo lo aprendido para crear una página de destino única y atractiva. Aprenderás:
- Técnicas avanzadas de diseño de fondo para crear una experiencia visual impactante.
Sección 5: Aprenderás a pedirle código a ChatGPT para agilizar los procesos y hacer todo más rápido.
- Integración de un mapa de Google para una mayor interactividad.
¡Estoy seguro de que disfrutarás cada paso de este curso!
Contiene: 67 lecciones (6h 1m)
- Presentación del Curso
- Bienvenida al curso HTML Y CSS diseño responsivo
- Hacemos nuestra primera carpeta y primer “hola mundo”.
- Mostramos las etiquetas principales (header, main, footer).
- Usamos la etiqueta img para tener imágenes
- Seguimos viendo etiquetas hacemos nuestro formulario.
- Usamos las etiquetas ul, li ya para indexar páginas.
- Mostramos la etiquetas estilo y damos color a las palabras.
- Hacemos nuestro primer enlace en html y creamos archivo style.css
- Hacemos selector universal y creamos nuestra primera caja con CSS.
- Seguimos con el modelo de cajas creamos caja 1 y caja 2.
- Explicamos display flex y modelo de cajas.
- Explicamos cómo alinear los elementos y justificar el contenido (display flex).
- Achicamos la img a través de una clase.
- Porcentajes (etiquetas html).
- Porcentajes vs pixel (etiquetas html).
- Etiquetas tablas
- Etiqueta span
- Etiquetas seleccionar
- ¡Hagamos nuestra primera página web!
- Hacemos nuestra división y la herobox.
- Ponemos nuestras imágenes en la herobox
- Cajas 1 y Cajas 2 (principal simbólico)
- Agregamos la foto principal del título.
- Creamos nuestra barra de navegación con sus botones
- Creamos el título de nuestro banner (header)
- Separación del header con el padding
- Texto para las cajas (herobox) (archivos para estudiantes).
- Centramos los h2 de los herobox (cajas)
- Centramos los títulos del herobox (cajas)
- Trabajamos el pie de página
- Trabajamos el pie de página y cambiamos título
- Le damos una posición fija al encabezado (nuevas configuraciones)
- Le cambiamos los colores al documento y etiquetas.
- Hacemos un repaso de lo visto en el curso y recomendaciones.
- Agregamos más texto al título principal y configurando
- Antes de comenzar a conocer Medidas absolutas y Relativas (PX VS REM)
- ¿Qué es diseño web CSS3?, ¿Qué es diseño web adaptable?
- Hacemos un repaso del sitio web estático y mostramos el responsive
- Mostramos las medidas que vamos a trabajar (tablet y celular)
- Etiquetas Meta y Viewport
- Comenzamos a editar el código CSS del sitio estático
- Recuperamos el hover, editamos clases y agregamos div nuevo
- Acomodamos nuestro menú y comenzamos el menú hamburguesa.
- Hacemos nuestro primer media query para tablet y escribimos CSS
- Vemos los posición: absoluta, fija y relativa. Empezamos el menú hamburguesas
- Trabajamos el titulo-banner y más código CSS3
- Aumentamos el título principal y ajustamos la imagen del avión.
- Completamos etiquetas html y comenzamos los media query para celular
- Trabajamos el herobox, y hacemos flex direction column con las cajas
- Consejos sobre consultas responsive y contenedores. Editamos CSS3 avión.
- Revisamos el herobox y agregamos el archivo Javascript
- Antecedentes del Mini Proyecto
- Conocemos el proyecto y empezamos con todo
- Finalizamos el mini proyecto Antecedentes
- Clases reforzadas: Landing Page con ChatGPT
- ¿Que es ChatGPT?, ¿quiénes lo crearon?
- ¡Entramos a OpenIA y le pedimos nuestra página (landig) a ChatGPT!
- Seguimos trabajando con ChatGPT, código html y css.
- DALL-E 3 (actualización)
- Seguimos trabajando con ChatGPT y conocemos DALL-E 2.
- Descargamos las imágenes de Dalle-E 2 y las agregamos al html (Usar Dalle-E 3)
- Seguimos editando lo que nos dió ChatGPT (el banner y título)
- Ajustamos las imágenes y editamos el pie de página.
- Trabajamos con imágenes background para nuestra landing page
- Solucionamos el ruido que genera la imagen de fondo con un div
- Usamos la etiqueta span y hacemos ajustes finales para la página de destino
Contraseñas / Passwords RAR:
cibernautas.org
cursos.consiguelogratis.com
consiguelogratis.com
consiguelogratis
cursos.cibernautas.org
Contraseña para descomprimir: C-ZX4C56
Para comentar y reportar un enlace expirado utiliza el siguiente botón, serás dirigido a otra sección donde nuestros moderadores estarán esperando los comentarios.
Ir a los comentarios