Disfruta de nuestro contenido y eventos por un año a un precio especial

Antes: $179

Currency
$149/año
¡Suscríbete!

🔥 Te quedan 🔥

0D
2H
10M
16S

Editando HTML

3/22
Recursos
Transcripción

Aportes 42

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

No sabia que podía mover los nodos de esa forma 😃

  1. Control + F: Buscar palabras especificas dentro del documento HTML. (Se debe estar en la sección de elementos)
  2. Los tres puntos al lado izquierdo de cada elemento HTML nos ayudan a mover estos a otras posiciones. Por ejemplo: cambiar de posición los elementos de una lista del nav.
  3. Settings -> Shorcouts: Te permiten ver los atajos de teclado que puedes utilizar en las dev tools dependiendo de tu sistema operativo.

Para los que quieran profundizar Chrome DevTools
Elements

<h1>HTML</h1>

Podemos ver la estructura HTML de cualquier página en la pestaña Elements. Desde ahí podrémos cambiar el contenido de todas las etiquetas, remover y añadir más, cambiar la posición de los nodos, y más.

  • Podemos ver la estructura de cada elemento en pantalla con el inspector ubicado en la esquina superior izquierda o click derecho en éste e inspeccionar elemento.
  • Para hacer busquedas por palabra damos click en cualquier nodo y presionamos control + f

Esta práctica la recomiendo mucho cuando tienen “dudas” sobre algún estilo en Css, o en javascript; para que después, lo pasen a su código.

En Firefox, el equivalente es la pestaña Inspector y tiene habilitado el buscador por defecto. Además te da sugerencias de qué clases o elementos buscar

A mi me salio para buscar haciendo ctrl + F

En esta página van a poder encontrar la lista completa de shortcuts and gestures de Devtools. Viene la descrpción tanto para Mac como para Windows y Linux 😃

ELEMENTS - HTML

  • Para hacer búsqueda dentro de la pestaña de elementos (Windows) Ctrl + Shift + F
  • Doble click encima de la etiqueta para modificar texto.
  • Al dar click en el icono de 3 puntitos se pueden mover las etiquetas
    html.

Manipulando el HTML


Podemos ver el HTML de una página web en la sección de Elements del DevTools. Aquí podremos manipular el HTML o usar el selector y al tocar en algo en específico dentro de la página en Elements se colocará en la línea de código html que sea ese elemento seleccionado.

Para modificar textos dentro de etiquetas das doble click, y también en las etiquetas. Y en los tres puntos a la derecha nos dejan arrastrar todo ese bloque de código hacia otros lugares.


Shortcuts

Ctrl+shift+c, para activar el selector

Ctrl+f, para hacer búsquedas dentro de Elements, este comando también sirve para buscar palabras dentro de una página web

Hay que tener en cuenta que los cambios que hagamos en DevTools no estarán en nuestro código local, así que antes de emocionarnos y hacer muchísimos cambios es mejor trabajar progresivamente de a pocos esos cambios para solucionar errores

<h3>3. Editando HTML</h3>

0:43 Sección Elementos.

1:23 Seleccionando un elemento en la página.

2:45 Modificando los nodos del HTML.

3:25 Moviendo los nodos.

5:21 Shorcuts para acceder a las funcionalidades del inspector con más eficiencia.

<h3>- Les dejo este tutorial que resume todo el contenido del curso con marcadores para acceder rapidamente a los puntos claves que deseamos recordar.</h3>

Cuéntame si parece útil este formato de resumen, y dale 💚 si quieres más de estos para la comunidad 😁🙌

Jamás había usado el de buscar una palabra de un elemento. Me encantó esa forma de encontrar un elemento a partir de su texto !!!

Todas las página tienen su propio DevTools, y todo lo que tu ves dentro de DevTools es exactamente el código de dicha página, es el código que el servidor de X página le está mandando a tu navegador, y si, puedes ir a Facebook o Twitter y mirar sus devtools, juguetear con ella e incluso cambiar el layout de dichas páginas, obviamente al refrescarla todo lo que hagas se irá, pero es divertido curiosear en su código ^^

Consejos para editar HTML

  • Para buscar cosas en el Dev Tools utilizamos “comand + F”.
  • Para modificar el HTML solo es necesario dar doble click sobre el código.
  • Drag and drop de elementos.
  • Buscar mas comandos en el menu shortcuts.
DevTools🛠 - Elements
Al abrir las DevTools. En la pestaña de Elements o Elementos, podremos ver ver la estructura HTML de toda página web y podremos hacer modificaciones en tiempo real sobre esta, pero, al recargar la página, todo volverá a su estado normal.

Gran herramienta de trabajo para desarrolladores,

Hoy aprendí a como mover los nodos del árbol HTML. Yo intentando copiar y pegar todo el bloque de HTML.

Es muy útil para hacer cambios de los cuales no estamos muy seguros, o simplemente ir probando cosas nuevas para luego pasarlo a nuestro código!

DevTools me ha ayudado bastante en mis desarrollos 😄

Con este comando en la consola puede editar cualquier sitio web

document.designMode = 'on'

eso de mover los nodes… super!!!

A seguir aprendiendo.

Excelente Diego

Genial!!!

Y Yo que pense que no aprenderia mucho en este curso, Y Pumm tres cosas que no sabia 😍😍😍

Empezó muy bien este curso. Genial …

Desconocía que los tres puntos era para mover los elementos HTML 😮

No inventes no sabia mucho de esto. Sobre todo lo de los nodos, me va a ahorrar mucho tiempo!

No sabia lo de Ctrl + F, y los atajos del teclado, eso me gusto.✔👏

Generalmente usaba la consola de Firefox, pero vamos a probar con la de Chrome!!!

Muy buen inicio!

Super utiles las Devtools, yo las he usado para aprender desarrollo web y me han servido una barbarida…Son de gran ayuda… Cuando quiero ver como esta construida una web tambien uso el Inspector de elemento y eso da una idea de maquetación muy chevere

super bueno, par de cosas sencillas y útiles que aprendí hoy

De mucha utilidad cuando trabajas maquetando el proyecto y mas aun cuando comienzas a darle estilos.

Cuando tienes un proyecto grande, para hacer una búsqueda te puede llevar mucho tiempo, pero puedes hacer más óptimas tus búsquedas, es decir, si necesitas ser súper específico en buscar un elemento, puedes ir a la barra de herramientas y hacer un filtro:

👌

No sabía que el Ctrl+F funcionaba en la consola ni que se pueden mover bloques de código, me este curso si que me está encantando.

Dev tools! será tu mejor amigo de por vida en la programación web, es mejor buscar el error en dev tools que ir a tu Editor de código y tratar de ver que te quedo mal

Dejo un link de Google Developers que me ayudo mucho con este tema en particular. Espero que les sirva.
https://developers.google.com/web/tools/chrome-devtools/dom