Learning MainUI resources

I’ve been playing for years with Sitemaps and now, after migrating to OH3 i feel it’s time to start playing in the real UI field, thanks to the big job done by the community here.
I’ve been reading the documentation prepared about MainUI and i think i got the main concepts, but i still feel that’s not enough for me to start bulding page layouts or widgets.
Just to make an example, i wanted to populate my Overview page with simple cards with a picture background. Well, i wasn’t able. I don’t want to have the solution, i would like to understand what could he a learning path with increasing complexity to reach a point where i can easily manipulate any object.
I see you refer often to framework7 or CSS other systems but if i look at all the paramters that you guys put in your config, i have no idea where and how did you get that, on the f7 docs there is no mention…
Is there any resource to learn more about this language? Any path to follow to learn more in a structured way?

All (nearly) the OH components are based on the f7 components of the same name, but they have some feature removed for simplicity and OH specific additions (such as actions and access to the oh family of icons).

Probably the best guide for discovering the various options is the widget editor itself. If you start with component: and then pres [ctrl]+[space] then you will get a context window with all the available component options:

If you select one of those and then add the config key then [ctrl]+[space] will open up a context window with the options available

Then, if the property is not clear, you can use the forum search here to find questions about it or examples where it has been used.

Slightly more info is available in the reference docs. If you haven’t seen the full reference docs for the oh defined widgets, they are documented here:

And there’s a lot of f7 documentation, but you are only interested in the components. Just skimming through the f7 components docs once and looking at some of the examples will give you a good idea of the things that you can do with f7 components. More specifically, the properties and slots listed in the f7 component docs are all available to you in OH. The problem with referencing the f7 documentation is that the examples are given as if directly creating the html and what you are doing through OH is creating a YAML file that tell OH how to configure various elements so there’s some mental translation to do, but perhaps the examples in the svelte version of the components are easiest to look at and see the relation to the OH yaml:

The final step is to bring your specific questions that couldn’t be answered by these other options here to the forum. Not only are we happy to help, but every question you ask that hasn’t been asked before is another answer that is available for everyone when they search the forums later.