Tag: CSS

So far, I’ve written quite a few blog posts about things like ChatGPT and similar AI tools. To be honest, ChatGPT has often been super helpful for finishing my tasks quickly. This leaves me with extra time to learn new things, try out different ways to make money, and spend quality moments ...

You probably never heard of them, but you will love them once you know. CSS. A language which is responsible for nearly every website in the world. With so many properties, CSS is pretty huge. Finding good properties among them is like trying to read a binary file by yourself (pls don&rsquo...

Introduction Breakpoints What are dynamic breakpoints and Container Queries? Dynamic Breakpoints in Tailwind CSS Default Tailwind CSS breakpoints Customizing breakpoints in tailwind.config.js Example of Breakpoint: Responsive Navbar with tailwind Example 2 of Breakpoint:...

This is a short guide where I want to share how I went from 212kB of CSS to 32.1kB (84.91% code reduction), still using 3rd-party style libraries and fully maintaining the aesthetics of the App. This example project was made using Astro. https://as-next.web.app/ We will go through...

You are a web developer and were asked for a desktop application? Did you try to learn specific languages to create desktop applications and failed? Did you notice that you are going to stop sleeping and waste quality time with your family and/or pet trying to create desktop applications? ...

When it comes to CSS, you always have to write many code lines to make your project look beautiful and presentable in terms of styling. Of course, it’s important to focus on writing good CSS for your front end, but that process might take a lot of time. As web developers, CSS is one of the ...

In this article, we are going to learn how to build a sticky note app using html/css and javascript. We’re going to store the notes in Api and getting the notes from api for display in the screen. Here are four steps we will follow to build sticky note app: 1. Set up html structure and css...

I’ve talked a good deal in my articles and on various forums about how the creators of many things people add to their development stacks — such as HTML/CSS “frameworks” like Bootcrap and “it’s not a framework” Failwind — never lear...

In the first article of this series I outlined the history, reasoninng, and logic behind HTML that it seems most people never seem to grasp. This time around I want to from scratch code a simple “personal website” homepage to show the “you don’t need classes on everythin...

In my humble opinion, the best websites and web applications have a tangible “real” quality to them. There are lots of factors involved to achieve this quality, but shadows are a critical ingredient. When I look around the web, though, it’s clear that most shadows aren’t a...

Styling is a crucial aspect of any web application’s user interface. In React, there are various methods to apply CSS styles to your components, each with its own advantages and use cases. In this guide, we’ll walk you through different ways to add CSS to your React components, along wit...

Css is a language whose task is to design web pages, but getting to the best possible form requires a lot of time, experiences and software lines, but don’t worry there are a lot of tools in place to facilitate the process of writing css. In this article I will tell you 10 free tools and sites...

This article will review how to create an old photo effect on any picture using only CSS. No need for Photoshop or any other image editor. And all in just a few lines of code! We will check three different methods that build on top of each other, increasing the old photo effect with each iteratio...

CSS has a lot of different units that you can choose from. In many cases, there is one unit that’s clearly better than any others. However, one question that seems to come up throughout my career is whether you should use pixels or rems on certain properties where it doesn&rs...

Enter the DYNAMIC world of CSS The Card Game! Use SPECIFICITY to battle against peers and frameworks alike to override their CSS! Combine classes, IDs, and more to make your CSS property WIN AGAINST all others! How to read cards All cards have a NAME and a SPE...

The user interface is one of the most important cornerstones of any application. If we want to develop any frontend, ideally we will have to learn a frontend framework like React/Vue, etc which has a huge learning curve. And a conventional full-stack software development process always needs guys wh...

HTMX has jumped on the scene as a new and exciting technology. I share insight into what makes it awesome and a couple examples to get you started. The What “htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you...

Staying ahead of the curve is critical in the ever-changing field of web development. As React continues to dominate the world of front-end frameworks, developers are always looking for methods to improve their workflow and user experience. Tailwind CSS is one such technique that has grown in popula...

Responsive Design Responsive design is a way of building websites so they look good, and work well on any device — whether it’s a big computer screen or a small phone screen. It adjusts the layout and content to fit the size of the screen, making it easy to read and navigate. We wi...

The world of web development thrives on order and consistency. A harmonious visual presentation not only enhances user experiences but also streamlines code maintenance. In this context, the choice of style casing in CSS plays a pivotal role. It’s not just about aesthetics; it’s about cr...