Course Content

Bootstrap: Building Stylish Websites

1. Understanding Bootstrap

Hello Bootstrap History and Evolution Advantages and Disadvantages Maximizing Learning Quiz

2. Setting Up Environment

Boostrap Installation Options Installing via CDN Installing via NPM Challenge & Quiz

3. Basic Concepts

Grid System Typography Part 1 Typography Part 2 Buttons Part 1 Buttons Part 2 Margins and Paddings Forms Challenge & Quiz

4. Advanced Concepts

Navigation Images Cards Modals Carousels Challenge & Quiz

5. Creating a Portfolio Website with Bootstrap

Introduction Setting Up Development Environment Building the Header Navigation Designing the Hero Section Building the Experience Section Crafting the Skills Section Implementing the Contact Form Conclusion

Bootstrap: Building Stylish Websites

Crafting the Skills Section

1. Create the Skills Section

Design a section to provide details about your technical skills and tools.

Code Description

Section with ID: <section>tag with the ID skills defines a section of the webpage dedicated to showcasing technical skills and tools.
Skills Section Styling: 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 skills.
Technical Skills Column:
- <div> with class col-6 creates a column for technical skills.
- <h2> tag with classes text-primary and mb-4 displays the section title "Technical Skills" in a primary color and adds margin to the bottom of the heading.
- <ul> tag with class list-unstyled creates an unordered list for technical skills.
- <li> tags with class text-danger and me-2 represent individual skills with a danger text color and margin to the right.
Tools Column:
- Another <div> with class col-6 creates a column for tools.
- Similar structure as the technical skills column, with a different title and list of tools.

2. Add Technical Skills and Tools

Within each column, add technical skills and tools using Bootstrap's typography and list styling classes. Customize the content with your specific skills and tools, adding new items as needed.

Result

index.html

index.css

index.js

Everything was clear?

Section 5. Chapter 6

Course Content

Bootstrap: Building Stylish Websites

1. Understanding Bootstrap

Hello Bootstrap History and Evolution Advantages and Disadvantages Maximizing Learning Quiz

2. Setting Up Environment

Boostrap Installation Options Installing via CDN Installing via NPM Challenge & Quiz

3. Basic Concepts

Grid System Typography Part 1 Typography Part 2 Buttons Part 1 Buttons Part 2 Margins and Paddings Forms Challenge & Quiz

4. Advanced Concepts

Navigation Images Cards Modals Carousels Challenge & Quiz

5. Creating a Portfolio Website with Bootstrap

Bootstrap: Building Stylish Websites

Crafting the Skills Section

1. Create the Skills Section

Design a section to provide details about your technical skills and tools.

Code Description

Section with ID: <section>tag with the ID skills defines a section of the webpage dedicated to showcasing technical skills and tools.
Skills Section Styling: 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 skills.
Technical Skills Column:
- <div> with class col-6 creates a column for technical skills.
- <h2> tag with classes text-primary and mb-4 displays the section title "Technical Skills" in a primary color and adds margin to the bottom of the heading.
- <ul> tag with class list-unstyled creates an unordered list for technical skills.
- <li> tags with class text-danger and me-2 represent individual skills with a danger text color and margin to the right.
Tools Column:
- Another <div> with class col-6 creates a column for tools.
- Similar structure as the technical skills column, with a different title and list of tools.

2. Add Technical Skills and Tools

Within each column, add technical skills and tools using Bootstrap's typography and list styling classes. Customize the content with your specific skills and tools, adding new items as needed.

Result

index.html

index.css

index.js

Everything was clear?

Section 5. Chapter 6