Online Tools, Extensions and Modules to Get Started on your Next Web Development Project
You've got a new project to build, but how to begin. Ohhh the many ways to go. Should I use React, Svelte or Vue.js. Bootstrap or Tailwind, which Bundler should I use. Heres some great ways to get going quickly.
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.
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 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.
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.
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.
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.
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
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.
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.
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.
It's one of those things that just works.