My Filterable CodePen List

• 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, kitchen sink, components, template
• Megamenu --- Bootstrap-5, 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 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
• Favorite CodePens