+
HomeAboutTips

web dev tips

Simple and handy Web Dev related tips on HTML, CSS, JS, React and more!

Seach glass

HTML - CSS - JS

Using your own controls for the audio tag

#293

Using your own controls for the audio tag

HTML - CSS

Positioning a fixed element in relation to the parent element

#292

Positioning a fixed element in relation to the parent element

JS

Using labels on if statements in Javascript

#291

Using labels on if statements in Javascript

HTML

Sending a text message from an HTML anchor

#290

Sending a text message from an HTML anchor

CSS

Simple text reveal animation with CSS

#289

Simple text reveal animation with CSS

React

Creating a custom right click menu in React

#288

Creating a custom right click menu in React

JS

How to use the 'every' and 'some' array methods in JS

#287

How to use the 'every' and 'some' array methods in JS

HTML - CSS

Creating the Instagram tooltip with CSS

#286

Creating the Instagram tooltip with CSS

HTML

Using the marquee tag in HTML

#285

Using the marquee tag in HTML

HTML - CSS - JS

How to take screenshots with the webcam in JS

#284

How to take screenshots with the webcam in JS

HTML - CSS - JS - NodeJS

Creating a simple chat app with SocketIO

#283

Creating a simple chat app with SocketIO

React - PWA

How to turn a React app into a PWA in two minutes

#282

How to turn a React app into a PWA in two minutes

HTML - CSS - JS

Awesome menu reveal effect with a tilting image

#281

Awesome menu reveal effect with a tilting image

React

Why you should use React DevTools

#280

Why you should use React DevTools

HTML - CSS - JS

How to easily use the webcam with some JS

#279

How to easily use the webcam with some JS

JS

Fixing 'cannot read property x of undefined' in Javascript

#278

Fixing 'cannot read property x of undefined' in Javascript

HTML - JS

Database on the browser with PouchDB

#276

Database on the browser with PouchDB

React

Using the useContext hook in React

#275

Using the useContext hook in React

HTML - CSS - JS

Awesome flashlight effect with a few lines of CSS & JS

#274

Awesome flashlight effect with a few lines of CSS & JS

JS

Animating the URL bar with emojis

#273

Animating the URL bar with emojis

Netlify

How to easily deploy your website on Netlify

#272

How to easily deploy your website on Netlify

HTML - CSS

Animating the z-index property in CSS

#271

Animating the z-index property in CSS

React

What are React Portals and how to use them

#270

What are React Portals and how to use them

HTML - CSS - JS

How to debug elements that close when you right click

#269

How to debug elements that close when you right click

HTML - CSS

Creating an awesome animation with box-shadow

#268

Creating an awesome animation with box-shadow

HTML - CSS

Adding a touch effect on your elements with some CSS

#266

Adding a touch effect on your elements with some CSS

JS - Cypress

Testing your app easily with Cypress

#265

Testing your app easily with Cypress

HTML

Refreshing or redirecting a page using only HTML

#264

Refreshing or redirecting a page using only HTML

HTML - CSS

Cool image effects with two lines of CSS

#263

Cool image effects with two lines of CSS

JS

Easiest way to generate a random number in JS

#262

Easiest way to generate a random number in JS

HTML - CSS

Ready to use CSS transitions with SunsetCSS

#260

Ready to use CSS transitions with SunsetCSS

React

Creating a guided tour in your app with React Joyride

#259

Creating a guided tour in your app with React Joyride

CSS

What is margin collapse in CSS

#258

What is margin collapse in CSS

HTML - CSS - JS

How to add swipe to close on a sidebar using JS

#257

How to add swipe to close on a sidebar using JS

React - JS

Creating a calendar from scratch in React

#256

Creating a calendar from scratch in React

HTML - JS - Cloudinary

Image upload to Cloudinary on the client side

#255

Image upload to Cloudinary on the client side

CSS - Tailwind

Beautiful, easy and ready to use components with Tailblocks

#254

Beautiful, easy and ready to use components with Tailblocks

JS

How to access URL parameters with Javascript

#253

How to access URL parameters with Javascript

React

Bidirectional data flow in React

#252

Bidirectional data flow in React

Cloudinary

Why you should be using Cloudinary for your images

#251

Why you should be using Cloudinary for your images

HTML - CSS - JS

Highlighting keywords in a string with Javascript

#250

Highlighting keywords in a string with Javascript

