Assignments of Class 3 - Typography and Text Utilities
Assignment 1: Create a Page with Styled Headings and a Lead Paragraph
Task:
Create a simple HTML page using Bootstrap that includes:
1. Headings from <h1> to <h6> styled with Bootstrap .h1 to .h6 classes.
2. A paragraph styled with the .lead class.
Solution:
Step 1: Set up the basic structure of an HTML document.
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Headings and Paragraph</title></head><body> <div class="container mt-4"> <!-- Content goes here --> </div></body></html>Step 2: Add headings styled with Bootstrap's typography classes.
html<div class="container mt-4"> <h1 class="h1">Heading 1</h1> <h2 class="h2">Heading 2</h2> <h3 class="h3">Heading 3</h3> <h4 class="h4">Heading 4</h4> <h5 class="h5">Heading 5</h5> <h6 class="h6">Heading 6</h6></div>Explanation:
.h1to.h6classes apply Bootstrap's predefined styles to headings, ensuring consistent sizing and spacing.
Step 3: Add a styled paragraph using the .lead class.
html<div class="container mt-4"> <p class="lead">This is a lead paragraph, styled to grab the reader's attention.</p></div>Explanation:
- The
.leadclass styles the paragraph with larger font size and increased line spacing for emphasis.
Assignment 2: Create a Page with Text Alignment and Text Utilities
Task:
Design a page with:
1. Three paragraphs aligned left, center, and right using .text-start, .text-center, and .text-end.
2. A paragraph styled with .text-primary, .fw-bold, and .text-uppercase.
Solution:
Step 1: Add paragraphs with text alignment.
html<div class="container mt-4"> <p class="text-start">This text is aligned to the left.</p> <p class="text-center">This text is centered.</p> <p class="text-end">This text is aligned to the right.</p></div>Explanation:
.text-start: Aligns text to the left (default behavior)..text-center: Centers the text within its container..text-end: Aligns text to the right.
Step 2: Add a styled paragraph with text utilities.
html<div class="container mt-4"> <p class="text-primary fw-bold text-uppercase">This is a primary, bold, and uppercase text.</p></div>Explanation:
.text-primary: Sets the text color to the primary color (usually blue in Bootstrap's default theme)..fw-bold: Makes the text bold..text-uppercase: Transforms all text to uppercase.
Assignment 3: Combine Text Styling and Utilities
Task:
Create a page with the following elements:
1. A lead paragraph styled with .text-muted.
2. A paragraph that is italicized and aligned to the center.
3. A heading styled with .text-success and .fw-bold.
Solution:
Step 1: Add a muted lead paragraph.
html<div class="container mt-4"> <p class="lead text-muted">This is a lead paragraph with muted styling.</p></div>Explanation:
.text-muted: Styles the text with a lighter, muted color for less emphasis.
Step 2: Add an italicized and centered paragraph.
html<div class="container mt-4"> <p class="fst-italic text-center">This text is italicized and centered.</p></div>Explanation:
.fst-italic: Applies an italic style to the text..text-center: Centers the text.
Step 3: Add a styled heading.
html<div class="container mt-4"> <h2 class="text-success fw-bold">This is a success heading with bold text.</h2></div>Explanation:
.text-success: Styles the text with a green color..fw-bold: Makes the text bold.
Assignment 4: Build a Mini Portfolio Section
Task:
Create a section that includes:
1. A heading with .text-center and .fw-bold.
2. A subheading with .text-muted.
3. A short bio paragraph styled with .lead.
Solution:
Step 1: Add the portfolio heading.
html<div class="container mt-4"> <h1 class="text-center fw-bold">John Doe</h1> <h2 class="text-center text-muted">Web Developer & Designer</h2></div>Explanation:
.text-center: Centers the heading and subheading..fw-bold: Makes the main heading bold for emphasis..text-muted: Styles the subheading with a lighter color.
Step 2: Add the bio paragraph.
html<div class="container mt-4"> <p class="lead">I am a passionate web developer with experience in creating responsive and user-friendly websites. My skills include HTML, CSS, JavaScript, and Bootstrap.</p></div>Explanation:
.lead: Highlights the bio paragraph with a larger font size and more spacing.
No comments:
Post a Comment