I was starting my first tutorial project and trying ti understand it and I already screwed up. I tried to open it in a live server to see how it's progressing.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 50%;
margin: 100px auto 20px;
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<p>This is a container with specific margins.</p>
</div>
</body>
</html>
It's just a simple block with some padding and a background colour but for some reason it keeps on coming up with this image no matter what projects I'm on.
Some help would be amazing thanks!
Top comments (5)
Hi Ryan, not sure if you still need a hint but Live Server requires your HTML file to be in the workspace. Just open your folder with the VSCode and make sure your HTML file is in the root directory, not in any subfolder like "/src" or "/app." Then start the Live Server extension. If you're still having trouble, try changing the workspace in the configuration. Open the VSCode command palette (Shift + Command + P (Mac) / Ctrl + Shift + P (Windows/Linux)), start typing "Live Server," and then click "Live Server: Change Live Server workspace." Select the folder that contains your HTML file.
Hope it will help. 🦖
@vaddijaswant @ryan_yuan_a6ffd8d890bd4f9 I agree with Jaswant and will suggest you Ryan to use Visual Studio Code and after installing it, also install the extension "Live Server". This will enable a "play" button at the top right corner of your editor window. Click it and the output of your code will e in the browser. Happy Coding!
I’m not entirely certain, but it appears that the problem you’re encountering may be related to the path where your live server is operating. If feasible, I suggest opening this HTML file in Visual Studio Code. Once the tab displaying this HTML file is active, initiate the live server and check if everything functions as expected.
Hello Ryan, I just copy paste your html code in a test.html file on my laptop.
The code looks completly valid and it opened well on my browser.
I don't know what you mean by "live server", but html can be just read by browsers, you don't need a server for that.
If you need more help, I think you can ask some help on stackoverflow or some dedicated forum, I am not sure dev.to is the right place to find answers quickly. You can also ask chatGpt or other IA, they have a lot of knowledge, that can help new developers really efficiently !
Good start! You should be able to use this in your browser. You didn't forget to name your page to .html?