Pinegrow opinions anyone?

[macstatic]

So I've built a few simple (HTML only) websites around 10 years ago (coding by hand in a text editor, uploading the HTML and images via FTP), read about and played around with CSS a bit (I understand the basic principle) and now want to design a new responsive site (Bootstrap seems good for this) with modern navigation features, a nice user interface etc. but don't want, have the time nor find the need to become a professional web designer for this (or hire one for that matter).

A visual "drag & drop" editor of some sort seems the logical way to go, where I can start off with a blank page or a free Bootstrap starter template which loosely resembles the site I want to end up with, move DIV containers around to my liking, insert navigation, text contents or whatever into them (either from the editor itself or as code from somewhere else).
It shouldn't be too complicated, but also not too limiting. RapidWeaver seems too limiting with its "template only" approach, Dreamweaver I hear is too bloated, complex and I hear some say outdated. Macaw is the new guy on the block, but I hear it also has some limitations, and the pricetag is quite high. There are free online editors around, but I haven't had much luck with them (or I just don't get how to use them?), then there's Pinegrow which doesn't cost an arm and a leg and seems to be a capable app.

But I'm no expert and worry that once I've bought it and spent considerable time learning it I'll discover that it really isn't any good...
So, given that I want to design something good and modern for myself without investing too much time and effort, what would you suggest I go for or do?

 

[olup]

Well there are quite a few tools like that out there, Macaw, which is pretty expensive and I haven't checked it out yet. Then there is http://www.pingendo.com/, which is free and based on Bootstrap. I personally consider these tools more to be prototyping tools. So check out Pingendo and see it it's up your alley.

 

[macstatic]

I had more or less given up on Pingendo as I couldn't figure it out (assuming free=crap) but gave it another go now, this time watching a Youtube video.

What do you mean by "prototyping" a website? A quick sketch to get the basic layout right, but without the contents and (time consuming to make) details? Would you do the rest in a text editor?

Since I still consider myself a newbie to CSS and responsive web design, would Pingendo help me get the actual containers in relation to each other right, and when that's done I could hand-code the rest (text/image contents, inserting code from publicly available sliders, navigation, lightboxes etc. by putting them in the DIVs?
I just need a tool so I don't have to start completely from scratch.

 

[olup]

I had more or less given up on Pingendo as I couldn't figure it out (assuming free=crap) but gave it another go now, this time watching a Youtube video.

What do you mean by "prototyping" a website? A quick sketch to get the basic layout right, but without the contents and (time consuming to make) details? Would you do the rest in a text editor?.

By prototyping I mean create a quick mockup yes.

Since I still consider myself a newbie to CSS and responsive web design, would Pingendo help me get the actual containers in relation to each other right, and when that's done I could hand-code the rest (text/image contents, inserting code from publicly available sliders, navigation, lightboxes etc. by putting them in the DIVs?
I just need a tool so I don't have to start completely from scratch

yeah you can export your project as an html file, it already includes bootstrap css and js, so you're good to replace content to your liking.
I personally don't really use it that much, as I haven't had anything where it would really serve a purpose. Maybe start with the bootstrap basic page and remove/add stuff, so you don't feel lost. Working from a blank page can be tedious, been there myself.

 

[macstatic]

Good idea.
How do I turn on a visible outline of all containers in the document I'm working on? That way I can easily see which code affects what section when previewing in a browser.

 

[olup]

Good idea.
How do I turn on a visible outline of all containers in the document I'm working on? That way I can easily see which code affects what section when previewing in a browser.

I usually work in Chrome and use its dev tools, right click on an element on a website and select inspect element, this will give you not only an outline (height, width) of the element selected, but also the CSS applied to that element as well, which you can change(it won't change in the actual CSS file, just in the brower session that you have open). Other browers have something similar as well.

Here's a tutorial on how to start using Dev tools, which is incredibly useful and powerful as well:

https://developer.chrome.com/devtools/docs/videos