Class 1: Introduction to Bootstrap
- Topics:
Overview of Bootstrap, advantages, and installation methods (CDN, local
files).
- Lab
Tasks:
- Set
up a basic HTML page with Bootstrap using a CDN.
- Add
a simple header with Bootstrap styling.
Class 2: Bootstrap Grid System Basics
- Topics:
Understanding the 12-column grid system.
- Lab
Tasks:
- Create
a webpage layout with rows and columns.
- Experiment
with col-sm, col-md, and col-lg.
Class 3: Typography and Text
Utilities
- Topics:
Typography classes and text utilities.
- Lab
Tasks:
- Use
Bootstrap classes for headings, paragraphs, and text alignment.
- Apply
text utilities like text-muted, text-primary, etc.
Class 4: Bootstrap Colors and
Backgrounds
- Topics:
Color utilities, background utilities.
- Lab
Tasks:
- Create
sections with different background colors.
- Apply
text colors and contrast utilities.
Class 5: Buttons and Alerts
- Topics:
Button styles, sizes, and alerts.
- Lab
Tasks:
- Add
buttons with various styles (btn-primary, btn-danger, etc.).
- Display
alerts for success, error, and warnings.
Class 6: Forms - Part 1 (Basic
Elements)
- Topics:
Input fields, labels, and basic forms.
- Lab
Tasks:
- Create
a login form with input fields for email and password.
- Add
placeholders and required attributes.
Class 7: Forms - Part 2 (Advanced
Elements)
- Topics:
Form controls, checkboxes, radio buttons, and select menus.
- Lab
Tasks:
- Add
a registration form with checkboxes and dropdowns.
- Use
inline forms and form groups.
Class 8: Images and Figures
- Topics:
Image classes (img-fluid, rounded, etc.) and figures.
- Lab
Tasks:
- Add
responsive images to a webpage.
- Use
Bootstrap figure captions and styles.
Class 9: Navigation Bars - Part 1
(Basics)
- Topics:
Basic navigation bar, links, and brand.
- Lab
Tasks:
- Create
a navigation bar with a brand logo and links.
- Add
active and disabled states to links.
Class 10: Navigation Bars - Part 2
(Dropdowns and Styling)
- Topics:
Dropdown menus, alignment, and navbar styling.
- Lab
Tasks:
- Add
dropdown menus to a navbar.
- Style
the navbar with background utilities.
Class 11: Modals
- Topics:
Modal components and their uses.
- Lab
Tasks:
- Create
a modal for user confirmation (e.g., delete action).
- Add
buttons to open and close the modal.
Class 12: Cards
- Topics:
Card components for displaying content.
- Lab
Tasks:
- Design
a product card with an image, title, and description.
- Use
card groups and decks for alignment.
Class 13: Tables
- Topics:
Bootstrap table styling and responsive tables.
- Lab
Tasks:
- Create
a table with hover, striped, and bordered rows.
- Make
the table responsive.
Class 14: Lists and Breadcrumbs
- Topics:
List groups, badges, and breadcrumbs.
- Lab
Tasks:
- Add
a list group for a sidebar menu.
- Create
breadcrumbs for navigation.
Class 15: Media Objects
- Topics:
Media object for combining images and text.
- Lab
Tasks:
- Add
a media object with an image and description.
- Use
alignment utilities for media content.
Class 16: Carousels
- Topics:
Carousel component for slideshows.
- Lab
Tasks:
- Create
an image carousel with indicators and controls.
- Add
captions to the slides.
Class 17: Tooltips and Popovers
- Topics:
Tooltip and popover components.
- Lab
Tasks:
- Add
tooltips to buttons and links.
- Use
popovers to display additional information on hover.
Class 18: Responsive Utilities
- Topics:
Responsive utilities and visibility classes.
- Lab
Tasks:
- Hide
and show elements based on screen sizes.
- Use
d-none, d-block, and d-sm-none classes.
Class 19: Project - Portfolio Website
(Part 1)
- Lab
Tasks:
- Start
building a personal portfolio website.
- Include
a header, navigation bar, and a grid-based layout.
Class 20: Project - Portfolio Website
(Part 2)
- Lab
Tasks:
- Complete
the portfolio website.
- Add
cards, a carousel, and a footer.
No comments:
Post a Comment