When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.
Crea tu primer página web con HTML5 y CSS3: Responsive web design
Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.
This Course Includes
skillshare
0 (0 reviews )
4 hours 41 minutes 
english
Online - Self Paced
course
SkillShare
About Crea tu primer página web con HTML5 y CSS3: Responsive web design
Presentación del curso HTML Y CSS responsive web design
Bienvenida al curso HTML Y CSS responsive design
Hacemos nuestra primera carpeta y primer "hola mundo".
Mostramos las etiquetas principales (header, main, footer).
Usamos la etiqueta img para tener imagenes
Seguimos viendo etiquetas hacemos nuestro formulario.
Usamos las etiquetas ul, li y a para indexar páginas.
Mostramos la etiquetas style y damos color a las palabras.
Hacemos nuestro primer link 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 aline items y justify content (display flex).
Achicamos la img a través de una clase.
Porcentajes (etiquetas html).
Porcentajes vs pixel (etiquetas html).
Etiquetas tablas
Etiqueta span
Etiquetas select
¡Hagamos nuestra primera página web!
Hacemos nuestra divición y la herobox.
Ponemos nuestras imagenes en la herobox
Cajas 1 y Cajas 2 (main simbólico)
Agregamos la foto principal del título
Creamos nuestro nav bar 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 footer
Trabajamos el footer y cambiamos título
Le damos un position fixe al header (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
Fin de nuestra primera página web (ahora toca responsive)
Antes de comenzar conocemos Medidas absolutas y Relativas (PX VS REM)
¿Que 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 position: absolute, fixes y relative. Empezamos el menú hamburgues
Trabajamos el titulo-banner y más código CSS3
Aumentamos el título principal y ajustamos 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 responsive y container queries. Editamos CSS3 avión.
Revisamos el herobox y agregamos el archivo Javascript
Mini Proyecto Background
Conocemos el proyecto y empezamos con todo
Finalizamos el mini proyecto Background
What You Will Learn?
- Bienvenido a esta clase: ¡crea tu primer página web con HTML5 Y CSS3: Responsive web design!.
- 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..
- - Integración de un mapa de Google para una mayor interactividad..
- ¡Estoy seguro de que disfrutarás cada paso de este curso!.