Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Creación de la Sección de Habilidades | Creación de un Sitio Web de Portafolio con Bootstrap
Esenciales de Bootstrap para Sitios Web Modernos

bookCreación de la Sección de Habilidades

1. Crear la sección de habilidades

Diseñar una sección para proporcionar detalles sobre tus habilidades técnicas y herramientas.

<section id="skills" class="skills-section py-5">
  <div class="container">
    <div class="row">
      <div class="col-6">
        <h2 class="text-primary mb-4">Technical Skills</h2>
        <ul class="list-unstyled">
          <li class="text-danger me-2">HTML5</li>
          <li class="text-danger me-2">CSS3</li>
          <li class="text-danger me-2">JavaScript</li>
          <!-- Add more skills here -->
        </ul>
      </div>
      <div class="col-6">
        <h2 class="text-primary mb-4">Tools</h2>
        <ul class="list-unstyled">
          <li class="text-danger me-2">Bootstrap</li>
          <li class="text-danger me-2">jQuery</li>
          <li class="text-danger me-2">Git</li>
          <!-- Add more tools here -->
        </ul>
      </div>
    </div>
  </div>
</section>

2. Añadir habilidades técnicas y herramientas

Dentro de cada columna, agregar habilidades técnicas y herramientas utilizando las clases de tipografía y estilos de listas de Bootstrap. Personalizar el contenido con tus habilidades y herramientas específicas, añadiendo nuevos elementos según sea necesario.

Resultado

index.html

index.html

copy
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 6

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain how to add more skills or tools to the section?

What do the Bootstrap classes like "py-5", "text-danger", and "me-2" do?

How can I customize the appearance of the skills section further?

Awesome!

Completion rate improved to 3.23

bookCreación de la Sección de Habilidades

Desliza para mostrar el menú

1. Crear la sección de habilidades

Diseñar una sección para proporcionar detalles sobre tus habilidades técnicas y herramientas.

<section id="skills" class="skills-section py-5">
  <div class="container">
    <div class="row">
      <div class="col-6">
        <h2 class="text-primary mb-4">Technical Skills</h2>
        <ul class="list-unstyled">
          <li class="text-danger me-2">HTML5</li>
          <li class="text-danger me-2">CSS3</li>
          <li class="text-danger me-2">JavaScript</li>
          <!-- Add more skills here -->
        </ul>
      </div>
      <div class="col-6">
        <h2 class="text-primary mb-4">Tools</h2>
        <ul class="list-unstyled">
          <li class="text-danger me-2">Bootstrap</li>
          <li class="text-danger me-2">jQuery</li>
          <li class="text-danger me-2">Git</li>
          <!-- Add more tools here -->
        </ul>
      </div>
    </div>
  </div>
</section>

2. Añadir habilidades técnicas y herramientas

Dentro de cada columna, agregar habilidades técnicas y herramientas utilizando las clases de tipografía y estilos de listas de Bootstrap. Personalizar el contenido con tus habilidades y herramientas específicas, añadiendo nuevos elementos según sea necesario.

Resultado

index.html

index.html

copy
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 6
some-alt