JS

Dealing with dates in JS using date-fns

#249

Dealing with dates in JS using date-fns

React

How to render different content in different devices

#248

How to render different content in different devices

HTML - CSS' - JS

Animated menu with JS and a couple of lines of JS

#247

Animated menu with JS and a couple of lines of JS

Webpack - JS

Getting started with Webpack

#246

Getting started with Webpack

React

Creating a neat date input with react-datepicker

#245

Creating a neat date input with react-datepicker

HTML - CSS

Using Flexbox to easily align elements

#244

Using Flexbox to easily align elements

HTML - CSS

Horizontally scrollable sections with minimal CSS

#243

Horizontally scrollable sections with minimal CSS

React

Saving items to Local Storage in React with a custom hook

#242

Saving items to Local Storage in React with a custom hook

HTML - CSS

How to create knockout text with CSS

#241

How to create knockout text with CSS

HTML - CSS - JS

Calculating word frequency in a string with Javascript

#240

Calculating word frequency in a string with Javascript

React

Dark theme toggle in React with styled-components

#239

Dark theme toggle in React with styled-components

HTML - CSS - JS

How to create a tiltable 3D element with some CSS & JS

#238

How to create a tiltable 3D element with some CSS & JS

HTML - CSS

Adding a noise texture effect to an image with CSS

#237

Adding a noise texture effect to an image with CSS

React

Creating a tags input with suggestions in React

#236

Creating a tags input with suggestions in React

HTML - CSS - JS

Building an animated search input

#235

Building an animated search input

HTML - CSS - JS

Creating an app to open, edit and save text files

#234

Creating an app to open, edit and save text files

HTML - CSS - JS

Hiding elements in HTML with the 'hidden' attribute

#233

Hiding elements in HTML with the 'hidden' attribute

HTML - CSS - Tailwind

What is Tailwind CSS and how to start using it

#232

What is Tailwind CSS and how to start using it

HTML - JS

Implementing a step-by-step guide on your website in 5 min

#231

Implementing a step-by-step guide on your website in 5 min

React

Creating neat notifications in React with React Toastify

#230

Creating neat notifications in React with React Toastify

HTML - CSS - JS

How to create a simple modal with dynamic data

#229

How to create a simple modal with dynamic data

JS

Getting to know the different data types in Javascript

#228

Getting to know the different data types in Javascript

React

How to create a drag and drop list in React

#227

How to create a drag and drop list in React

HTML - CSS

Creating a solar system orbit like animation with CSS

#226

Creating a solar system orbit like animation with CSS

HTML - CSS - JS

Easily creating a simple image gallery

#225

Easily creating a simple image gallery

HTML - CSS

Creating fluid layouts in CSS using the clamp function

#224

Creating fluid layouts in CSS using the clamp function

HTML - CSS

Using CSS to create tinted backgrounds

#223

Using CSS to create tinted backgrounds

REACT

Creating native animations from After Effects in React

#222

Creating native animations from After Effects in React

CSS

Creating a shadow glow effect with CSS

#221

Creating a shadow glow effect with CSS

HTML

Validating data on inputs with the pattern attribute

#220

Validating data on inputs with the pattern attribute

CSS

Exploring some of the CSS functions

#219

Exploring some of the CSS functions

React - Typescript

Using Typescript on your React apps - part 2

#218

Using Typescript on your React apps - part 2

JS

Using the Array find() method in Javascript

#217

Using the Array find() method in Javascript

HTML - CSS

Creating a interactive Credit Card with CSS

#216

Creating a interactive Credit Card with CSS

React - JS - Typescript

How to start using Typescript on your React apps

#215

How to start using Typescript on your React apps

HTML - CSS

How to use the "focus-within" pseudo class

#214

How to use the "focus-within" pseudo class

Node - JS

Hashing password in Node with Bcrypt

#213

Hashing password in Node with Bcrypt

HTML - CSS - JS

How to create a Dark/Light theme switch

#212

How to create a Dark/Light theme switch

HTML - CSS

Using SVG to create a wavy background

#211

Using SVG to create a wavy background

HTML - JS

Auto-pausing a video that's out of view with JS

#210

Auto-pausing a video that's out of view with JS

HTML - CSS

Card with text on hover effect

#209

Card with text on hover effect

React - Framer Motion

Creating drag animations with React Framer Motion

#208

Creating drag animations with React Framer Motion

React - Framer Motion

Basics of animations with React Framer Motion

#207

Basics of animations with React Framer Motion

HTML - CSS

Using the 'place-items' property with CSS Grid

#206

Using the 'place-items' property with CSS Grid

HTML

Creating clickable areas on images

#205

Creating clickable areas on images

JS

How to use the Resize Observer in Javascript

#204

How to use the Resize Observer in Javascript

CSS

Animating with clip-path in CSS

#203

Animating with clip-path in CSS

Misc - Heroku

How to easily deploy an app on Heroku

#202

How to easily deploy an app on Heroku

HTML - CSS - JS

How to create CSS animations with good performance

#200

How to create CSS animations with good performance

JS

How to use the new Nullish Coalescing operator in JS

#199

How to use the new Nullish Coalescing operator in JS

Node - JS

Creating and writing to a file in nodeJS

#198

Creating and writing to a file in nodeJS

HTML - CSS

Reveal text on hover effect with a gradient overlay

#197

Reveal text on hover effect with a gradient overlay

HTML - JS

How to copy text to the clipboard with Javascript

#196

How to copy text to the clipboard with Javascript

HTML - CSS

Creating all sorts of shaps in CSS with clip-path

#195

Creating all sorts of shaps in CSS with clip-path

React - RecoilJS

Using Recoill to easily share state across components

#194

Using Recoill to easily share state across components

VSCode - Misc

Automatically format your code with Prettier

#193

Automatically format your code with Prettier

CSS

How to use variables with vanilla CSS

#192

How to use variables with vanilla CSS

Node - Express - JS

Creating a basic HTTP server with Node & Express

#191

Creating a basic HTTP server with Node & Express

JS

Using the Object.entries() method in Javascript

#190

Using the Object.entries() method in Javascript

HTML - CSS - JS

Easily creating a reveal on scroll animation

#189

Easily creating a reveal on scroll animation

HTML - CSS - JS

How to create an image slider from scratch

#188

How to create an image slider from scratch

React

Using the Container & Presentational pattern in React

#187

Using the Container & Presentational pattern in React

CSS - SASS

Modules and mixins in Sass

#186

Modules and mixins in Sass

HTML - CSS - JS

Creating a password input with a visibility toggle

#185

Creating a password input with a visibility toggle

JS

Using impplicit return on your JS functions

#184

Using impplicit return on your JS functions

HTML - JS

How to use the device's Orientation Sensor with JS

#183

How to use the device's Orientation Sensor with JS

HTML - CSS

Implementing a design from Dribbble with HTML & CSS

#182

Implementing a design from Dribbble with HTML & CSS

JS - GatsbyJS

What is GatsbyJS and how to start using it

#181

What is GatsbyJS and how to start using it

CSS - SASS

Why SCSS is awesome and how to use it

#180

Why SCSS is awesome and how to use it

HTML - JS - CSS

Using data-attributes in HTML

#179

Using data-attributes in HTML

HTML - CSS - JS

Creating scroll animations with ScrollMagic

#178

Creating scroll animations with ScrollMagic

Hosting - Misc

How to host your first website online

#177

How to host your first website online

HTML - CSS

Creating a simple and clean testimonials section with CSS

#175

Creating a simple and clean testimonials section with CSS

CSS - VSCode

Using CSS Auto Prefixers to avoid writing prefixes for every property

#174

Using CSS Auto Prefixers to avoid writing prefixes for every property

Chrome - Misc

Testing your websites in different mobile devices with DevTools

#173

Testing your websites in different mobile devices with DevTools

JS

How to use the 'includes' method in Javascript

#172

How to use the 'includes' method in Javascript

React

Using Fragments in React to wrap elements

#171

Using Fragments in React to wrap elements

HTML - CSS

Easily creating borders with anything in CSS

#170

Easily creating borders with anything in CSS

JS

Using the typeof operator in Javascript

#169

Using the typeof operator in Javascript

CSS

Creating a custom cursor with CSS

#168

Creating a custom cursor with CSS

React

Getting the current scroll position with a custom Hook in React

#167

Getting the current scroll position with a custom Hook in React

Git - Github

Creating Pull Requests in Github

#166

Creating Pull Requests in Github

Git

What are branches in Git and how to use them

#165

What are branches in Git and how to use them

HTML

Understanding the tabindex attribute in HTML

#164

