¡Bienvenido al curso de CSS! En este curso aprenderás a crear sitios web atractivos y profesionales utilizando CSS. CSS es un lenguaje de estilo utilizado para dar formato a los documentos HTML.\n Aprenderás a utilizar selectores, reglas, propiedades y valores para controlar el diseño de tus páginas web. Además, aprenderás a utilizar herramientas de diseño avanzadas como flexbox y grid para crear diseños modernos y adaptables. ¡Estamos emocionados de que seas parte de este curso y esperamos que disfrutes aprendiendo CSS!

01 - Bienvenida

Las reglas CSS funcionan estableciendo una relación entre elementos HTML y estilos visuales. Una regla CSS se compone de un selector, que se utiliza para seleccionar el elemento HTML al que se le quiere aplicar los estilos, y un conjunto de declaraciones, que indican los estilos que se quieren aplicar.\n  En resumen, las reglas CSS permiten a los desarrolladores establecer relaciones entre elementos HTML y estilos visuales para crear diseños atractivos y consistentes en una página web. Una regla CSS consta de un selector y un conjunto de declaraciones que indican los estilos que se aplicarán a los elementos seleccionados, permitiendo controlar el diseño de una página web en tiempo real. Además, ayudan a separar la estructura de la presentación de una página web, permitiendo una mayor flexibilidad y facilidad de mantenimiento.

02 - Estructura

El selector universal en CSS es una técnica utilizada para seleccionar todos los elementos de una página web. El selector universal se representa con el símbolo "*" y se utiliza para aplicar estilos a todos los elementos de una página.\n  Es importante tener en cuenta que el selector universal selecciona todos los elementos de una página, incluyendo elementos de nivel superior y anidados, lo que puede afectar negativamente el rendimiento y el diseño de la página. Por lo general se recomienda utilizar selectores específicos para aplicar estilos a elementos específicos en lugar de utilizar el selector universal.\n  En resumen, El selector universal es una herramienta poderosa en CSS para seleccionar todos los elementos de una página web, pero su uso debe ser moderado ya que puede afectar negativamente el rendimiento y diseño de la página. Es recomendable utilizar selectores específicos para aplicar estilos a elementos específicos y mejorar el rendimiento y la accesibilidad de la página web.

03 - Selector universal

En este capítulo hablaremos de los selectores de tipo. Los selectores de tipo en CSS son una forma de seleccionar elementos en un documento HTML para darles estilos. Estos selectores se basan en el nombre de la etiqueta HTML que se utiliza para crear el elemento. \n Por ejemplo, si queremos dar estilos a todos los párrafos en una página, utilizaríamos el selector "p" para seleccionar todas las etiquetas "p". Los selectores de tipo permiten aplicar estilos a un gran número de elementos de forma rápida y sencilla. \n Además, se pueden combinar con otros selectores para seleccionar elementos de forma más específica.

04 - Selector de Tipo

Un selector de clase en CSS permite seleccionar elementos HTML basados en su clase. El selector de clase se utiliza escribiendo un punto "." seguido del nombre de la clase. Por ejemplo, si hay un elemento con una clase de "destacado", se puede seleccionar con el selector ".destacado".\n  Una vez seleccionado, se pueden aplicar estilos utilizando las reglas de estilo CSS. Los selectores de clase son útiles cuando se desea aplicar estilos a varios elementos de la misma clase en una página. Es importante tener en cuenta que una clase puede ser utilizada varias veces en una página.\n  Además, se pueden utilizar selectores de clase en conjunto con otros selectores para seleccionar elementos con precisión. Los selectores de clase son una herramienta esencial para la separación de estilos y contenido,

05 - Selector de clase

Un selector de ID en CSS es una forma de seleccionar un elemento específico en una página web para aplicar estilos. El selector de ID se utiliza mediante el signo # seguido del nombre del ID asignado al elemento.\n  Por ejemplo, si hay un elemento con un ID de "header", se puede seleccionar con el selector "#header". Una vez seleccionado, se pueden aplicar estilos utilizando las reglas de estilo CSS.\n  Los selectores de ID son útiles cuando se desea aplicar estilos específicos a un solo elemento y no a todos los elementos de la misma clase. Sin embargo, es importante tener en cuenta que un ID solo debe utilizarse una vez en una página, ya que si se utiliza varias veces, solo se aplicarán estilos al primer elemento con ese ID. Además, los selectores de ID tienen una mayor precedencia en cascada en comparación con los selectores de clase.

06 - Selector ID

Un selector de atributo en CSS permite seleccionar elementos HTML basados en los valores de sus atributos. El selector de atributo se utiliza escribiendo el nombre del atributo seguido de los corchetes [] y el valor del atributo dentro de los corchetes. Por ejemplo, para seleccionar todos los elementos con un atributo "class" igual a "destacado", se utilizaría el selector "[class='destacado']".\n  También se pueden utilizar varios selectores de atributos para seleccionar elementos basados en varios valores de atributos. Por ejemplo, para seleccionar todos los elementos con un atributo "href" que comienza con "http" se utilizaría el selector "[href^='http']".\n  Existen varios operadores de comparación, como "=", "~=" y "|=" que se pueden utilizar para seleccionar elementos con atributos específicos. El selector de atributo es una herramienta poderosa para seleccionar elementos con precisión y aplicar estilos específicos.

