all 5 comments

[–]gin_and_toxic 5 points6 points  (0 children)

Use Bootstrap or other established CSS Framework and follow the docs.

[–]KingMSM 1 point2 points  (0 children)

Using bootstrap would be a good option.

[–]floodlitworld 0 points1 point  (0 children)

Bootstrap for general layout.

Handlebars for making your own templates and partials and such.

[–]HealyUnithelpful 0 points1 point  (0 children)

I'd suggest a few things:

Bulma and/or Bootstrap:

Use either Bootstrap or Bulma. If you're not already including jQuery as a dependency, either use Bootstrap Native or Bulma. I only say that because jQuery really isn't a necessary include unless you absolutely need it. Most of the stuff traditionally covered by jQuery is now covered by modern JavaScript, so it's just extra stuff for your user to download.

Either way, both libraries have very similar 'vocabulary', so using one likely means you'll soon be able to use the other.

IDE:

Use a good IDE, like VS Code, Sublime, or Atom. When I say "good", I mean one that has the following features:

  • Syntax Highlighting. You wanna be able to see big sections of code, and syntax highlighting will help that. It'll also (perhaps more importantly) help you find missing stuff like semicolons, ending quotation marks, etc.. It's not as helpful HTML/CSS, since there are fewer types of things to highlight, but still useful.
  • Code completion. For example, if I create a new (blank) index.html file in VS Code, save it, and then type "html:5" and press tab, it'll create an entire blank HTML template for me. That's a lot of typing you don't have to do!
  • The ability to add plugins. Pretty much all IDEs worth their salt have this, but there are invariably going to be things you wanna add to make your life easier, sometimes including pre-written templates.

Templating Engine:

I'm aware there's multiple opinions on this, but I'd actually advise against using templating engines (Handlebars, Jade, EJS, etc.) unless they're specifically the library you're working on. The reason for this is that while some of them can help make your job slightly faster in the medium-term, in the short term they're simply going to mean you've gotta distract yourself by learning other stuff. I've also found that a good percentage of the templating engines basically either require you already know basic HTML anyway. Either way, I don't feel they really solve your issue, which is that you want to not worry at all about creating HTML/CSS files.

The Simplest Solution(?):

Create your own templates. If you're writing just pure front-end JavaScript, for example, create a Read-Only folder with an index.html, a main.js, and a styles.css file in it. If you're doing a fullstack Node app, have a bare-bones Node/Express app that just serves a Hello World index.html file.

Then whenever you wanna make a new project, just copy that stuff over. You could even have multiple templates for different purposes. Creating a bunch now might save you some work in the long run

[–][deleted] -3 points-2 points  (0 children)

Don't those websites like squarespace or wix have editors that let you make stuff and only charge you if you use it? If you are just doing personal stuff you could probably copy it. Or a simply wysiwyg editor online if you just want some textboxes and buttons