@pachamama, I have been a professional designer for about 20 years or so. In that time, I’ve had to learn how to program and do all this kind of “techy-stuff.” However, the bane of my existence has always been the fact that I don’t code all the time. This leads to me forgetting half of what I learned and this has continuously been a struggle for me. With all of that being said, let me offer some insight, hopefully, in approaching Wappler so that you get the most out of it as you continue to move forward and evolve as a professional designer.
First off, don’t approach Wappler as being “techy.” I would instead think of it as a toolbox that can be as shallow and simple as you need it - and as deep of a rabbit hole in technical sophistication as you need it. This is an important point to remember, because if not, Wappler will indeed seem quite complicated.
Wappler has been developed with a simple philosophy in mind: Give users the tools they need without any extra burden. If you want to design a standard website, it can be done relatively quickly with very minimal knowledge. If your site needs to do more heavy lifting, then that too can often be done with minimum experience.
It helps to think of websites and web applications as entities that are built with modular components.
A website has a header. But this header is really only a div tag that has some pretty straight-forward attributes. It might have a background colour, some padding, margins, and some other basic formatting. You have already messed with all of this in Webflow - pretty consistently, I imagine.
Inside of this header, we can have our logo - which is generally an image or text - and we’ll also have our navigation bar. So, a nav link in Webflow, Wappler, Wordpress, or in code, just has some of the same attributes as the header: We can set the background colour, link colour, padding, margins, hover effects, and so forth.
In Wappler, when we want to place content on the page, we can add a container. This is just a div tag - no different than Webflow’s - that has a class called “container.” This sets some formatting for you out the gate. Inside of this, we’ll put a row (another div tag), and inside of that, we can place columns (more div tags). Anyone of which we can add, change, or remove any of the attributes we’ve already talked about.
The thing is, Webflow has this setup also. The only difference is that in Webflow you have Container -> Columns. In Wappler (and Bootstrap), there is the added addition of the row (Container -> Row -> Columns). And this is better because it allows you to keep multiple rows of columns inside the same container. It is just an extra div tag for better formatting. And all of these are only div tags inside Wappler or Webflow. They just are pre-formatted with a class.
Now, inside of one of our columns, we want to add a heading and a paragraph. We can add all the same attributes we already know. In the other column, we want to place an image, and you guessed it -> We already know the attributes we’re likely to use.
When you approach a website this way, you realize that techy is really just a word that applies to things when you’re looking at them from a 30,000-foot view. But, when you get down it - websites are made up of components and attributes that we use 95% of the time. And from that view, it isn’t scary at all. It’s pretty easy to understand.
That’s not to say that there won’t be times you struggle with how to do something in Wappler (or Webflow). My recommendation is to keep a notebook handy for these times and write down what you did, and how you solved it. I use OneNote for this type of stuff. It makes it infinitely easier to do things the next time.
When it comes to terminology, don’t let that fool you either. Broken down, the language in this stuff is pretty simple to understand. It just helps to categorize various tasks you might do. Here are some examples:
Server-Side means back-end. Webflow’s CMS stuff is all back-end. All this means is that these are things the server will do. Back-End usually consists of three parts: a server, an application, and a database. In short, think of the application as being the code that communicates the database information to the browser.
When you are in Webflow creating CMS items, these are really just database entries. A Collection in Webflow is a database table. A Collection Field is a database field. See, you already know all of this!
In Wappler, you can do all the same things and just as quickly. The only difference is that you have more control and more flexibility.
In Wappler, there are a few more steps, but this is due to added flexibility, power, and control you have over the data. Webflow’s CMS is exceptionally rigid in that it doesn’t allow you to create anything beyond the scope of their narrow framework. But, believe it or not, I can build much faster in Wappler than I can in Webflow, and this is because it is straightforward to use once you get the hang of it.
App-Connect in Wappler just means front-end. Think of front-end as HTML, CSS, and Javascript, for example. Front-end is just things that are processed by the browser. So when you add App-Connect to a page, you are really just saying, I either want the browser to communicate with the database, with a JSON file, or I want it to do something that the browser can process.
Back to my thinking of things modularly. In programming and coding, the same can really be said.
In CSS, you have Classes and IDs. Webflow uses classes, and you are already familiar with them. Both of these store rules on how to format an item or to format many things at once.
For instance, if I want an image to have round corners, I can do that in CSS and store it in a class or ID. You already do this in Webflow. When you format anything, it is stored in the class you created which can be found in the site’s CSS files.
Programming really isn’t that much more complicated. Luckily, you won’t have to worry about programming too much. Wappler is meant to eliminate the need to program.
But more importantly is this simple truth: 95% of the things you’ll want to do on a website are just simple methods you use everywhere else. Showing a series of homes for sale is really no different than showing users that are logged into a site. Inserting products into a database is really no different than adding new blog posts. 95% of dynamic websites are just the same thing done with different options.
The great news is that this 95% of stuff is pretty easy to understand. And right now it seems overwhelming. But we have seen people that have never touched a website in their life end up creating some really elaborate sites recently. And trust me - if they can do it then so can you.
But, the question is how do you learn this simple stuff without having to brute-force your way through it? Well, there is quite a bit of documentation available. That is a start. I’ve been meaning to make some tutorials that are geared more towards designers that help ease them in easier and explain all of this stuff while actually working on something simple. And hopefully, I’ll be able to get to that soon.
The thing you need to remember though is this: We are all here to help you. We want to help you, and we are rooting for you as you start this journey. It isn’t as complicated as it seems and I really look forward to seeing what you’ll be creating with Wappler in the future.
Good luck!
Wappler’s visual back-end tools are AMAZING 
& don’t require too deep technical know-how, but you can’t escape coding.
But they get the job done.