Crea tu Web Responsive con HTML5 y CSS3: Edición ChatGPT
Guillermo Visintini, Diseño Multimedia y Marketing
Ve esta clase y miles más
Ve esta clase y miles más
Lecciones en esta clase
-
-
1.
Presentación del Curso
1:16
-
2.
Bienvenida al curso HTML Y CSS responsive design
3:06
-
3.
Hacemos nuestra primera carpeta y primer "hola mundo".
5:21
-
4.
Mostramos las etiquetas principales (header, main, footer).
6:57
-
5.
Usamos la etiqueta img para tener imagenes
3:36
-
6.
Seguimos viendo etiquetas hacemos nuestro formulario.
7:29
-
7.
Usamos las etiquetas ul, li y a para indexar páginas.
7:34
-
8.
Mostramos la etiquetas style y damos color a las palabras.
5:56
-
9.
Hacemos nuestro primer link en html y creamos archivo style.css
6:19
-
10.
Hacemos selector universal y creamos nuestra primera caja con CSS.
4:23
-
11.
Seguimos con el modelo de cajas creamos caja 1 y caja 2.
7:20
-
12.
Explicamos display flex y modelo de cajas.
3:15
-
13.
Explicamos aline items y justify content (display flex).
6:59
-
14.
Achicamos la img a través de una clase.
3:00
-
15.
Porcentajes (etiquetas html).
8:10
-
16.
Porcentajes vs pixel (etiquetas html).
2:45
-
17.
Etiquetas tablas
4:36
-
18.
Etiqueta span
2:54
-
19.
Etiquetas select
2:36
-
20.
¡Hagamos nuestra primera página web!
5:46
-
21.
Hacemos nuestra divición y la herobox.
7:23
-
22.
Ponemos nuestras imagenes en la herobox
4:22
-
23.
Cajas 1 y Cajas 2 (main simbólico)
7:20
-
24.
Agregamos la foto principal del título
6:47
-
25.
Creamos nuestro nav bar con sus botones
9:42
-
26.
Creamos el título de nuestro banner (header)
7:29
-
27.
Separación del header con el padding
6:31
-
28.
Texto para las cajas (herobox) (archivos para estudiantes).
3:46
-
29.
Centramos los h2 de los herobox (cajas)
1:48
-
30.
Centramos los títulos del herobox (cajas)
2:00
-
31.
Trabajamos el footer
3:54
-
32.
Trabajamos el footer y cambiamos título
3:07
-
33.
Le damos un position fixe al header (nuevas configuraciones)
3:17
-
34.
Le cambiamos los colores al documento y etiquetas
4:08
-
35.
Hacemos un repaso de lo visto en el curso y recomendaciones.
6:13
-
36.
Agregamos más texto al título principal y configurando
4:19
-
37.
Antes de comenzar conocemos Medidas absolutas y Relativas (PX VS REM)
3:29
-
38.
¿Que es diseño web CSS3?, ¿Qué es diseño web adaptable?
4:56
-
39.
Hacemos un repaso del sitio web estático y mostramos el responsive
3:48
-
40.
Mostramos las medidas que vamos a trabajar (tablet y celular)
2:31
-
41.
Etiquetas Meta y Viewport
4:05
-
42.
Comenzamos a editar el código CSS del sitio estático
6:17
-
43.
Recuperamos el hover, editamos clases y agregamos div nuevo
3:30
-
44.
Acomodamos nuestro menú y comenzamos el menú hamburguesa
5:22
-
45.
Hacemos nuestro primer media query para tablet y escribimos CSS
5:57
-
46.
Vemos los position: absolute, fixes y relative. Empezamos el menú hamburgues
6:52
-
47.
Trabajamos el titulo-banner y más código CSS3
7:34
-
48.
Aumentamos el título principal y ajustamos imagen del avión.
2:02
-
49.
Completamos etiquetas html y comenzamos los media query para celular
7:09
-
50.
Trabajamos el herobox , y hacemos flex direction column con las cajas
7:22
-
51.
Consejos sobre responsive y container queries. Editamos CSS3 avión.
6:22
-
52.
Revisamos el herobox y agregamos el archivo Javascript
9:12
-
53.
Mini Proyecto Background
1:12
-
54.
Conocemos el proyecto y empezamos con todo
7:36
-
55.
Finalizamos el mini proyecto Background
3:43
-
56.
Clases refuerzo: Landing Page con ChatGPT
2:28
-
57.
¿Que es ChatGPT?, ¿quiénes lo crearon?
3:59
-
58.
¡Entramos a OpenIA y le pedimos nuestra página (landig) a ChatGPT!
6:37
-
59.
Seguimos trabajando con ChatGPT, código html y css.
7:22
-
60.
DALL-E 3 (actualización)
7:36
-
61.
Seguimos trabajando con ChatGPT y conocemos DALL-E 2.
6:43
-
62.
Descargamos las imagenes de Dalle-E 2 y las agregamos al html (Usar Dalle-E 3)
9:03
-
63.
Seguimos editando lo que nos dió ChatGPT (el banner y título)
5:30
-
64.
Ajustamos las imagenes y editamos el footer
7:56
-
65.
Trabajamos con imagenes background para nuestra landing page
7:35
-
66.
Solucionamos el ruido que genera la imagen background con un div
7:12
-
67.
Usamos la etiqueta span y hacemos ajustes finales para la landing page
9:33
-
-
- --
- Nivel principiante
- Nivel intermedio
- Nivel avanzado
- Todos los niveles
Generado por la comunidad
El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.
68
Estudiantes
--
Proyecto
Acerca de esta clase
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 landing page única y atractiva. Aprenderás:
- Técnicas avanzadas de diseño de background 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!
Proyecto de clase práctica
Trabajos finales:
Con lo aprendido a lo largo de la clase deberás:
1) Crear una página web básica de un diario utilizando HTML y CSS, aplicando las técnicas y estructuras enseñadas durante las lecciones iniciales.
2) Adaptar esa misma página web para que sea responsive, asegurando que se vea y funcione correctamente en diferentes dispositivos, como tabletas y celulares, siguiendo las instrucciones de la sección de diseño responsive.
3) Profundizar los conocimientos adquiridos creando un mini proyecto de una landing page para un local gastronómico, donde nos enfocaremos en el uso de background (fondos) en CSS.
4) Crearás una landing page pidiendo código a ChatGPT
Luego deberás compartir si gustas el trabajo con tus compañeros.
Todo el material que necesitas está disponible para descargar.
(por cuestiones de compatibilidad con este sistema de descarga de archivos, los archivos que hacen posible el drop del menú hamburguesa están en documento docx (jsParaResponsive.docx) y no en txt como en el video, lo mismo sucede con el código background (CodigoBackground.docx)
Valoración de la clase
¿Por qué unirse a Skillshare?
Mira las galardonadas Skillshare Originals
Cada clase tiene lecciones cortas y proyectos prácticos
Tu membresía apoya a los profesores de Skillshare
Aprende desde cualquier lugar
Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.
