Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Crea tu Web Responsive con HTML5 y CSS3: Edición ChatGPT

Name: Crea tu Web Responsive con HTML5 y CSS3: Edición ChatGPT
Rating: 5.0 (2 reviews)

Crea tu primera página web Responsive codificando desde cero y construye tu primera landing page con ChatGPT.

Created byGuillermo Visintini

Last updated 2/2025

Spanish

What you'll learn

Aprenderan a inciarse en el diseño web y conocer HTML Y CSS.
Aprender Responsive Design
Aprenderan hacer un proyecto web con ayuda de ChatGPT
Aprenderan sobre ChatGPT y DALL-E-3
Aprenderan Sobre Inteligencia artificial nivel principiante

Course content

5 sections • 64 lectures • 5h 53m total length

Presentación del curso HTML Y CSS3:06
Hacemos nuestra primera carpeta y primer "hola mundo".5:21
Mostramos las etiquetas principales (header, main, footer).6:57
Usamos la etiqueta img para tener imagenes3:36
Seguimos viendo etiquetas hacemos nuestro formulario.7:29
Usamos las etiquetas ul, li y a para indexar páginas.7:34
Mostramos la etiquetas style y damos color a las palabras.5:56
Hacemos nuestro primer link en html y creamos archivo style.css6:19
Hacemos selector universal y creamos nuestra primera caja con CSS.4:23
Seguimos con el modelo de cajas creamos caja 1 y caja 2.7:20
Explicamos display flex y modelo de cajas.3:15
Explicamos aline items y justify content (display flex).6:59
Achicamos la img a través de una clase.3:00
Porcentajes (etiquetas html).8:10
Porcentajes vs pixel (etiquetas html).2:45
Etiqueta Span2:53

Proyecto Diario5:45
Hacemos nuestra divición y la herobox.7:23
Ponemos nuestras imagenes en la herobox4:22
Cajas 1 y Cajas 2 (main simbólico)7:20
Agregamos la foto principal del título6:47
Creamos nuestro nav bar con sus botones9:42
Creamos el título de nuestro banner (header)7:29
Separación del header con el padding6:31
Texto para las cajas (herobox) (archivos para estudiantes).3:46
Centramos los h2 de los herobox (cajas)1:48
Centramos los títulos del herobox (cajas)2:00
Trabajamos el footer3:54
Trabajamos el footer y cambiamos título3:07
Le damos un position fixe al header (nuevas configuraciones)3:16
Le cambiamos los colores al documento y etiquetas4:08
Hacemos un repaso de lo visto en el curso y recomendaciones.6:13
Agregamos más texto al título principal y configurando4:19

Antes de comenzar conocemos Medidas absolutas y Relativas (PX VS REM)3:29
¿Que es diseño web CSS3?, ¿Qué es diseño web adaptable?4:55
Hacemos un repaso del sitio web estático y mostramos el responsive3:48
Mostramos las medidas que vamos a trabajar (tablet y celular)2:31
Etiquetas Meta y Viewport4:05
Comenzamos a editar el código CSS del sitio estático6:17
Recuperamos el hover, editamos clases y agregamos div nuevo3:30
Acomodamos nuestro menú y comenzamos el menú hamburguesa5:22
Hacemos nuestro primer media query para tablet y escribimos CSS5:57
Vemos los position: absolute, fixes y relative. Empezamos el menú hamburgues6:52
Trabajamos el titulo-banner y más código CSS37:34
Aumentamos el título principal y ajustamos imagen del avión.2:02
Completamos etiquetas html y comenzamos los media query para celular7:09
Trabajamos el herobox , y hacemos flex direction column con las cajas7:22
Consejos sobre responsive y container queries. Editamos CSS3 avión.6:22
Revisamos el herobox y agregamos el archivo Javascript9:12

