Creating Fact Box

In the advanced box on the edit screen, just provide a custom class name, “fact-box” for example. In the customizer’s Additional CSS add something like

.fact-box {
  width: 33%;
  float: left;
  border: 1px solid #222;
  padding: 1em;
  font-size: 110%;
  background-color: #eef;
}

Once added, use your browser’s element inspector developer tool to help you fine tune the values to your liking.

How classes are separated in CSS selectors depends on what logic should be applied when applying the selectors against various elements. Separate by spaces to require all classes be present in the element’s ancestry tree. Separate by commas to select an alternate set of classes. Take this HTML for example:

<div class="outer">
  <div class="inner-1">foo</div>
  <div class="inner-2">bar</div>
</div>
<div class="more">example</div>

CSS to make foo and example elements bold, but not bar:

.outer .inner-1, .more {
  font-weight: bold;
}

Make all element fonts smaller

.outer, .more {
  font-size: 85%;
}

There are all sorts of ways to target specific elements with selectors and pseudo-selectors. I suggest reading up on this some more, for example https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors and its following pages.

For font size and other CSS changes, learn to use your browser’s element inspector developer tool. It lets you pick specific elements and shows you the applicable rules being applied. You can trial edit these and add new rules. Any changes made there will not persist. To keep the rules you’ve arrived at, copy the altered rules to the Additional CSS panel of the customizer.

To have CSS only apply to a particular page, there ought to be a unique class assigned to the body element, such as “post-123”. If you include this class as a selector, it’ll only be applied to to that page. Like so:
.post-123 p { font-size: %110%; }
It’ll make all paragraphs with p tags 10% larger than the usual.

To scroll the page on roll over of an arrow element, you need some JavaScript that executes on the “onmouseover” event. It is the JavaScript that scrolls the page.

Similar for expandable categories. The full list is there from the start, but parts are hidden. When the “onclick” event fires, JavaScript changes the style properties to unhide the appropriate elements. There is a cool jQuery module called “accordion” that semi-automates the process if the HTML is set up correctly.

If you search about on the ‘net you should be able to find examples of these things now that you have a clue about how it’s done.

I’ve no experience with that extension, but if it lets you easily accomplish what you want then it’s worth doing.

There’s always something to be said for learning to code something for yourself. It gives you the ultimate control over your site. But the cost in time and frustration to learn how can make it an unattractive option.

It depends on where you are with coding experience in general. Starting from the very beginning? Some experience, but not with PHP. What about JavaScript, HTML, and CSS? Good with PHP, but new to WP? Something else? How do you like to learn in general? Self-learner? Videos? Written? Classroom?

I’m a self-learner. I’ve little patience for videos and classrooms. In any case, maybe most important and most difficult to do is to set aside plenty of time to improve your skills. But take lots of breaks, especially when you get frustrated.

I’ve acquired most coding skills by finding small attainable real world projects that I’d like to see happen. Changing elements on my site, developing little tools to process information, anything your interests and needs might come up with. Then figure out how to make it happen. This way I learn what I need to know and little I don’t need to know. Knowledge expands over time as new needs arise.

Working through contrived tutorials is fine for starting out to get the basics, but it’s real world projects where real learning happens, IMO. If a project seems insurmountable, break it down into smaller tasks. A task might just be a few lines of code for one tiny aspect of the whole. Test your progress frequently. Celebrate the smallest accomplishments.

I’d say just do things that interest you or that you’re curious about. A side site on your local computer is excellent as a learning platform. Don’t push yourself to learn a lot in one go, it’s likely not to sink in as well as learning over a period of time. I’ve no idea how long it takes to become “good”, what ever that means. It’s not easy, especially at first. It takes a lot of time to gain enough experience. But you can become good at one specific aspect reasonably soon. There are a lot of different aspects though. You’ll always be learning as long as you are coding. I know I am.

It’ll go faster if you enjoy it and reward yourself for small accomplishments.