<![CDATA[ Curso - freeCodeCamp.org ]]> https://www.freecodecamp.org/espanol/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ Curso - freeCodeCamp.org ]]> https://www.freecodecamp.org/espanol/news/ Eleventy Sat, 16 May 2026 19:16:33 +0000 60 <![CDATA[ Certificaciones Gratuitas para Desarrolladores ]]> https://www.freecodecamp.org/espanol/news/1000-certificaciones-gratis-para-desarrolladores/ 671aab02408801043e04b9b3 Mon, 25 Nov 2024 17:23:59 +0000 [Nota de la traductora: Todos los links a los cursos mencionados en este artículo están en su mayoría en inglés]

¿Sabías que organizaciones como freeCodeCamp, Google y Harvard ofrecen cursos en línea para que puedas aprender desarrollo de software? ¿Y que muchos de estos cursos ofrecen certificaciones gratuitas e insignias?

Para ayudarte a elegir cuál es el mejor para ti, he creado una lista completa.

Como ávidos estudiantes de cursos en línea, mis compañeros de Class Central y yo hemos realizado, a través de los años, centenares de cursos en línea, muchos de ellos con certificados gratuitos.

En 2023, los certificados gratuitos ya no son tan frecuentes. Pero si sabes dónde buscar, todavía existe en línea una gran cantidad de certificaciones gratuitas para aprender desarrollo de software.

Algunas de las certificaciones gratuitas logradas por el equipo de Class Central

Como seguramente sabes, freeCodeCamp ofrece certificaciones gratuitas, pero también lo hacen gigantes tecnológicos e instituciones como Google, Microsoft y Harvard.

En este artículo, reunimos todas las certificaciones gratuitas e insignias existentes en Internet. En total, las plataformas detalladas abajo ofrecen más de mil de cursos gratuitos con certificado para aprender desarrollo de software.

Creé Class Central en el 2011, cuando universidades como Stanford empezaron a dictar sus cursos en línea de forma gratuita. Desde entonces, la base de datos de Class Central ha crecido hasta contener más de 100K cursos en línea.

Al haber escrito sobre educación en línea por más de una década, recuerdo cuando plataformas como Coursera y edX ofrecían certificaciones gratuitas. Luego, las certificaciones gratuitas casi que desaparecieron de forma abrupta.

Esto nos inspiró a escribir un artículo recopilando todas las certificaciones gratuitas e insignias existentes. Para nuestra sorpresa, descubrimos que todavía existían miles de certificaciones gratuitas en línea disponibles. Hasta la fecha, ese artículo tiene alrededor de 2M de visitas.

Con este objetivo, este artículo busca destacar a aquellas empresas que todavía sigue apoyando la educación libre ofreciendo cursos sobre desarrollo de software,  con certificados gratuitos. Estas son:

  • Plataformas de aprendizaje — como por ejemplo freeCodeCamp, LinkedIn Learning y FutureLearn.
  • Universidades líderes — como por ejemplo, Harvard, la Universidad de Helsinki y el HPI [Instituto Hasso Plattner].
  • Gigantes tecnológicos — como por ejemplo Google, Microsoft e IBM.

Sin más, aquí tienes las plataformas en donde puedes encontrar más de mil certificaciones gratuitas para desarrolladores

Certificaciones gratuitas de freeCodeCamp

Empecemos por el punto de partida más obvio: freeCodeCamp, el sitio web en el que estás ahora, donde puedes aprender a programar de forma gratuita.

La plataforma ofrece miles de horas de contenido didáctico, dividido en certificaciones en temas como desarrollo web o ciencia de datos.

Estas son las certificaciones actualmente ofrecidas:

Certificaciones gratuitas de Google

Google ha lanzado varias iniciativas para enseñarle a las personas habilidades como programación, marketing digital y análisis de datos. En nuestro artículo puedes encontrar la lista completa. Algunos de los más de 600 cursos que ofrece Google son:

Cursos gratuitos y certificados de Harvard

Harvard ofrece cursos académicos en línea que exploran las distintas facetas de las Ciencias de la Computación, como los fundamentos de la programación o la inteligencia artificial. Puedes encontrar todos los detalles en nuestro artículo.

Aquí tienes una lista de las certificaciones gratuitas ofrecidas por Harvard actualmente:

Medallas gratuitas de Microsoft

Microsoft ofrece miles de módulos y cientos de caminos de aprendizaje para explorar los productos de la empresa, como Office 365, Visual Studio y Azure. Una vez que terminas un curso, obtienes una medalla en tu perfil de alumno.

Estos son algunos de los cursos ofrecidos por Microsoft:

Cursos de LinkedIn Learning con certificación gratuita

LinkedIn Learning, la plataforma de aprendizaje en línea dentro de la red social de profesionales LinkedIn, ofrece miles de cursos en línea y caminos de aprendizaje que incluyen certificación gratuita. También puedes ver la lista completa de estos cursos en nuestro artículo.

Aquí tienes un selección de cursos con certificación gratuita de LinkedIn Learning:

Certificaciones gratuitas de la Universidad de Helsinki.

La Universidad de Helsinki ofrece cursos académicos en línea a través de su plataforma de cursos independiente, MOOC.fi. En esta plataforma están incluidos lo siguiente cursos que otorgan un certificado gratuito al completarlos:

Medallas gratuitas de Salesforce

Salesforce, el proveedor de software basado en la nube, ofrece miles de cursos en línea a través de su plataforma, Trailhead. Si bien puedes aprender habilidades relacionadas con sus productos, también puedes encontrar cursos en otros temas como blockchain o desarrollo para IOS,

Hay más de 1300 módulos y más de 100 ejercicios prácticos gratuitos disponibles en la plataforma. Una vez que terminas un modulo, obtienes un medalla gratuita para tu perfil.

MongoDB Free Certificates Certificados gratuitos de MongoDB

MongoDB, la popular base de datos NoSQL, ofrece cursos con certificaciones gratuitas a través de su plataforma de aprendizaje, Universidad MongoDB. Con estos cursos, aprenderás los fundamentos de bases de datos y cómo interactuar con ellas usando distintos lenguajes de programación.

Aquí tienes algunos de los cursos certificado[en inglés] que ofrece MongoDB:

Certificados gratuitos de Redis

Redis es una solución flexible de almacenamiento de datos, similar a una base de datos más liviana, que se usa bastante en desarrollo web. Redis también tiene una plataforma de aprendizaje en línea, Universidad Redis, que ofrece cursos certificados gratuitos para aprender a usar la herramienta.

Certificaciones gratuitas de Cisco

Cisco, el gigante tecnológico, ofrece una serie de cursos [en inglés] autogestionados y en línea a través de su plataforma Academia Networking, que incluyen un certificado gratuito al completarlos.

Certificados gratuitos de IBM

La plataforma de IBM, CognitiveClass.ai ofrece 90 cursos y 10 caminos de aprendizaje en ciencia de datos, inteligencia artificial, cloud computing y blockchain.

La plataforma también ofrece un entorno virtual de laboratorio para que los usuarios puedan practicar lo que aprendieron en los cursos. Para obtener una insignia o el certificado de finalización, es necesario obtener al menos un 70% en cualquiera de los cursos.

Aquí tienes una selección de sus cursos certificados gratuitos:

Certificados gratuitos de Kaggle

Kaggle es una comunidad para científicos de datos y para quienes aspiren a convertirse en uno.

Esta comunidad ofrece más de 50K en datasets públicos para que puedas crear tus propios proyectos de ciencia de datos a través de cuadernos Jupyter y participar en competencias.

Además, la plataforma también ofrece cursos [en inglés] para aprender los fundamentos de la ciencia de datos. Cada uno ofrece un certificado de finalización.

Certificados gratuitos de HackerRank

HackerRank, una plataforma para aprender algoritmos, estructuras de datos y prepararse para entrevistas técnicas, ofrece exámenes de certificación de habilidades en temas como resolución de problemas, Python y JavaScript.

Aquí tienes algunos de lo exámenes que puedes hacer para obtener un certificado:

Certificados gratuitos de DataCamp

DataCamp es una popular plataforma en línea para - seguro lo adivinaste - aprender no solo sobre ciencia de datos, sino también sobre programación en general. La plataforma ofrece una serie de cursos que al completarlos otorgan una declaración del logro obtenido. Aquí tienes una selección:

Certificados gratuitos de Great Learning

Great Learning ofrece más de cien cursos certificados gratuitos en una gran variedad de temas como IA, ciencia de datos, programación, cloud computing y marketing digital. Aquí tienes una selección:

Certificados gratuitos de upGrad

upGrad es una plataforma de aprendizaje en línea que ofrece más de 60 programas gratuitos sobre temas como ciencia de dato, métricas de negocio y tecnología.

Una vez que completes todos los módulos del programa, obtienes un certificado de finalización.

Estos son algunos de los programas gratuitos ofrecidos por upGrad:

Certificados gratuitos de FutureLearn

FutureLearn, la versión europea de Coursera y edX, ofrece centenares de cursos de "actualización digital" y que, entre otras cosas, implica un certificado gratuito de finalización. De nuevo, puedes encontrar más detalles en nuestro artículo.

Aquí tienes una lista de algunos de los cursos gratuitos de FutureLearn:

Certificados gratuitos de Jovian

Jovian es un bootcamp en línea sobre ciencia de datos que ofrece algunos cursos gratuitos con certificado. Aquí tienes una lista:

Certificados gratuitos de GitLab

GitLab, el sitio web de control de versión más popular para alojar tus repositorios, también ofrece cursos en línea gratuitos para desarrollar tus habilidades profesionales.

Aquí tienes las certificaciones gratuitas que ofrece la plataforma:

]]> <![CDATA[ Aprende CSS Flexbox desde cero - Curso paso a paso ]]> https://www.freecodecamp.org/espanol/news/aprende-css-flexbox-desde-cero-curso-paso-a-paso/ 65cb72d4c4734e03f2ead948 Tue, 20 Feb 2024 05:00:00 +0000 Con CSS Flexbox, puedes crear sitios web responsivos fácilmente que se adapten a diferentes tamaños de pantalla y dispositivos. Es una habilidad esencial para el desarrollo web moderno.

Publicamos un curso en el canal de YouTube de freeCodeCamp.org en español que te enseñará Flexbox desde los fundamentos. Al final del curso, podrás diseñar e implementar diseños responsivos.

Este curso fue creado por Leosbel Poll Sotomayor. Leosbel es un ingeniero de software con más de 10 años de experiencia, que comenzó a crear hace 20 años en Cuba y ahora vive en Canadá gracias a sus habilidades de programación. Creó este curso para la comunidad freeCodeCamp.

¿Listos? Veamos una descripción general de Flexbox y lo que aprenderás durante el curso.

¿Qué es CSS Flexbox?

CSS Flexbox significa CSS Flexible Box Layout. Es un modelo de diseño que te permite reorganizar elementos responsivos dentro de un contenedor en base a propiedades CSS que definen cómo los descendientes deben "moverse" para ajustarse al tamaño de su contenedor.

Con Flexbox puedes alinear, distribuir y espaciar elementos usando propiedades sencillas para evitar cálculos complejos en tu CSS.

Durante el curso, aprenderás a utilizar las siguientes propiedades:

  • flex-direction
  • justify-content
  • flex-wrap
  • align-items
  • align-content
  • flex-grow
  • flex-basis
  • flex-shrink

¡Y más! También aprenderás a combinarlos con Media Queries en CSS para crear diseños responsivos aún más poderosos.

frame-3
Ejemplo de Flexbox. Distribuir elementos automáticamente.

Oportunidades profesionales

Si tu objetivo es tener una carrera en el campo del desarrollo web, Flexbox te será de gran ayuda. Estas habilidades son altamente demandadas y buscadas por empleadores a nivel mundial.