Explicación del proyecto con chatGPT2:28
¿Que es ChatGPT?, ¿quiénes lo crearon?3:59
¡Entramos a OpenIA y le pedimos nuestra página (landig) a ChatGPT!6:37
Seguimos trabajando con ChatGPT, código html y css.7:22
Clase refuerzo DALL-E 3 (actualización)7:36
Seguimos trabajando con ChatGPT y conocemos DALL-E 2.6:43
Descargamos las imagenes de Dalle-E 2 y las agregamos al html (Usar Dalle-E 3)9:03
Seguimos editando lo que nos dió ChatGPT (el banner y título)5:30
Ajustamos las imagenes y editamos el footer7:56
Trabajamos con imagenes background para nuestra landing page7:35
Solucionamos el ruido que genera la imagen background con un div7:12
Usamos la etiqueta span y hacemos ajustes finales para la landing page9:33

Requirements

Una Pc o Notebook con buena conexión a internet

Description

Mi nombre es Guillermo Visintini y soy el instructor del curso. Para mí será un placer enseñarte cómo ir desde la nada misma hasta un nivel muy bueno que te servirá perfectamente para tener las bases de diseño web y seguir aprendiendo, ya que en esta área el aprendizaje es permanente.

En este curso, comenzaremos desde lo básico con HTML, por lo que no necesitas tener conocimientos previos. Aprenderás todas las etiquetas HTML y cómo estructurar una página web. Luego, adaptaremos tu primera página web a diseño responsivo, es decir, a tablet y celulares.

En el módulo 1:

Aprenderás:

- Qué es HTML y cómo usarlo

- Todas las etiquetas HTML esenciales

- Cómo estructurar una página web correctamente

En el módulo 2:

Aprenderás:

- Vamos con CSS

- Veremos qué son los porcentajes

- Veremos qué son los píxeles

- Veremos qué es Flexbox

- Veremos cómo usar los colores

- Veremos cómo diseñar las partes de la web

En el módulo 3:

Aprenderás:

Parte Adaptable

- Conoce un poco de historia sobre el CSS3

- Cómo optimizar las etiquetas HTML para el diseño adaptable

- Cómo corregir el código del sitio web estático y prepararlo para adaptable

- Conocerás los media queries

- Adaptarás todo el contenido del sitio web estático

- Tendrás listo el diseño para una tablet y para un celular

- Menú desplegable (hamburguesa) con JavaScript (no hace falta saber programar)

En el modulo 4 (mini proyecto background)

Vamos a hacer una landing page:

- Profundizamos en background

- Colocamos un mapa de Google.

* Parte Open IA (ChatGPT y Dall-E3)

- Hacemos una introducción a ChatGPT (¿que es Open IA?)

- Hacemos nuestro primer prompt (o pedido al chat)

- Traemos nuestro primer código html y css

- Editamos nuestro código html y css con los conocimientos de antes

- Editamos el banner y el footer

- Hacemos nuestro primer prompt (o pedido a Dall-E 3)

- Agregamos imagenes generadas con Dall-E 3

- Editamos las imagenes

- Agregamos background (fondos).

¡Y estará lista tu primera landing page con Chatgpt!

Apuesto que te va a encantar el curso. ¡Te espero en el curso!

Esta es la versión remasterizada del curso (lanzado en 2023), editada desde cero, corrigiendo errores y eliminando ruidos. Ahora va a mayor velocidad para darle fluidez y en resolución 1080p.

Who this course is for:

Diseñadores UX/UI sin experiencia en maquetado web
Aspirantes a diseñador web
Diseñadores gráficos (que también quieren aprender diseño web)
Interesados en como combinar las IA con el diseño web tradicional
Público en general

Crea tu Web Responsive con HTML5 y CSS3: Edición ChatGPT

What you'll learn

Explore related topics

Course content

Introducción16 lectures • 1hr 25min

Comenzamos el proyecto. ¡Vamos a crear una web para un diario!17 lectures • 1hr 28min

¡A nuestro sitio web estático lo convertimos en adaptable!16 lectures • 1hr 26min

Mini Proyecto Background3 lectures • 13min

OpenIA (ChatGPT y DALL-E 3)12 lectures • 1hr 22min

Requirements

Description

Who this course is for: