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?
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.
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.
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.
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!
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.
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.
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).