Understanding the tabindex attribute in HTML

React

Displaying images with a cool Ambilight effect

#163

Displaying images with a cool Ambilight effect

React

Using the useReducer hook in React

#162

Using the useReducer hook in React

JS

How to use the 'bind' function in Javascript

#161

How to use the 'bind' function in Javascript

HTML - CSS

Using the 'reversed' attribute in ordered lists in HTML

#160

Using the 'reversed' attribute in ordered lists in HTML

Git - Misc

How to create your first repository on Github

#159

How to create your first repository on Github

HTML - CSS

How to limit the number of lines in a text with CSS

#158

How to limit the number of lines in a text with CSS

React

Fetching data from a REST API in React

#157

Fetching data from a REST API in React

Misc

How to keep up-to-date with Web Development

#156

How to keep up-to-date with Web Development

React - CSS

Easily creating an image comparison slider in React

#155

Easily creating an image comparison slider in React

JS

Difference between using 'async' and 'defer' on your scripts

#154

Difference between using 'async' and 'defer' on your scripts

Browser - Misc

What is the Critical Rendering Path and why it's a big deal

#153

What is the Critical Rendering Path and why it's a big deal

HTML - CSS

Creating different layouts using Grid Areas in CSS

#152

Creating different layouts using Grid Areas in CSS

HTML - Chrome - Misc

Using the native image lazy-loading in Chrome

#151

Using the native image lazy-loading in Chrome

VSCode - Misc

What extensions do I use on VSCode

#150

What extensions do I use on VSCode

HTML - CSS

Making images blend with the background using some CSS

#149

Making images blend with the background using some CSS

JS

Creating a clock from scratch with Javascript

#148

Creating a clock from scratch with Javascript

React - Unit testing

How to write your first test for a React Component

#147

How to write your first test for a React Component

HTML - CSS - JS

Creating a collapsable sidebar with icons from scratch

#146

Creating a collapsable sidebar with icons from scratch

React - React Transition Group

Using React Transition Group to animate your components

#145

Using React Transition Group to animate your components

HTML - CSS

Creating Soft UI (neomorphism) elements in CSS

#144

Creating Soft UI (neomorphism) elements in CSS

Chrome - CSS - Misc

Inspecting your CSS animations in Chrome

#143

Inspecting your CSS animations in Chrome

HTML - CSS

How to use the @supports rule in CSS

#142

How to use the @supports rule in CSS

HTML - CSS - SVG

Creating a loading spinner with SVG from scratch

#141

Creating a loading spinner with SVG from scratch

React - Icons

Using Icons from different libraries on a React application

#140

Using Icons from different libraries on a React application

CSS

How to use CSS intrinsic sizing to set the width of an element

#139

How to use CSS intrinsic sizing to set the width of an element

Chrome - Misc

Using the Box Shadow Editor in Google Chrome

#138

Using the Box Shadow Editor in Google Chrome

HTML - CSS

Adding fonts to your website using Google Fonts

#137

Adding fonts to your website using Google Fonts

JS

How to create, get and delete cookies with Javascript

#136

How to create, get and delete cookies with Javascript

Chrome - Misc

Getting familiar with the Chrome DevTools (part 3)

#135

Getting familiar with the Chrome DevTools (part 3)

HTML

Using HTML5 to create a link that downloads a file

#134

Using HTML5 to create a link that downloads a file

HTML - CSS

How to use Font Awesome icons on your projects

#133

How to use Font Awesome icons on your projects

HTML - CSS

Creating a cool hover effect with some CSS

#132

Creating a cool hover effect with some CSS

React - Redux

Easiest way to get started with Redux - Part 2

#131

Easiest way to get started with Redux - Part 2

React - Redux

Easiest way to get started with Redux - Part 1

#130

Easiest way to get started with Redux - Part 1

HTML - CSS

How to control the way a image fits into its box with 'object-fit'

#129

How to control the way a image fits into its box with 'object-fit'

JS

Using the Javascript debugger keyword to debug your scripts

#128

Using the Javascript debugger keyword to debug your scripts

React - React Router

How to implement Routing on your app with React Router

#127

How to implement Routing on your app with React Router

CSS

What's the difference between using EM's and REM's units?

#126

What's the difference between using EM's and REM's units?

HTML

Using HTML icons on your projects without any library

#125

Using HTML icons on your projects without any library

HTML - CSS - JS