07 - Selector de Atributo

El combinador de hermano adyacente en CSS es una técnica utilizada para seleccionar elementos HTML que están inmediatamente después de otro elemento específico en el código fuente. El combinador se representa con el símbolo "+" y se utiliza para aplicar estilos a un elemento que está inmediatamente después de otro elemento seleccionado.\n  Es importante tener en cuenta que el combinador de hermano adyacente solo selecciona elementos que están inmediatamente después del elemento seleccionado, no cualquier elemento que esté después del elemento en cualquier lugar del código.\n  El combinador de hermano adyacente es una técnica poderosa para seleccionar elementos específicos y aplicar estilos a ellos de manera precisa en una página web.

08 - Selector de Hermano Adyacente

El combinador de hermano general en CSS es una técnica utilizada para seleccionar elementos HTML que son hermanos de un elemento específico en el código fuente. El combinador se representa con el símbolo "~" y se utiliza para aplicar estilos a un elemento que es hermano del elemento seleccionado.\n  Es importante tener en cuenta que el combinador de hermano general solo selecciona elementos que son hermanos del elemento seleccionado, no cualquier elemento que sea hermano del elemento en cualquier nivel del código.\n  El combinador de hermano general es una técnica útil para seleccionar elementos específicos y aplicar estilos a ellos de manera precisa en una página web. Es especialmente útil cuando se quiere aplicar estilos a elementos específicos dentro de un contenedor con varios niveles de elementos anidados. Sin embargo, es importante tener en cuenta que el combinador de hermano general es menos específico que el combinador de hermano adyacente " + " y menos específico que el combinador de hijo directo ">".

09 - Selector de Hermano General

El combinador de hijo directo en CSS es una técnica utilizada para seleccionar elementos HTML que son hijos directos de un elemento específico en el código fuente. El combinador se representa con el símbolo ">" y se utiliza para aplicar estilos a un elemento que es hijo directo de otro elemento seleccionado.\n  Es importante tener en cuenta que el combinador de hijo directo solo selecciona elementos que son hijos directos del elemento seleccionado, no cualquier elemento que sea hijo del elemento en cualquier nivel del código.\n  El combinador de hijo directo es una técnica útil para seleccionar elementos específicos y aplicar estilos a ellos de manera precisa en una página web. Es especialmente útil cuando se quiere aplicar estilos a elementos específicos dentro de un contenedor con varios niveles de elementos anidados.

10 - Selector de Hijo Directo

El combinador de descendientes en CSS es una técnica utilizada para seleccionar elementos HTML que están dentro de otro elemento específico en el código fuente. El combinador se representa con el espacio entre los selectores y se utiliza para aplicar estilos a un elemento que es descendiente de otro elemento seleccionado.\n  El combinador de descendientes es una técnica útil para seleccionar elementos específicos y aplicar estilos a ellos de manera precisa en una página web. Es especialmente útil cuando se quiere aplicar estilos a elementos específicos dentro de un contenedor con varios niveles de elementos anidados. Sin embargo, es importante tener en cuenta que el combinador de descendientes es menos específico que el combinador de hijo directo ">".

11 - Selector Descendientes

Las pseudoclases en CSS son selectores especiales que se utilizan para seleccionar elementos HTML en base a un estado específico. Estos estados pueden ser el estado del enlace, el estado del elemento o el estado del cursor.\n  Por ejemplo, la pseudoclase ":hover" se utiliza para seleccionar un elemento cuando el cursor del mouse se encuentra sobre él. La pseudoclase ":active" se utiliza para seleccionar un elemento cuando se está interactuando con él. La pseudoclase ":visited" se utiliza para seleccionar un enlace ya visitado.\n  En resumen, las pseudoclases son una técnica poderosa para seleccionar elementos en base a un estado específico y aplicar estilos a ellos de manera precisa en una página web, y son una herramienta esencial para crear efectos interactivos y dinámicos en una página web.

12 - Pseudoclases

Los pseudoelementos en CSS son características especiales que permiten seleccionar y aplicar estilos a partes específicas de un elemento HTML. Los pseudoelementos son utilizados agregando dos puntos "::" antes del nombre del pseudoelemento.\n  Algunos ejemplos de pseudoelementos son ::before y ::after, que permiten insertar contenido antes y después del elemento seleccionado. Otro ejemplo es ::first-line y ::first-letter, que permiten seleccionar y estilizar la primera línea y primera letra de un elemento.\n  Los pseudoelementos son una herramienta útil para aplicar estilos a elementos de manera no convencional y pueden ser utilizados para crear efectos de diseño interesantes, como adicionar iconos o cambiar el estilo de las primeras letras de un texto. Sin embargo, es importante tener en cuenta que algunos pseudoelementos no son compatibles con todos los navegadores, por lo que es recomendable verificar su compatibilidad antes de utilizarlos.

