Tamaño de la fuente: 32px
Color del título: #191a24
Etiqueta : <h3> </h3>
Atributo: class
Image rendered size: 400 x 100 px
Funcionalidad del sitio que usa JavaScrip: ingresar, agregar y mostrar
Para eliminar la imagen solo borre el texto del código en HTML.
Cambie el texto desde el código HTML también quise cambiarle el color solo como plus.
Introducción
¿Qué vas a aprender?
Conceptos Generales
Introducción al desarrollo de software
Servidor y cliente
Front-End y Back-End: definición y características
¿Qué es una API?
¿Qué es Git?
Aproximación a los lenguajes de la web
Aproximación a HTML desde el diseño
Aproximación a CSS desde el diseño
Aproximación a JavaScript desde el diseño Parte I
Aproximación a JavaScript desde el diseño Parte II
Aproximación a las herramientas de desarrollo
Bases del diseño en el desarrollo
Características de las imágenes en el contexto de desarrollo web
Implementación de las imágenes en el contexto de desarrollo web
Características e Implementación de textos
Características e implementación de colores
El diseño desde una mirada de desarrollo
Diseño de botones
Implementación de botones
Diseño e implementación de inputs
Diseño de tablas
Funciones de tablas
Diseño e implementación de checkbox
Despedida
Live Class
Live Class
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Aproximación a las herramientas de desarrollo
11/23Recursos
Reto: HTML, CSS, JS
Sitio a revisar - Codepen Reto: HTML, CSS, JS
Utilizando las developer tools, dirígete al sitio dado y responde las siguientes preguntas:
- Cuál es el tamaño de la tipografía del título?
- Cuál es el color del título?
- Cuál es la etiqueta que usa el título?
- Cuál es el único atributo del título?
- Cuál es el tamaño renderizado de la imagen?
- Menciona la funcionalidad del sitio que usa JavaScript
Adicionalmente, realiza estas acciones:
- Elimina la imagen
- Cambia el texto del título desde los elementos de developer tools
Aportes 36
Preguntas 2
Ordenar por:
- Tamaño de la fuente: 32px
- Color del titulo: #191a24
- Etiqueta : <h3> </h3>
- Atributo: class
- Image rendered size: 400 x 100 px
- Funcionalidades: ingresar opción, agregar opción y mostrar opción
Si se preguntan porque las etiquetas del profesor son tan largas, eso es porque el esta utilizando TailwindCSS, un framework que te permite darle estilos a tus etiquetas a través del atributo class y no es necesario definirlas en un archivo de css aparte. Tailwind tiene un curso sobre este framework curso
-Tamaño de la fuente: 32px.
-Color del titulo: #191a24.
-Etiqueta : \<h5> \</h5>.
-Atributo: class.
-Tamaño de la imagen: 400 x 100 px.
-Funcionalidades: ingresar opción, agregar opción y mostrar opción.
![]()
Utilizando las developer tools:
Cuál es el tamaño de la tipografía del título?
R/ font-size: 32px
Cuál es el color del título?
R/ color: #191a24
Cuál es la etiqueta que usa el título?
R/ <h3></h3>
Cuál es el único atributo del título?
R/ class
Cuál es el tamaño renderizado de la imagen?
R/ 400 x1 00
Menciona la funcionalidad del sitio que usa JavaScript
R/ cambiar el contenido y revisar la flexibilidad de nuestro sitio, se hace mediante eliminar un nodo, nos muestra como se acomodan los elementos adjacentes que se elimino.
Muy bueno, tenia claro lo de la inspección, pero el simular velocidades de carga no. Quizás faltó mencionar en las opciones de dispositivos móviles, también es muy útil 😃
Reto
font-size: 32px;
color: #191a24;
etiqueta: <h3>
atributo: class
image: 400 x 100
JavaScript: ingresar, agregar y mostrar opción
Elimine la imagen, simplemente quitando el codigo html.
Cambie el texto desde el codigo html
Tamaño 32 px
Color #191a24
etiquet <h3></h3>
atributo class
400 x 100
Reto
font-size: 32px;
color: #191a24;
etiqueta: <h3>
atributo: class
image: 400 x 100
JavaScript: ingresar, agregar y mostrar opción
Elimine la imagen, simplemente quitando el codigo html.
Cambie el texto desde el codigo html
-
font-size: 32px;
-
color: #191a24;
-
Etiqueta: <h3>
-
Atributo: class
-
Tamaño de renderizado de iamgen: 400 x 100 px
-
Funcionalidad JS: ingresar opción, agregar opción y ver la lista de opciones agregadas.
- font-size: 32px;
- color: #191a24;
- Etiqueta: <h3>
- Atributo: class
- Rendered size: 400 x 100 px
- Funcionalidad: ingresar opción, agregar opción y ver la lista de opciones agregadas.
Reto adicional:
Tamaño de la fuente: 32px
Color del titulo: #191a24
Etiqueta : <h3> Ejercicio #1 </h3>
Atributo: class
Image rendered size: 400 x 100 px
Funcionalidades: ingresar opción, agregar opción y mostrar opción.
https://codepen.io/alvaaz/full/wvjBvLQ
Hola Pofe! Muy buen contenido
Adjunto el aporte de la actividad:
- Tipografía del título: Sans - Serif - 32px
2.Color del título: #191a24 - Etiqueta que usa el título: <h3</h3>
- Atributo del título: Class
- Tamaño renderizado de la imagen:
- Funcionalidad del sitio que usa JavaScript: No sé cómo ver esta información.
¿Cuál es el tamaño de la tipografía del título?
font-size: 32px;
¿Cuál es el color del título?
color: #191a24;
¿Cuál es la etiqueta que usa el título?
<h3></h3>
¿Cuál es el único atributo del título?
Class=“Title”
¿Cuál es el tamaño renderizado de la imagen?
Tamaño renderizado: 400 × 100 px
- Menciona la funcionalidad del sitio que usa JavaScript
Crear una lista de opciones mediante un campo input y un botón “Agregar opción +”
* Cuál es el tamaño de la tipografía del título?
font-size: 32px;```css
font-size: 32px;
```
* Cuál es el color del título?
```css
color: #191a24;
```
* Cuál es la etiqueta que usa el título?
```css
```
* Cuál es el único atributo del título?
```js
class
```
* Cuál es el tamaño renderizado de la imagen?
Image rendered size: 400 x 100 px
* Menciona la funcionalidad del sitio que usa JavaScript
Input para ingresar texto. Botón para agregar texto. Recuadro para mostrar texto.
| Pistas/Preguntas | Notas |
|-------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------|
| Herramientas de desarrollo | Son herramientas para inspeccionar, verificar y testear páginas web en navegadores. En Chrome, se accede con clic derecho y seleccionando "Inspeccionar". |
| Interfaz de herramientas de desarrollo | Se divide en dos secciones: izquierda (pestañas activas) y derecha (reglas de estilo en CSS que afectan al elemento seleccionado). |
| Modificación de estilos | Permite cambiar propiedades CSS en tiempo real, como color de texto. |
| Modelo de caja | Muestra dimensiones y propiedades de los elementos (padding, margen, etc.) en CSS. |
| Emulación de velocidad de internet | En la pestaña de Network, se puede simular diferentes velocidades (ej. Slow 3G) para ver el rendimiento del sitio. |
| Cambios en el contenido | Se pueden editar textos y eliminar nodos en el árbol de elementos. |
---
## Resumen
La clase sobre herramientas de desarrollo web enseña a usar las herramientas de los navegadores para inspeccionar y modificar elementos en tiempo real. Se cubre la interfaz, la modificación de estilos CSS, el modelo de caja y la emulación de velocidades de internet, destacando la importancia de estos aspectos para el diseño web efectivo.
Titulo 32 Sans Serif
etiqueta: H3
Color : #191a24
Atributo: class
Image rendered size: 400 x 100 px
Funcionalidad del sitio que usa JavaScrip: ingresar, agregar y mostrar
* tamaño de la tipografía del título = ***32px***
* color del título = ***#191a24***
* la etiqueta que usa el título = ***h3***
* atributo del título = ***class***
* tamaño renderizado de la imagen = ***400x100px***
* la funcionalidad del sitio que usa JavaScript = ***ingresar, agregar y mostrar opción***
* Tamaño del título 32px
* Color del título: #191a24
* Etiqueta del título: \
Cambia este título\
* Atributo: class * Tamaño del renderizado de img: 400px x 100px
no aparece nada en la sección de recursos. Alguien puede pasar el link para el reto?
Font-size: 32px;
Color: #191a24;
Etiqueta: <h3>
Atributo: class
Tamaño renderizado: 400 x 100
Funcionalidad javaScript: ingresar, agregar y mostrar opción
hice la eliminacion de la img y modificacion de titulo pero no se como publicar una imagen.
- Tamaño de tipografía: 32px
- Color del título: #191a24
- Etiqueta:<h3></h3>
- Atributo: class
- Tamaño renderizado: 400x100px
- Funcionalidad: Ingresa una opcion, agregar opción y mostrar opción
- Tamaño de fuente: 32px
- Color titulo: #191a24
- etiqueta: <h3></h3>
- atributo: class=“title”
- Tama de la imagen: 400x100px
- Funcionalidades: input con ingresar opción, botón que permite agregar las opciones y listado que muestra las opciones ingresadas
- Cuál es el tamaño de la tipografía del título?
R= 32px - Cuál es el color del título?
R= #191a24 - Cuál es la etiqueta que usa el título?
R=<h3></h3> - Cuál es el único atributo del título?
R= Class - Cuál es el tamaño renderizado de la imagen?
R= 400 × 100 px - Menciona la funcionalidad del sitio que usa JavaScript
R= Ingresa una opción y mostrar opción
EL RETO:
-Tamaño de la fuente: 32px
-Color del titulo: #191a24
-Etiqueta : <h3>
-Atributo: class
-Rendered size: 400 x 100 px
-Image
Cuál es el tamaño de la tipografía del título? 32px
Cuál es el color del título? #191a24
Cuál es la etiqueta que usa el título? <h3></h3>
Cuál es el único atributo del título? Class
Cuál es el tamaño renderizado de la imagen? 400*100
Menciona la funcionalidad del sitio que usa JavaScript. INGRESAR OPCIÓN, AGREGAR OPCIÓN Y MOSTRAR OPCIÓN
Cuál es el tamaño de la tipografía del título?
- 32 px
Cuál es el color del título?
-191a24
Cuál es la etiqueta que usa el título? - h3
Cuál es el único atributo del título? - class
Cuál es el tamaño renderizado de la imagen? - 400x100 px
Menciona la funcionalidad del sitio que usa JavaScript - ¿Cómo sé cuál es la funcionalidad?
Lo hice y también encontré la forma de cambiar el color del botón “agregar opción”
Cuál es el tamaño de la tipografía del título? 32
Cuál es el color del título? #191a24
Cuál es la etiqueta que usa el título? <h3> </h3>
Cuál es el único atributo del título? class="title"
Cuál es el tamaño renderizado de la imagen? 400x100 px
Menciona la funcionalidad del sitio que usa JavaScript.
Quisiera saber donde puedo ver las fuciones de javascript que usa el sitio ?
Cuál es el tamaño de la tipografía? 54px
Cuál es el color del título? #fff
Cuál es la etiqueta del título? <h1>
Cuál es el atributo único del título? class
Cuál es el tamaño renderizado de la imagen? 776 x 480
Menciona la funcionalidad del sitio que usa JavaScript: descargar y otro dispositivos para su funcionalidad, mostrar más.
Cuál es el tamaño de la tipografía del título? --32px
Cuál es el color del título? – hsl(235, 17,12);
Cuál es la etiqueta que usa el título? – <h3>
Cuál es el único atributo del título? – <CLASS>
Cuál es el tamaño renderizado de la imagen? 400 X 100 PX
Menciona la funcionalidad del sitio que usa JavaScript – Agregar texto en un imput.
Reto completando 🤩:
- Cuál es el tamaño de la tipografía del título?: 32px
- Cuál es el color del título?: Hexadecimal “#191a24”
- Cuál es la etiqueta que usa el título?: <h3></h3>
- Cuál es el único atributo del título?: class=“title”
- Cuál es el tamaño renderizado de la imagen?: width = 400px y height = 100px
- Menciona la funcionalidad del sitio que usa JavaScript: Toma el texto que se introdujo en el input con id “option” y lo agrega a una lista dinámica con id “list”
.
Resultado final:
<h3 class=“title”>Booking Hotel</h3>
Tamaño de la fuente: 32 px
Color del título: #191a24
Image rendered size: 400 x 100 px
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?