Using IDEs/text editors

1

Hello there,

I’m learning how to program in JS (html and css, basic knowlegde so far as you can imagine) - I’ve learned the basics for now, but i’ve always used the ‘editors’ from the learning camp sites, and never used an actual Editor/IDE.

I’ve chosen VS code after reading around, however I looked all over for tutorials on how to use it - unfortunately without much luck.

There’s tons of tutorials on how to set it up and use extensions and such, but ALL talk to you (the viewer) as if you had previous experience with text editors - or just explain you what VS code is, and what it can do, but no actual tutorial on how to use it for someone who has no idea how to work it.

Could someone please give me tips on how to find guides that teach me how to use a text editor from Zero? (as a complete begginer) - I would very much appreciate it, because i’ve been stuck for 3 days (I know, pretty pathetic)

I live far from town and I do not know or have any other developer comrades in my social circle, so it’s a bit difficult to get tips. Your help will be MUCH appreciated!

2

A text editor is, as the word suggest… just a text editor.

To write program you don’t need anything special but something where you can literally write some text on.
You can use the default note program for what is worth.

In general, as its core the very basic of how a program is done is:
(note some simplification si made to illustrate the point)

  • write some text in a document
  • ask some program to read it; this is what is called a compiler, different programming languages have different ones.
  • the compiler “understand” what you wrote, and generate a program for you.

So IDEs/Code editor are text editor tailored for the job they have to do, this means they come with extra feature that comes handy, like autocomplete, color highlights…and so on…

If you want to try to create and “run” a webpage from some code you wrote on VSCode, the very basic would be:

1 - create a new empty document, name it as you want and give it the html extension (so something like index.html
2 - open it with VSCode and add some html in it
3 - save
4 - right click this document and select open with and choose your favourite browse.
5 - ???
6 - Your browser “understand” the document and runs it

Hope this helps :+1:

Edit: Welcome to the forum

1 Like
3

I use Sublime Text and it’s basically just a notepad that auto-highlights code for you to make it easier to read. It was as simple as installing and typing. What specifically are you looking to accomplish with an IDE?

4

Here’s a great tutorial :smiley: on VS Code: https://www.youtube.com/watch?v=VqCgcpAypFQ

1 Like
5

If you’re using VS code for html and css there’s two things you’ll want to do.
Firstly, after creating a new file for your html and a new file for your css, go into the folder containing your project and open the html file to view it in your browser.
Secondly, make sure to link your css in your html code. Aside from that, it’s essentially no different than using code pen or FCC. You type your code, there’s autocomplete, explanations, dynamic error checking, and tons of useful plugins!

1 Like
6

Alright, see, now this is a very simple and great explanation that you don’t get lo learn troughout language tutorials. Thank you so much mate :slight_smile:

I didn’t know I had to create the document first outside the program, and then open it with it (and this bit was stopping some of the extensions to work) - tried it your way and now seems to work fine.

Thanks for the welcome and the quick reply, I’m lucky to have found this forum!

7

Hello there, I chose VS codee as I heard it was a hybrid between a text editor and an IDE - To be honest, I’m still fairly new so i don’t know the full extent of what you can do with IDE’s, but i figured if I get used to vs code, later on I could start learning more about it without having to change to anotheer program.

And while I know how to write the code in VS code, it’s the ‘overall order of things’ on how to use any type of text editor what i’m trying to learn. Something as simple as the fact that i have to create a document first, to then open it with the editor (I did not know this, until Marmiz explained it to me).

I tought I could just start typing in the editor and that would work (like in notepad). Like I said, a complete begginer.

8

This is great - Thanks a lot mate :slight_smile:

9

Hi Addikins, thanks for the quick reply mate

I have a couple of questions regarding your explanation;

1- According to what you said, I have to separate html & css in 2 different files; could you please explain me the reason for this? - on most courses they make me write everything in the same file/page.

2- How do I link them (html & css) when they are in different files?

Thanks a lot for your time and attention :slight_smile:

10

Jumping in real quick for a nice resource that really visualizes how a website is structured when it comes to files and why it’s done that way

http://www.htmlquick.com/tutorials/organizing-website.html

and here’s a quick explanation on how to link to an external css file

https://www.quackit.com/css/external_style_sheets.cfm

1 Like
11

Ok, this was actually better than expected, and cleared pleanty of my doubts - thanks a lot mate :slight_smile:

12

@RadDevDad probably already got you covered, but basically it keeps your code clean and it’s much easier to work with as your projects get larger. You can still style in-line when it’s useful, but for the most part link your css like so:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

styles in this case can be any file name with the .css extension. This is also really helpful for projects using the same style sheet with different html files

1 Like
13

Oh wow, this is pretty good, really appreciate it!

Thank you RadDevDad - finally feel like i’m getting the hang of this. Cheers :slight_smile:

1 Like