Assignments Of Class 28: CSS Frameworks Introduction

Assignment 1: Create a Responsive Navigation Bar using Bootstrap

Objective:

Design a responsive navigation bar using Bootstrap that adjusts itself based on the screen size.

Instructions:

Create a navigation bar with the following items: Home, About, Services, Contact.
The navbar should be responsive and collapse into a hamburger menu on mobile devices.

Solution:

html

CopyEdit

<!DOCTYPE html>

<head>

<title>Responsive Navbar</title>

</head>

<body>

<a class="navbar-brand" href="#">My Website</a>

</button>

</li>

<a class="nav-link" href="#">About</a>

</li>

<a class="nav-link" href="#">Services</a>

</li>

<a class="nav-link" href="#">Contact</a>

</li>

</ul>

</div>

</nav>

</body>

</html>

Explanation:

We used navbar-expand-lg to make the navbar collapse into a hamburger menu on smaller screens (less than 992px wide).
The navbar-toggler button is used to toggle the collapsed navbar on smaller screens.
The ml-auto class ensures the navbar items are aligned to the right.

Output:

The navigation bar will be displayed, and on smaller screens, the navbar links will collapse into a hamburger menu.

Assignment 2: Create a Grid Layout with Bootstrap

Objective:

Create a responsive grid layout using Bootstrap that consists of 3 columns.

Instructions:

Create a 3-column layout.
The columns should stack on top of each other on smaller screen sizes (below 768px).

Solution:

html

CopyEdit

<!DOCTYPE html>

<head>

<title>Grid Layout</title>

</head>

<body>

<div class="p-3 border bg-light">Column 1</div>

</div>

<div class="p-3 border bg-light">Column 2</div>

</div>

<div class="p-3 border bg-light">Column 3</div>

</div>

</body>

</html>

Explanation:

The col-md-4 class defines a column that takes up 4 out of 12 available grid columns, making 3 equal-width columns in the row.
On small screens, the columns will stack vertically because Bootstrap's grid system is mobile-first.

Output:

On large screens, the content will be displayed in three columns.
On smaller screens, the columns will stack vertically.

Class 28: CSS Frameworks Introduction

Objective:

Introduce students to popular CSS frameworks such as Bootstrap and Tailwind CSS.
Learn how to use these frameworks to streamline the development process by utilizing pre-built components and utilities.

Topics:

1. Bootstrap Overview:

o What is Bootstrap?

o Key features of Bootstrap (grid system, responsive design, pre-built components).

o How to include Bootstrap in a project (CDN, downloading files).

o Understanding the Bootstrap grid system (container, row, and column classes).

o Commonly used Bootstrap components (buttons, navbars, cards, forms, etc.).

2. Tailwind CSS Overview:

o What is Tailwind CSS?

o Key features of Tailwind (utility-first design, flexibility, customizability).

o How to include Tailwind in a project (via CDN or using npm).

o Basic concepts: utility classes, responsiveness, and customization.

o Comparison between Bootstrap and Tailwind CSS.

Lab Exercise:

Use Bootstrap classes to style a webpage.

Create a simple webpage with a navigation bar, a hero section, a product section, and a footer using Bootstrap classes.

Assignments:

Assignment 1: Basic Webpage with Bootstrap

Problem:
Create a basic webpage that includes a header, a main content section with a paragraph, and a footer. Use Bootstrap to style these elements.

Solution:

html

CopyEdit

<!DOCTYPE html>

<head>

<title>Basic Webpage</title>

</head>

<body>

<h1>Welcome to My Website</h1>

</header>

<p>This is a simple webpage styled using Bootstrap.</p>

</main>

</footer>

</body>

</html>

Explanation:

Bootstrap CDN is used for styling.
bg-primary and bg-dark classes add background colors.
text-white ensures the text is white on colored backgrounds.
container adds padding and centers content.
p-4 and p-3 are padding classes.

Output: A simple webpage with a header, paragraph, and footer, all styled with Bootstrap.

Assignment 2: Bootstrap Grid Layout

Problem:
Create a two-column layout using Bootstrap’s grid system. One column should contain an image, and the other should contain text.

Solution:

html

CopyEdit

<!DOCTYPE html>

<head>

<title>Two Column Layout</title>

</head>

<body>

</div>

<h2>Welcome to the Bootstrap Grid Layout</h2>

<p>This is a two-column layout created using Bootstrap’s grid system.</p>

</div>

</body>

</html>

Explanation:

col-md-6 creates two columns, each taking up 50% of the screen width on medium-sized devices and above.
img-fluid makes the image responsive, scaling it to fit the container.

Output: A webpage with a responsive two-column layout.

Assignment 3: Navbar with Bootstrap

Problem:
Create a navigation bar using Bootstrap with links to 'Home', 'About', and 'Contact' sections.

Solution:

html

CopyEdit

<!DOCTYPE html>

<head>

<title>Navbar Example</title>

</head>

<body>

<a class="navbar-brand" href="#">My Website</a>

</button>

</li>

<a class="nav-link" href="#">About</a>

</li>

<a class="nav-link" href="#">Contact</a>

</li>

</ul>

