Make Your Own Website: A beginner's guide

> 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.).

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.

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.

I always like mentioning neocities in this context:

https://neocities.org/

It's one if those gems in the Internet

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.

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!

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.

No, we should teach React to beginners! ;)

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!)

This is pretty much how I 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. Layout was done with <TABLE> tags. The hosting was done 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/>!

That site gives me flashbacks to my 1994 O’Reilly HTML book. That and the Perl one (was that the Camel book?)

I am glad to see something like this though. You might reach some people.

You see folks, when you had to live through doing this shit by hand, and if memory serves, this was even pre-css (or maybe pre separate css files, shit, maybe just pre-css2?) and your only dynamism was through cgi with C or Perl, because Cold Fusion cost waaay too much for mere mortals (and the Sun server costs were even more eye watering), you welcomed things like Linux, PHP, MySql and Apache with open arms. It was like being rescued from a refugee camp and being given prime rib. And think about this- if someone thinks PHP back in the version 3/4 days was salvation, that person has seen some real shit.

Point being, we came OUT of the woods. We knew better than to build rube goldberg machines that would lead us right back in, lol. We have a word for that- masochism.

Take what you know now, and simplify. Untangle the knots. Spring clean. Throw away the cruft. Free your minds.

And I know y’all can. Don’t be pretending like you don’t rewrite all your shit every year anyway ;)

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.

Ah this is nice! Fond memories coming back of learning HTML and web design with HTMLGoodies and LissaExplains. Anyone remember those?

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.

A few things in it that I would not put into a beginner's (or any) guide:

- Semantic tags (header, footer, main, section): machine-readable semantics can be fun to play with if one is so inclined, one can go even for RDFa, but AFAICT they will not do anything visible or useful, especially for a small beginner's website, but they complicate the guide.

- CSS: the page itself uses low-contrast pink text on a pink background, which is hard to read (and goes against W3C accessibility guidelines, which can be checked with one of the online contrast checkers as well), and provides similar low-contrast examples. It also makes links bold on hover, which moves the texts that follow them, and which is annoying.

- Viewport meta tag: this can be controversial, I think, but the tag itself is rather a hack to tell a browser "this page is not too broken, it can be rendered with a legible font size without breaking the markup". Teaching beginners to repeat that feels wrong both as promotion of such bad browser behavior, and as a road to potential misuse even of that (and the next version of the guide will have to include a new "this page really is not broken" invocation).

太辣眼睛了 That's an assault on the eyes

This is awesome!

Please just use: - https://techdevguide.withgoogle.com/ - https://www.freecodecamp.org/ - https://developer.mozilla.org/en-US/