Blog posts with category web-design
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.
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.
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.
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!
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.
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.
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.
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.
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.
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!
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.
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!
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!