13 - Pseudoelementos

La jerarquía de selectores en CSS es la forma en que los estilos se aplican a los elementos en una página web. La jerarquía se basa en la importancia de cada selector, donde los selectores con mayor importancia tienen precedencia sobre los selectores con menor importancia.\n  El orden de importancia de los selectores es el siguiente:\n  Selector de ID\n Selector de clase, pseudo-clase y atributo\n Selector de etiqueta\n Selector universal\n Es importante tener en cuenta que si un selector tiene más especificidad, este tendrá prioridad sobre otros selectores, aunque sean de un nivel de importancia superior. Por ejemplo, una clase seleccionada con un ID tendrá prioridad sobre una clase seleccionada solamente con una clase.\n  Además, los estilos declarados en un archivo CSS tienen prioridad sobre los estilos declarados en línea en el HTML. Es importante entender la jerarquía de selectores para evitar conflictos de estilos y asegurar que los estilos se aplican correctamente en una página web.

14 - Especificidad

En CSS, las unidades relativas permiten especificar el tamaño o la posición de un elemento en relación a otro. Las unidades relativas más comunes son "em", "rem", "vw" y "vh".\n  La unidad "em" se basa en el tamaño de la fuente del elemento padre. Por ejemplo, si se establece el tamaño de fuente en un elemento padre a 16px, entonces 1em en un elemento hijo sería equivalente a 16px.\n  La unidad "rem" es similar a "em", pero se basa en el tamaño de fuente establecido en el elemento raíz (normalmente la etiqueta "html") en lugar del elemento padre.\n  La unidad "vw" se refiere al 1% de la anchura de la ventana del navegador. Por ejemplo, si se establece el ancho de un elemento en 50vw, se ajustará automáticamente al 50% del ancho de la ventana del navegador.\n  La unidad "vh" es similar a "vw" pero se refiere al 1% de la altura de la ventana del navegador.\n  El uso de unidades relativas permite que el diseño sea adaptable a diferentes tamaños de pantalla y dispositivos.

15 - Unidades Relativas

Las unidades absolutas en CSS son utilizadas para establecer el tamaño de los elementos en una página web. Estas unidades se refieren a tamaños fijos que no cambian con el tamaño de la pantalla o el tamaño de la fuente.\n  Las unidades absolutas más comunes son:\n  pixels (px): es el valor más común utilizado para establecer el tamaño de los elementos en una página web.\n points (pt): es una unidad de medida utilizada para establecer el tamaño de la fuente.\n inches (in): es una unidad de medida utilizada para establecer el tamaño de los elementos en impresión.\n  En resumen, las unidades absolutas son una herramienta importante para establecer el tamaño de los elementos en una página web, aunque su uso debe ser moderado ya que no se adaptan al tamaño de la pantalla o a las necesidades de accesibilidad. Es recomendable utilizar unidades relativas como porcentajes o ems para diseños adaptables y responsive design.

16 - Unidades Absolutas

Las propiedades de texto en CSS son utilizadas para establecer el formato y la apariencia del texto dentro de un elemento HTML. Algunas de las propiedades más comunes incluyen "color" para establecer el color del texto, "font-size" para establecer el tamaño de la fuente, "font-family" para especificar la fuente, "text-align" para alinear el texto, "line-height" para establecer el espacio entre líneas, entre otras.\n  También se pueden utilizar propiedades como "text-transform" para cambiar el caso del texto, "text-decoration" para agregar o quitar decoraciones al texto, "text-shadow" para agregar sombras al texto, "word-spacing" para establecer el espacio entre palabras.\n  La combinación de estas propiedades permite crear un gran número de estilos de texto personalizados y adaptarlos a las necesidades específicas de la página web. Es importante tener en cuenta que algunas propiedades pueden tener un efecto en el rendimiento de la página y debe ser utilizadas con cuidado.

17 - Tipografía

El modelo de caja en CSS es el sistema utilizado para calcular el tamaño y la posición de los elementos en una página web. Cada elemento en una página web se considera como una caja, con diferentes partes como el contenido, el margen, el borde y el relleno.\n  El tamaño y la posición de las cajas se pueden controlar utilizando las propiedades de diseño como width, height, padding, margin y border. Con estas propiedades se puede controlar el tamaño y la posición de un elemento en relación a los elementos circundantes y al contenido dentro de ese elemento.\n  Además existe la propiedad "display" que permite especificar si un elemento debe ser tratado como bloque o como línea. Los elementos de bloque ocupan todo el ancho disponible y comienzan una nueva línea después de sí mismos, mientras que los elementos de línea solo ocupan el espacio necesario y no comienzan una nueva línea.\n  El modelo de caja es esencial para entender cómo se organizan y se diseñan las páginas web, y es una herramienta esencial para el control preciso de la presentación de una página web.

18 - Modelo de caja

La posición relativa en CSS es una forma de posicionar elementos en una página web. Cuando se establece la posición de un elemento como relativa, este se posiciona en relación a su posición original en el flujo del documento.\n A diferencia de la posición fija, los elementos en posición relativa aún ocupan espacio en el flujo del documento, permitiendo que otros elementos se posicionen en su lugar. Con las propiedades top, right, bottom y left, se puede mover el elemento en relación a su posición original.\n Además, se puede utilizar para crear efectos visuales como capas superpuestas o elementos flotantes.

test

adasdas

19 - Posición Relativa

La posición absoluta en CSS permite situar un elemento en una posición específica en relación con su elemento contenedor o a un elemento de referencia utilizando las propiedades top, right, bottom, left.\n  Cuando un elemento tiene una posición absoluta, es quitado del flujo normal del documento y se coloca en la posición especificada, independientemente de donde se encuentran los demás elementos en el documento.\n  Es importante tener en cuenta que para que un elemento tenga posición absoluta, su elemento contenedor debe tener una posición relativa o establecida como "position:relative". Si no es así, el elemento con posición absoluta se situará en relación al elemento <body> o al primer ancestro con una posición establecida.\n  La posición absoluta es útil para crear efectos de superposición y para situar elementos en una posición específica en relación a otro elemento. Sin embargo, es importante tener en cuenta que puede causar problemas en la disposición de los demás elementos en la página, por lo que es recomendable utilizarlo con precaución.

20 - Position Absolute

La propiedad "position: fixed" en CSS es utilizada para fijar un elemento en una posición específica en la pantalla, independientemente del desplazamiento de la página. Un elemento con "position: fixed" se mantendrá en su posición en la pantalla mientras el usuario navegue por la página.\n  La propiedad "position: fixed" es útil para crear elementos que se mantienen visibles mientras el usuario navega por la página, como menús de navegación, barras de búsqueda, encabezados de sección, entre otros. Sin embargo, es importante tener en cuenta que esta propiedad puede afectar negativamente el rendimiento en dispositivos móviles y no es soportado por algunos navegadores antiguos. Por lo tanto, se recomienda utilizar una técnica de fallback en caso de que no sea soportado.

21 - Position FIXED

La propiedad "position: sticky" en CSS es una técnica utilizada para crear elementos pegajosos en una página web. Un elemento con "position: sticky" se comporta como un elemento con "position: relative" hasta que se alcanza un punto específico en la página, en ese momento se comporta como un elemento con "position: fixed" y se queda pegado en su posición en la pantalla.\n  Para utilizar "position: sticky" es necesario establecer un valor de "top", "bottom", "left" o "right" para indicar en qué punto se debe pegar el elemento.\n  La propiedad "position: sticky" es una técnica útil para crear elementos que se mantienen visibles mientras el usuario navega por la página, como menús de navegación, barras de búsqueda, encabezados de sección, entre otros. Sin embargo es importante tener en cuenta que no es soportado por todos los navegadores, por lo que se recomienda utilizar una técnica de fallback en caso de que no sea soportado.

22 - Position Sticky

La propiedad "display" en CSS es utilizada para especificar cómo deben ser tratados los elementos en una página web. Puede tomar diferentes valores como block, inline, inline-block, flex, grid, etc.\n  Los elementos con "display: block" ocupan todo el ancho disponible y comienzan una nueva línea después de sí mismos, mientras que los elementos con "display: inline" solo ocupan el espacio necesario y no comienzan una nueva línea.\n  La propiedad "display: flex" permite crear un contenedor flex y sus elementos hijos se comportan como elementos flexibles, permitiendo configurar la alineación, el orden y la dirección de los elementos dentro de ese contenedor.\n  La propiedad "display: grid" permite crear un contenedor de cuadrícula y sus elementos hijos se comportan como elementos de cuadrícula, permitiendo configurar las filas y las columnas de ese contenedor y la posición de los elementos dentro de él.\n  En resumen, la propiedad "display" es esencial para controlar cómo los elementos se comportan y se organizan en una página web.

23 - Display

Implementaremos una pantalla aplicando todo lo aprendido en el curso

24 - Proyecto Final

¡Bienvenido al taller de Flexbox! En este curso aprenderás a utilizar Flexbox, una técnica de diseño en CSS que te permite crear diseños flexibles y adaptativos para tus páginas web. Aprenderás a utilizar las propiedades de flexbox para alinear, distribuir y organizar elementos en una página de manera eficiente y fácil de mantener.\n  Flexbox es una herramienta esencial para cualquier desarrollador o diseñador web que desee crear diseños adaptativos para diferentes tamaños de pantalla y dispositivos. Aprenderás a utilizar flexbox para crear diseños adaptativos que se adaptan automáticamente a diferentes tamaños de pantalla y dispositivos, lo que garantiza que tu contenido sea fácilmente accesible y legible para todos los usuarios.\n  Estamos emocionados de tenerte en este curso y estamos seguros de que aprenderás habilidades valiosas que te ayudarán a crear diseños web modernos y adaptativos. ¡Vamos a comenzar!

