My Blog

DEV

My blog posts are targeted towards beginners in web development. You can also read all my blogs on Dev.to page.

How I made my own CSS framework akin to TailwindCSS?

30 July 2021
SCSS CSS framework Tailwind
What is tailwind?
It is a utility first framework. It provides thousands of utility classes that can be used together to build complex components, directly in your markup. You'll rarely end up writing actual CSS.
Why make my own framework?
I decided to make my own framework to gain a better understanding of how it all works and test my CSS skills. I also used it in some of my react projects to test its usability, check this project where I ended up using it.
How it works?
In Utility-based CSS frameworks, you style elements by applying pre-existing classes directly in your HTML. Check below example card that is made with MintUI
  Read full post

How to keep your footer at bottom of the page?

19 December 2020
flexbox css footer
Have you run into this problem where the footer on your site does not stay at the bottom of the page, even if it is the last tag in your html body. Especially if you are new to web development, you'll run into this problem. There are ways of making sure your footer stays at bottom, but most of those methods have some kind of caveat.
  1. Position: absolute (doesn't work when there's more content, you'll realise footer is stuck and your content is scrolling behind it).
  2. Position: fixed (use only if you want your footer to be always visible).
There's a way using flexbox which works on device of every size, doesn't require fixed height of navbar or footer, and works without any side-effects.
  Read full post

How to get started with Fetch()?

19 December 2020
Javascript Fetch()
The Fetch API provides an interface for fetching resources (including across the network).
For making an request and fetching a response, you need to use the fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.
Example: I'll demonstrate a basic fetch request using a dummy API from Json Placeholder. This dummy API fetches a list of users with associated data.
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => console.log(data));
  Read full post
To Top