January 21, 2018

getting started with Brackets.io

When I first downloaded Brackets, I didn't quite understand how it worked (i.e. I could not for the life of me figure out how to write HTML and generate a preview). After a little trial and error,  googling, and YouTube videos, the answer is actually quite easy. Basically, the preview works in Brackets if your file is saved as an HTML file. Let's go through this step by step to show you how I set up my work in Brackets.

I like to store my blog posts in one place. And right now, pretty much everything is stored in Google Drive for me.

  1. Create a new folder in Google Drive and name it BlogPosts or whatever you want.
  2. Open Brackets
  3. Go to File → Open Folder, and choose your new folder (arrow code comes from here)
  4. Create a new document
  5. Save it (name it anything you want- e.g., the name of a post, etc.)
  6. Then right click and rename it by adding the extension .html

That's it! Now you can click the preview button in Brackets and see the outcome as you write your code.

Now when I want to make a new blog post, I just open brackets and write my post in html. Once I'm done, just copy and paste the HTML code into a new Blogger post (of course, make sure the post's html editor is selected!) and I'm done! Where has this been my entire life...?!!!

Some Hints

  1. At the bottom of the editor, you get to choose what kind of code editor you want to use (e.g. C++, html, etc). So if you're writing html, make sure you choose that to get all the bells and whistles of the Brackets' editor for HTML. 
  2. If your html code is off in some way, the preview will become disconnected. Fix this by either refreshing the preview pane or fixing the code. I find that it stays connected and works best when the entire post is bounded by the "body" code. 
  3. The easiest way to make the font size bigger is to just use CTRL+ +sign

No comments:

Post a Comment