My latest course 'Angular and Firebase authentication' is FREE for next 2 days - 13th April 2024. Get it now!

Blog posts with category web-design

Cover Image for Create a responsive sidebar menu with Angular Material

Create a responsive sidebar menu with Angular Material

Sidebar navigation menus are the most common layout pattern used by web apps nowadays. But most of the components that we have are not really responsive. In this article I'm going to walk you through creating a truly responsive sidebar navigation menu in Angular using the Angular Material library.

Cover Image for Angular Material Dark Mode in 3 steps

Angular Material Dark Mode in 3 steps

A dark mode is a must-have little feature for your Angular web application. It is easier on the eyes and less draining for your smartphone battery.

Cover Image for Better Angular Components with Content Projection

Better Angular Components with Content Projection

In this short article, I'll introduce you to the concept of content projection in Angular and how we can use it to create reusable but more flexible components in our apps.

Cover Image for Create a responsive card grid with TailwindCSS and Angular

Create a responsive card grid with TailwindCSS and Angular

In a previous article, we built up a nice card view layout with TailwindCSS and Angular. In this article, we'll continue with that and convert it into a responsive card grid with TailwindCSS - without writing a single line of CSS!

Cover Image for Create a blog post card layout with Angular and TailwindCSS

Create a blog post card layout with Angular and TailwindCSS

In this article, we'll create a blog post card layout using Angular and TailwindCSS and it's utility first pattern.

Cover Image for How to add TailwindCSS in Angular 11.2

How to add TailwindCSS in Angular 11.2

In this article, I'll quickly show you how to add TailwindCSS to your Angular 11.2 app so you can get building your layouts with it.

Cover Image for Add spring animations to your angular app with popmotion

Add spring animations to your angular app with popmotion

You might have heard of spring animations recently with popular libraries such as react-spring and Framer Motion in the React world. I was on a hunt recently for a similar package in Angular, but found it missing. Angular's own animation API is quite powerful, but it relies on CSS based animations which are difficult to map to spring based animations.

Cover Image for Create a multi select chips component with Angular Material

Create a multi select chips component with Angular Material

I was going through the material design spec document the other day and came across the ever so versatile material chips. They're versatile in the sense that you can use them as action buttons, filter buttons or selection buttons depending on your use case. For instance, I wanted to use them as multi select chips.

Cover Image for Angular material tabs with lazy loaded routes

Angular material tabs with lazy loaded routes

Tabs are a great UI pattern to divide up complex content of your web app into easily digestible pieces. You can use a few tabs or several tabs, each catering to a different section in your app.

Cover Image for Angular Animations: Create a card flip animation

Angular Animations: Create a card flip animation

Animations add a nice touch to any application, if they're used in suitable places and not overdone. But when you're developing games, they are an absolute must!

Cover Image for How to create a card memory game in Angular

How to create a card memory game in Angular

Angular is usually associated with creating great enterprise level applications. However, that is not all the framework can do! In this article, I'm going to explain how I came up with a card memory game in Angular from scratch. It is inspired from a real card game we used to play when we were kids to test our memory.

Cover Image for Fastest way to make a responsive card grid with CSS

Fastest way to make a responsive card grid with CSS

A few months ago I wrote about how to set up a responsive card grid using the Angular Flex Layout library. It proved quite useful to a lot of people, with more than 6000 views till now!

Cover Image for Top 5 must-know CSS layout techniques

Top 5 must-know CSS layout techniques

CSS is often seen as a bane by many web developers. It is not like your typical programming language and can be a bit hard to understand. However, you can learn a few common CSS layout techniques to make it all easier!

Back to the blog