01 - Introducción

Flex Direction y Flex Wrap son dos propiedades importantes en CSS Flexbox. La propiedad Flex Direction especifica la dirección en la que los elementos flexibles deben alinearse dentro de un contenedor flexible. Los valores posibles son row (fila), row-reverse (fila inversa), column (columna) y column-reverse (columna inversa).\n  La propiedad Flex Wrap especifica cómo deben manejarse los elementos cuando no hay suficiente espacio en el contenedor. Los valores posibles son nowrap (sin ajuste), wrap (ajuste) y wrap-reverse (ajuste inversa).\n  Flex Direction y Flex Wrap juntos permiten controlar cómo se organizan y cómo se ajustan los elementos dentro de un contenedor flexible, permitiendo una gran flexibilidad en el diseño de la página. Estas propiedades son útiles para crear diseños adaptativos y flexibles que se adaptan a diferentes tamaños de pantalla y dispositivos.

02 - Flex direction y Flex wrap

Flexbox es un sistema de diseño en línea que permite alinear fácilmente elementos dentro de un contenedor. Para usar flexbox, se debe establecer la propiedad "display: flex" en el contenedor y utilizar las propiedades "justify-content" y "align-items" para alinear los elementos.\n  La propiedad "justify-content" se utiliza para alinear los elementos en el eje principal, es decir, en el eje horizontal para elementos en línea y en el eje vertical para elementos en columna. La propiedad "align-items" se utiliza para alinear los elementos en el eje transversal, es decir, en el eje vertical para elementos en línea y en el eje horizontal para elementos en columna.\n  En resumen, Flexbox es una herramienta poderosa para alinear elementos en una página web de manera precisa y fácil, y es especialmente útil para diseños adaptables y responsive design. Con Flexbox es posible aplicar estilos a varios elementos de manera consistente y organizada, facilitando el mantenimiento y mejorando la accesibilidad del diseño.

03 - Justify Content y Align Items

Las propiedades flex-grow y flex-shrink en CSS son utilizadas para controlar cómo los elementos dentro de un contenedor flex se ajustan al espacio disponible.\n  La propiedad flex-grow determina qué elementos deben crecer o aumentar su tamaño en relación a los demás elementos en el contenedor flex si hay más espacio disponible. Por ejemplo, si asignamos un valor de 2 a un elemento y un valor de 1 a otro elemento, el primer elemento crecerá el doble que el segundo.\n  La propiedad flex-shrink determina qué elementos deben reducir su tamaño en relación a los demás elementos en el contenedor flex si hay menos espacio disponible. Por ejemplo, si asignamos un valor de 2 a un elemento y un valor de 1 a otro elemento, el primer elemento se reducirá el doble que el segundo.\n  Al utilizar flex-grow y flex-shrink en conjunto con las otras propiedades flex, se puede crear un diseño flexible que se adapte automáticamente al espacio disponible en la pantalla o dispositivo.

04 - Propiedades flex de elementos hijos

La propiedad "order" en Flexbox es utilizada para especificar el orden en el que los elementos hijos deben aparecer dentro de un contenedor Flex. El valor predeterminado es 0, pero se puede especificar un número negativo o positivo para cambiar el orden de los elementos.\n  La propiedad "order" es útil para cambiar el orden de los elementos en una página web de manera fácil y rápida. Esto es especialmente útil en dispositivos móviles donde se puede necesitar cambiar el orden de los elementos para adaptarse a diferentes tamaños de pantalla. Es importante tener en cuenta que el orden se aplica a todos los elementos hijos dentro del contenedor flex, no solo a un elemento específico.\n  En resumen, la propiedad "order" en Flexbox es utilizada para especificar el orden en el que los elementos hijos deben aparecer dentro de un contenedor Flex. Esta propiedad es especialmente útil para adaptar el diseño en diferentes tamaños de pantalla. Es importante tener en cuenta que el orden se aplica a todos los elementos hijos dentro del contenedor flex, no solo a un elemento específico.

05 - Orden de elementos en Flexbox

Aplicaremos lo aprendido en el taller a nuestro proyecto

06 - Proyecto Final

¡Bienvenido al curso de HTML! Este curso es una introducción a las herramientas y técnicas necesarias para crear páginas web utilizando HTML (Hypertext Markup Language). Aprenderás a utilizar etiquetas y atributos para estructurar el contenido de una página, crear enlaces, agregar imágenes y videos, y mucho más.\n  HTML es el lenguaje básico que se utiliza para construir páginas web, por lo que es esencial para cualquier persona interesada en el desarrollo web. A medida que avanzas en el curso, aprenderás a utilizar herramientas para probar y depurar tu código, y también aprenderás sobre las mejores prácticas y estándares actuales en el desarrollo web.\n  Estamos emocionados de que te unas a nosotros en este curso y estamos seguros de que aprenderás habilidades valiosas que te ayudarán a crear páginas web impresionantes. ¡Empecemos!

