Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Designing the Hero Section | Creating a Portfolio Website with Bootstrap
course content

Course Content

Bootstrap: Building Stylish Websites

1. Understanding Bootstrap

Hello BootstrapHistory and EvolutionAdvantages and DisadvantagesMaximizing LearningQuiz

2. Setting Up Environment

Boostrap Installation Options Installing via CDN Installing via NPMChallenge & Quiz

3. Basic Concepts

Grid SystemTypography Part 1Typography Part 2Buttons Part 1Buttons Part 2Margins and PaddingsFormsChallenge & Quiz

4. Advanced Concepts

NavigationImagesCardsModalsCarouselsChallenge & Quiz

5. Creating a Portfolio Website with Bootstrap

IntroductionSetting Up Development EnvironmentBuilding the Header NavigationDesigning the Hero SectionBuilding the Experience SectionCrafting the Skills SectionImplementing the Contact FormConclusion

Bootstrap: Building Stylish Websites

Designing the Hero SectionDesigning the Hero Section

Create the Hero Section

Below the navigation bar, create a hero section to introduce yourself. Use Bootstrap's grid system to organize the layout.

Code Description
  • Section with ID: <section> tag with the ID about defines a section of the webpage dedicated to providing information about the individual.
  • Padding: Class py-5 adds padding to the top and bottom of the section to create spacing.
  • Container and Row: <div> with the class container and its child <div> with the class row are used to create a responsive grid layout for content alignment.
  • Professional Photo:
    • An <img> tag is used to display a professional photo of the individual.
    • The src attribute specifies the path to the image file.
    • The alt attribute provides alternative text for accessibility purposes.
    • Class img-fluid ensures the image is responsive and adjusts its size according to the container.
    • Inline styling (style="display: block; margin: 0 auto") centers the image horizontally within its container.
  • Short Description:
    • <h1> tag with classes h1, text-center, fs-2, and text-primary displays the individual's name in a large, centered heading with primary text color.
    • <p> tag with class fs-3 provides a short description about the individual, including their profession, location, expertise, and interests.

2. Add Professional Photo and Description

Replace "your-photo.jpg" with the file path or URL of your professional photo. Update the short description with information about yourself, including your profession, location, expertise, and interests.

Result

html

index.html

css

index.css

js

index.js

Everything was clear?

Section 5. Chapter 4
course content

Course Content

Bootstrap: Building Stylish Websites

1. Understanding Bootstrap

Hello BootstrapHistory and EvolutionAdvantages and DisadvantagesMaximizing LearningQuiz

2. Setting Up Environment

Boostrap Installation Options Installing via CDN Installing via NPMChallenge & Quiz

3. Basic Concepts

Grid SystemTypography Part 1Typography Part 2Buttons Part 1Buttons Part 2Margins and PaddingsFormsChallenge & Quiz

4. Advanced Concepts

NavigationImagesCardsModalsCarouselsChallenge & Quiz

5. Creating a Portfolio Website with Bootstrap

IntroductionSetting Up Development EnvironmentBuilding the Header NavigationDesigning the Hero SectionBuilding the Experience SectionCrafting the Skills SectionImplementing the Contact FormConclusion

Bootstrap: Building Stylish Websites

Designing the Hero SectionDesigning the Hero Section

Create the Hero Section

Below the navigation bar, create a hero section to introduce yourself. Use Bootstrap's grid system to organize the layout.

Code Description
  • Section with ID: <section> tag with the ID about defines a section of the webpage dedicated to providing information about the individual.
  • Padding: Class py-5 adds padding to the top and bottom of the section to create spacing.
  • Container and Row: <div> with the class container and its child <div> with the class row are used to create a responsive grid layout for content alignment.
  • Professional Photo:
    • An <img> tag is used to display a professional photo of the individual.
    • The src attribute specifies the path to the image file.
    • The alt attribute provides alternative text for accessibility purposes.
    • Class img-fluid ensures the image is responsive and adjusts its size according to the container.
    • Inline styling (style="display: block; margin: 0 auto") centers the image horizontally within its container.
  • Short Description:
    • <h1> tag with classes h1, text-center, fs-2, and text-primary displays the individual's name in a large, centered heading with primary text color.
    • <p> tag with class fs-3 provides a short description about the individual, including their profession, location, expertise, and interests.

2. Add Professional Photo and Description

Replace "your-photo.jpg" with the file path or URL of your professional photo. Update the short description with information about yourself, including your profession, location, expertise, and interests.

Result

html

index.html

css

index.css

js

index.js

Everything was clear?

Section 5. Chapter 4
some-alt