Css
Css posts, videos, courses, and more
TailwindCSS 2.2 in 22 seconds
Want to learn what's new in TailwindCSS 2.2 in 22 seconds?
Maybe that's a little too ambitious 🤪. It might be more like 122 seconds. Either way, in this tutorial, you will learn the new things in TailwindCSS 2.2 in a few minutes. Let's dive in!
Tailwind CLI 💻
With the all-new TailwindCLI, you can now purge your CSS into a single...
3
Select One:
SASS nothing to something, CSS superpower
SASS is CSS with superpowers. So, as front-end developer and learner I researched about LESS which was great but very soon I changed to SASS because of using pre/post processor you can write CSS more programmatically and can help you develop robust systems.
Nonetheless, I regularly find that individuals just know a couple of fun...
4
Select One:
15 Best and Unique CSS Loaders
One of the fundamental principles of User Experience (UX) is that a visitor expects to see
some feedback when they do an actionable work on a website or an app. For example, when you click on a “Download” button to download a file to your machine, the file processes in the background but on the frontend, till the file is ready,...
3
Select One:
Create a Dark Mode toggler with Tailwind ⚡️
Hello Folks 👋
This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.
Today, I'll show you the easiest and the effective way to set up dark mode toggler in your tailwind app. 🚀. So, be with me! Let's...
4
Select One:
Set Up Tailwind JIT In React - The fastest way! 🚀
Hello Folks 👋
This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.
Today, I'll show you the easiest and the fastest way to set up Tailwind CSS in your React App. So, be with me! Lets code something...
4
Select One:
The future of Responsive Design with Container Queries.
When we write responsive design using CSS today, we use the media at-rule, more commonly known as a Media Query. This at-rule queries the device or user-agent to grab the values it needs for our media condition. That condition can be a multitude of conditions based on the provided media type or media feature.
One thing that medi...
4
Select One:
Flexbox Cheatsheet
Flexbox is amazing. It has changed how we write the CSS and it provides built-in support for responsiveness. So all the responsiveness of your website is handled by flexbox making it easier to create websites.
Flexbox is used for building one-dimensional layouts.
If you have used the Bootstrap framework for making responsive d...
3
Select One:
16 must-have Figma Plugins for UI/UX Designers
Hey there, I'm Savio Martin, A 14-year-old boy on an intention to enhance as a successful full-stack web developer. I love building full-stack web applications and mobile apps. I have proved my superiority in frontend technologies. I love to share my resources and expertise with the dev community.
Today, I'm gonna share 16 must-...
7
Select One:
Secrets to using REM in CSS: CSS Tips
As device sizes proceed to wander and programs give more client alternatives, utilizing static units simply doesn't cut it any longer. Some such countless individuals set their browser inclination to bigger content with no impact on the sites they visit.
While pixels will permit clients to zoom in and out, their content settings...
4
Select One:
Set Up Tailwind In React - The fastest way! 🚀
Hello Folks 👋
This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.
Today, I'll show you the easiest and the fastest way to set up Tailwind CSS in your React App. So, be with me! Lets code something...
5
Select One:
5 CSS Best Practices every front-end Developer should know
Writing CSS has always been tough for me😭. But here are some best practices every front-end developer should know.
Without further talks, let's see them.
Using the vendor prefixes
Vendor prefixed is a way for the browser to add support for new CSS features before those features are fully supported in all browsers/ We need to ad...
6
Select One:
20+ Ultimate CSS Tricks and SASS Shorthands for code efficiency
CSS may look exhausting, and not very many individuals can dominate it the correct way. So in this post we've written about 20+ CSS tricks and tips you should know also SASS mixins shorthand you should know. Notwithstanding, it is an expertise that can give you an incredible upper hand over different designers. On the off chanc...
6
Select One:
A new CSS :where() and :is pseudo classes
A new CSS with :where() and :is() pseudo-classes. I better know some of you don't know about these Selector/Pseudo-classes. They were recently introduced to most browsers. But they just might be your new favourite thing in Vanilla CSS.
Let's see about them.
:is()
Think about when you want to apply the same styling to multiple el...
6
Select One:
CSS Selectors crash course
A CSS selector is the first of a CSS rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.
or "CSS Selectors are used to "find"(or select) the HTML elements you want to style.
universal sele...
7
Select One:
15 beginner only HTML and CSS mistakes
I have rounded up some of the HTML and CSS Mistakes I've made and you don't have to. These are some beginner mistakes, don't judge me😂.
HTML MISTAKES
No matter what stack or framework you use, it all compiled to HTML in your browser. Therefore, it's important to make sure it's right! This list highlights top HTML mistake and ho...
9
Select One:
Creating a super productive REST API in 30 seconds 💪
Hello Folks 👋
This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.
Today, I'm super excited to share how you can build a super productive REST API in less than 30 seconds. It is good enough to have...
10
Select One:
A brief guide to ::before and ::after in CSS | Tutorial
In this post, we'll discuss about the **::before and ::after use cases.
Intro
The ::before and ::after are CSS pseudo elements, and they allow you to add content to the page without having any additional HTML. While they are not technically part of the DOM they will appear as if they are.
These pseudo elements are mostly used to...
8
Select One:
25 Marvelous Resources to satisfy your image needs 🙌
Hello Devs 👋
This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.
Today, I'm gonna share 25 Marvelous Resources to satisfy your image needs 🙌
Free Illustration Resources.
Open Peeps
The library w...
10
Select One:
Creating an Image search app using Unsplash API with infinite scrolling 📸
Hello Folks 👋
This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.
Today, I'm super pumped to build an amazing Image search app using Unsplash API with infinite scrolling. So, let's get started ✌...
12
Select One:
GREAT 20+ CSS TOGGLE EXAMPLE
If You Like This Article then check Out more Examples
50+ CSS Toggle Switches
1.
Title:- Pure CSS Toggles
Author:- Rafael González
Made With:- HTML CSS JAVASCRIPT
{% codepen https://codepen.io/rgg/pen/waEYye %}
2.
Title:- CSS Theme Switcher
Author:- Michelle Barker
Made With:- HTML CSS
{% codepen https://code...
10
Select One:
Lets Build Live Markdown Editor in 5 minutes with React JS. ⚡🚀
Hello Geeks 👋
This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.
Let's Build The Live Markdown Editor with React Js. Let's get Started ✌️🔥
Stuffs Required for making the project
NPM (Node Packa...
9
Select One:
111 amazing resources you're gonna love 💖
Hello Devs 👋
This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.
Today, I'm gonna share 100+ super amazing resources every developer are gonna love for sure 💖 I hope you'll enjoy this article.
3...
7
Select One:
TailwindCSS Hidden Gems 💎
If you are new to TailwindCSS, you're probably familiarizing yourself with some of the utility classes and starting to build some awesome stuff. 😉
As you learn about this awesome framework, there may be a few utility classes that you skimmed over. In this tutorial, I want to share with you some awesome utility classes you might...
7
Select One:
Tailwind CSS - all you need to know to get started
Tailwind CSS is a relatively new CSS framework that can be easily seen as the next big revolution of the way we style our HTML elements.
Tailwind encourages and facilitates a utility-first approach where you write as few custom styles as possible and use hundreds of small, low-level utility (or helper) classes instead. For this...
4
Select One:
Wrapping text inside a circular shape
Yes, we are going to make a text wrap perfectly inside a circular shape.
No JS, no SVG, no external plugin. Only few lines of CSS and a basic HTML structure.
{% codepen https://codepen.io/t_afif/pen/dyOWVrr %}
Explanation
<div class="box">
<i></i>
Lorem ipsum ..
</div>
div.box {
--s:450p...
3
Select One:
5 things you need to do when learning how to code
If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on Twitter for more information about web development and how to improve as a developer.
1. You need to be consistent
Coding is something new for your brain and it needs to get used to that.
How you do this?
By exposing it to...
4
Select One:
3D image with one element
A quick trick to create a 3D illustration using only an <img> tag. No pseudo elements, no extra tag, no SVG, Nothing! Only one tag and few lines of CSS.
Here you go
{% codepen https://codepen.io/t_afif/pen/NWbdYJE %}
Let's dig into the code
img {
--x:10px;
--y:20px;
clip-path:polygon( /* 4 */
var(--y)...
5
Select One:
Web developer roadmap in 2021 and beyond
If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on Twitter for more information about web development and how to improve as a developer.
1. Learn how the internet works
Zero to mastery playlist
MDN Introduction
2. Learn HTML
HTML Crash Course For Absolute Beginners
Basic HTML...
1
Select One:
Tracing Objects in TailwindCSS
I've been getting good at designing and painting elements on the page using TailwindCSS. I decided to use a flat laptop image 🖼️ and design it with TailwindCSS. It was actually pretty simple after I figured out the best way to trace elements.
Let me share my process.
Finding our design
First, you'll need to find a design that yo...
9
Select One:
Custom Animations in TailwindCSS
Tailwind provides some simple animations out of the box. If you're not familiar with these animations, be sure to check out my post on TailwindCSS Animations here.
These simple animations are pretty cool; however, we may want to add some custom animations to our websites and applications. That's simple enough 😉; let's learn abou...
7
Select One:
Loading More Content
