2022

El límite es tu imaginación

Sesión 3
Agenda Web Dev Fundamentals
del día

07:00 pm 07:50 pm
Bienvenida Figma
Registro + Prototipado
Web Dev Fundamentals
08:00 pm
07:05 pm Break
Retroalimentación, Menti para Hora de un café
dudas

07:15 pm 08:10 pm
Dudas HTML y CSS CSS
¿Cómo te fue con el módulo 3? ¿Qué es? Tipos de selectores, usos, vinculación y más…

07:20 pm
08:50 pm
HTML Cierre de clase
¿Qué es HTML?, ¿qué cambios tiene HTML5?
¿Qué aprendiste en esta sesión?
Creación de un HTML con Visual Studio Code,
extensiones y más…
¿Qué hicimos hace dos semanas? Web Dev Fundamentals

● Conocimos que es Git

● Creamos nuestro repositorio en GitHub
● Desplegamos un sitio web a GitHub Pages
Vamos al repositorio 👉🏻kalg12/First-Web-TallerWDF (github.com)

Lo vas a clonar y lo vas a editar.

 Web Dev Fundamentals

Objetivos principales
1. Conocer y hacer uso de etiquetas HTML5
2. Uso de extensiones en Visual Studio Code
3. Usos de CSS + integración en HTML5
4. Inserción de etiquetas de 3ros en una página web(Mapa,
Video, Chat, etc.)

MINDSET DIGITAL
Mentalidad de Crecimiento
Cambiemos el “no puedo” por el “aún no
lo aprendo”.
 Web Dev Fundamentals

Si tienes duda a lo largo de la sesión, puedes hacerlo de

manera anónima por acá:
https://www.menti.com/alkq59g2kub1
 Web Dev Fundamentals

¿Pudiste consultar el material abordado de la

sesión 3?

¿Pudiste crear tu página web? ¿Intentaste subirla

a GitHub? ¿Te atoraste en algo?
“ El esfuerzo constante es la
clave para liberar nuestro

”
potencial.

Winston Churchill
HTML Web Dev Fundamentals

● HTML significa Hyper Text Markup Language (Lenguaje de marcado de hipertexto)

● HTML es el lenguaje de marcado estándar para crear páginas Web
HTML Web Dev Fundamentals

Pruébalo tu mismo

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

Realiza una modificación

Web Dev Fundamentals
 Web Dev Fundamentals

Vamos a crear una carpeta en nuestro

equipo, elige una temática y vamos a crear
un archivo de nombre: index.html
 Web Dev Fundamentals

Crea la siguiente
estructura con ayuda
de VSC.
HTML Web Dev Fundamentals
Esta etiqueta contiene atributos que
describen nuestro documento:

Título
Metadatos
Enlaces a scripts o estilos
Base
El contenido de esta etiqueta sería
el contenido que verían los
usuarios al entrar a nuestra página.
El contenido de esta etiqueta sería
el contenido que verían los
usuarios al entrar a nuestra página.
HEADER Encabezado
FOOTER Pie de página
NAV Navegación
ASIDE Contenido al costado
SECTION Sección de la página
ARTICLE Representa una entrada
MAIN Representa la sección principal
DIV División
 h1…h6 Encabezado
p: Párrafo
a: Ancla

span: Sección contenidos

strong/b: Texto en negritas
i: Texto itálicas
ol: Lista Ordenada
ul: Lista Desordenada
li: Elemento lista
 table: Tabla
head: Encabezado de tabla
tbody: Cuerpo de tabla
tfoot: Pie de tabla
tr: Fila de tabla
th: Celda de encabezado
td: Celda

https://www.quackit.com/html/html_table_generator.cfm
 FORM: Formulario
LABEL: Pie de página
INPUT: Navegación
TEXTAREA: Área de texto
PROGRESS: Indicador de progreso
BUTTON: Botón
SELECT: Lista desplegable
OPTION: Opción de una lista
 img: Imagen
video: Video
audio:: Audio
HTML Web Dev Fundamentals
Figma Web Dev Fundamentals
 Web Dev Fundamentals

Break
Volvemos a las 8:22 pm
CSS Web Dev Fundamentals

Hoja de estilos en cascada

CSS - Selectores de CSS Web Dev Fundamentals

● Elementos HTML
● Clases
● ID’s
CSS - Selectores Avanzados Web Dev Fundamentals

● >: Hijos directos

● +: Elemento siguiente
● ~: Elementos después
● [atributo]
● [atributo=valor]
● :focus
● :hover
● :visited
● ::after
● ::before
CSS - Propiedades Web Dev Fundamentals

● Color y color de fondo

● Width y Height
● Bordes
○ border-style
○ border-width
○ border-color
○ border-radius
● Alineamiento
○ text-align
○ vertical-align
● Overflow
○ visible
○ hidden
○ scroll
○ auto
● Float
CSS - Propiedades Web Dev Fundamentals

● Display
○ none
○ block
○ inline
○ inline-block
○ flex
○ grid
● Posición
○ static
○ relative
○ fixed
○ absolute
○ sticky
https://www.mclibre.org/consultar/amaya/css/css-propiedades.html
CSS - Formas de aplicar estilos Web Dev Fundamentals

Elemento Clase Id Universal

CSS - Especificidad Web Dev Fundamentals
CSS - Modelo de caja Web Dev Fundamentals
CSS - Z Index Web Dev Fundamentals
CSS - Diseño Responsivo Web Dev Fundamentals

media queries
Ejercicio
guiado

● Se realizará un archivo HTML de nombre index.html y se inicializará un repositorio.

● Se crearán las carpetas necesarias.
● Se creará un archivo de CSS y se vinculará al index.html
● Se subirán los primeros cambios a GitHub
Reto
Crea una página en HTML imitando un sitio web.
De preferencia que sea uno sencillo.

En la estructura de tu sitio web, crea una carpeta que

contenga tus imágenes y estilos de CSS.

Despliega tu sitio en GitHub Pages.

 Web Dev Fundamentals

Keep Moving Forward

“ Camina hacia el futuro, abriendo nuevas puertas

y probando cosas nuevas, sé curioso … porque
nuestra curiosidad siempre nos conduce por
nuevos caminos.

-Walt Disney-

Ensayamos, Erramos, y Aprendemos Ágilmente

”
MindSet Digital
/ucampaprende