advice on how to re-do/design my cladogram?

Hi hi!

So I made this cladogram of all the birds I’ve seen about 2 years ago now, but I really want to progress it further. I’m not a fan of the layout and how clunky and uneven it looks… and I really want to find a way to condense it somehow. Does anyone have any ideas about what I could do? I’m not creative enough and I’m a very basic coder so I would love any input :slightly_smiling_face: I was thinking of somehow making the family names clickable which would then open each bracket? Or drop-downs?

Other notes: I used the Wikipedia sandbox to code the cladogram and then basically copied the HTML into the neocities text editor. I’m not sure how to add or change the cladogram without using the sandbox so I also want to learn how to do that!

Anyways, thank you all <3

It’s a tree, so https://www.jstree.com/ is one option. It’s got quite a lot of options. If you’ve got photos or more info, the 2 pane view could work.

You could use javascript to make it so that clicking on things will show/hide more information. Here’s a starting point: How To Toggle Between Hiding And Showing an Element

That said, if you’re starting with 0 knowledge of html, you’re better off making some smaller changes first and experimenting a bit.

First, I’d recommend using something other than the Neocities editor, so you can easily save files offline. That makes it easier to preview and do undo changes. If you’re on Windows, your basic Notepad works just fine, though you can look into other options like Notepad++ if you want features that, say, make it easier to read your own code.

Look up some basic html tags and what they are. Then, look at the HTML code you’re using and try to understand which tag does what. This will make it easier to understand how your page works and how to make changes. If you’ve made a local copy, you don’t have to worry about accidentally breaking the page. Try to add/remove Italics, change the font, and other simple changes.

Then, I’d recommend looking at CSS. CSS lets you change the style for html stuff but in one place. For example, you can have a div for “family” and use CSS to make it always use a certain font or colour. Try to use CSS to make changes like that.

Once that’s done, you’ll probably end up with a good notion of what’s going on under the hood of your page and how to edit it in more complex ways.

This means you could use Javascript to make collapsible elements, show/hide photos, have some descriptions appear when hovering the mouse… lots of different things. There’s a lot of ready-made code out there that you can reuse and tweak while learning.

Finally, you don’t need very complex HTML to add features like links! You could make it so that clicking on a species leads to a page you’ve made about it or other fun stuff.

I hope this helps and I’m sorry if I misunderstood your question!