Make Any Container Clickable
Other Documentation on the subject: View
Elementor Grid & Flex Box Basics
Using Grid with Elementor
Customize Elementor sticky headers with CSS
Make Something Grow or Shrink CSS
All around great resource for most css needs. Has interactive examples.
Flexbox Froggy, a game where you help Froggy and friends get to their lily pads by writing CSS code!
Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!
Comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
Grid Garden, where you write CSS code to grow your carrot garden! The goal is to use grid to water your garden and poison the weeds.
Button With Pulsing Ring
Advanced Custom Fields
Needs creds to download
This plugin allows you to create archives and post with customs fields.
Picking Fonts that Go Well Together
This tool shows you google prepared google fonts and give suggestions for other google fonts.
Tips, Tricks and Best Practice for Images
Full width images are best at 2800px wide and no smaller that 1800px wide.
Images Contained in default width single column will best display at 1200px wide.
Gallery images are best at 900-1200px. Would recommend sizing down to 1200. Images small than the 900 are fine if the client wants them on the site.
Other images should be sized for the spaces they take up on a page viewed in desktop. Example: I have an image that will take up half the column which is typically 1100px wide. I would save the image no smaller than 600px wide.
Image File Sizes
In General Images should be 350kb or less if possible.
Hero Banner and Full Width Images will tend to be larger images. Best practice is to try to keep them 600kb or under, and no more than 1MB. The only time to do this would be at clients request. 1MB images will load pretty slow.
Free Stock Photos
Free SVG/ Vectors
Member Stock Photos
Free Online Editing Tools
This tools optimizes images by compressing the file size so they load faster on websites.
Use for resizing a bulk amount of images or just one.
Quickly remove background from images. Free version allows you download up to 600px wide, so crop down as much as possilbe if you need a larger image.