Sublime text 3 - how to see the result of the html in the browser

1

Hello there

So far i’ve been using copepen to make my projects, but i find its way to slow, making it a pain to program.

So i’ve installed sublime text 3 to have something faster.

The problem is that i don’t manage to open what i’ve coded in the browser to see the result.

Here’s what i do.

I save my project as an html file, which i then try to open with firefox. The result i get is the code i’ve just written…

Can you tell me how to visualize what i’ve coded ? i know it’s possible since i’ve seen a guy do it in a video.

Maybe the problem is from my saved file ? i don’t save it in the good format, or is it when i create my project that i do something wrong ?

thanks for our help

2

Hey @clementh29, I totally agree with you codepen can be slow for some projects. Did you pay attention of your file is it Txt or html sometimes you may accidentally save it as text file…

3

Code pen and local environment is completely different. Code pen did a lot of behind the scene stuff that you normally required to do on a local project.

For instance, using html and body tag.
Hard to tell endless you upload the file

4

ok i found the solution

instead of saving it as html file, i needed to save it as HTML (rails). don’t know what that is but i don’t care since it works :slight_smile:

5

This happens with CSS too. First name you document, then choose file type to .css then add extension .css to your existing file name, and save only then sublime text recognize your .CSS file.

6

can’t i just write my CSS code above the HTML code ?

7

I think that freecodecamp actually promote writing CSS code in style tag because they still have not created a panel to write CSS, in reality it is a bad practice to write CSS in style tags, because the page has to load CSS styles again and again when page loads, hence professional use extra .css file to link it with the html files. This saves time and make page more efficient.

To write and link external css file, just make a .css file in your folder and add the css code as you would have in style tags then link it in html file by adding this code inside head tag like this:

<link rel="stylesheet" href="YOUR_FILE_NAME.css">