Web Weaver || HTML & CSS Explorer

An educational tool to visually explore the HTML and CSS of any webpage.

Web Weaver is an educational Chrome extension that empowers users to visually explore, understand, and experiment with the structure and styling of any webpage. Designed for beginners learning HTML and CSS, educators, and the simply curious, Web Weaver provides intuitive tools to demystify web development concepts directly within the browser. Key Features Interactive Inspector: Activate the inspector to highlight elements on any webpage. Hovering over elements displays a tooltip with the element’s tag, a plain-language explanation, and key CSS properties (color, background, font size, font family). You can live-edit these CSS properties from the tooltip and see changes instantly. Element Path Visualization: Click within the tooltip to reveal the full DOM path to the selected element, helping users understand document structure and hierarchy. Built-in Dictionary: Access a searchable dictionary of common HTML tags and CSS properties, complete with concise explanations. This is ideal for quick reference and learning. Seamless Integration: The extension works on most web pages (excluding special browser pages), injecting its tools only when activated to avoid interfering with normal browsing. User-Friendly Design: Clean, modern UI with accessible controls from the popup menu. Easily toggle the inspector or open the dictionary in a new tab. Use Cases Learning: Newcomers to web development can explore real-world sites, see how elements are structured, and experiment with styles in a safe, visual way. Teaching: Educators can use Web Weaver as a demonstration tool to show how HTML and CSS work together on live sites. Curiosity: Anyone interested in how websites are built can quickly get answers and explanations without leaving the page. How It Works Click the Web Weaver icon in your browser toolbar to open the popup. Activate the inspector to start exploring any webpage. Hover over elements to see tooltips and tweak styles live. Open the dictionary for instant explanations of tags and properties. Web Weaver is open source and designed with privacy in mind—no data Web Weaver v1.1 – Patch Notes: New Features Native Context Menu Integration: Added "Copy CSS Path", "Copy XPath", "Copy id", and "Copy name" options to the browser’s right-click menu for any element. These options copy the shortest possible unique selector or attribute value for the selected element. GitHub Link: A small GitHub icon now appears in the top-right corner of both the Dictionary page and the extension popup, linking directly to the project’s GitHub repository for anyone who wants the open-source code. Improvements & Bugfixes Lock-on feature added for the inspect menu when you double click so it stays there compared to the previous one which was a bit more inconsistent.