This repo is made of 3 projects:

1. Food Ninja: A recipe website to understand Tailwind CSS basics.
2. Ninja Coffee: A product page to understand Bulma basics.
3. Photo Ninja: A photography portfolio website to learn Materialize basics.

A recipe website to understand Tailwind CSS basics.

See food-ninja folder

• 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.

See Demo on CodePen

See ninja-coffee folder

• 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.

See photo-ninja folder

Based on Materialize Tutorial by Shaun Pelling - The Net Ninja (2018).