frame-4
Ejemplo de Flexbox. Diseño clásico con barra de navegación, menú lateral, contenido principal y pie de página. 

Curso de Flexbox en español

Genial. Ahora que ya sabes por qué Flexbox es tan importante, veamos los temas que aprenderás durante el curso:

  • Introducción
  • ¿Qué es Flexbox?
  • Importancia de Flexbox
  • Fundamentos de Flexbox
  • Herramientas que usarás durante el curso
  • Cómo configurar tu entorno de desarrollo
  • Propiedades relacionadas con contenedores
  • Pérdida de datos en CSS
  • Propiedades relacionadas con descendientes (hijos)
  • Ejemplo: Barra de navegación
  • Ejemplo: Diseño clásico
  • Flexbox vs. Grid

Te invitamos a tomar el curso en el canal de YouTube de freeCodeCamp.org en español:

✍️ Curso creado por Leosbel Poll Sotomayor.

]]> <![CDATA[ Aprende HTML y CSS - Curso Desde Cero ]]> https://www.freecodecamp.org/espanol/news/aprende-html-y-css-curso-desde-cero/ 6164545b818d3e091269941e Thu, 28 Oct 2021 11:56:44 +0000 ¡Hola! Si deseas dar tus primeros pasos por el interesante mundo del desarrollo web, lo primero que deberías hacer es aprender HTML y CSS porque ambos son esenciales para crear una página web.

En este artículo encontrarás una breve introducción a los fundamentos de ambos lenguajes y luego encontrarás nuestro curso gratuito de 5+ horas sobre HTML y CSS en YouTube, el cual abarca más contenido y ejemplos prácticos.

¡Comencemos! ✨

🔹 HTML y CSS: Descripción y Uso

Veamos el propósito de HTML y CSS:

  • HTML es un lenguaje de marcado esencial para el desarrollo web porque nos permite definir la estructura de la página web, el contenido que se va a mostrar en el navegador. Sus siglas significan "HyperText Markup Language" en inglés (Lenguaje de Marcado de Hipertexto).
  • CSS es un lenguaje basado en reglas que nos permite asignar estilos a los elementos de nuestra página web. Sus siglas significan "Cascading Style Sheets" en inglés (Hojas de Estilo en Cascada).

HTML trabaja en conjunto con CSS para crear las páginas web que usamos todos los días en el navegador. Algunas páginas web interactivas también usan JavaScript.

💡 Dato: Los archivos HTML tienen extensión .html y los archivos CSS tienen extensión .css. Piensa que en este momento estás viendo una página web que fue creada con HTML y CSS.

🔸 Herramientas de Desarrollo de Chrome

Algo muy interesante es que puedes ver la estructura de los archivos HTML y CSS de cualquier página web en Google Chrome haciendo clic derecho en la página y seleccionando "inspect".

Esto abrirá las Herramientas de Desarrollo de Google Chrome, donde podrás ver dos secciones principales, las cuales se presentan en la siguiente imagen:

  • La parte superior contiene el código HTML. Se muestra en naranja en la siguiente imagen.
  • La parte inferior contiene los estilos aplicados con CSS al elemento seleccionado. Se muestra en verde en la siguiente imagen.
chrome-dev-tools
Herramientas de Desarrollo de Chrome

🔹 Introducción a HTML

Ahora comencemos a ver los fundamentos de HTML. Aquí tenemos un ejemplo de una página web muy sencilla:

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Mi página web</title>
  </head>
  <body>
    <h1>Mi página web</h1>
    <p>Estoy aprendiendo desarrollo web.</p>
  </body>
</html>
Ejemplo

💡 Tip: En HTML, la indentación (el espacio o sangría que colocamos antes de las líneas) es muy importante porque nos permite distinguir visualmente la estructura de la página web en el archivo. Aunque no es obligatoria, se recomienda usarla para comprender más fácilmente la estructura de la página. Se recomienda dejar 2 espacios por cada nivel de indentación.

Veamos los componentes principales que puedes usar en HTML:

