Make Your Own Website: A beginner's guide
39 comments
·February 11, 2025mg
I made this html editor with instant preview and it turned out useful when I show friends how make their very first html page:
https://no-gravity.github.io/html_editor/
Originally, I made it for myself. To quickly do HTML/CSS/JS experiments. And I still use it for that use case.
Often when I show it to non-developer friends, I can see how they light up to coding for the first time. I think it is because it is so accessible. No signup, no setup, no long page load. Everything is instant, and they see each change the moment they type it.
croisillon
i use this:
data:text/html,<body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=HTML id=h></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=JS id=j></textarea><iframe id=i>
egeozcan
This is great, but maybe you can add a sandbox to that iframe you use for displaying? Nothing to do with security, just that people copy pasting snippets can actually lock the page up with broken scripts. I speak from experience :)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/if...
mg
A sandbox could be an interesting idea. Especially as a dropdown with options what should be blocked.
I am not sure if anything should be blocked by default, because that could always end in frustration when something that should work does not for mysterious reasons.
But it might make a good default to block all external requests when the editor gets a feature to link to code directly. Like ...html_editor/?code=<!doctype html><html>...
Then it could display an info box like "Initial code was loaded from your link and the sandbox was activated. Use the Sandbox menu to enable more features the code can use"
There was a bit of a discussion about this on HN two months ago here:
https://news.ycombinator.com/item?id=42448964
The editor is open source, so if you like, you can add the features you have in mind:
sumo89
It's the same reason I always recommend people to start with CodeAcademy if they want to start learning web dev. The interactive, live preview is perfect and the UI is nice enough to outsiders. There are other sites with preview boxes but they look very code-y. Once they can see how setting a background colour or adding a new <p> works in real time it helps the beginning of understanding.
harry8
Elegantly cool. Good job.
xp84
Oh, this thing is perfect. Thank you.
tommica
This is a really good article - this is the kind of thing I would link to a person that wants to build a website. I'd hate to be a noob developer, and having to learn to build a react site as my very first thing.
susam
This is pretty much how began developing my own websites back in the early 2000s. Except that it was Notepad on a Windows 98 machine, and it was customary to write HTML tags in all uppercase, and layout was done with <TABLE>s, <TR>s, and <TD>s, and the hosting was on 20m.com which provided a free subdomain and 20 MB of hosting space. Remarkably, that silly website is still up at <http://encoders.20m.com/>!
braggerxyz
In Germany we have Self HTML (https://wiki.selfhtml.org/wiki/SELFHTML) since 1995. I learned all the web dev basics with it as a 12 year old. It was the kickstart for my career, and 28 years later I can safely say I was successful. And it all started with that.
Keep up the great work with such a guide, maybe you kickstart some careers with it!
zelphirkalt
Very accessible. I don't need to load tons of third party JS to view this website. It doesn't hold its content hostage. It also makes use of things like the details element, instead of resorting to JS for such things. Basically, this is what one could expect from a website, that teaches HTML. To actually know the stuff it teaches, and apply that. This will also be more responsive than 95% of the websites out there. Nicely done.
iLoveOncall
> This will also be more responsive than 95% of the websites out there.
Except it's really not.
zelphirkalt
State your device, browser and resolution. For me it floats perfectly fine, as expected, because it is mostly text and uses the elements in the way they are meant to be used. I narrowed the browser (with the responsive mode toggled in inspector) window to something like 250px and it still showed everything nicely. Most websites break way before that width, making elements overlap and unreadable.
Brajeshwar
An aspiring founder asked me what to read/study when everything around is AI—which AI tools or AI Framework? My answer was HTML. HTML ain’t gonna go nowhere.
nhatcher
I always like mentioning neocities in this context:
It's one if those gems in the Internet
egeozcan
This is amazing! However, for the 99% of the non-developer people in my circle who started this journey, it goes on like this: Learn basics of HTML & CSS, start creating stuff on some free host, "oh my deity, this is too much to handle" moment comes, they create a wordpress blog, something in it gets broken after a year or two, they ask for help from a developer friend or give up.
For the developers, we are busy writing our own static site generators and blogging about it (which is a lot of fun too!)
greazy
Creating a website is the easy bit. The publishing and continually updates, even for a basic website, that's the bit that will make you stop and give up.
I think this is why wordpress or drupal services are multimillion dollar companies.
The web is hard.
My experience as someone who programs but was never formally trained even if my job requires the skill set.
steren
No, we should teach React to beginners! ;)
zelphirkalt
Better to put that /s or so there, before someone takes this literally.
abetusk
Jesus, what a refreshing site. People are so terrified of getting their hands dirty with HTML that they've forgotten how straight forward it is.
Abstractions, frameworks, static site builders, etc. are all great but we shouldn't shy away from understanding the basics.
> I originally wrote this guide for my daughter, then 12 years old
I like the idea of this as an introduction for a child to web development, but I feel like it (in isolation) is wanting. One of the most jarring bits of this page is that there is an almost immediate jump from this page to MDN, which is drastically too much for most 12 year olds. There is a lot of "do this, and then do that" style of instructure, but not very much child-friendly explanation as to why to do that. Most things described here are trivial to people who are familiar with the subject, but not anything obvious or natural or intuitive without the necessary context or experience.
Further, there is a significant push into HTML semantics before describing the simplest workflow of creation -> publishing that may lose the target audience's attention; I feel that describing a process more abstractly and then expounding on the details may be more helpful if you're teaching children how to make a website (websites are documents on another computer that you can ask for, this is an example of a very simple document, the document goes on a computer that talks to other computers and responds to their requests for documents, other computers then can see the document when they are responded to, etc.).