Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Building the Experience 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

Building the Experience SectionBuilding the Experience Section

1. Create the Experience Section

Design a section below the hero section to showcase your job experiences or projects. Utilize Bootstrap's grid system to create a responsive layout.

Code Description
  • Section with ID: <section>tag with the ID experience defines a section of the webpage dedicated to showcasing job experiences or projects.
  • Experience Section Styling: Class py-5 adds padding to the top and bottom of the section to create spacing.
  • Container: <div> with the class container is used to contain the content within a responsive layout.
  • Section Title:
    • <h2> tag with classes h2, text-center, fs-2, and text-primary displays the section title "Job Experience" in a large, centered heading with primary text color.
    • Class mb-5 adds margin to the bottom of the heading for spacing.
  • Job Experience Cards: <div> with class row and its child <div> with class col-md-4 create a responsive grid layout for job experience cards or project thumbnails.
  • Job Experience Card:
    • <div> with class card represents each job experience or project entry.
    • <div> with class card-body contains the content of the card.
    • <h5> tag with class card-title displays the title of the job experience.
    • <p> tag with class card-text provides a description of the job experience or project.

2. Add Job Experience Cards or Project Thumbnails

Within the row class, add job experience cards or project thumbnails to showcase your experiences or projects. Customize the content of each card with relevant details such as job titles, descriptions, and additional information.

Result

html

index.html

css

index.css

js

index.js

Everything was clear?

Section 5. Chapter 5
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

Building the Experience SectionBuilding the Experience Section

1. Create the Experience Section

Design a section below the hero section to showcase your job experiences or projects. Utilize Bootstrap's grid system to create a responsive layout.

Code Description
  • Section with ID: <section>tag with the ID experience defines a section of the webpage dedicated to showcasing job experiences or projects.
  • Experience Section Styling: Class py-5 adds padding to the top and bottom of the section to create spacing.
  • Container: <div> with the class container is used to contain the content within a responsive layout.
  • Section Title:
    • <h2> tag with classes h2, text-center, fs-2, and text-primary displays the section title "Job Experience" in a large, centered heading with primary text color.
    • Class mb-5 adds margin to the bottom of the heading for spacing.
  • Job Experience Cards: <div> with class row and its child <div> with class col-md-4 create a responsive grid layout for job experience cards or project thumbnails.
  • Job Experience Card:
    • <div> with class card represents each job experience or project entry.
    • <div> with class card-body contains the content of the card.
    • <h5> tag with class card-title displays the title of the job experience.
    • <p> tag with class card-text provides a description of the job experience or project.

2. Add Job Experience Cards or Project Thumbnails

Within the row class, add job experience cards or project thumbnails to showcase your experiences or projects. Customize the content of each card with relevant details such as job titles, descriptions, and additional information.

Result

html

index.html

css

index.css

js

index.js

Everything was clear?

Section 5. Chapter 5
some-alt