Elementos

Un archivo HTML está conformado por elementos HTML. Estos elementos son componentes individuales en HTML que nos permiten crear la estructura de la página.

Este es un ejemplo de un elemento:

<h1>Mi página web</h1>

💡 Tip:  Ciertos elementos pueden contener a otros elementos y crear estructuras más complejas. Al anidar los elementos uno dentro del otro, se debería indentar los elementos internos para reflejar esta estructura, como en nuestro ejemplo anterior.

Etiquetas

Cada elemento tiene una etiqueta asociada. Podemos crear un elemento usando su etiqueta en nuestro archivo HTML.

Estos son ejemplos de etiquetas usadas comúnmente:

  • <html> - todo el contenido de la página debe estar entre estas etiquetas.
  • <head> - este elemento contiene el título de la página que puedes ver en la pestaña de tu navegador y además contiene metadatos.
  • <body> - este elemento contiene todos los elementos visibles de la página web. Toda la estructura de la página debe estar entre estas etiquetas.
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - estos elementos representan encabezados o títulos de mayor a menor importancia o nivel en la página web.  
  • <p> - un párrafo.
  • <a> - un enlace a otra página web o a secciones internas de tu página web.
  • <strong> - esta etiqueta te permite resaltar texto importante. Usualmente se muestra en negrita.
  • <em> - esta etiqueta te permite resaltar texto importante. Usualmente se muestra en cursiva.
  • <form> - este elemento te permite crear un formulario.
  • <hr> - una línea horizontal que puede ser usada para separar párrafos o secciones de tu página web.
  • <input> - un elemento que te permite crear formularios porque puede tomar texto o actuar como un botón de radio o una casilla de verificación.
  • <footer> - un pie de página.

La mayoría de los elementos en HTML tienen una etiqueta de apertura y una etiqueta de cierre. Entre ambas etiquetas se escribe el contenido del elemento.

En el ejemplo anterior estamos creando un elemento de tipo <h1> (un encabezado de nivel 1):

<h1>Mi página web</h1>

Este elemento tiene una etiqueta de apertura y una etiqueta de cierre para rodear su contenido.

  • La etiqueta de apertura es <h1>
  • La etiqueta de cierre es </h1>.

Como puedes ver en el siguiente diagrama:

image-29

💡 Dato: la diferencia entre la etiqueta de apertura y la etiqueta de cierre es que la etiqueta de cierre tiene una barra antes del tipo de elemento.

Sin embargo, algunos elementos no necesitan una etiqueta de cierre porque no actúan como contenedores. Entre ellos se incluyen las imágenes:

<img src="freeCodeCamp.jpg">

Atributos

Los elementos HTML pueden tener atributos que nos permiten describir información adicional sobre el elemento. Estos incluyen class, id, style, lang, src, y href.

Aquí tenemos un ejemplo de un elemento HTML con el atributo class:

<h1 class="titulo-principal">Mi Página Web</h1>
  • Los atributos deben ser escritos en la etiqueta de apertura, antes del paréntesis angular de cierre.
  • Los atributos están separados por un signo igual = de su valor. A la izquierda escribimos el nombre del atributo y a la derecha especificamos su valor. En este ejemplo, el valor es titulo-principal.
  • El valor del atributo debe estar rodeado por comillas.

💡 Dato: Cada tipo de elemento tiene un conjunto específico de atributos que podemos asignar y cada atributo tiene un conjunto de valores posibles.

Idioma

Puedes especificar el idioma principal de la página web o de cualquier elemento en la estructura con el atributo lang y el código correspondiente del idioma:

<html lang="es">

Enlaces

En HTML puedes crear enlaces a otras páginas web y a secciones internas de tu página web con el elemento <a> y el atributo href.

Por ejemplo, este elemento te llevaría a la página web de freeCodeCamp en Español:

<a href="https://www.freecodecamp.org/espanol/">freeCodeCamp</a>
  • El atributo href nos permite especificar el destino del enlace. Su valor es el destino del enlace.
  • El texto que escribimos entre las etiquetas <a></a> es el texto que verá el usuario. En este caso, el texto es freeCodeCamp.

También puedes llevar a los usuarios a otra página de tu sitio web:

<a href="about.html">About Me</a>

Y si asignas el atributo id a un elemento HTML, puedes crear un enlace para llevar al usuario hasta ese elemento:

<a href="#titulo-principal">Ir al Título Principal</a>

En este ejemplo, el enlace llevaría al usuario hasta el elemento con id titulo-principal.

💡 Dato: el elemento <a> es distinto al elemento <link>. El elemento <link> se usa para especificar la relación entre el archivo HTML y una fuente externa como un archivo CSS.

Comentarios

HTML también nos permite escribir comentarios. Los comentarios son muy útiles para agregar notas que nosotros y otros desarrolladores pueden leer al ver el archivo. Son muy útiles para explicar y entender la estructura de la página y saber qué tareas están pendientes:

<!-- Cambiar la estructura de esta parte -->

💡 Dato: Los comentarios no son parte del código ni del resultado final. Son útiles para los desarrolladores que trabajan con el archivo HTML.

Listas

En HTML puedes crear listas ordenadas y listas no ordenadas con las etiquetas <ol> y <ul>, respectivamente.

Aquí tenemos un ejemplo de cada tipo de lista:

<!-- Lista Ordenada -->
<ol>
  <li>Azul</li>
  <li>Verde</li>
  <li>Negro</li>
</ol>
image-32
<!-- Lista No Ordenada -->
<ul>
  <li>Azul</li>
  <li>Verde</li>
  <li>Negro</li>
</ul>
image-31

💡 Tip: La diferencia entre ambos tipos de listas es que los elementos de las listas ordenadas se muestran con una numeración específica mientras que los elementos de las listas no ordenadas muestran viñetas sin numeración.

Imágenes

Para crear una imagen en HTML debemos usar la etiqueta <img>. Este elemento no requiere una etiqueta de cierre, solo la de apertura.

Por ejemplo:

<img src="https://bit.ly/fcc-relaxing-cat">
  • En la etiqueta de apertura especificamos la ubicación de la imagen en internet (o en nuestro dispositivo) con el atributo src.

También deberías incluir el atributo alt en todas las imágenes de tu página web para que se dé un texto alternativo en caso de que la imagen no se descargue correctamente o en caso de que el usuario use un lector de pantalla.

Por ejemplo:

<img src="https://bit.ly/fcc-relaxing-cat" alt="Un lindo gato naranja recostado sobre su espalda.">

¡Buen trabajo! Ya sabes los fundamentos básicos de HTML.

Ahora veamos CSS.

🔸 Introducción a CSS

Una vez que tenemos la estructura de nuestra página web en HTML, podemos comenzar a aplicar estilos a los elementos con CSS.

CSS es un lenguaje basado en reglas. Estas reglas nos permiten especificar cómo se va a presentar el elemento en la página web a partir de selectores, propiedades y sus valores.

Tres Opciones

Hay tres opciones para aplicar estilos CSS a tus elementos HTML:

  • Estilos en línea:
    Puedes especificar un estilo directamente en la etiqueta de apertura del elemento que quieres personalizar con el atributo style.

Por ejemplo:

<h1 style="color: blue">Mi página web</h1>

El valor del atributo style es la propiedad color y su valor correspondiente blue.

💡 Dato: la propiedad y su valor deben estar separados por dos puntos y un espacio.

  • Elemento <style>:
    Si deseas aplicar el mismo estilo a varios elementos, puedes hacerlo en el elemento <style>, donde puedes escribir tus reglas usando selectores CSS.

Por ejemplo:

<head>
  <title>Mi página web</title>
  <style>
    h1 {
      color: blue
    }
  </style>
</head>

💡 Dato: el elemento <style> debería estar dentro del elemento <head>.

  • Archivo CSS:
    La opción que normalmente usamos es escribir nuestras reglas en un archivo CSS y luego vincular este archivo al archivo HTML. Para ello, debemos incluir un elemento <link> en <head> y asignar la ubicación del archivo como el valor de href. 