como puedo iniciar en HTML?

01 - Bienvenida al curso

HTML (Hypertext Markup Language) es el lenguaje de marcas utilizado para construir páginas web. Es el lenguaje básico para estructurar el contenido de una página web, es decir, indica cómo se organizan los elementos en una página, como texto, imágenes, enlaces, etc. HTML utiliza etiquetas para indicar el tipo de contenido que se encuentra dentro de ellas.\n  Por ejemplo, la etiqueta "h1" se utiliza para indicar un encabezado de primer nivel, mientras que la etiqueta "p" se utiliza para indicar un párrafo de texto. El código HTML se interpreta por el navegador y se convierte en una página web visible para el usuario.\n  Es importante tener en cuenta que HTML solo se ocupa de la estructura y el contenido de una página, mientras que el lenguaje CSS se utiliza para establecer el estilo visual y la disposición de los elementos. Conocer HTML es esencial para cualquier persona interesada en el desarrollo web.

02 - Introducción

Las etiquetas HTML son las marcas utilizadas para estructurar el contenido de una página web. Cada etiqueta tiene un significado específico y se utiliza para indicar el tipo de contenido que se encuentra dentro de ella.\n  Por ejemplo, la etiqueta "h1" se utiliza para indicar un encabezado de primer nivel, mientras que la etiqueta "p" se utiliza para indicar un párrafo de texto. Las etiquetas "img" se utilizan para insertar imágenes en una página web, "a" para crear enlaces, "ul" y "li" para crear listas, entre otras.\n  Algunas etiquetas tienen atributos adicionales, como "src" en el caso de la etiqueta "img", que se utiliza para especificar la ruta de la imagen.\n  Es importante utilizar las etiquetas correctas para estructurar el contenido de una página web, ya que esto mejora la accesibilidad, la semántica y la facilidad de mantenimiento del documento. HTML es el lenguaje básico que se utiliza para construir páginas web, y conocer las etiquetas y su uso es esencial para cualquier persona interesada en el desarrollo web.

03 - Conociendo las etiquetas

Las etiquetas de texto en HTML son utilizadas para dar formato y estructura al contenido de una página web. Estas etiquetas incluyen títulos, párrafos, listas, entre otros.\n  Por ejemplo, el elemento "h1" es utilizado para crear títulos de nivel superior, mientras que el elemento "p" se utiliza para crear párrafos de texto. El elemento "ul" es utilizado para crear listas no ordenadas y el elemento "ol" para crear listas ordenadas.\n  Utilizar etiquetas de texto correctamente ayuda a dar estructura y significado al contenido de una página, lo que mejora la accesibilidad y la usabilidad de la página. Es importante utilizar las etiquetas de texto de acuerdo a su significado semántico para ayudar a los motores de búsqueda y a los usuarios a entender mejor el contenido de una página.\n  En resumen, las etiquetas de texto en HTML son utilizadas para dar formato y estructura al contenido de una página web. Estas etiquetas incluyen títulos, párrafos, listas, entre otros. Utilizar etiquetas de texto correctamente ayuda a dar estructura y significado al contenido de una página, lo que mejora la accesibilidad y la usabilidad de la página. Es importante utilizar las etiquetas de texto de acuerdo a su significado semántico para ayudar a los motores de búsqueda y a los usuarios a entender mejor el contenido de una página.

04 - Etiquetas de Texto

Los enlaces en HTML, también conocidos como hipervínculos, permiten al usuario navegar de una página web a otra o a una sección específica dentro de la misma página. Los enlaces son creados utilizando la etiqueta "a" (anchor) con el atributo "href" especificando la URL del enlace.\n  Por ejemplo, para crear un enlace a google.com, se utilizaría la siguiente etiqueta: <a href="https://www.google.com">Google</a>. El texto entre las etiquetas "a" se mostrará como el enlace en la página. \n También se pueden crear enlaces a secciones dentro de una misma página utilizando el atributo "href" junto con el ID del elemento al que se desea enlazar. Por ejemplo, si hay una sección con un ID de "section1", se puede crear un enlace a esa sección con: <a href="#section1">Ir a Sección 1</a>.\n  Además, se pueden usar atributos como "target" para especificar si se abre el enlace en una nueva pestaña o ventana y el atributo "rel" para especificar la relación del enlace con la página actual.

05 - Enlaces

