Visualize HTML

Inspiration

The inspiration for this project actually come from when I was making my own website, I was having a super tough time moving one small piece of text in the corner and I realized that something invisible was blocking it from even moving. So I found after inserting a red border on every SINGLE tag that this heading was blocking the corner because it had such a big border. This gave me the idea to build a product that automatically reveals the borders and element sizes of all the HTML tags and fix HTML layouts once in for all!

What it does

Here's how it works: You start by inputting your HTML code into Visualizer's user-friendly interface. Once submitted, Visualizer instantly generates a dynamic visual layout of your webpage. But what sets Visualizer apart is its automatic application of visually appealing borders.

These borders are intelligently placed around each HTML element and tag, making it easy to identify and locate them visually. With different popping colors for each element, Visualizer provides a clear and intuitive representation of your web page's structure.

Not only does Visualizer excel in desktop visualization, but it also caters to the growing importance of mobile responsiveness. By toggling the mobile version, you can preview how your website elements will look on a phone, ensuring a seamless user experience across devices.

How we built it

I used HTML and CSS to design most of the website itself, and for the actual visualizer, I used HTML styling to default all the user's HTML tags with borders and I used javascript's math class to assign random colors for the borders and make it pop. I also used javascript to change the background colors of certain elements upon user click.

Challenges we ran into

Some challenges I ran into were mainly formatting and how the different types of things that user might actually put into the visualizer system. For example, what if the user inputs code where they already have pre-defined borders? That's where I implemented the white/black background changing buttons, these buttons help contrast the tags if u constantly switch-click either of them (explained in demo video).

Accomplishments that we're proud of

I'm really proud of creating something that I know a lot of web developers and new coders can relate to. These silly mistakes are sometimes real problems and Visualizer is a product that I actually really plan to use even after this hackathon. I really hope that people will enjoy using this product, as it is already published now and public. Link: https://visualizerhtml.000webhostapp.com/

What we learned

I learned about the many ways that "non-logic" languages like HTML and CSS can actually be useful and create products that actually help the community (web-developing and beginner coders).

What's next for Visualize HTML

I believe I will start working on more ways to create better visualizations of the HTML layouts and create even easier-to-understand methods of visualization and code. I also might try to find more instances where certain HTML snippets might not work for this product and handle those exceptions.