Css
Css posts, videos, courses, and more
3 days ago
View Post
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...
3
Select One:
6 days ago
View Post
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...
5
Select One:
1 week ago
View Post
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 ✌...
10
Select One:
2 weeks ago
View Post
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...
9
Select One:
1 month ago
View Post
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:
1 month ago
View Post
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:
1 month ago
View Post
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:
1 month ago
View Post
Responsive hexagon grid without media query
I know there is a ton of articles detailing how to create hexagon grid but how many of them are responsive? Only few of them and they rely on a lot of media query or JS.
Here is a CSS only solution to have a responsive hexagon grid that fit nicely into all the sreen sizes. No JS, no media query and no complex html code. Only few...
4
Select One:
2 months ago
View Post
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...
3
Select One:
2 months ago
View Post
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:
2 months ago
View Post
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:
2 months ago
View Post
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:
2 months ago
View Post
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:
3 months ago
View Post
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:
3 months ago
View Post
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:
3 months ago
View Post
5 reasons to start using TailwindCSS
It's 2021, and it's time for a change. Bootstrap has held its reign as the top CSS framework for quite some time; however, that's all about to change.
TailwindCSS is the cat's pajamas, it's the bee's knees, it's the coolest thing since peanut butter and jelly 🍇. If you don't believe me, perhaps this article will change that.
Nev...
9
Select One:
3 months ago
View Post
Creating Browser Mockups in TailwindCSS
TailwindCSS gives us the ability to create some really cool designs. It also gives us the power to create some cool elements on our page, such as browser mockups. You'll learn how to create multiple browser mockups in this quick tutorial in TailwindCSS.
Creating the Browser Header
We'll create the header by adding a rectangle wi...
10
Select One:
4 months ago
View Post
TailwindCSS, Give Me Some Space
Recently, I started using the space utility classes in Tailwind, which gives you the ability to create equal space between elements.
When I first started using Tailwind, I found myself reaching for mx-5, my-3, ml-2, and all the other awesome margin utility classes. There was nothing wrong with this; however, there’s a better way...
5
Select One:
5 months ago
View Post
Tailwind V2 Released 🎉
Tailwind version 2.0 has been officially released along with a fancy new website. You gotta check it out, this thing is impressive.
There are some pretty cool things available in v2, which include:
Focus Ring Feature
The Focus Ring will allow you to add some fancy looking outline rings with box-shadow. These focus rings are goo...
5
Select One:
5 months ago
View Post
Avatars: Design and Build an Admin Dashboard with Preons
This is part of a series to build an admin dashboard with Preons.
Disclaimer! I am the author of the toolkit, but the principles can be applied to other functional css libraries.
End goal
Create a user profile avatar using HTML and CSS classes
Avoid writing custom CSS
Before we start
You'll need:
An IDE, a code playground...
3
Select One:
7 months ago
View Post
CSS Selectors - Part 1
Selectors are used to selecting elements in an HTML document, in order to attach (style) properties to them.
The most used CSS selectors are by class and by id, nevertheless, there are many selectors which you can use easily and fairly to add styles into a set of elements.
A. Combinators
B. Attribute Selector
C. Pseudo Selector...
6
Select One:
7 months ago
View Post
Animating Tailwind Transitions on Page Load
Tailwind transitions classes gives you the ability to animate elements with very little effort. The only problem is that you can't implement animations using the transition classes alone.
In this tutorial, you will learn how we can solve this with some simple javascript.
A Quick Example
Take a look at this code, which will toggl...
5
Select One:
8 months ago
View Post
Create a Simple TailwindCSS Plugin
The TailwindCSS library is amazing. We can create some beautiful user interfaces with their utility and component classes. But, what happens when you need to build some custom solutions? Well then, a TailwindCSS plugin is what you'll need to create.
Building a Tailwind plugin will allow you to re-use a custom Tailwind solution a...
7
Select One:
9 months ago
View Post
Getting Started with TailwindCSS
Tailwind has been gaining popularity and it's getting picked up by a lot of developers and designers. My hope is that everyone will soon know the awesomeness of this amazing library. So, in this tutorial, I want to show you the simplest way to get a quick taste of the deliciousness of TailwindCSS.
But, first, it might help to un...
8
Select One:
9 months ago
View Post
Top 10 TailwindCSS Resources
Tailwind is quickly becoming one of the most popular CSS libraries in 2020. That means we are also going to get a ton of awesome resources along with Tailwind.
In this quick round-up I'll be sharing with you some of the best resources and tools you'll want to keep in your back pocket as you start creating a bunch of Tailwind sit...
7
Select One:
9 months ago
View Post
Why TailwindCSS is Dangerous
TailwindCSS is dangerous and you should be careful before using this CSS library, but probably not in the way you may be thinking... Let me clarify.
Tailwind is dangerous because if you spend time together, you're going to fall in love. That doesn't sound so bad, right? But after falling in love with your new mistress, working o...
13
Select One:
1 year ago
View Post
CSS - Howto learn, best resources
Hello Guys & Girls, I am Robert and i will explain you how to use CSS. I will collect good code snippets and links for your CSS journey. I want to explain how you can learn CSS directly and fast. If you learn CSS you can improve your design talents.CSS is a simple technique to format elements which are available in the dom o...
1
Select One:
2 years ago
View Course
CSS Basics
In this course you'll learn how to use CSS to add styles to your HTML webpages. This course contains 10 videos and will teach you the basics on CSS. Take a look at the course break down below:
1
Select One:
2 years ago
View Post
Get a Preloader on Your Site with jQuery
Preloaders (a.k.a. loading animations) are animations that run between page-loads or as your site gathers information. The two most common types of preloaders are the ‘spinner’ or ‘status bar’. You’ve likely encountered thousands of these while surfing the web.Check out loading.io to generate your own custom preloader.STEP ONE:...
Select One:
Select One:
Loading More Content
