Los Elementos para CÓDIGO que no CONOCES en HTML (code, kbd, pre, samp y var)

<kbd> para entradas del teclado

El elemento <kbd> representa una entrada por parte del usuario, ya sea por teclado o comandos de voz.

See the Pen HTML | 1.30 - Elementos de código - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

<samp> para...

Leer más...
Las 5 Formas de Crear LAYOUTS en HTML

Layouts

El layout es como se va a visualizar o distribuir el contenido de una web.

See the Pen HTML | 1.28 - Layouts - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Elementos HTML para Layouts

HTML nos ofrece varias etiquetas semánticas que definen diferentes...

Leer más...
TODO sobre el Elemento HEAD en HTML (metadatos, charset, title, link, etc!!)

El elemento <head>

  • El elemento <head> es un contenedor de metadatos y se coloca entre la etiqueta <html> y la etiqueta <body>.
  • Los metadatos HTML son datos sobre el documento HTML. Los metadatos no son visibles.
  • Los metadatos generalmente definen el título del...
Leer más...
BLOQUES y Elementos EN LINEA en HTML

Bloques y elementos en línea

Todos los elementos HTML tienen un valor de visualización predeterminado según el tipo de elemento que sea. 

Los dos valores de visualización son: block e inline.

Bloques

Un elemento de nivel de bloque siempre comienza en una nueva...

Leer más...
El elemento PICTURE de HTML explicado!! (cómo poner Imágenes)

Elemento Picture

Nos permite mostrar diferentes imágenes para diferentes dispositivos o tamaños de pantalla.

<picture>

HTML5 introdujo el elemento <picture>

Este elemento contiene elementos <source> y cada uno de estos hace referencia a una imagen diferente. Y el...

Leer más...
Cómo crear CITAS y MENCIONES en HTML

Citas y menciones

See the Pen HTML | 1.10 - Citas y menciones - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Para citas cortas <q>

La etiqueta <q> define una cita corta.

See the Pen HTML | 1.10 - Citas y menciones - 2 by Francisco Palomares Barrios (...

Leer más...
Cómo poner un VÍDEO de YouTube en HTML que se reproduzca solo

¿Problemas con los formatos de vídeo?

Youtube hace el trabajo por ti para hacer el video compatible con todos los navegadores.

See the Pen HTML | 3.4 - YouTube - video embeb by Francisco Palomares Barrios (@kikopalomares) on CodePen.

Leer más...
Cómo hacer un LAYOUT con FLEXBOX CSS

Aquí tienes el ejemplo que realizamos en el vídeo para que lo puedas trastear:

See the Pen CSS | Flexbox - 34 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

Leer más...
Cómo crear una GALERÍA de IMÁGENES con FLEXBOX CSS

Aquí tienes el ejemplo que hacemos en el vídeo:

See the Pen CSS | Flexbox - 33 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 
Leer más...
Cómo usar las MEDIA QUERIES en FLEXBOX CSS para crear layouts RESPONSIVE

Hoy en día es necesario preparar todos nuestros layout para todas las resoluciones de pantalla, para ello una opción muy buena es combinar la tecnología de flexbox con las medias queries de CSS.

En el vídeo vemos como podemos hacer un menu usando estas...

Leer más...
¿Qué son los FLEX ITEMS en Flexbox CSS?

Elementos hijos

Automáticamente todos los elementos hijos del flex container se convierten en elementos flexibles.

Estos elementos tienen estas propiedades:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order

Especifica el orden de los elementos.

See the Pen CSS | Flexbox - 27...

Leer más...
¿Qué es el FLEX CONTAINER?

See the Pen CSS | Flexbox by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Propiedades del elemento padre

Tenemos varias propiedades que podemos poner en nuestro flex container o elemento padre.

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

...

Leer más...
1 2 3 4 5 6 7 8 9