Installing an IDE

Mark Wahlbeck
A free video tutorial from Mark Wahlbeck
CEO Devslopes | iOS | Android | Freelancing
4.3 instructor rating • 15 courses • 293,833 students

Lecture description

In this video we're going to show you how to install Brackets, a simple Integrated Development Environment (IDE) used for developing. This makes working with HTML, CSS, Javascript and other frameworks a breeze.

Learn more from the full course

Beginner Full Stack Web Development: HTML, CSS, React & Node

Learn web development with HTML, CSS, Bootstrap 4, ES6 React and Node

31:27:02 of on-demand video • Updated October 2020

  • Build websites with HTML & CSS
  • Build backend servers & APIs with Node and Express
  • Work with NoSQL databases like MongoDB
  • Build full-stack web apps with Facebook's React Framework
  • Build mobile-friendly websites with Bootstrap 4 & CSS
English [Auto] Hey what's up everyone. Mark pricer slopes dot com. And in this video we're going to talk about IDS and indictee is an integrated development environment now with web development. You don't actually have to use an ID to write code. You can write code from any type of text editor because browsers will render that text as HMO. How ever IDs are so important cause they make your workflow so much easier with things like autocomplete and hints and cool colors and stuff why wouldn't you want cool colors. And so I want to cover a few of the most commonly used ideas that are out there for web development. The first one is Adam. OK. This is Open Source. It's a fantastic idea with lots of plug ins lots of community support they're creating things for all the time plug ins tools that you can install on it and make your life a little bit easier as you become a more advanced web developer. The tools will mean a lot more to you. OK very cool. Adam I-O another Open-Source one is called bracket's OK. By the way Adam is supported by Google even though it's open source. It's kind of Google that's backing it whereas bracket's is open source as well but it's supported by Adobe and bracket's is really cool and this is the one we're going to use and we're gonna use it because it's fun. Ok it's cool. Has all the same features as Adam even has a big community of developers. But sometimes it's just nice to change things up. I often go between Adam and brackets and Visual Studio code often. So here's another option brackets and this is the one that we'll be using. Another one is Visual Studio code which is code Visual Studio dot com. And this is not the Visual Studio that you would use for enterprise application development this is more so for web development and things like that and it's available for Mac and for PC similar to brackets and atom are rather Windows and Mac OS. And this is really cool tools. Well I've used this many many times. Now there's a fourth one that many web developers like. I personally don't like it but it's called Sublime and it's just one guy who maintains that you can buy it and when you have to pay for all that you can download it for free. They want you to pay for and they sell lots of plugins and things you can install. But I think there's a little more set up involved in this. And it surely doesn't have the support and the community support and the site is pretty either. So we're not going to use this and we're not going to use Visual Studio code or Adam just because for this particular course we're gonna use brackets. No major rhyme or reason. It's just it's a good beginner tool. And I think you'll like it so we're going to go ahead and install this. You can do this on both Windows and Mac. So I'm going to go ahead and download bracket's 1.8. There we go. It finished Cliggott of course if you're on Windows this would say. Easy to square and click it to install it and on Mac. I'm just going to go ahead and drag this over here into the Applications folder on PC you can install wherever you want in the C Drive program files whatever works for you. And you can install shortcut on your desktop if you want that is done it's good Glenn close this window here I'm going to eject this and we're going to go into our launchpad launch pad. Try that again. Scroll over all the way to the end and there's brackets I'm going to go ahead and take this and drag it down here next to my Visual Studio code as you can see I also have Adam installed right here as well too. So Adam bracket's Visual Studio code there at the bottom. OK let's go ahead and open up brackets perfect comes with the getting started. HVM elf out here. Pretty cool. What we can do is we can actually click the lightning bolt here. Welcome to life preview life pretty K'NEX brackets to your browser launches a preview of your HD mail file in the browser then updates the preview instantly as you edit your code. And this is the main reason why I chose to work with brackets here is because in other programs you have to take your file then open it in a browser whereas with brackets if you're as you're typing and making changes you see those changes instantly in the live preview which I think is really cool. So in this early version of bracket's life preview only works with Google Chrome and updates live as you edit CSSA or its html files changes the javascript files automatically reloaded when you say if you hate google chrome I'm sorry your web developer now you've got to love it. Web development and Google Chrome go hand-in-hand. Google Chrome has so many tools that will aid you as a web developer with more than Safari and of course we're not going to talk about Internet Explorer but Google Chrome if you don't use it now you should definitely start using it because this is going to become your best friend and of course it's like the most widely used browser. So. OK. And sure enough look at this. It's opening up a file here getting start with brackets so this code right here is automatically being rendered over here on the right hand side which is pretty dang cool. And let's just see if it's actually working. So getting started with brackets say exclamation exclamation exclamation. And sure enough it is live. No there's no other program that does it you can get plug ins for it but bracket's supports us right out of the box which I think makes it really amazing. And so there you have it. We've got brackets installed and we're ready to do some web development. And let's go ahead and do it. Marc price with Dev slopes not come see you soon.