<link href="style.css" rel="stylesheet">

De esta forma se aplicarán los estilos del archivo CSS a los elementos correspondientes en HTML.

💡 Tip: si el archivo CSS está en la misma carpeta que el archivo HTML, escribimos el nombre del archivo CSS. Si está dentro de una carpeta, hay que especificar su ubicación. Por ejemplo: css/style.css.

Reglas

Este es un ejemplo de una regla en CSS:

h1 {
  color: blue;
  font-size: 15px;
  font-weight: bold;
}

Veamos su estructura principal:

  • Primero, escribimos un selector (en este caso, h1). Los selectores nos permiten seleccionar los elementos a los cuales se les aplicará el estilo.
  • Luego, dentro de las llaves, especificamos las propiedades que queremos asignar a los elementos seleccionados.
  • Las propiedades deben estar separadas de sus valores por dos puntos y un espacio.
  • Al final de cada línea, incluimos un punto y coma.

💡 Tip: en CSS se recomienda indentar el contenido de la regla con 2 espacios.

Selectores en CSS

Hay varios tipos de selectores en CSS que nos permiten seleccionar distintos tipos de elementos basados en distintos criterios.

Los selectores más comunes son:

  • Selector de tipo:
    Nos permite seleccionar todos los elementos de un tipo específico.

Ejemplo:

h1 {
  color: blue;
  font-size: 15px;
  font-weight: bold;
}

Con este selector estamos seleccionando todos los elementos de tipo h1.

  • Selector de clase:
    Nos permite seleccionar todos los elementos que tienen una clase específica asignada. Podemos asignar la misma clase a varios elementos. En este caso, escribimos un punto antes del nombre de la clase en la regla CSS.
.texto-verde {
  color: green;
}

Con este selector estamos seleccionando todos los elementos que tienen la clase texto-verde.

  • Selector de id:
    Nos permite seleccionar el elemento con un id específico asignado. Cada id debe ser único y solo debería ser aplicado a un elemento por página web. En este caso, escribimos un símbolo de numeral # antes del nombre del id en la regla CSS.
#titulo-principal {
  color: red;
  font-size: 20px;
  font-weight: bold;
}

Con este selector estamos seleccionando todos los elementos que tienen el id titulo-principal.

📌 Curso en YouTube

¡Genial! Ahora que ya sabes lo básico de HTML y CSS, te invitamos a ver nuestro curso gratuito de 5+ horas con más contenido, detalles, datos y ejemplos explicados paso a paso:

Curso creado por Estefania Cassingena Navone (@EstefaniaCassN).

Contenido del Curso

Los temas están enfocados en conceptos específicos pero aquí los he dividido en categorías principales para darte una idea general del contenido.

HTML

  • Introducción a HTML y CSS.
  • Herramientas de Desarrollo de Google Chrome.
  • Editores de Código.
  • Crear archivo HTML y declarar DOCTYPE.
  • Elementos y etiquetas en HTML.
  • Encabezados y Párrafos.
  • Documentación Web.
  • Indentación.
  • Imágenes.
  • Enlaces.
  • Listas ordenadas y no ordenadas.
  • Formato de texto.
  • Formularios.
  • Botones de Radio y casillas de verificación.
  • Elementos <div>
  • Pie de página.
  • Elemento <head>.

CSS

  • Introducción a CSS.
  • Estilos en línea, el bloque <style> y archivos CSS.
  • Clases y ids.
  • Formato de texto (tamaño, tipo de letra, respaldos).
  • Google Fonts.
  • Imágenes.
  • Padding y Margin.
  • Selectores de atributo.
  • Unidades absolutas y relativas.
  • Prioridad de estilos.
  • Colores HEX y RGB en CSS.
  • Variables CSS.

Esperamos que te guste el curso y que te ayude a iniciarte en el mundo del desarrollo web.

Continúa aprendiendo con nuestros cursos en YouTube:

]]>