4 small projects using Tailwind CSS, Bulma, Materialize and Bootstrap 5.
| # | Project | Description | Live Demo |
|---|---|---|---|
| 01 | Food Ninja | A recipe website to understand Tailwind CSS basics. | Live Demo |
| 02 | Ninja Coffee | A product page to understand Bulma basics. | Live Demo |
| 03 | Photo Ninja | A photography portfolio website to learn Materialize basics. | Live Demo |
| 04 | Ebook Landing Page | A responsive landing page with Bootstrap 5. | Live Demo |
A recipe website to understand Tailwind CSS basics.
- setting up Tailwind CSS for development.
- handling fonts, colors, margin, padding and borders.
- extending theme colors and customizing font with tailwind.config.js.
- using flexbox, grid and responsive classes.
- reusing classes for cards, badges and buttons with @apply directive.
- displaying icons from Heroicons.
- building a responsive navbar.
- adding effects and transitions on hover.
Based on Tailwind CSS Tutorial by Shaun Pelling - The Net Ninja (2020).
A product page to understand Bulma basics.
- handling font sizes and colors with Bulma.
- working with section, container and spacing classes.
- building a navbar for desktop and mobile with a burger menu.
- adding some breadcrumbs, a message box and a footer.
- playing with grid columns and responsive classes.
- generating cards for related products.
- using tabs and rendering a modal with JavaScript.
- creating a form with text, checkbox and select fields.
Based on Bulma CSS Tutorial by Shaun Pelling - The Net Ninja (2020).
A photography portfolio website to learn Materialize basics.
- formatting texts and handling colors with Materialize.
- displaying icons from Material Icons and Font Awesome.
- creating a header for desktop and mobile with a burger menu and a sidenav.
- building a responsive grid.
- pushing, pulling and hiding content according to screen size.
- using Materialize JavaScript for tabs.
- rendering images with lightbox and parallax tools.
- generating a form with a built-in date picker and handling buttons.
- customizing colors and displaying tooltips next to social icons.
- adding a footer and enabling smooth scroll with scrollspy.
Based on Materialize Tutorial by Shaun Pelling - The Net Ninja (2018).
A responsive landing page with Bootstrap 5.
- discovering Bootstrap 5 new features.
- exploring colors, typography, button and utility classes.
- playing with containers, grid layout and cards.
- using navbar, list group, tooltips, tabs and dropdowns.
- working with forms, modals and offcanvas.
- displaying Bootstrap Icons.
- customizing Bootstrap colors with Sass.
Based on Bootstrap 5 Crash Course Tutorial by Shaun Pelling - The Net Ninja (2021).