You can use conditional visibility for this combined with CSS-styling.
To not make this too complex, create two containers. Give them each conditional visibility, one showing when the value is true and the other for false. Next add, in the appearance tab, section custom styling, the following styling:
And add either ‘background-color: red’ or ‘background-color: green’ depending on the true/false container. This should create a simple circle with a color.
Depending on the required styling, you can change the CSS to your liking.
We all started somewhere. Good that you're asking questions!
You can use data grid 2.0. Here you can specify multiple columns by clicking new under columns (when editing the data grid 2.0). In there you can set what you want to show and how (see screenshot).
Here you can select ‘Custom content’. Using that it will change the data grid column in a kind of data view.
In the column you've just created (back in the page, not the datagrid options), you can add the pictures/CSS class you want to show. See screenshot.
I hope this helps you further!