Hello, the basics of design panel have been explained in the docs already:
The properties in the Design Panel are pretty much self-explaining … color, background color, width height etc. and there is no actual need to know the corresponding css property names (especially if you are not experienced in html/css) as that’s the idea of Design Panel. It’s supposed to be used by people who don’t need to know how the height property in CSS looks, but be able to just adjust it visually…
Thanks for your response @Teodor,
More specifically, I was referring to the layout and position properties in the design panel. I don’t see that explained in the design panel doc you referenced.
On your screenshot I see you selected display flex. You can learn about css flexbox from multiple resources online, that’s really a general web design/development topic:
https://www.w3schools.com/cssref/css3_pr_flex.asp
It’s the same for the position property:
The issue is that I don’t really know how those options affect the components in Wappler just by looking at the icons and tooltips. So, through trial and error, I have made some progress understanding them, in some instances, I have had to look to the actual CSS attributes that they create to try and understand what they do and what I need to learn, but as you mentioned, they should be for people who don’t need to know how the CSS property should look and just adjust them visually.
But if you randomly click on some icons without knowing what position or display properties are, you will definitely break your layout.
The question you should ask is what you need to achieve and then click the buttons you need to click in order to achieve it.
If I don’t know what the buttons do, how am I to know that they will achieve what I want them to do?
I think we’re going around in circles here.
Ok, so the question is - are we supposed to copy the whole w3schools (or any similar general web design resource) website in our docs, so that people without any knowledge of what position or background color properties are, can then learn how to use them?
You are obviously moving more in a direction toward beginners using your product, yet there seems to be quite a lot of resistance that comes up in the forum about adapting the documentation for beginners. So a lot of my time is spent trying to figure out the base knowledge gaps, learning them, and then translating them back to Wappler. It’s confusing and frustrating from a beginning user’s perspective. Why not just close some of those gaps directly in the Wappler documentation?
I may not be your ideal customer, but I do appreciate what you are building and wish it would be easier for others like me to see the value and get comfortable in Wappler quicker. The gaps in required knowledge are very wide for beginners. I’m willing to put in the time and I’ve been having a great time learning, but it seems harder than it needs to be. Just my two cents.
Yes we need to add more beginners sections to our docs. Hope to add those soon.
We will be providing more interactive tour guides within Wappler so people can learn by following those and complete different challenges from the basic getting started with bootstrap design to more advanced ones.
We also hope to provide automation within Wappler so everybody can shoot their own tour to show some specific steps or comple solutions.
A simple answer: click them and find out. You will have some idea of what they do because of the labels (text, border, background etc.). In some cases, Wappler includes quite a bit of information too.
Eg there are lots of options for background images in CSS. These each have brief explanations in tootips. Here I’ve hovered over ‘Cover’ and the relevant information appears:
… but this may not very clear - not until you see it in action. With Wappler you can see all the options, then see what they actually do and also see what the code looks like. It’s a great learning tool from that point of view.
You can learn a lot from just clicking and seeing how the interface responds. You could open one of the sample templates and start clicking on objects in the Design panel; you will see the relevant components and options highlighted in the panel you have open (App Connect, Design etc.). You could then try to change some of the settings. You should probaby use the App Connect panel first - here you will see the existing options which Bootstrap offers; selecting an option here will not produce any additional CSS code because it already exists. If you use split view, you will see exactly what’s happening in the code - ie which Bootstrap classes are applied. If the styles you want aren’t there, experiment with the Design panel and try out the options there.
I think you could probably learn a lot about Wappler and CSS in this way. Having said that, having some basic understanding first is really the best way to go, and as Teodor pointed out, there are thousands of tutorials, courses and videos on the subject available. You could get quite a long way without any existing knowledge but it would be a little like the way most people use Word - they just click buttons until they achieve the results what they want. This is fine up to a point, but if you want to produce professional documents in a flexible and efficient way, then you will take a little extra time to learn about styles (and save a lot of time in the end).
Thanks @TomD!
The strategies you recommend are very similar to those I’ve found helpful to learn WappIer so far. I’m glad to know I’m on the right track 
Learning Wappler has been really helpful to push me toward learning some basic web development concepts. Some people may come to Wappler with lots of prior knowledge and find it very useful, but it’s also a good bridge for those of us starting out with little prior knowledge to learn some of the more sophisticated concepts. At least, that’s what I’m finding out in the short time that I’ve been using it.
Hi @Akayy,
Nope, I never looked any further at that app past what was mentioned in Jamuary of this thread (but got notified of this thread activity). Wappler has came a long way and really continues to improve since then and it looks like you are on your to way utilizing its features. 