En este capítulo aprenderemos la estructura básica de un documento HTML, sus partes y qué componentes puedes incluir en cada una de ellas. \n La estructura básica de un documento HTML consta de dos elementos principales: la etiqueta "html" y la estructura de encabezado y cuerpo. La etiqueta "html" indica el inicio y el final del documento. Dentro de ella se encuentran la etiqueta "head" y "body". \n La etiqueta "head" contiene información sobre el documento, como el título que se muestra en la pestaña del navegador y los enlaces a hojas de estilo CSS. La etiqueta "body" contiene el contenido visible del documento, como texto, imágenes y enlaces. \n Los elementos dentro del body son organizados en elementos de bloque y de línea, como párrafos, encabezados, listas y tablas. Es importante cerrar todas las etiquetas abiertas para evitar errores en el rendimiento de la página web.

06 - Estructura básica

La etiqueta "br" en HTML es una etiqueta de línea de rompe, que se utiliza para insertar un salto de línea en el contenido de una página web. La etiqueta "br" se utiliza para separar el contenido en diferentes líneas, en lugar de utilizar el salto de línea automático que ocurre cuando el contenido alcanza el borde derecho de la pantalla.\n  La etiqueta "br" es una etiqueta de contenido vacío, lo que significa que no tiene un contenido entre las etiquetas de apertura y cierre. Es utilizada en el cuerpo del HTML, dentro de un elemento.\n  En resumen, la etiqueta "br" es una herramienta útil para separar el contenido en diferentes líneas en una página web. Sin embargo, es importante tener en cuenta que su uso debe ser moderado ya que puede afectar negativamente la estructura de la página y la accesibilidad.

07 - Etiqueta BR

La etiqueta "br" en HTML es utilizada para insertar un salto de línea en un documento. Esta etiqueta no tiene atributos o cierre, simplemente se escribe como una etiqueta de apertura y cierre vacío. Ejemplo: <br>\n  La etiqueta "br" es útil para crear espacios entre líneas de texto dentro de un párrafo o para crear una separación entre elementos dentro de un contenedor. Es importante tener en cuenta que el uso excesivo de esta etiqueta puede dificultar la lectura y la accesibilidad de una página, por lo que se recomienda utilizarla de manera moderada.\n  En resumen, La etiqueta "br" en HTML es utilizada para insertar un salto de línea en un documento, es útil para crear espacios entre líneas de texto dentro de un párrafo o para crear una separación entre elementos dentro de un contenedor. Sin embargo, es importante tener en cuenta que el uso excesivo de esta etiqueta puede dificultar la lectura y la accesibilidad de una página, por lo que se recomienda utilizarla de manera moderada.

08 - Listas

En este capítulo conocerás como utilizar elementos multimedia tales como imágenes, video y audio.\n Los elementos multimedia en HTML permiten agregar contenido multimedia, como imágenes, videos y audio, a una página web. El elemento "img" se utiliza para mostrar imágenes, mientras que "video" y "audio" se utilizan para mostrar videos y audio respectivamente. \n También se pueden agregar controles a los elementos multimedia para permitir al usuario reproducir, pausar y controlar el volumen del contenido. Es importante especificar una fuente de contenido multimedia, ya sea mediante una URL o mediante el atributo "src" en el elemento. \n Además se pueden agregar elementos como "canvas" para dibujar gráficos en tiempo real.

09 - Elementos Multimedia

La etiqueta "div" en HTML es un contenedor genérico que se utiliza para agrupar elementos HTML con un propósito específico. La etiqueta "div" no tiene un significado semántico específico, sino que se utiliza principalmente como un contenedor para estilos y scripts.\n  Por ejemplo, si se desea agrupar varios párrafos juntos para aplicarles un estilo específico, se puede utilizar una etiqueta "div" como contenedor para esos párrafos.\n  La etiqueta "div" se utiliza generalmente en conjunto con selectores de clase o id en CSS para aplicar estilos específicos a ese grupo de elementos.\n  En resumen, la etiqueta "div" es una herramienta útil para agrupar elementos HTML con un propósito específico y aplicar estilos a ese grupo de elementos de manera precisa. Sin embargo es importante tener en cuenta que no tiene un significado semántico específico, y es recomendable utilizar etiquetas mas especificas como header,nav,main,article,section,etc. para mejorar la accesibilidad y la semántica del documento.

10 - Etiqueta DIV

Los formularios en HTML permiten recolectar información del usuario a través de diferentes campos, como cajas de texto, botones de selección, casillas de verificación y botones de opción. El elemento principal de un formulario es la etiqueta "form", que indica el inicio y el final del formulario. Dentro de la etiqueta "form" se incluyen los diferentes campos de entrada utilizando etiquetas como "input", "select" y "textarea".\n  Cada campo de entrada tiene un "name" y un "id" que se utilizan para identificar el campo y recolectar la información ingresada por el usuario. También se puede especificar el tipo de campo de entrada utilizando el atributo "type".\n  El formulario se envía a un servidor para su procesamiento utilizando el atributo "action" y el atributo "method" especifica el método HTTP utilizado para enviar la información del formulario.\n  Los formularios son una parte importante de la interacción con el usuario en una página web y son ampliamente utilizados para la recopilación de información, como el registro de usuario, el envío de comentarios y la realización de compras en línea.

