Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Concevoir la Section Héro | Créer un Site Web de Portfolio avec Bootstrap
Essentiels de Bootstrap pour les Sites Web Modernes
course content

Contenu du cours

Essentiels de Bootstrap pour les Sites Web Modernes

Essentiels de Bootstrap pour les Sites Web Modernes

1. Comprendre Bootstrap
2. Configuration de l'Environnement
3. Concepts de Base
4. Concepts Avancés
5. Créer un Site Web de Portfolio avec Bootstrap

book
Concevoir la Section Héro

Créez la section Hero

Sous la barre de navigation, créez une section hero pour vous présenter. Utilisez le système de grille de Bootstrap pour organiser la mise en page.

<section id="about" class="hero-section py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-6 mx-auto">
        <!-- Add professional photo here -->
        <img
          src="your-photo.jpg"
          alt="[Your Name]"
          class="img-fluid"
          style="display: block; margin: 0 auto"
        />
      </div>
      <div class="col-md-8 mx-auto">
        <!-- Add short description about yourself here -->
        <h1 class="h1 text-center fs-2 text-primary my-3">Your Name</h1>
        <p class="fs-3">
          Welcome to my portfolio! I'm a passionate [your profession] based in
          [your location]. I specialize in [your expertise] and love creating
          [your interests].
        </p>
      </div>
    </div>
  </div>
</section>

2. Ajouter une Photo Professionnelle et une Description

Remplacez "your-photo.jpg" par le chemin du fichier ou l'URL de votre photo professionnelle. Mettez à jour la courte description avec des informations vous concernant, y compris votre profession, votre localisation, votre expertise et vos intérêts.

Résultat

index.html

index.html

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 4

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

course content

Contenu du cours

Essentiels de Bootstrap pour les Sites Web Modernes

Essentiels de Bootstrap pour les Sites Web Modernes

1. Comprendre Bootstrap
2. Configuration de l'Environnement
3. Concepts de Base
4. Concepts Avancés
5. Créer un Site Web de Portfolio avec Bootstrap

book
Concevoir la Section Héro

Créez la section Hero

Sous la barre de navigation, créez une section hero pour vous présenter. Utilisez le système de grille de Bootstrap pour organiser la mise en page.

<section id="about" class="hero-section py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-6 mx-auto">
        <!-- Add professional photo here -->
        <img
          src="your-photo.jpg"
          alt="[Your Name]"
          class="img-fluid"
          style="display: block; margin: 0 auto"
        />
      </div>
      <div class="col-md-8 mx-auto">
        <!-- Add short description about yourself here -->
        <h1 class="h1 text-center fs-2 text-primary my-3">Your Name</h1>
        <p class="fs-3">
          Welcome to my portfolio! I'm a passionate [your profession] based in
          [your location]. I specialize in [your expertise] and love creating
          [your interests].
        </p>
      </div>
    </div>
  </div>
</section>

2. Ajouter une Photo Professionnelle et une Description

Remplacez "your-photo.jpg" par le chemin du fichier ou l'URL de votre photo professionnelle. Mettez à jour la courte description avec des informations vous concernant, y compris votre profession, votre localisation, votre expertise et vos intérêts.

Résultat

index.html

index.html

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 4
some-alt