Try Tuts+ Premium, Get Cash Back!
Web Design from Scratch: Choosing an Editor
videos

Web Design from Scratch: Choosing an Editor

on Apr 10th 2011 with 62 comments
Tutorial Details
  • Difficulty: Beginner
  • Format: Video
This entry is part 1 of 15 in the Web Development from Scratch Session
Next »

In this introductory episode, assuming you have zero knowledge of web design, we’ll go through the process of choosing your first code editor. As you’ll find, like a pair of shoes, you’ll likely need to experiment with many code editors before settling with your favorite.

Subscribe to our YouTube and Blip.tv channels to watch more screencasts.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Sergio

    JW I like your work, but why not move the series to webdesigntuts ..Really when I open nettuts,which is daily, I really want to see some big toy tuts here…. I want to see code, serious programming stuff, I don’t really care about html and photoshop, let the designers do that… Again I want to say that I really like your work , and follow you on a daily basis, but ever since the tut about the MVC boilerplate I am waiting for a really advanced tut for us … programmers

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      We post advanced tutorials every week – everything from Rails to Node.js. But we have to think about those who are just getting started in this field, as well.

      This series is not on Webdesigntuts+ because 1) I don’t run that site. 2) We’re going to be covering far more than what would be appropriate on that site. 3) Nettuts+ has never had an introduction to web dev series before. It’s needed badly. :)

      • sergio

        Ok cool…but plz , next tut blow my mind with some advanced stuff on the big guns (php, ruby, node.js)…and btw, sry for the off topic but have u considered diving into another php framework and making some tuts, or push CI with some new tuts :)

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Me, personally? I’m running out of room to remember how to use all these frameworks. :) But I wouldn’t be against a from-scratch series on Cake or Kohana. Just haven’t found the right author yet to create the series yet.

      • Sergio

        Find a guy to do Zend Framework from scratch and I am pretty sure it will be a huge hit because of the popularity of the Zend Framework….staying on topic , a good IDE, maybe one of the best, is Netbeans and it’s free

      • http://www.cooljaz124.com cooljaz124

        Just want to recommend this video to my friends who is interested in web-design field. But, have you purposefully neglected Coda ? Heard its the second best Editor after TextMate in Mac, any thoughts ?

      • Mr.Manc

        Loving the tutsplus sites – Thanks very much for doing this series especially!

        Can totally appreciate the comments wanting heavyweight stuff to get stuck into, but there seems to be plenty of it already and us noobs all have to start somewhere. I too aim to be a developer, not a designer ;-)

        Great work, please keep it up! :-)

      • http://www.danieldaxl.at Daniel

        Jeffrey, I like all your tutorials , especially the screencasts – therefor I’ve registered a tutsplus acc. – too but I’m also a pro-developer, who likes to watch a screencast from you, cracking a hard nut or a more complex topic ;)

        I really appericiate, that you want to get in touch with the beginners, but I think regarding screencasts, there should be a split between beginner’s and pro’s.

        regards from vie,
        daniel

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Thanks, Daniel. We post a good number of advanced screencasts though, I think. :)

      • http://joostschuur.com Joost Schuur

        I came here with similar concerns, and it’s interesting that others have already posted along those lines before me. I don’t doubt that there’s an audience for these kind of tutorials, but I’m concerned that, given the massive scope that Jeffrey intends them to cover, his time won’t be spread too thin between this series and the more advanced topics that I’m more interested in.

        I would be more… reassured(?) if I saw someone other than Jeffrey run these in the long run, knowing that his talents are better used on more complex tutorials.

      • Daniel Esteves

        Thanks for thinking of the little guys, because we all have to start out at the bottom. And with help from others (like you) we all definitely move up and prosper in this field. Thanks and keep up the good work. Many thnx

    • http://erasmusu.com AdrianMG

      I think there is room for all, from beginner to pro tutorials… I would love to have these tutorials when I started on web development.

      Keep up the good work Jeffrey!

  • Jim

    Very excited, Jeffrey, about this series! Thanks for considering those of us who enjoy Nettuts but sometimes feel the material is just above our training or experience. Keep up the great work.

  • arnold

    yup Sergio is right, I think this should have been on webdesigntuts

  • Matt

    A great idea for a starting series. I’ve been around a few years myself but will be checking out ETextEditor.

    Re: the IDE recommendation (i.e. ‘come back later’), I respectfully disagree. My argument is that eventually you’ll want to step up anyway so why not become familiar with the environment from the start? So long as the newbie’s understanding allows them to realise *where* to use a text editor instead of an IDE, the lesson can be considered learnt!

    A couple more recommendations for you. For a Windows text editor, ConTEXT (open source). For an IDE, Aptana (it’s Eclipse-based so cross-platform). For simple Windows image editing (i.e. gradients, shapes – can also open PSDs with a plugin), Paint.NET (open source).

    Cheers!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Learning how to code is difficult enough – let alone coming to terms with a massive and typically slow IDE that contains features that the person won’t know how to take advantage of for years. In my opinion, it’s best to start off with a simple editor.

      • Daquan Wright

        Absolutely, Notepad++ is perfect. Even though it’s simple, it’s got tons of plug-ins to expand its capabilities. It’s always best to start off small. ;)

  • http://www.artepixel.cl Manuel Lopez

    I would like to congratulate you on a great job, but I felt left out when you didn’t mention Linux based web developers!! And what happened to Dreamweaver?? and plain old notepad??

    Also, GIMP is an awesome tool for people who are starting out and want to produce great looking graphics for free. Some of the features on GIMP are ahead of Photoshop (like Content-Aware, for example).

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      I wouldn’t recommend that beginners (or really anyone) use regular Notepad or Dreamweaver.

      And I made note of using Gimp.

      • http://guiadeti.com Daniel

        HI Jefrey, your series is amazing, i just saw it once and i´m seeing again to follow step-by-step. Just one question: why did you say you don´t recommend dreamweaver to anyone?

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Because it’s slow, promotes bad practices, and there’s lots of much better (and cheaper) alternatives. :)

    • Nick

      Dreameraver is a bit more than an editor so I think it isn’t suited for beginers that want to learn code….and about linux editors…….I think Kate is one of the best.

      However JW there is one more editor for windows really nice and simple. Intype (wich I use) :d

  • alex

    Thanks! Is there any plan to start tuts for Zend from scratch?

    I am happy to pay it.

    • Nate

      I would love to see a Zend series, that would be awesome.

      PS> Jeff, AWESOME job on the CodeIgniter series. I really enjoyed it and learned a lot. I’ve generally stayed away from frameworks, but I’m really digging how much it’s speeding things up for me.

  • Andreas Madsen

    If you are on Windows you should also take a look at Paint.net (http://www.getpaint.net/), is free like GIMP but are much more simpel. I have used it in my first 4 years, but are now using Photoshop CS5 on Mac.

  • http://www.rashanoureldin.com Rasha

    Hi , Isnt webdesign mean , how to design website using photoshop , not codes ???

  • http://http://lrncode.elementfx.com/ Ted

    I´m just starting out with learning web development, and there you come like a saving angel, you ;) Thx for thinking about the little people, and keep up the good work! :)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Ted!

  • Ali

    Hi Jeffrey, thanks for your wonderful tutorials and screencasts.
    I’m a web developer too and use Coda and Textmate on my Mac, but as freeware Kod is amazing and much more better than TextWrangler. Check it out ;-)

  • Ali

    Hi Jeffrey,
    Why did you delete my comment?

  • http://www.descriptivedesign.com Christopher Reber

    Very nice videos, short and sweet. As far as code editors I’m a huge fan of Notepad++.

  • http://www.jeffadams.co.uk Jeff Adams

    Always love these “from scratch” series but I have to admit, this one looked so HUGE that I’m not sure if you can really pull it off.

    Then again I’ve sat through your jQuery series and it wsa AWESOME.

  • Sara

    You said that Espresso is powerful? in what way? an example of a difference with the free editors, please?
    Thank you for the tutorials, it’ll be helpful to me.

  • Sergio T

    Sublime Text Editor has an alpha version that runs on Windows or Mac.

    http://www.sublimetext.com/

    After trying many editors and settled on this one. I highly recommend it.

  • Zekiel

    anyone heard of sublime text? I think this is one of the best editor around. You can try it out without any down side beside sometimes a popup about “buy it”

  • chichibek

    hey jeffry what about the linux users?

  • alex block

    seriously thanks for this more beginner series. I’ll bet there are a lot of other “wanna-be” developers out there such as myself who would love to do the advanced stuff but just aren’t anywhere near there. There is advanced stuff on here everysingleday of the week. i guess developers are as opposed to change as anybody else, even if its just the direction of 5-10 posts. geez. thanks again.

  • Hulaz

    I’m relatively new to the world of web design and have benefitted massively from this site, and in particularly you, infact i signed up to the premium so i could get the CSS noob to ninja and a few other premium tuts.

    This sort of stuff aimed at us beginners is greatly appreciated, keep up the good work!

  • http://www.cipro-websitedesign.co.za cipro

    Thanks for the fundamental tuts very appreciated. cipro

  • http://designtouches.net DesignTouches

    I`m using those methods on my website .. i love CSS & HTML

  • http://www.wisecrackblog.com Carlos

    yes thank you i have been looking for something like this for a while now!!!

  • http://www.kreativeloop.com aAnioz

    Hi, Thanks a lot for starting such a great series for the biggners. I have just jumped into blogging world and was looking for some basic stuff on web development. This series is a great help. Really appreciate your effort for biggners with regrets to the very experienced people who have commented above for some complex stuff from you :-)
    THANKS again!

  • http://citylight1.com real estate egypt

    Just for beginners, but easy to understand please more

  • http://twitte.com/greatdiane Diana

    This series of videos are awesome! I use Notepad++, and sometimes Dreamweaver, the default notepad is good but not as good as Notepad++ in my opinion.

  • http://twitte.com/greatdiane Diana

    ..by the way, maybe you can consider adding a text version of the tutorials, for people who doesn´t understand the english very well, in my case, I can read it but not understand the spoken english :)

  • http://inphocusmedia.com inPhocus Media

    This is a great video for beginners and gives them the option to know what to pay for or what to use for free with Windows and Macs. Great job and this is a great serious, you are wise for putting this up. We are going to look at every step of this series.

  • http://www.stantongomes.com The Website Designer

    This video is a great start, it reminds me of back in the days before I started designing Pro Websites.

  • oliverosm

    Hi Jeffrey I love your tutorials they are great, and I would love my friends to learn from them too, but they don’t know any English have you ever thought of a subtitle version?

  • http://k2-darky.blogspot.com/ k’2

    hi there ….i can’t describe how’s great ur tuts are …so as a token of graduation …i made a humble review about this series :)

    here is it

    The review

  • Tom

    I’ve just downloaded Espresso. I just wonder, how to make a horizontal workspace, with open files as tabs as You have. In mine, active files are opened on the left, one beneath another and I personally don’t like the way it is.

  • Rhys

    I would have to put forth a recommendation for Sublime Text http://www.sublimetext.com – it is an excellent editor, and is free to use (unlimited) with the intention to purchase $59USD.

    I work on multiple platforms, and having a text editor that is available on Windows, Mac OS and Linux is perfect – not to mention that it’s an excellent editor.

  • http://klug.ro Stephen

    I think gVim/MacVim deserves to be known by beginners, it’s harder to learn but is one of text editors which can become personal almost as a pen.

  • http://www.yahoo.com online aviation courses

    I really like this article, this is one of my favorite sites and I’ll just wanted to say thanks!

  • Armand

    Is dreamweaver good? Because It came with a package I purchased from adobe and all I know that it is very expensive. Sorry I have no knowledge with this type of stuff.

  • http://www.lanotdesign.com harvey

    Great vid!
    and thank you!

  • http://www.fuzzypuzzle.com/ Jason

    Thank you. Thank you. Thank you. Been looking for a series like this forever.

  • Ben

    I just finished a front end course for the layouts & have stuggled to find anything for the novice.

    Briliant. Thanks for taking the time to put this together.

    It felt like the development industry didn’t want to make it easy to educate newcomers until this point.

  • Andres Rendon

    Hey, Jeffrey first i’d like to say that you’re an awsome tutor, and i follow almost every article you publish, with that i would like to suggest an awsome editor for al 3 platforms Windows, Mac and linux Based in Python called Sublime Text 2 it’s versatile and very powerful, almost like textmate.

    Greetings

  • http://7learn.com 7Learn

    Great Video Tut.
    Thanks for this simple guidance !

  • Tobal

    Hi, I’m looking for an editor for my Linux. I’ve got a problem, only Amaya and Bluefish work with MathML, but Amaya is too much wysywig and bluefish not have a lot of most important snippets for html5, css3 and mathml. The best is Aptana Studio 3 but it doesn’t support MathML, it doesn’t support the code and the snippets, with the preview web page not show math formulae with MathML. Please, does someone know about how can i solve this problem? I’ve seen BlueGriffon but the math plugin is not free and i’m not sure if this plugin is for MathML. Thanks.

  • Yua

    I can’t see the video…

    • http://palakmathur.in/ Palak Mathur

      same here