11 - Formularios

Los elementos de formulario en HTML son utilizados para recopilar información del usuario en una página web. Estos elementos incluyen campos de texto, botones, casillas de verificación, menús desplegables, entre otros.\n  Por ejemplo, el elemento "input" es utilizado para crear campos de texto, mientras que el elemento "select" es utilizado para crear menús desplegables. Los elementos "textarea" y "button" se utilizan para crear áreas de texto y botones respectivamente.\n  Los elementos de formulario deben ser contenidos dentro de una etiqueta "form" para indicar que son parte de un formulario y que deben ser enviados cuando se envía el formulario. Es importante también incluir etiquetas "label" para describir el campo del formulario.\n  En resumen, los elementos de formulario en HTML son esenciales para recopilar información del usuario en una página web. Estos elementos incluyen campos de texto, botones, casillas de verificación, menús desplegables, entre otros. Es importante contenerlos dentro de una etiqueta "form" y describir el campo con una etiqueta "label" para mejorar la accesibilidad.

12 - Elementos de un Formulario

Los meta tags en HTML son etiquetas especiales utilizadas para proporcionar información adicional sobre una página web. Estas etiquetas se utilizan en la sección "head" del documento HTML y no se ven en la pantalla, sino que proporcionan información a los navegadores, motores de búsqueda y otros sistemas automatizados.\n  Algunos de los meta tags más comunes incluyen "meta description" que se utiliza para describir el contenido de una página web, "meta keywords" que se utiliza para indicar las palabras clave relacionadas con el contenido, "meta viewport" que se utiliza para indicar cómo se debe mostrar la página en dispositivos móviles, entre otros.\n  Es importante utilizar meta tags apropiados para describir el contenido de una página web, ya que esto ayuda a los motores de búsqueda a comprender mejor el contenido de una página y a mejorar el posicionamiento en los resultados de búsqueda. Es importante también tener en cuenta que algunos meta tags pueden ser ignorados por los navegadores y motores de búsqueda y no tienen un impacto significativo en el rendimiento de la página.

13 - Meta Tags

HTML semántico es un enfoque en el que se utilizan las etiquetas y atributos adecuados en HTML para describir el significado y la estructura del contenido en una página web. En lugar de utilizar etiquetas como "div" y "span" que no proporcionan información sobre el contenido, se utilizan etiquetas específicas para describir el contenido, como "header", "nav", "article", "section" y "aside".\n  El uso de etiquetas semánticas proporciona información importante sobre el contenido a los navegadores, motores de búsqueda y lectores de pantalla, lo que facilita el acceso a la información y mejora la accesibilidad. También ayuda a mantener la estructura y el diseño de la página.\n  En resumen, el uso de etiquetas semánticas en HTML ayuda a describir el contenido de una página web de manera clara y coherente, mejorando la accesibilidad y la eficiencia en la navegación y el SEO.

14 - HTML Semántico

En este capítulo crearemos un proyecto con todo lo que hemos aprendido.

15 - Proyecto Final

¡Bienvenido al taller de responsive design! En este curso aprenderás a crear diseños de páginas web que se adapten automáticamente al tamaño y orientación de la pantalla del dispositivo utilizado para visualizarlas. Aprenderás a utilizar técnicas y herramientas como media queries, Flexbox y Grid Layout para crear diseños flexibles y adaptativos.\n  Este curso es esencial para cualquier desarrollador o diseñador web que desee crear experiencias de usuario óptimas en un mundo cada vez más diverso de dispositivos. Aprenderás a crear diseños que se adapten a diferentes tamaños de pantalla y dispositivos, desde teléfonos móviles hasta escritorios, garantizando que tu contenido sea fácilmente accesible y legible para todos los usuarios.\n  Estamos emocionados de tenerte en este curso y estamos seguros de que aprenderás habilidades valiosas que te ayudarán a crear diseños web modernos y adaptativos. ¡Vamos a comenzar!

Las media queries en CSS son una herramienta que permite aplicar estilos diferentes a una página web en función de las características de la pantalla del dispositivo utilizado para visualizarla. Una media query es un conjunto de reglas de estilo que se aplican solo cuando se cumplen ciertas condiciones, como el tamaño de pantalla, la orientación o la resolución.\n  Por ejemplo, una media query puede utilizarse para aplicar estilos específicos a una página cuando se visualiza en un dispositivo móvil, como reducir el tamaño de la fuente o ocultar ciertos elementos. Otra media query puede utilizarse para aplicar estilos específicos cuando se visualiza en una pantalla de escritorio.\n  El uso de media queries permite crear diseños adaptativos que se adaptan automáticamente a diferentes tamaños de pantalla y dispositivos, lo que garantiza que el contenido sea fácilmente accesible y legible para todos los usuarios.

02 - Media queries

03 - Tipos de Media queries

Aprenderemos a aplicar cierta lógica de programación para generar estilos responsive a nuestras interfaces

Clases disponibles

Lista de clases disponibles