Raybo.org

Emmet

First, let me go with Some of the easiest. If you use Visual Studio Code, it comes with Emmet installed. Emmet is a toolkit for coding faster through quick shortcuts.

Understanding type, child, and sibling selectors from Coding Faster with Emmet by Ray Villalobos

One of the shortcuts available in emmet will create a quick HTML page. First, make sure you have an HTML page saved and type the ! key. If you have auto-expansion turned on in your prefs (or you can hit command-shift-p and choose Emmet: Exand Abbreviation

You'll get a quick HTML page. You can tab through preset options like the title of the page and start working on your document right Away.

There's a lot more you can do with Emmet. Here's a great shortcut that will almost build an entire sidebar template for you.

Emmet Sample

Emmet is great for building little templates of content types you can add. Trust me, learning Emmet is well worth your time, I'm just scratching the surface on what you can do here.

HTML Boilerplate

Another way to get started quickly on your page if you want a little some more flexibility is to use this website called HTML Boilerplates . It gives you the structure for different component that might need to go on your HTML page. It's not a ton of options, but it has a lot of the things that you'll need to have in your boilerplates to get going.

Github Templates

Another way you can start a new project is based on an old project. If you have a Github Repo, you can easily switch it to a template. Just go to the settings tab in your project.

Scroll down and turn on the Template repository checkbox. Your project will now have a 'Use this template' button.

Github Use template

That will quickly create a new Github project that is a clone of a current project.

You can use this with another one of Github's great shortcuts. if you want to create a new Github repo, that's based on your template. You can use their shortcut URL github.new and as a bonus, you can choose this or any other template you have saved like this.

Github template

Degit

Ok, what if you want to create a project based on someone else's Github Repo, but you don't want to fork...or maybe you forgot to create a template based on the repo. You might even be looking to clone a specific branch and you definitely want to start off with a clean history.

This is where Degit has some advanced features that makes this easy. It is a CLI that you'll need to install globally

npm install -g degit

Once you've done that, you can easily clone any repo's latest state with a simple format.

degit planetoftheweb/bootstrap4layouts my-project

It assumes you'll be cloning from Github, but you can also specify others by prefixing a keyword like degit bitbucket:user/project

If you want to clone just a sub-directory, you can simply add slashes to read the right directory degit planetoftheweb/bootstrap4layouts/build, but you can also clone specific branches, releases or commit hashes.

The big advantage here is that you're cloning the repo without history, so you can grab a piece of a project to begin a new project easily.

Create app

For more advanced projects need more choices, you can try Create App. It lets you choose different libraries like React, Svelte or vanilla JavaScript, build tools like WebPack, Parcel or Snowpack, UI Libraries like Bootstrap or Tailwind CSS.

Name your project, and you can either hit the download project button to get a zip file, or you can copy the terminal commands you'll need to set this up yourself.

Vite

Create App is cool and all, but what if you're not really into so many choices. You just need something super modern and quick, not so many choices between bundlers or build tools. My new favorite is Vite.

Some of the features include a live preview server, native javascript import commands, hot module replacement, support for CSS, JSX and typescript. Vite doesn't let you choose, it just uses Rollup, ESbuild and template support for React, Vue, VanillaJS and Lit-Element.