How to visualize HTML code on computer?

Community Off Topic
1

Wasn’t sure where to post this, but I’m currently on a journey to become better at HTML and CSS. Problem is, I don’t know how/where to start visualizing my code. I know how to make my Python code on my Mac, but It doesn’t seem to be the same process for HTML. I currently use Sublime as my text editor. Its weird, I know how to code okay but when it comes to practicality and visualization I fall flat. What do I do?

2

Create a folder to contain your entire project (let’s call it a site)…

site/

Now inside that folder, create a new text file, but with the extension, html.

index.html

Now right click the file and select ‘Edit with Sublime’ (assuming the option exists in the context menu), otherwise from Sublime, File > Open and navigate to site/index.html and open it.

Compose a very basic HTML page, just enough to get started,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic HTML Demo</title>
</head>
<body>
<div>
<h1>Basic HTML Demo</h1>
<p>Lorem ipsum &hellip;</p>
</div>
</body>
</html>

Save it and either navigate to the file and click it to open in a browser, or if it exists, Run > Launch file in ___ where ___ is the browser.

1 Like