Easily creating tabs from scratch with HTML, CSS & JS

#124

Easily creating tabs from scratch with HTML, CSS & JS

JS

How to compare two objects in Javascript

#123

How to compare two objects in Javascript

HTML - CSS

How to make long words break in specific places with HTML

#122

How to make long words break in specific places with HTML

React

Defining default Props for a Component in React

#121

Defining default Props for a Component in React

HTML - CSS

Creating a ribbon only by using CSS

#120

Creating a ribbon only by using CSS

Chrome - Misc

Getting familiar with the Chrome DevTools (part 2)

#119

Getting familiar with the Chrome DevTools (part 2)

CSS

What is CSS BEM and why you should use it on your projects

#118

What is CSS BEM and why you should use it on your projects

React

What are PropTypes in React and how to use them

#117

What are PropTypes in React and how to use them

JS

How to create function required parameters in Javascript

#116

How to create function required parameters in Javascript

HTML

Automatically creating tooltips for acronyms with HTML

#115

Automatically creating tooltips for acronyms with HTML

HTML - CSS

Understanding pointer events in CSS

#114

Understanding pointer events in CSS

React

How to handle forms in React

#113

How to handle forms in React

HTML

Inserting an audio file on a webpage using only HTML

#112

Inserting an audio file on a webpage using only HTML

React - JS

What are Environment Variables and how to use them

#111

What are Environment Variables and how to use them

HTML - CSS

Creating a scroll snap effect with CSS

#110

Creating a scroll snap effect with CSS

CSS

Know your CSS selectors (part 2)

#109

Know your CSS selectors (part 2)

React

Using the useRef hook in React

#108

Using the useRef hook in React

JS

Understanding the NOT(!), OR (||), AND (&&) logical operators in Javascript

#107

Understanding the NOT(!), OR (||), AND (&&) logical operators in Javascript

HTML - CSS - JS

Creating a parallax stars animation with just some CSS & JS

#106

Creating a parallax stars animation with just some CSS & JS

HTML - CSS - Bootstrap

Easily creating different sized grids by using Bootstrap

#105

Easily creating different sized grids by using Bootstrap

JS

Understanding what is hoisting in Javascript

#104

Understanding what is hoisting in Javascript

HTML - JS

How to easily change the website tab title

#103

How to easily change the website tab title

Misc - Chrome

Getting familiar with the Chrome DevTools

#102

Getting familiar with the Chrome DevTools

HTML - CSS

Using position sticky in CSS

#101

Using position sticky in CSS

React - React Spring

Creating animations in React using React Spring

#99

Creating animations in React using React Spring

HTML - JS

How to take advantage of the browser's Session Storage

#97

How to take advantage of the browser's Session Storage

HTML - JS

How to take advantage of the browser's Session Storage

#97

How to take advantage of the browser's Session Storage

HTML - CSS

Creating a cool glitch effect with CSS

#96

Creating a cool glitch effect with CSS

CSS

Understanding the main types of 'pposition' in CSS

#95

Understanding the main types of 'pposition' in CSS

HTML

How to add a Favicon to your website

#94

How to add a Favicon to your website

React

Using the useEffect hook in React

#93

Using the useEffect hook in React

Bootstrap

How to get started with Bootstrap on your projects

#92

How to get started with Bootstrap on your projects

Accessibility

Understanding some basics about accessibility for the web

#91

Understanding some basics about accessibility for the web

HTML - CSS - JS

Using some basic JS to create a simple image slideshow

#90

Using some basic JS to create a simple image slideshow

HTML - CSS

Creating a simple timeline with some CSS

#89

Creating a simple timeline with some CSS

HTML - CSS

Easily finding if browser is Internet Explorer to apply fallback code

#88

Easily finding if browser is Internet Explorer to apply fallback code

React

Using React Context to avoid props drilling

#87

Using React Context to avoid props drilling

HTML - JS

Using Event Listeners in Javascript

#86

Using Event Listeners in Javascript

HTML - CSS

Creating the Star Wars intro text effect only with CSS

#85

Creating the Star Wars intro text effect only with CSS

HTML - CSS

Creating resizable elements with some basic CSS

#84

Creating resizable elements with some basic CSS

React

What is React Memo and why you should start using it

#83

What is React Memo and why you should start using it

HTML - CSS - JS

Getting the user's position using the HTML Geolocation API

#82

Getting the user's position using the HTML Geolocation API

CSS

How does Z-index works in CSS?

#81

How does Z-index works in CSS?

Misc - JS

Using ESLint on your projects to have better consistency and readability

#80

Using ESLint on your projects to have better consistency and readability

React - Styled Components

What are Styled Components and how to use them

#79

What are Styled Components and how to use them

HTML - CSS

Creating a card flip hover animation with some CSS

#78

Creating a card flip hover animation with some CSS

Misc

Some of my favorite Web Dev related resources II

#77

Some of my favorite Web Dev related resources II

JS

Getting to know recursion in JavaScript

#76

Getting to know recursion in JavaScript

HTML - CSS

Creating highly responsive images using the HTML 'picture' element

#75

Creating highly responsive images using the HTML 'picture' element

CSS

Understanding the CSS Box Model

#74

Understanding the CSS Box Model

JS

Getting familiar with the spread operator in JavaScript

#73

Getting familiar with the spread operator in JavaScript

React - CSS

Building a simple Todo list with reactJS

#72

Building a simple Todo list with reactJS

HTML - CSS

Create a smooth typing effect with some basic CSS

#71

Create a smooth typing effect with some basic CSS

HTML

Using some basic HTML tips for best practices

#70

Using some basic HTML tips for best practices

HTML - CSS

Creating a dropdown menu from scratch with HTML and CSS only

#69

Creating a dropdown menu from scratch with HTML and CSS only

React

What is a High-Order Component in reactJS and how to create one

#68

What is a High-Order Component in reactJS and how to create one

JS

Understanding closures in JavaScript and why they matter

#67

Understanding closures in JavaScript and why they matter

Git

How to start using Git with some basic commands

#66

How to start using Git with some basic commands

HTML - CSS - JS

Creating an awesome drag and drop effect between two lists

#65

Creating an awesome drag and drop effect between two lists

CSS

What exactly does the 'box-sizing' property do and why does it matter

#64

What exactly does the 'box-sizing' property do and why does it matter

HTML - CSS

Creating a cool slider with a range input

#63

Creating a cool slider with a range input

React

Using Material UI components with reactJS

#62

Using Material UI components with reactJS

JS

What are template literals in JS and they are so awesome

#61

What are template literals in JS and they are so awesome

CSS

Know your CSS selectors ( part I )

#60

Know your CSS selectors ( part I )

HTML - CSS

Using the HTML 'figure' element to display an image with caption

#59

Using the HTML 'figure' element to display an image with caption

JS

Getting to know JavaScript classes

#58

Getting to know JavaScript classes

React

Using Hooks in ReactJS and getting to know the 'useState' one

#57

Using Hooks in ReactJS and getting to know the 'useState' one

HTML - CSS

Creating a loading spinner animation using CSS only

#56

Creating a loading spinner animation using CSS only

HTML - CSS

Using the HTML 'small' element for some fine print text

#55

Using the HTML 'small' element for some fine print text

JS

What is the Prototype in JS and why it's such an important feature

#54

What is the Prototype in JS and why it's such an important feature

React

Getting to know some more lifecycle methods in reactJS

#53

Getting to know some more lifecycle methods in reactJS

HTML - CSS

Creating engraved text with CSS

#52

Creating engraved text with CSS

HTML - CSS

How to create editable HTML elements

#51

How to create editable HTML elements

JS

What is type coercion in JS and why you should know how it works

#50

What is type coercion in JS and why you should know how it works

HTML - CSS

Shortening your text with ellipsis with nothing but CSS

#49

Shortening your text with ellipsis with nothing but CSS

JS

The difference between 'let' and 'var' in JavaScript

#48

The difference between 'let' and 'var' in JavaScript

React

What are lifecycle methods in reactJS with some examples

#47

What are lifecycle methods in reactJS with some examples

HTML

Grouping your select options in different categories

#46

Grouping your select options in different categories

HTML - CSS

Using the filter property to create multiple hover effects

#45

Using the filter property to create multiple hover effects

JS

What are Promises in JavaScript and how to use them

#44

What are Promises in JavaScript and how to use them

JS

Getting a cleaner code with object destructuring

#43

Getting a cleaner code with object destructuring

React

Creating a cool image zoom effect on hover

#42

Creating a cool image zoom effect on hover

React

Updating state in reactJS with setState

#41

Updating state in reactJS with setState

