Introducción
Uso de herramientas de desarrollo en navegadores web
Clase 11 de 23 • Curso Desarrollo Web para Diseñadores
Contenido del curso
Conceptos Generales
- 2
Conceptos Básicos del Desarrollo de Software y Programación
06:41 - 3
Modelo de Solicitud y Respuesta en la Web
03:16 - 4
Frontend y Backend: Conceptos y Comunicación en Desarrollo Web
08:16 - 5
Conceptos básicos de APIs y su funcionamiento práctico
07:16 - 6
Control de Versiones con Git para Diseñadores y Desarrolladores
06:55
Aproximación a los lenguajes de la web
- 7
Conceptos Básicos de HTML para Diseñadores
12:20 - 8
Fundamentos de CSS: Sintaxis y Aplicación de Estilos en HTML
07:16 - 9
Conceptos Básicos de JavaScript para Diseñadores
05:06 - 10
Sintaxis y Tipos de Datos en JavaScript: Práctica con Figma y Run.js
11:32 - 11
Uso de herramientas de desarrollo en navegadores web
10:00
Bases del diseño en el desarrollo
El diseño desde una mirada de desarrollo
- 16
Estados de Botones en Desarrollo Web con HTML y CSS
09:30 - 17
Modelo de Caja y Estados en Botones HTML y CSS
08:06 - 18
Diseño y Estados de Inputs en Figma: Focus, Disable y Hover
08:56 - 19
Paginación y Funcionalidades en Tablas de Datos
06:10 - 20
Funcionalidades Comunes en el Diseño de Tablas Interactivas
06:24 - 21
Diseño e Implementación de Checkbox: Estados y Atributos HTML
05:04 - 22
Resumen del Curso de Desarrollo Web
01:40
Live Class
Resumen
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