Css

Css posts, videos, courses, and more

Rahul

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...
A brief guide to ::before and ::after in CSS | Tutorial
3
Select One:

Savio Martin

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...
25 Marvelous Resources to satisfy your image needs πŸ™Œ
5
Select One:

Savio Martin

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 ✌...
Creating an Image search app using Unsplash API with infinite scrolling πŸ“Έ
10
Select One:

gaganjot singh

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...
GREAT 20+ CSS TOGGLE EXAMPLE
9
Select One:

Savio Martin

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...
Lets Build Live Markdown Editor in 5 minutes with React JS. βš‘πŸš€
9
Select One:

Savio Martin

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...
111 amazing resources you're gonna love πŸ’–
7
Select One:

Tony Lea

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...
TailwindCSS Hidden Gems πŸ’Ž
7
Select One:

Temani Afif

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...
Responsive hexagon grid without media query
4
Select One:

Riccardo Battiato

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...
Tailwind CSS - all you need to know to get started
3
Select One:

Temani Afif

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...
Wrapping text inside a circular shape
3
Select One:

Vlad Pasca

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...
5 things you need to do when learning how to code
4
Select One:

Temani Afif

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)...
3D image with one element
5
Select One:

Vlad Pasca

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...
Web developer roadmap in 2021 and beyond
1
Select One:

Tony Lea

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...
Tracing Objects in TailwindCSS
9
Select One:

Tony Lea

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...
Custom Animations in TailwindCSS
7
Select One:

Tony Lea

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...
5 reasons to start using TailwindCSS
9
Select One:

Tony Lea

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...
Creating Browser Mockups in TailwindCSS
10
Select One:

Tony Lea

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...
TailwindCSS, Give Me Some Space
5
Select One:

Tony Lea

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...
Tailwind V2 Released πŸŽ‰
5
Select One:

Gemma Black

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...
Avatars: Design and Build an Admin Dashboard with Preons
3
Select One:

Ahmed Hussien

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...
CSS Selectors - Part 1
6
Select One:

Tony Lea

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...
Animating Tailwind Transitions on Page Load
5
Select One:

Tony Lea

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...
Create a Simple TailwindCSS Plugin
7
Select One:

Tony Lea

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...
Getting Started with TailwindCSS
8
Select One:

Tony Lea

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...
Top 10 TailwindCSS Resources
7
Select One:

Tony Lea

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...
Why TailwindCSS is Dangerous
13
Select One:

Ghost

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...
CSS - Howto learn, best resources
1
Select One:

Tony Lea

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:
CSS Basics
1
Select One:

Wael Manai

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:...
Get a Preloader on Your Site with jQuery
Select One:

Wael Manai

2 years ago

View Post

Interesting JavaScript and CSS Libraries for November 2018

Omi
Interesting JavaScript and CSS Libraries for November 2018
Select One:

Loading More Content

Back to DevDojo