I know this might be a really basic question but we've never actually coded tabs before, so I was wondering what exactly should I do in the CSS and HTML parts in a way that works with what we can do with coding on Subeta?

well the common way that is done which is using the css selector target. I'll put some example code that is just basic tab functionality, no visual effect or such, it'll be ugly but it'll demonstrate just fine.

<style> { display: none; }

Anyways, the tab is a link, when the href attribute has value like when pressed the value now appears a part of the url (at the end).

When the URL has at the end, if there is an element with a matching ID then it is the current target element.

This implies two things for the page:

1. if the page can scroll and target element is not at the top or as far as it'll get to the top of the window it'll scroll to make that element appear at the top of the window or put it as high as it can at least so keep that in mind.

2. CSS rule will become active for the target element so the selector looks like ":target { ... STYLE CODE FOR SELECT TAB HERE ... }", so the styling inside will be applied only when it is the target.

Other than the link/tab this is how functionality is achieved, so by default the element is hidden and then when the target selector is active, it will make the target element visible. NOTE: if it's not styling like it should there could be a problem with "order of priority"

If there is anything I didn't explain or just confusing please ask... bit tired so might have missed fixing a mistake. Hope this helps and that it makes sense. Also if you have further questions please ask.