I created https://boxshadows.xyz as an interactive tool to simplify the use of CSS box shadows. Similarly, I developed https://selectors.info as a learning tool to classify selectors and combinators by type. We also made/use https://alwane.io to reorder color lists by palette, and it assists me in extracting colors from websites to study their color implementation. Additionally, we developed http://divize.io as a platform to practice HTML/CSS through a series of challenges. Lastly, http://front.tips is a directory I maintain for organizing interresting frontend-related tips I've discovered.
We are excited to announce the launch of https://divize.io, a collaborative venture that has been meticulously developed over a period of sixteen months. This project is the joint effort of myself, a Frontend Developer, and my colleague, an Elixir Backend Developer.
Our objective with tool is to present a unique, engaging platform for those with a passion for learning HTML/CSS. It's designed to provide real-world UI challenges that help bridge the gap between theoretical understanding and practical application in web development.
At the heart of the tool is an interactive editor that replicates the process of converting UI into HTML/CSS code. This tool guides learners through the process with a comprehensive set of instructions, enabling them to create structurally sound HTML and efficient, clean CSS.
To support learners in tackling these challenges, we've integrated several features into the Editor, including a Semantics Analyzer and a CSS Properties Analyzer. These features diligently examine each challenge, equipping you with a precise list of tags for constructing semantically accurate UIs, along with a detailed breakdown of the necessary CSS properties for each task.
Most of these features are represented in a Guide that aims to clarify each functionality individually. This includes as an example the Inspector, which enables detailed examination of elements; Deadline, to manage your time; UI Matchup, to compare your work against the target; MDN Reference, to access official documentation; and different Editor Modes to suit your working style.
The evolution of the tool involved numerous refinements and adjustments to provide the best learning experience for aspiring frontend developers. We're proud of the result and believe it's a valuable tool for enhancing practical web development skills.
We invite you to explore https://divize.io and share your feedback. Your thoughts and suggestions are instrumental in our ongoing efforts to improve and evolve. We're also here to answer any questions you might have about the tool's functionality, our development process, or the challenges we faced during its creation.