HTML - CSS

Applying a different style to an input when invalid

#40

Applying a different style to an input when invalid

HTML - CSS

How to smooth scroll between anchors using CSS only

#39

How to smooth scroll between anchors using CSS only

Misc

Some of my favorite Web Dev related resources

#38

Some of my favorite Web Dev related resources

React

The difference between Class Components and Functional Components in ReactJS

#37

The difference between Class Components and Functional Components in ReactJS

HTML - CSS

Using 'EM' units to easily create responsive text

#36

Using 'EM' units to easily create responsive text

CSS

Improving CSS performance with these simple tips

#35

Improving CSS performance with these simple tips

HTML - CSS

The position absolute & position relative combo

#34

The position absolute & position relative combo

HTML - JS

Fetching some data from an API in JavaScript with Fetch

#33

Fetching some data from an API in JavaScript with Fetch

JS

Using the browser's Local Storage to save data across sessions

#32

Using the browser's Local Storage to save data across sessions

HTML - CSS

Creating your custom input type file

#31

Creating your custom input type file

React

What is state in reactJS and how to use it

#30

What is state in reactJS and how to use it

JS

Using the ternary operator in JavaScript

#29

Using the ternary operator in JavaScript

HTML - CSS

How to create fullscreen sections with a video background

#28

How to create fullscreen sections with a video background

JS

How to add a little bit of style to your console logs

#27

How to add a little bit of style to your console logs

HTML - CSS

The almighty 'margin: 0 auto' hack

#26

The almighty 'margin: 0 auto' hack

HTML - CSS

Creating expandable boxes with HTML only

#25

Creating expandable boxes with HTML only

JS

Some simple but useful array operations in JavaScript

#24

Some simple but useful array operations in JavaScript

HTML

Progress and meter bars with HTML only

#23

Progress and meter bars with HTML only

HTML - CSS

Creating a nice tooltip effect when hovering some text

#22

Creating a nice tooltip effect when hovering some text

JS

What are IIFE's in JS and how can we create one

#21

What are IIFE's in JS and how can we create one

HTML - CSS

Creating a simple parallax effect with CSS only

#20

Creating a simple parallax effect with CSS only

HTML - CSS

Styling the browser scrollbar to be fully customized

#19

Styling the browser scrollbar to be fully customized

HTML - CSS

Changing the background and the color of the text when selecting it

#18

Changing the background and the color of the text when selecting it

HTML

Some of the simplest but most important HTML tags for SEO

#17

Some of the simplest but most important HTML tags for SEO

HTML - CSS - JS

Using an input type color to change an element's background color

#16

Using an input type color to change an element's background color

JS

Easily removing duplicates from an array in Javascript

#15

Easily removing duplicates from an array in Javascript

HTML - CSS

Creating a cool UI card with Flexbox

#14

Creating a cool UI card with Flexbox

JS

Using your if's in a shorter, simpler and cooler way

#13

Using your if's in a shorter, simpler and cooler way

HTML - CSS - JS

How to create a side navigation menu with a slide effect

#12

How to create a side navigation menu with a slide effect

HTML - CSS - JS

Building a simple animated modal from scratch

#10

Building a simple animated modal from scratch

CSS

Using CSS Media Queries to target different browsers and different devices

#9

Using CSS Media Queries to target different browsers and different devices

HTML - CSS

Animated custom toggle button with CSS

#8

Animated custom toggle button with CSS

HTML - CSS

Create a text input with a list of suggestions for the user

#7

Create a text input with a list of suggestions for the user

HTML - CSS

Creating a duotone image background with CSS blend modes

#6

Creating a duotone image background with CSS blend modes

JS

How to optimize your for loops just by changing one thing

#5

How to optimize your for loops just by changing one thing

HTML - CSS

How to use the pseudo-element 'after' to create a speech bubble

#4

How to use the pseudo-element 'after' to create a speech bubble

HTML - CSS

Using CSS Animations to create a background with a moving gradient

#3

Using CSS Animations to create a background with a moving gradient

JS

How to remove falsey values from an array

#2

How to remove falsey values from an array

HTML - CSS

Create a centered three column layout with Grid and Flex

#2

Create a centered three column layout with Grid and Flex

HTML - CSS

How to center absolutely positioned element inside its parent

#1

How to center absolutely positioned element inside its parent

© Copyright Eduardo Araújo 2022