How do you prepare files/working environment for a new project?

Hi Campers,

I wonder what is your favourite way to set your starting point for a new project locally? Do you use any tools for that, do you have any templates prepared? A folder with a boilerplate? You clone a starter kit from github?

I’m used to using codepen. It has great features, you can add all the most popular libraries in one click, normalize.css, etc. Recently I learned some basic git, github and set a text editor (brackets, i loved brackets from the first sight <3) to try front-end locally. Codepen starts to get lags when project grows.

So, what is your way for, when decided on making something new, get to actually coding the first line? :slight_smile:

Codepen is a nice starter tool but once you start using your own projects you probably should build your own code on your resident machines.

Most of my projects are actually in a platform so they start out with ‘rails new’ :slight_smile: But I’m putting together a portfolio project right now that I hope to do with jquery and javascript - as I’m primarily a back end guy - i’ll build my js file first and have a dummy html document to test functionality. CSS will come last - but I’ll use bootstrap to do that.

First step (after you decide how you want to lay it out) i would say is to build a header or footer html file that you will include on every page that will be where you include your css and js requirements.

If you can use tabs on brackets keep an html, css, js file open in a tab so you can move back and forth. Don’t be afraid to use pen and paoper to keep notes of things you wanna get to later.

I think i will edit the question. I thought more about the process of preparing things you need before actually typing anything. On codepen you can add autoprefixer, normalize.css, jQuery and other stuff with one click. I wonder how to have the same functionality offline. Maybe prepared folders with needed libraries/plugins ?

I find Initializr to be pretty handy for quick startup templates.

1 Like

create a template file that includes all those things inherently and then include it in all your projects - again - it depends if you’re building from scratch or using a framework

My HTML template code for the projects on FCC is basically this (the referenced index.css and index.js files start out empty):

<!DOCTYPE html>
<html lang="en">

  <meta charset="UTF-8">
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href="index.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src=""></script>
  <script src=""></script>


  <script type="text/javascript" src="index.js"></script>


I usually create a boilerplate project with all the things I typically use - Bootstrap, FontAwesome, ExpressJS, Mongoose, empty index.html, script.js, styles.css, etc., and then push that project to a repo on GitHub that I can then easily clone whenever I’m starting a new project.

As for text-editors/IDEs, I highly recommend WebStorm. It’s highly configurable and generally really helpful to use.

Here’s a screenshot of WebStorm on my computer. Isn’t it pretty? :slight_smile:

1 Like

having it as own repo to clone. so easy that i wouldnt think of it. :slight_smile:

webstorm looks great I guess

But I loathe SaaS and will avoid it at all options. I"m fine with sublime text

Yep, this makes it super easy when you’re starting something new. Just make sure when you clone the repo that you run the git remote remove origin command immediately so that you don’t accidentally over-write your boilerplate project on GH.

1 Like

Yeah, I hear you on that. I don’t normally like SaaS either, but JetBrains makes really great software. WebStorm licenses are about $89 USD/year, and you get a perpetual license for the version you bought when you subscribed. And you can cancel your subscription at any time - no contracts.

Adobe’s SaaS model on the other hand is terrible and I refuse to do it. $50 a month with a year contract is just too much for me. Maybe when I’m making the big bucks I’ll cave in and do it, but until then I’m sticking with CS6.

1 Like

For front end, I make two folders in the root: /dev and /dist. Inside dev, I have PUG, babel and sass files. These will compile to the /dist folder, which I’ll link to in my pug file.

Then I have a index.html that the pug file will compile to at the root.

Then install gulp for automation, and several plugins like gulp-sass, gulp-babel as well as browsersync for automatic reload of my html pages on save. Finally, I either write a new gulp file or copy the one I usually use into the root.

Inside /dist goes another folder named /assets and here I’ll store anything else like images, icons etc.

The last step is writing up boilerplate and then the fun begins. Gulp makes everything as easy as codepen and i get to use my machine and sublime text 3.

1 Like

I am using atom for my text editor and I’ve been using a tool called Prepros to run a local dev server with live reload. It also has the added benefit of compiling your SASS/LESS and it also minifies your css and js if you’d like with the build options. I installed the emmet plugin for atom and use the scaffold tools that come with that. Basically just ![tab] and you get a basic html scaffold. Codepen is great when you’re really new or just want to test something out quickly but eventually you’ll want to upload assets which codepen doesn’t allow you to do unless you sign up for premium. Prepros is $29 but they have an unlimited free trial period with full functionality.

1 Like