HTML/CSS Challenges

Categories

All html css js tools libraries debugger extensions vscode design-systems miscellaneous

HTML/CSS Challenges

Search Tips

AllTips(154)

Form Troubleshooter
Chrome extension for finding and resolving common form issues.
EXTENSIONSnew
Inspect Input Placeholder
Using Chrome DevTools Show user agent shadow DOM feature to inspect and customize input placeholders
DEBUGGERnew
HTML Data List
Using <datalist> element to implement HTML combobox functionality for input field suggestions.
HTML
Input Cursor Color
Using the caret-color property to customize the text cursor in <input>, <textarea> fields or those with contenteditable attribute.
CSS
Responsive HTML Video
Using the orientation media query in HTML video content for users devices orientation, enhancing usability and performance.
HTML
HTML abbr element & title attribute
Using the <abbr> HTML element with the title attribute to enhance accessibility and provide definitions.
HTML
Inheriting Browser Font Settings
Using the inherit CSS keyword to match type to user's custom browser font settings.
CSS
404 Creative Pages
A collection of 404 page designs from various websites.
MISCELLANEOUS
Customizing Native File Input
Using the CSS ::file-selector-button pseudo-element to style the default <input type="file"> natively.
CSS
Rounded Corners with CSS infinity
Using the CSS calc function with the infinity constant, which represents the largest possible value, to create a fully rounded corner button.
CSS
HTML head Elements Order
Using capo.js in Chrome DevTools Snippets to set the correct order of the <head> to improve the performance of your website.
TOOLS
Crafted Devices in CSS
A website featuring a range of pure CSS-rendered devices, including the latest iPhone, Google Pixel, MacBook Pro, and Apple Watches.
MISCELLANEOUS
NodeJS fetch Example
Testing the compatibility and stability of the Fetch API when using different Node.js versions
JS
JS fetch() Performance Tracker
Using the JavaScript PerformanceMeasure interface of the Performance API to track and measure the timing of fetch operations.
JS
Shadow DOM User Profile
Using the HTML <template> content template element and Shadow DOM for creating isolated and modular user profile component.
JS
CSS Rule Dynamic Update
Using the JavaScript CSSStyleSheet interface of the CSSOM API to dynamically manipulate CSS rules for interactive use cases.
JS
Gamepad Status Monitor
Using the JavaScript Gamepad API to display real-time connection status and button states of game controllers.
JS
Mouse & Trackpad Wheel Listener
Using the JavaScript WheelEvent Browser API interface to detect mouse wheel and trackpad events.
JS
EyeDropper Web API
Using the experimental JavaScript EyeDropper native browser API to pick colors from the screen including outside of the browser window.
JS
FileList Web API
Using the FileList interface to display information about a list of files selected with the input of type="file" HTML element.
JS
JS Ambient Light Sensor
Using the experimental AmbientLightSensor interface of the Sensor APIs to measure the light intensity around the device's camera.
JS
Emoji Toggle with CSS Container Queries
Using the @container CSS at-rule to conditionally switch emojis based on container height for responsive content.
CSS
Drag & Drop using DataTransfer
Using the HTML Drag and Drop API to copy and move elements with DataTransfer in JavaScript
JS
Dynamic Background with CSS Painting API
Using the CSS Painting API to access CSS custom properties and make checkerboard patterns with JavaScript.
JS
Communicating with Iframes
Using the Channel Messaging API to make a communication (Cross-window communication) between iframe and its parent app.
JS
Chrome's Face Detection API
Using Chrome's experimental Face Detection API to dynamically detect and highlight faces in images with JavaScript.
JS
Picture-in-Picture Web API
Using enterpictureinpicture and leavepictureinpicture events to toggle Picture-in-Picture mode in videos with JavaScript.
JS
JS JSON.parse() reviver function
Using JSON.parse() second parameter (reviver) to selectively alter JSON content.
JS
Horizontal Rules in Select Menus
Using hr to add horizontal rule elements into select to break up content visually.
HTML
CSS scroll-driven animation
Like JS's IntersectionObserver, using CSS to track elements crossing the ScrollPort and applying blurFadeIn animation.
CSS
CSS Container Style Queries
Using the experimental CSS feature @container style(), showcasing dynamic styling for different product states (new and popular).
CSS
Animated Drawing AI Tool
Using an AI tool presented by Meta AI Research to animate characters to move around.
TOOLS
ReactJS Monitoring Battery Levels
Using useBattery hook and the native Battery Status API for tracking and displaying battery levels in React applications.
JS
Maintaining Square Proportions
Using CSS aspect-ratio to consistently create a perfect square while preserving its aspect ratio.
CSS
Create Custom VSCode Theme
Make a unique VSCode theme by visually customizing each aspect.
VSCODE
Convert PNG or JPG to SVG
Convert PNG and JPG images to SVG vectors quickly and easily Using AI.
TOOLS
Link Replacement with Regex in VSCode
Using regular expressions Regex in VSCode to efficiently replace specific parts of URLs in multiple files.
VSCODE
SSHX CLI for real-time terminal sharing
Using sshx from your terminal to share it in real-time with anyone via a link, on a multiplayer infinite canvas featuring remote cursors and chat.
TOOLS
GQL (Git Query Language) CLI tool
Git Query Language allows you to search through .git files using an SQL-like language. It includes many SQL features such as sorting, grouping, and performing calculations.
TOOLS
CSS ribbon shapes collection
A ready-to-use list of CSS ribbons collection, customizable with CSS variables, can be used in multiple scenarios like badges for promotions, decorative cards and more.
CSS
CSS Margin with RTL Elements
Using margin-inline-end to align a picture to either the left or the right depending on the browser direction (right to left, or left to right).
CSS
Buttons Collection
A website that regroups a curated collection of buttons from various creators. It is well-organized, categorizing the buttons into predefined groups. Each button includes HTML/CSS code and, in some cases, JavaScript.
MISCELLANEOUS
Native JavaScript Screen Recorder
Using the Screen Capture API to make a browser based screen Recorder via JavaScript.
JS
Linting rules for sorting CSS properties
Using stylelint-order Stylelint Plugin and vscode-style VSCode Extension to organize CSS properties, enhancing readability and ensuring a consistent coding style across your projects.
TOOLS
Native CSS color mixing color-mix
Using color-mix to achieve native CSS color mixing, effective for creating color shades from a single base color.
CSS
Infinite CSS animation Loops via JS updateTiming
Using the JavaScript updateTiming method of the AnimationEffect interface to set multiple CSS animations to loop infinitely.
JS
Track CSS animation start and end with JS
Using animationstart and animationend events in JavaScript to capture the start and end of a CSS animation's lifecycle.
JS
Autoplay Video on Scroll
Play and Pause a video based on its visibility in the viewport.
JS
CSS Prefers Reduced Transparency
Using the media feature prefers-reduced-transparency to create an accessible article summary card for users with visual impairments who enable the reduced transparency system setting.
CSS
CSS @media scripting property
Using CSS scripting @media query scripting: enabled to check whether JavaScript is enabled or not.
CSS
Hide Nodes in Chrome DevTools
Using the H key to easily hide nodes in Chrome DevTools
DEBUGGER
Access Extended DOM History in Console
Using $0, $1, $2 to navigate through DOM elements with extended history in Chrome DevTools Console.
DEBUGGER
Duplicate Elements in Google Chrome DevTools
Duplicate elements in Chrome DevTools using either the right-click option or a keyboard shortcut.
DEBUGGER
CSS nth of selector Syntax
Using selector:nth-child(nth of selector) to target the nth element matching a specific selector, enabling complex and precise CSS elements selection.
CSS
Accordion with Custom Styled Markers
Using the CSS property list-style-type to style <details> disclosure widgets with custom emoji markers.
CSS
CSS Custom Checkbox - Customize Your Switch
Using appearance and :checked for a customizable switch with CSS variables.
CSS
Read and write to files in JavaScript
Using the Browser File System Access API to read and write to files via JavaScript
JS
CSS New Stacking Context Creation
Using the CSS property and value isolation: isolate to create a new stacking context
CSS
Debugging JavaScript in 'iframe' Context
Using the JavaScript Context Drop-down in Google Chrome DevTools to Run JavaScript in an iframe Context
DEBUGGER
CSS Containment paint
Using the CSS property contain: paint which improves performance by limiting the layout and painting of child elements to the container's dimensions, restricting unnecessary rendering outside its boundaries.
CSS
CSS Scrolling Shadows
Using the CSS property background-attachment to achieve layered scrolling effects with fixed and dynamic shadows.
CSS
Vertical Scroll Snapping
Using scroll-snap-type and scroll-snap-align to achieve a vertical scroll snapping to align sections at the top of the viewport, enabling slide-like navigation as users scroll down or top.
CSS
Reading Progress Indicator
Using animation-timeline to create a dynamic reading progress bar for enhanced user engagement.
CSS
Regrouping Link States using :is() pseudo-class
Using :is() pseudo-class to regroup the link :hover and :focus states instead of chaining them for an increased readability.
CSS
Preventing an underlying element from scrolling
Using overscroll-behavior: none to fix nested scrolling issues, ensuring only the targeted element scrolls.
CSS
Animated Typewriter Effect Using CSS
Implementing a typewriter effect fully in CSS with animated text and a blinking caret, using custom properties for timing and steps.
CSS
Interactive Scroll Animation with GSAP
Animating text with a gradient during scrolling by creating an interactive scroll animation using GSAP's ScrollTrigger and CSS's mix-blend-mode.
JS
Reset all properties using unset keyword
Using the unset CSS keyword to reset all properties to their inherited values, including parent and initial values.
CSS
Broken Links & References Checker
Using check-html-links to check for broken links and references in a public GatsbyJS built folder.
TOOLS
3D Cube Animation with anime.js Library
Sequentially animating an SVG cube with anime.js by drawing a 3D cube one square at a time
LIBRARIES
NextJS Minimalistic Portfolio
NextJS Minimalistic Portfolio Template: Perfect if you are a UX designer or Frontend developer looking to showcase your projects minimalistically.
MISCELLANEOUS
Drag and Drop Files JS Library
Drag and Drop files for upload, including file type and size limitations.
LIBRARIES
ReactJS Live Coding in Browser
ReactJS Component toolkit for creating a live-running code editing experiences in the browser.
LIBRARIES
JS |> Pipeline Operator
Using the JavaScript Pipeline Operator |> to pipe the value of an expression into a function.
JS
Emulate CSS @media features
Emulate CSS media features using Google Chrome DevTools Rendering tab.
CSS
Learn Performance
A course designed for those new to web performance to understand Core Web Vitals.
MISCELLANEOUS
CSS @media Scripting Property
Using canvas-confetti library to generate a fireworks effect in your browser via confetti animations.
LIBRARIES
HTML Hell
A collection of bad practices in HTML, including details and tips on how to fix them.
HTML
Jumping HTML tags
An example showcasing how a browser handles bad markup nesting.
HTML
HTML Conditional Stylesheets Loading
Using @media for a conditional loading of CSS stylesheets based on viewport size to ensure quick loading of high-priority content and defer low-priority content, optimizing performance and resource usage.
HTML
CSS @media Query orientation
Using the orientation CSS media feature to test the viewport portrait and landscape orientations.
CSS
Scene.JS Library
Using Scene.JS library to make complex timeline-based animation using JS and CSS.
LIBRARIES
JS Ordinal Suffixes
Using Intl.PluralRules to create English ordinal number suffixes (st, nd, rd, th) for numbers.
JS
Watching You JS Library
Creating interactive User Interfaces that track cursor movements.
LIBRARIES
CSS Scroll Padding Top
Using the CSS scroll-padding-top to add space at the top so nothing gets hidden when you scroll.
CSS
CSS @counter-style Rule
Using the CSS at rule @counter-style to make a new list style type instead of using the predefined one.
CSS
HTML SVG Overview
An interactive reference to the most popular/used parts of the SVG spec.
HTML
JS Keyboard Event to Display Caps Lock
Using the JS Keyboard Event getModifierState to toggle the element's class on and display ON or OFF text depending on the Caps Lock state.
JS
Chrome DevTools srcset Loading
Using Google Chrome DevTools to identify which picture is loaded when using the img tag's srcset attribute, which delivers pictures based on the viewport width and Device Pixel Ratio DPR.
DEBUGGER
Barba JS Library
Make Smooth Pages Transitions using barba JS library.
LIBRARIES
CSS Input Validity Styles
Using the CSS :has and :invalid pseudo-classes to check the input's validity then apply a different style.
CSS
Retro Gaming Design System
Two Retro Gaming Design HTML/CSS Kits for creating a nostalgic 8-bit and 16-bit pixel art portfolio.
DESIGN-SYSTEMS
HTML Soft Hyphen
Using the  HTML entity to enable a long word to break at specified points with a hyphen - when necessary.
HTML
Scrolly Video JS Library
Make responsive full screen scrollable video using the scrolly-video JS library.
LIBRARIES
File Icons for GitHub and GitLab Chrome Extension
A Chrome Extension that gives different filetypes different icons to GitHub and GitLab.
EXTENSIONS
CSS Circle Animation on SVG Path
Using the CSS property offset-path to control the placement of a circle along a custom SVG path, and animating the circle to move across the path from start to finish.
CSS
Mocking APIs with npoint Tool
Using npoint for mocking publicly accessible API endpoints, ideal for fetching non-sensitive data.
TOOLS
Fix Low-Contrast Text
Using Chrome DevTools to fix low-contrast text.
DEBUGGER
Video Control with Page Visibility API in JS
Using the Page Visibility API's visibilityChange event to pause the video when the browser tab is inactive and play it when active.
JS
Reduce CSS Redundancy
Using the currentColor CSS value to reduce the code redundancy of an alert user interface that has two states, success and danger
CSS
CSS Custom Scrollbar Maker Tool
Using a simple online editor scrollbar.app for creating custom CSS scrollbar.
TOOLS
JS Dependencies Checker CLI Tool
Using depcheck to identify unused npm packages from your projects.
TOOLS
JS Native Module Importing
Using importmap in <script> HTML tag to enable native module importing.
JS
Emulate a focused page in DevTools
Enabling Emulate a focused page in Chrome DevTools to maintain focus for interactive elements (overlay elements), even when clicking outside the inspected element.
DEBUGGER
CSS Newspaper Subheadings
Using first-letter and first-line CSS pseudo-elements to make a subheading newspaper first letter style.
CSS
HTML/CSS Browser Rendering
Explore browser rendering from HTML/CSS to web content. Discover stages from DOM creation to final display.
CSS
Text Highlighter in textarea JS Library
Highlight search results within a textarea element using texthighlighter JS library.
LIBRARIES
CSS Custom List Styles
Using the CSS at rule @counter-style to make a new list style type instead of using the predefined one.
CSS
Operating System Modes Dark/Light Toggle
Testing the Operating System's response to the CSS media query prefers-color-scheme, which applies different styles for users preferring 'dark' or 'light' mode.
DEBUGGER
Change favicon on tab switching using JS
Using the JS visibilitychange event listener to change the favicon when switching browser tabs.
JS
Make in-browser Bookmarklets
Generate and test bookmarklets in-browser.
DEBUGGER
trace.cafe Tool to Make Shareable Chrome DevTools Profile
Using trace.cafe to create a shareable profile link from DevTools, perfect for profiling issues discussions with coworkers or when asking for help in forums.
TOOLS
Email HTML/CSS Syntax Checker Tool
Using Can I Email to check for the validity of your email's HTML/CSS syntax for the most commonly used email clients.
TOOLS
List.JS Library
A Handy JS library to Search, Sort and Filter Lists.
LIBRARIES
File and Directory Naming Linter Tool
Using ls-lint a name linter to enforce rules for file and directory naming.
TOOLS
Washington Post Design System
MIT-licensed open-source Washington Post Design System.
DESIGN-SYSTEMS
Color Names Collection Tool
A handpicked list of creative 30,000+ unique color names.
TOOLS
Notion-style WYSIWYG Editor JS Library
Notion-style WYSIWYG editor with AI-powered autocompletions.
LIBRARIES
Balanced CSS Text Wrapping
Using text-wrap: balance to optimally distributes characters for balanced text wrapping, already supported in Chromium browsers.
CSS
SVG Path Editor Tool
Edit and customize SVG path settings for each node interactively and easily.
TOOLS
Web Performance LCP Snippet
Using LCP Chrome DevTools Script to display information about the Largest Contentful Paint in the console which adds a green dotted line to the LCP (Largest Contentful Paint) element.
DEBUGGER
Control a Video in DevTools
Control programmatically a video to adjust playback from the Chrome DevTools.
DEBUGGER
Remove or Disable Event Listeners
Disable an Event Listener Manually using Google Chrome DevTools.
DEBUGGER
Identify Used Fonts in Chrome vs. Firefox
Get the font used for an element in Chromium-based browsers vs. Firefox.
DEBUGGER
Driver.JS Library
A JavaScript library designed for creating interactive on-page tours and guides.
LIBRARIES
SVG Animated Drawing Tool
Draw an animated SVG line art for easy sketching and replay.
TOOLS
Mobile Simulator Responsive Testing Chrome Extension
Chrome extension for simulating smartphones/tablets, ideal for testing responsive websites.
EXTENSIONS
Web Sustainability Guidelines (WSG) 1.0
A guideline crafted by W3C's Sustainable Web Design Community Group emphasizes putting people first and assessing visitor needs for a more eco-friendly web experience.
MISCELLANEOUS
Scroll-Driven Animations Chrome Extension Debugger
A Chrome Extension to Debug Scroll-Driven Animations via the DevTools.
EXTENSIONS
Advanced Color Contrast Analysis Tool
Using oddContrast for advanced color contrast analysis to ensure WCAG 2 accessibility compliance.
TOOLS
SVG Path Visualizer Tool
Explore SVG path syntax by entering the d attribute string to visualize and discover its commands.
TOOLS
HTML Tags Memory Test
An interactive tool for testing your recall of HTML tags.
HTML
CSS Size Analyzer Tool
Discover the reasons behind large CSS downloads by breaking down the CSS document's size into specific selectors and declarations.
TOOLS
Lenis JS Library
A 3.8kB minified + gzipped JS lightweight smooth buttery scroll library.
LIBRARIES
VSCode Regex Comment Removal
Using Regular Expression in VSCode to find and replace HTML comments.
VSCODE
CSS Text Line-Clamp
Using line-clamp CSS property to truncate text at a specific number of lines in a box.
CSS
CSS Animation Loaders
A website including more than 500 CSS Animations Loaders.
CSS
Jitter Motion design Tool
Using jitter for making animated UIs, social media posts, apps, logos and more.
TOOLS
JS insertAdjacentHTML DOM Insertions
Using insertAdjacentHTML to insert Nodes in the DOM at Specified Positions.
JS
JS Native Date Picker
Using dateInput.showPicker() to programmatically open the native browser picker of the date form control.
JS
HTML Interactive Elements
Using <details> and <summary> Interactive HTML elements to reveal or hide content as needed.
HTML
VSCode Pin Tabs Feature
Pin Tabs on VSCode Separate Row with Drag-to-Pin.
VSCODE
CSS Writing Mode
Using CSS writing-mode to change text direction to horizontal and vertical orientations.
CSS
CSS Mix-Blend Mode
Using CSS mix-blend-mode to control how elements blend together.
CSS
CSS Shape Outside
Using the CSS shape-outside property to define a shape around a content, allowing for more appealing layouts.
CSS
CSS Line Height 2 vs. 2rem Differences
Identify the effects of line-height: 2 (twice the element's font size) versus line-height: 2rem (twice the root font size) by checking the computed style using Chrome DevTools.
DEBUGGER
JS Logical OR Assignment symbol ||=
Using JavaScript ||= symbol for Logical OR Assignment, showing how to assign values conditionally in code.
JS
JS # symbol for private members in JS classes
Using JavaScript # symbol to define private class fields.
JS
Today I Learned
I found Geoff Graham's TIL (Today I Learned) section intriguing. Consider implementing it in your primary portfolio. It can serve as an archive of your progress and keep you motivated to learn more.
MISCELLANEOUS
Chrome Extension Scaffolding Tool
Using create-chrome-ext for a faster scaffolding of a chrome extension using boilerplates that support multiple technologies.
TOOLS
Lyrics API JS Library
An API to fetch song lyrics.
LIBRARIES
Global gitignore
Ignore folders and files globally in all your projects by using a .gitignore_global.
MISCELLANEOUS
VSCode RegEx href Replace
Find and Replace All href attributes values in VSCode using RegEx.
VSCODE
CSS Selectors/Combinators Classifier Tool
Organize and highlight CSS selectors and combinators by types.
TOOLS

css/CSS Shape Outside

CSS Shape Outside

List of Links

shape-outside MDN Reference https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside

2023-10-16

shape-outside MDN Reference https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside