Development tools for beginners

Hello all!

Now that I have learnt the basics of Javascript/CSS/HTML using codepen, what are the development tools (editor, debugger, package manager, etc.) I need to create my first full Javascript webpage/site?

Many thanks for any pointers.

Jean-Philippe

2 Likes

Hello @jpdrecourt read through these posts, there are a lot of good ideas and suggestions posted by the users here.

1 Like

I recommend you use Sublime Text 3 - there are some good videos about how to use it - https://www.youtube.com/watch?v=zVLJfrIwEP8
https://www.youtube.com/watch?v=NrYzJz1P4fE

For debugger I recommend u use https://www.youtube.com/watch?v=nOEw9iiopwI
Good Luck.

3 Likes

Thanks for the pointers. Could you be more precise and tell me about your workflow? For example:
Editing in editor x
Compiling on my machine with compiler y.
Testing on machine with testing suite z
Upload on server with w.

I hope that makes sense.

Thanks.

JP

Hey, for HTML/CSS/JS you really only need an editor and a browser. I just started using atom and I think it is a great editor. I have never used Sublime Text, but from what I have heard it must be great. I am not sure if it is free though.

Thanks @BenGitter, I’ll have a loot at Atom :slight_smile:

Many thanks for the effort @P1xt, this is exactly what I was after. Really helpful! :thumbsup:

A little update.

I have installed Atom and I really like its flexibility.
I am looking into Jekyll for simple static website development.
I am using the basic NodeJS http-server to preview my web work locally.
Wakatime has a plugin for Atom, I will try this out.
I’m also considering using Grunt for more automation. This article describes well how to install both NodeJS and Grunt and integrate them into your workflow.

JavaScript is traditionally a client side scripting languang which means it runs in the browser. You don’t really need anything besides a text editor and browser for client side projects. There are many editors to choose from. Atom and sublime text are two of the most popular that I know of but it doesn’t matter that much in the beginning which one you use so long as you’re comfortable with it. Also understanding the DOM(document object model) is essential because only then can you see what really possible with client side js.

When I first started I had these:

  • Sublime Text
  • Koala pre-processor
  • MAMP for Wordpress and PHP testing

That’s about it.

1 Like

Holy moly! I just saw @P1xt’s mega post and it’s awesome. I have an inkling that these are all steps I’d need to be familiar with, but seeing it spelled out so clearly is great! Thanks for the effort of putting this together so clearly!

I think this would make a great FCC medium post… :wink:

1 Like

Live Server is a really nice tool that will quickly and easily load a demo of your index.html in a browser and automatically reload it whenever you make changes to your project files. I use this a lot when ironing out the CSS/UI for my projects.

Do it. @P1xt

Its a good post that all beginners (like me) will find useful, if only for what to google.

/Peter

1 Like

I just started using Pomello. It’s ace! Thanks for the suggestion :slight_smile:

My current set-up is somewhat minimal since I’m slow to add new tools, but it does its job for small projects. I hardly have any free time at the moment so I focus on coding and only try a new tool when I need it for a project/tutorial or when I need a short break from just coding.

  • Editing: I’ve used and like Sublime Text, Notepad++, and Visual Studio Code. I haven’t used Notepad++ in a long time (It’s a Windows tool and I usually have to code on a MacBook Air), but of the other two I prefer Sublime. It’s all a matter of personal preference, though.
  • Version Control: Git
  • Git Repository Hosting: Bitbucket for private repos and GitHub for public.
  • Package Management: You’ll need npm to install some tools.
  • Testing: Mocha with chai for testing JS.
  • Organization/Project Management: As mentioned by P1xt, Trello is really nice and free for managing tasks. I have mine set up for an agile workflow like this (you can probably skip a few of the categories/lists for solo personal projects).

I set up my locahost manually for the experience. I just did a Google search for up-to-date guides on how to do it for my operating system (OS X).