Searchable Table of Contents

• Aspect Ratio Elements used with Cloudinary Core JS
• Cloudinary-Core-JS Demo with Bootstrap-5
• Cloudinary CoreJS Demo and BS-5
• Responsive Masonry Gallery and Lightbox
• Responsive Masonry Gallery with Zoom Effect
• CSS-Grid Simple Layout like Bootstrap
• Custom To Do List using VanillaJS
• Custom Upload Widget-Cloudinary
• Text Cut-Out over Image
• Device Breakpoint Tester
• Make items disappear when clicked
• Display a Website Inside an iFrame
• Display Code in a Container on a webpage
• Show viewport size when window is resized
• Placeholder Dummy Images
• Filtering Image Gallery
• Fade-in Automatic Slideshow using VanillaJS
• Filterable Select Dropdown using VanillaJS
• Fixed Sidebar Scroll
• Filtering Image Gallery VanillaJS no-frameworks
• Responsive Flexbox Form
• Flexbox Grid Playground
• A Guide to Responsive Images
• Cloudinary Core JS for Automatic Responsive Images
• Math Flash Cards
• Typewriter Effect
• Unit Converter
• Simple Function Example
• Reponsive Typography Using Viewport Units
• CSSGrid 4-3-2-1
• CSS Grid Layout (like Bootstrap without the weight)
• CSS-Grid Layout (like Bootstrap without the weight)
• Many Ways to Create a Header
• Toggle Hamburger Menu via VanillaJS
• Candy Filler Text with Copy Button
• Carousel Slider using VanillaJS
• Center a Webpage
• Center an Image Regardless Of Screensize
• Character Entities Visual Guide
• Collapsed SideBar Menu via VanillaJS
• Color Names
• Copy Text to Clipboard
• Color Picker Copy Values to Clipboard
• Simple Modal Popup
• Tool Tip when Hovered
• Create an Editable HTML Document
• Style Elements with Specific Attributes
• Arrow Icons made with CSS Only
• Slideshow with Zoom Effect (css only)
• Quick Snippets
• Bootstrap Icons
• CodePens:My Favorites --- codepen, favorite
• Bootstrap-5 Cloudinary Demo using Aspect-Ratios --- aspect ratios, Bootstrap-5, Cloudinary
• Bootstrap-5 Cloudinary Demo using Aspect-Ratios also Mega-Menu --- Bootstrap-5, Mega Menu, aspect ratio, Cloudinary
• Responsive Type --- typography, responsive, clamp, scss
• Gulp Browsersync Setup --- gulp, browsersync build tools
• GulpJS v4 setup --- gulp, setup, build tools
• Repsonsive Image with Text Overlay using Responsive Font and Cloudinary --- responsive, responsive typography, font, Cloudinary, overlay, Bootstrap-5
• Bootstrap-5 Kitchen Sink --- Bootstrap-5, CodePen kitchen sink, components
• Megamenu --- Bootstrap-5, CodePen, mega menu, dropdown
• Phone Number formatter(mask while typing) --- phone number, vanilla JS, format, mask
• My Filterable CodePen List --- codepen, lists, filtering, filterable
• Cloudinary Perfectly Responsive Image Technique using Aspect Ratio --- aspect ratio, images, Cloudinary, responsive, no-frameworks
• Responsive multi-column list (no frameworks or jquery) --- lists, multi-column
• Multicol for collapsing a list of checkboxes --- checkboxes, lists, multi-column
• Emoji Bullets List --- lists, emoji
• Responsive Calendar using CSS Grid --- CSS-Grid, calendar, responsive
• Filtering list of states (uses Bootstrap-5) --- lists, filtering, bootstrap-5
• Filtering list items --- lists, filtering, bootstrap-5
• HTML5 Colors List ---- lists, filtering, vanilla JS
• Cookies: how to add, list and remove them using Vanilla JavaScript --- cookies
• Simple localStorage favorite list --- local storage, lists
• Filter Select List Options (Typeahead) --- lists, type-ahead, filtering, option-list
• Show a list of all CSS classes used on the page --- lists, css classes, vanilla JS
• Display a specific item number in a select list --- arrays, lists, vanilla JS
• Vanilla javascript contact list (uses Materialize.css)--- contact list, materialize.css
• Form Validation --- forms, validate, font-awesome, vanilla JS
• Slide Show using Pure Vanilla JS --- vanilla JS, slide show, carousel, font-awesome
• Lazyload Images using Vanilla JS --- vanilla JS, lazyload, images, no-frameworks
• CSS Combinators Cheat Sheet --- cheat sheet, css
• CSS Only Multi-level Mega Menu with flyouts --- css only, mega menu
• Character Counter --- count, character, utility, no-frameworks
• Responsive Multiple Columns that flow like newspapers --- multi-column, newspaper, responsive, candy filler
• Responsive Title Font using calc --- font, responsive typography, calc, background image
• Bootstrap-5 Card Slide-down --- cards, Bootstrap-5
• Pure CSS Mini Carousels --- carousels, pure-css
• Bootstrap 5 Cards with Tabs --- tabs, cards, Bootstrap-5
• Bootstrap-5 Cards Layout --- background-image, Bootstrap-5, cards
• Bootstrap 5 columns and breakpoints with screen size indicator --- screen size, columns, rows, Bootstrap-5, breakpoints
• Mega menu in Bootstrap 5 --- mega menu, Bootstrap-5
• Bootstrap 5 Cards - same width, same height, same height images, curved bottom (svg) to the images, responsive
• Bootstrap 5 Cards layout for Blogs --- cards, blog, Bootstrap-5
• Equal Height Bootstrap Cards --- cards, Bootstrap-5, equal height
• Bootstrap -5 Cards Using Row Columns --- Bootstrap-5, row-cols, Cloudinary
• BOOTSTRAP-5 BLOG Example --- Bootstrap-5, blog, example, layout
• BOOTSTRAP 5 ALBUM using Cards --- cards, Bootstrap-5, album
• Bootstrap Ratio Classes used with Cloudinary CoreJs Dynamic Images Using Object Cover --- ranked 100 on Lighthouse
• Bootstrap 5 Dashboard --- charts, Bootstrap-5, graphs
• BOOTSTRAP 5 NAVBAR Examples --- navbars
• Bootstrap-5 Masonry Layout --- masonry, layout, Bootstrap-5
• Bootstrap-5 Off-Canvas Menu --- vanilla JS, menu, off-canvas, Bootstrap-5
• Store Multiple Key Value Pairs in a Cookie --- cookie, key-value pairs, set cookie, vanilla JS
• Form Validation with Focus --- form, validate, focus
• Form validation in javascript --- forms, validate, vanilla JS, validation
• Confirm Passwords Match --- passwords, match, confirm, vanilla JS, forms
• Form Validation while typing --- forms, validate, vanilla JS
• Form Validation Displays error in console --- forms, validate, error, console
• Form Validation on Submit --- form, validate, submit
• Form Validation: Remove the Error After It's Fixed --- forms, error, validate, fix
• Javascript Form Validation --- forms, validate vanilla JS
• HTML-5 Session Storage --- forms, vanilla JS, session storage
• Cookies vs Local Storage vs Session storage --- cookies, local, session, storage
• JavaScript helper functions for arrays of objects --- arrays, vanilla JS, functions
• Convert form data to object --- forms, data, objects
• Vanilla Javascript CRUD Form (output form data to a table) --- forms, data, table, output
• Homework To-Do List --- vanilla JS, todo, lists, to do list
• JavaScript Tutorial from W3Schools --- javascript functions, vanilla JS, tutorial
• How to Get Form Field Data as JSON Using vanilla JavaScript --- serialize, forms, json, form data, vanilla JS
• Generate records based on number entered --- vanilla JS, functions, getElementById
• Dynamically generate form fields using vanilla javascript --- forms, vanilla JS, dynamic
• Store User Input in Local Storage --- input, local storage, forms, vanilla JS
• Registration form with instant output --- vanilla JS, forms, register
• Auto Generate Form Fields using Vanilla JS
• Dynamically generate form fields using vanilla js --- dynamic, forms, fields, generate, vanilla JS
• JavaScript: serialize a form as JSON
• Serialize Form Data using vanilla js
• Form to object with raw/vanilla JS
• Multi Step Form Wizard in VanillaJS
• Responsive Credit Card Checkout (Payment)
• Two ways to display user input on screen using vanilla js
• JavaScript 'This' keyword
• Change the background properties of a specific element when a button is clicked
• Calculate the number of days you have been alive
• Change background color of all child elements with Javascript
• classList.add Property: Style an element when a button is clicked
• Load new document when button is clicked
• classList: Add Multiple Classes to an element when a button is clicked
• Various JavaScript HTML Events
• Go Back Button or History Button --- go back, history, button, back button
• Screen size Indicator Display
• Product Page Using Bootstrap-5
• Product Pricing Page Design --- pure css, no-frameworks
• Fake Plastic Product Page
• Product Showcase UI using SwiperJS
• Curated collection of gradient backgrounds
• Navigation & Sub-navigation
• CSS clip-path Editor --- clip-path
• CSS Grid: Newspaper Layout --- css grid, newspaper
• Easy Responsive CSS Grid Layout, Version 4: Flexbox
• Responsive Tables --- pure css, no-frameworks
• Javascript Shopping Cart
• Lazy Load + Cloudinary with lqip images shown while loading --- css grid, Cloudinary, lazyload
• Async Lightbox Gallery - Vanilla JS
• BOOTSTRAP 5 FLEX Justify Content for Headers --- justify-content, Bootstrap-5, Bootstrap Icons, emoji
• Bootstrap 5.2 Navbar Multi Level and Mega Menu
• PageSpeed Insights Bookmarklet Utility
• Power of Flexbox, Calc, & Viewport Units
• Responsive Typography using calc() and viewport units
• CSS only scroll indicator on a Fixed Header
• Gallery layout with CSS Grid's grid-template-areas
• Codepen Challenge: Portfolio Problems --- svg
• Interactive Cardboard Box (CSS 3D) --- game, 3D, interactive
• CSS Grid: Makeup Palettes --- interactive, css grid
• Object-fit Test Page Utility --- object-fit properties, object-fit-cover
• clip-path demo
• Pricing Card- pure css - with interactive images
• Wrap Text around Image --- wrap text, float, wrap around
• [CSS Only] Infinite autoplay carousel --- pure css, no-frameworks
• CSS Typography with Pseudo-elements
• CSS Grid album with nice hover effect --- css grid, hover-effect
• Responsive Website With HTML & CSS Grid And Flexbox (Recipe Website)
• Flexbox -understanding Flex-grow
• Flexbox: understanding flex-basis
• CodePens:My Favorites --- codepen, favorite
• Jekyll Cheatsheet --- jekyll, cheatsheet
• How to display code in a window within a web page --- code, display
• Cloudinary Cookbook for Images --- cookbook, cloudinary
• Clear Input Field with Button --- clear, input field
• Cloudinary Bootstrap-5 Fancybox
• Candy Text Filler with Copy to Clipboard Function
• Simple Product Page Layout
• Responsive Slide Show no Frameworks Pure CSS and Vanilla JS
• Cloudinary Image Quality Demo compare quality settings
• Responsive Input Form - no-frameworks, pure css
• Media Queries Breakpoint Tester
• How to Style Horizontal Rules -- <hr>
• Special Character Symbols html entities
• Quick Snippets
• htaccess Boilerplate
• Responsive Images using Srcset
• Best Breakpoints for Responsive Websites
• A drop-in solution to prefetch links based on user's viewport
• Cache Checker
• CSS Compressor:
• Javascript Compressor
• CSS Optimization Test:
• Sprites Generator:
• Line Breaks Remover
• Image Optimization Test
• Broken Link Checker
• Responsive Breakpoints generator
• Page Speed Checklist
• HTML Minify online
• Remove unused css with Purifycss Online
• Remove unused css with UnusedCSS
• Critical Rendering Path
• preload-critical-assets
• Cloudinary Image Tester
• serve-responsive-images
• Multimedia_and_embedding Responsive_images
• Responsive Design
• Max Inline- Size
• aspect_ratio
• Troubleshooting SrcSet
• BS-5 Carousel via Cloudinary and SRCSET
• What are Render Blocking Resources
• serve-images-with-correct-dimensions
• Cloudinary's responsive solution for browser applications
• optimize-fonts
• optimizing_web_performance_and_your_bottom_line
• Make Images Load Faster
• Resizing and Cropping Images with Cloudinary
• Cloudinary Testing
• setting-height-width-images-important-again
• CSS Minifier
• Page Speed Checklist
• Web Storage and Cookies
• Tool to Extract Critical CSS
• Critical Path Generator
• Priority Hints
• Preload Critical Assets
• Extract Critical Assets
• Critical Rendering Path
• Understanding Critical Rendering Path
• Critical CSS Generators
• Critical Path CSS
• How to Improve Search Engine Rankings
• Low Hanging Fruit of Web Performance
• Minimize Page Weight
• Streamline Delivery
• Performance Metrics
• Crossorigin Cors Issues
• CORS Enabled Images
• How to fix cumulative layout shift Issues
• How to fix cumulative layout shift issues.
• Improve Largest contentful paint LCP on your website/
• Improve largest contentful paint LCP on your website with ease.
• Largest Contentful Paint (LCP)
• Priority Hints
• Microformats
• Automating Responsiveness with Client Hints
• Responsive Images Additional Resources
• Sensible jumps in responsive-image file sizes
• Picking Responsive Image breakpoints
• Responsive Images in Practice/
• Serve multiple image versions
• Image CDNs/
• Preload Responsive Images/
• Automating Responsiveness with the Cloudinary Core js library
• Automating Responsiveness with Client Hints
• Responsive Images Additional Resources
• Faster Fonts
• System Font Stacks
• Comprehensive Webfonts
• Load Fonts without FOUT
• Microformats
• Online Tool showing screen sizes for various devices
• Better LCP Images using Fetch Priority
• Common Aspect Ratios
• Change HTML Content via Javascript
• Javacript Event Listeners
• Breakpoint Tester
• Perfect Grid Template using no-frameworks
• The Perfect Grid Template
• Perfect Grid Template and Kitchen Sink
• Automatic Slideshow via VanillaJS
• Radio Buttons
• Background Size Demo
• Boostrap-5 CDN Template
• Button Hover Effects
• Page Speed Testing Tools
• Bootstrap-5 Kitchen Sink Template using Aspect Ratios
• Unit Converter for Weights, Measures and Calculators
• Responsive Accordion using Vanilla CSS and Javascript
• Responsive Vanilla CSS and JS Accordion using Symbols as Indicators
• Add, Change and Remove Attributes from Elements
• How to use the AddEventListener
• Arrays:Looping Over and Iterating
• Vanilla Javascript Slideshow
• User Draggable Element
• Dynamic Responsive Images Using Cloudinary Shrinkwrap JS
• A Better IMG Reset: lqip low-res Pico
• The Pico Design System
• Box Shadow Only on Bottom
• Repsonsive Header using CSSGrid
• Zoom Image On Hover
• Web Workers - how to set up
• Various Mouse Events
• Variable Font Sizes using vw Viewport Width
• Sort a list alphabetically
• YAML Validator
• Flexbox Three Card Group
• On Scroll Event - Image Slides In on Scroll
• Targeting specific elements with css
• How to setup CloudCannon CMS site using 11ty