e‑Learning
/ Frontend development
/ AI Powered - Frontend Development with Bootstrap
AI Powered - Frontend Development with Bootstrap
Build a responsive storefront with Bootstrap 5.3.
Beginner
Frontend development 76 lessons
9.2 hours
Updated Oct 2026
What you'll learn
- Add Bootstrap 5.3 and Bootstrap Icons to a website.
- Build responsive layouts with containers, the grid, spacing and flex utilities.
- Style text, colours, tables and images with Bootstrap classes.
- Use Bootstrap components, navigation, overlays and forms.
- Check AI suggestions, test accessibility and publish a website with GitHub Pages.
Curriculum
Quarter 1
UGX
32,500
01 00. Start here Free lesson 3 lessons · 28 min
Course introduction
Preview
14 min
How this course works
Setting up Claude AI
14 min
02 01. Set up your tools, learn the CSS Bootstrap needs, and add Bootstrap 8 lessons · 46 min
Module 01 introduction
See what we build and why Bootstrap
7 min
Set up VS Code, Live Server and Chrome DevTools
6 min
CSS selectors and the cascade
4 min
The box model, display and units
9 min
Responsive CSS with the viewport tag and media queries
7 min
Add Bootstrap 5.3 from the jsDelivr CDN
10 min
Module 01 quiz
3 min
03 02. Set up an AI assistant for Bootstrap work 6 lessons · 29 min
Module 02 introduction
3 min
What the AI assistant can and cannot do with Bootstrap
6 min
Set up GitHub Copilot Free in VS Code
12 min
Use a browser assistant beside the editor
4 min
The check habit, four checks before you keep AI code
3 min
Module 02 quiz
1 min
Quarter 2
UGX
32,500
04 03. Lay out pages with containers and the grid 7 lessons · 95 min
Module 03 introduction
5 min
Containers and breakpoints
12 min
Rows and columns, the grid basics
21 min
Responsive columns at every grid tier
21 min
Gutters, alignment, order, offsets and nesting
10 min
Spacing utilities and the home page hero
23 min
Module 03 quiz
3 min
05 04. Style content with typography, colours, tables, images and flex 8 lessons · 64 min
Module 04 introduction
2 min
Typography with headings, display text, lead and lists
10 min
Colours, text, backgrounds and the 5.3 colour classes
9 min
Advanced typography, colours, text and backgrounds
10 min
Tables and the cart page
12 min
Images that are responsive, shaped and framed
8 min
Flex utilities to line things up
11 min
Module 04 quiz
2 min
06 05. Build with components: alerts, buttons, icons, badges, lists and cards 9 lessons · 60 min
Module 05 introduction
1 min
Alerts
8 min
Buttons and button groups
11 min
Buttons and button groups, advanced
4 min
Bootstrap Icons
6 min
Badges, progress bars and spinners
7 min
Pagination and list groups
8 min
Cards and the product grid
13 min
Module 05 quiz
2 min
Quarter 3
UGX
32,500
07 06. Add navigation with dropdowns, collapse, navs, the navbar and the carousel 8 lessons · 60 min
Module 06 introduction
2 min
Dropdowns
9 min
Dropdowns, advanced
6 min
Collapse and the accordion
9 min
Navs and tabs
11 min
The navbar
11 min
The carousel
10 min
Module 06 quiz
2 min
08 07. Overlays, offcanvas, layout utilities and the admin dashboard 8 lessons · 54 min
Module 07 introduction
1 min
Modals
13 min
Tooltips and popovers
10 min
Toasts
5 min
Scrollspy and offcanvas
10 min
Layout utilities for display, sizing, borders, shadows and position
11 min
Build the admin dashboard layout
2 min
Module 07 quiz
2 min
Quarter 4
UGX
32,500
09 08. Build the forms for contact, login, register and admin 7 lessons · 48 min
Module 08 introduction
2 min
Form controls and form layout
15 min
Selects, checkboxes, radios and switches
8 min
Range, input groups and the quantity box
9 min
Floating labels and the login page
4 min
Form validation
8 min
Module 08 quiz
2 min
10 09. Make it yours and publish it with dark mode, a theme, accessibility and speed 7 lessons · 14 min
Module 09 introduction
1 min
Dark mode with colour modes
8 min
Your own theme with CSS variables
Accessibility for a page everyone can use
Performance for a fast page on a slow phone
Publish on GitHub Pages
5 min
Module 09 quiz
11 10. Build it with AI: from components to a linked site 7 lessons · 35 min
Module 10 introduction
2 min
Brief the assistant once, then build the portfolio home page
14 min
Add the About page and make both pages share one navbar
6 min
Add the Contact page, link it all up, and finish the mini site
5 min
Start the admin project: a new folder, the sign in pages and the admin shell
8 min
Prompt the dashboard, the list, the detail page and the admin form
Module 10 quiz
12 11. Prompt by prompt: build the final project 9 lessons · 18 min
Module 11 introduction
2 min
Read the brief, write the house rules, and scaffold the site
5 min
Final project demo, the Marigold shop
5 min
Prompt the home page and the about page
Prompt the news list, the article page and the admissions form
Prompt the admin side: sign in, the shell, the dashboard and a list
Prompt the theme, dark mode, accessibility and publish
Module 11 quiz
What you can do now, and what comes next
6 min
Requirements
- Basic HTML and CSS, including pages, images, links and forms.
- A computer with VS Code and a current web browser.
- Internet access. A free GitHub account is needed for the final publishing lessons.
Description
Start with the CSS Bootstrap uses, add Bootstrap 5.3 and build the Marigold Stores website one clear step at a time. Practise with live examples, readable code, browser checks and short tasks. Use GitHub Copilot as a helper, then check every suggestion before you keep it.
Your instructor
MM
Muhindo Mubaraka
Full-Stack Developer & Software Engineer
Nine years building the systems that governments, hospitals, schools and farmers actually run on, and teaching thousands of people to build their own.
Frequently asked questions
How do I pay?
Pay with MTN Mobile Money, Airtel Money, or a Visa/Mastercard card, all handled securely through Flutterwave. Free courses need no payment at all.
Is it self-paced?
Yes, you learn on your own schedule. There are no live class times to catch; lessons stay available for the course's access window.
Do I get a certificate?
Yes, a certificate is issued automatically once you complete every lesson in the course, and you can verify it any time from its own link.
What if I get stuck?
Use the course's discussion Q&A to ask a question. I read and answer these myself.