Join 34,780 other Developers as we Learn, Build, and Grow Together.

Connect with fellow developers and gain access to tools that will help you build a profitable SaaS πŸš€

Sign Up

Css

Css posts, videos, courses, and more

Let's build an emoji switcher like discord in just 5 minutes

Let's build an emoji switcher like discord in just 5 minutes

Hello there, I am Savio Martin, A 14-year-old passionate Full Stack Web Developer from India. Today, I'm gonna make something super awesome and in-demand project In Just 5 Minutes. You all may have noticed the emoji switcher effect on Discord. It is a super awesome idea and provides a very good User Interface (UI) to the user wi...

Savio Martin

1 month ago

6
Select One:
Create a Video Landing Page with HTML and CSS

Create a Video Landing Page with HTML and CSS

If you want to be a better front-end developer, one of the many projects you are bound to do is building a landing page. Whether it is embedded with a video or just a page mixed with images and text, you are encouraged to take on this task to challenge yourself. This article will give you insights on how to create and include a...

Teri Eyenike

1 month ago

4
Select One:
15 amazing websites for UI inspirations πŸ’–

15 amazing websites for UI inspirations πŸ’–

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. Today, I'll share the top 15 sites which I use to get mood boards or to get inspiration for the design. I hope you'll like these o...

Savio Martin

2 months ago

6
Select One:
TailwindCSS 2.2 in 22 seconds

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...

Tony Lea

3 months ago

13
Select One:
SASS nothing to something, CSS superpower

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...

Rahul

3 months ago

6
Select One:
15 Best and Unique CSS Loaders

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,...

Sunil Joshi

3 months ago

4
Select One:
Create a Dark Mode toggler with Tailwind ⚑️

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...

Savio Martin

3 months ago

4
Select One:
Set Up Tailwind JIT In React - The fastest way! πŸš€

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...

Savio Martin

3 months ago

5
Select One:
The future of Responsive Design with Container Queries.

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...

Kim Hallberg

4 months ago

5
Select One:
Flexbox Cheatsheet

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...

Yogesh Chavan

4 months ago

3
Select One:
16 must-have Figma Plugins for UI/UX Designers

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-...

Savio Martin

4 months ago

7
Select One:
Secrets to using REM in CSS: CSS Tips

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...

Emma Turner

4 months ago

4
Select One:
Set Up Tailwind In React - The fastest way! πŸš€

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...

Savio Martin

4 months ago

5
Select One:
 5 CSS Best Practices every front-end Developer should know

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...

Rahul

4 months ago

6
Select One:
 20+ Ultimate CSS Tricks and SASS Shorthands for code efficiency

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...

DevWriteUps.com

4 months ago

6
Select One:
A new CSS :where() and :is pseudo classes

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...

Rahul

4 months ago

6
Select One:
CSS Selectors crash course

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...

Emma Turner

4 months ago

7
Select One:
15 beginner only HTML and CSS mistakes

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...

Rahul

5 months ago

9
Select One:
Creating a super productive REST API in 30 seconds πŸ’ͺ

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...

Savio Martin

5 months ago

10
Select One:
A brief guide to ::before and ::after in CSS | Tutorial

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...

Rahul

5 months ago

8
Select One:
25 Marvelous Resources to satisfy your image needs πŸ™Œ

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...

Savio Martin

5 months ago

10
Select One:
Creating an Image search app using Unsplash API with infinite scrolling πŸ“Έ

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 ✌...

Savio Martin

5 months ago

12
Select One:
GREAT 20+ CSS TOGGLE EXAMPLE

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...

gaganjot singh

5 months ago

10
Select One:
Lets Build Live Markdown Editor in 5 minutes with React JS. βš‘πŸš€

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...

Savio Martin

6 months ago

9
Select One:
111 amazing resources you're gonna love πŸ’–

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...

Savio Martin

6 months ago

7
Select One:
TailwindCSS Hidden Gems πŸ’Ž

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...

Tony Lea

6 months ago

7
Select One:
Tailwind CSS - all you need to know to get started

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...

Riccardo Battiato

7 months ago

4
Select One:
Wrapping text inside a circular shape

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...

Temani Afif

7 months ago

3
Select One:
5 things you need to do when learning how to code

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...

Vlad Pasca

7 months ago

4
Select One:
3D image with one element

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)...

Temani Afif

7 months ago

5
Select One:

Loading More Content