</div>

</nav>

</body>

</html>

Explanation:

navbar class creates the navigation bar.
navbar-expand-lg makes the navbar responsive.
navbar-toggler and collapse are used for collapsing the navbar on smaller screens.

Output: A responsive navigation bar with links to 'Home', 'About', and 'Contact'.

Assignment 4: Tailwind CSS Utility Classes

Problem:
Create a webpage using Tailwind CSS to display a header, a content section with text, and a footer. Style the elements using utility classes.

Solution:

html

CopyEdit

<!DOCTYPE html>

<head>

<title>Tailwind Webpage</title>

</head>

<h1 class="text-3xl">Welcome to My Website</h1>

</header>

<h2 class="text-2xl font-semibold">About This Webpage</h2>

<p>This webpage is styled using Tailwind CSS utility classes.</p>

</main>

</footer>

</body>

</html>

Explanation:

Tailwind utility classes are used to style elements.
bg-blue-500 sets the background color.
text-white makes the text white.
p-5 and p-3 set padding, while mx-auto centers the content.

Output: A webpage styled with Tailwind CSS.

Assignment 5: Tailwind CSS Flexbox Layout

Problem:
Create a flexbox layout using Tailwind CSS with two items aligned horizontally.

Solution:

html

CopyEdit

<!DOCTYPE html>

<head>

<title>Tailwind Flexbox</title>

</head>

</div>

</body>

</html>

Explanation:

flex creates a flex container.
justify-between spaces items evenly.
bg-blue-500 and bg-green-500 provide background colors.

Output: Two items placed horizontally with space between them using Flexbox.

Assignment 6: Tailwind CSS Card Layout

Problem:
Create a card layout with an image, title, and description using Tailwind CSS.

Solution:

html

CopyEdit

<!DOCTYPE html>

<head>

<title>Tailwind Card</title>

</head>

<h2 class="text-xl font-semibold mt-3">Card Title</h2>

<p class="text-gray-700">This is a card description. It provides brief information about the content of the card.</p>

</div>

</body>

</html>

Explanation:

max-w-sm limits the card’s width.
bg-white, shadow-lg, and rounded-lg give the card its appearance.
mt-3 adds margin-top to the title.

Output: A card with an image, title, and description.

Assignment 7: Responsive Grid with Tailwind

Problem:
Create a responsive grid layout using Tailwind CSS. The grid should have three columns on large screens and one column on small screens.

Solution:

html

CopyEdit

<!DOCTYPE html>

<head>

<title>Responsive Grid</title>

</head>

</div>

</body>

</html>

Explanation:

grid-cols-1, sm:grid-cols-2, and lg:grid-cols-3 define the number of columns for different screen sizes.
gap-4 adds spacing between the items.

Output: A responsive grid that adjusts the number of columns based on screen size.

Assignment 8: Tailwind Button Styling

Problem:
Create buttons with different styles using Tailwind CSS (primary, secondary, and disabled).

Solution:

html

CopyEdit

<!DOCTYPE html>

<head>

<title>Button Styles</title>

</head>

<button class="bg-blue-500 text-white p-3 rounded-lg hover:bg-blue-700">Primary Button</button>

<button class="bg-gray-500 text-white p-3 rounded-lg hover:bg-gray-700 mt-4">Secondary Button</button>

<button class="bg-gray-300 text-white p-3 rounded-lg mt-4 cursor-not-allowed" disabled>Disabled Button</button>

</body>

</html>

Explanation:

bg-blue-500 and bg-gray-500 set background colors for primary and secondary buttons.
hover:bg-blue-700 and hover:bg-gray-700 add hover effects.
cursor-not-allowed disables the button.

Output: Three buttons styled with different states.

Assignment 9: Tailwind Typography Styling

Problem:
Style a paragraph with Tailwind CSS typography classes for better readability.

Solution:

html

CopyEdit

<!DOCTYPE html>

<head>

<title>Typography Styling</title>

</head>

This is a paragraph styled with Tailwind CSS. Notice how the typography looks clean and readable with larger text, a comfortable line height, and proper spacing.

</p>

</body>

</html>

Explanation:

text-lg increases font size.
font-serif uses a serif font.
leading-relaxed adjusts line height for better readability.
max-w-prose limits the paragraph width.

Output: A well-styled paragraph with improved readability.

Assignment 10: Tailwind Responsive Text

Problem:
Create a responsive text that changes size based on screen width.

Solution:

html

CopyEdit

<!DOCTYPE html>

<head>

<title>Responsive Text</title>

</head>

Responsive Text Example

</h1>

</body>

</html>

Explanation:

text-2xl, sm:text-3xl, lg:text-4xl, and xl:text-5xl define different text sizes for different screen sizes.

Output: A heading that adjusts its text size based on the screen width.

Thursday, 20 February 2025

Assignments Of Class 28: CSS Frameworks Introduction

Assignments Of Class 28: CSS Frameworks Introduction

No comments:

Post a Comment

Search This Blog

Labels

Report Abuse

About Me

Popular Posts

Subscribe Us

Blog Archive

Facebook

Random Posts

Random Posts

Recent Posts