I always like mentioning neocities in this context:
It's one if those gems in the Internet
Make Your Own Website: A beginner's guide
21–30 of 51 posts
Re: Make Your Own Website: A beginner's guide
#22> 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.).
Re: Make Your Own Website: A beginner's guide
#23Please just use: - https://techdevguide.withgoogle.com/ - https://www.freecodecamp.org/ - https://developer.mozilla.org/en-US/
I'm happy I didn't start with those, or I would have probably never become a web developer.
It's surprising how often people recommend especially the MDN Web Docs to total beginners, when I've never seen any beginner enjoy or be able to use them. It's an amazing resource, but their content is not good for beginner web devs or people new to coding.
From my experience, beginners have a much better time with something like the InternetingIsHard guide.
Re: Make Your Own Website: A beginner's guide
#24I 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 acce…
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...
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=...
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:
Re: Make Your Own Website: A beginner's guide
#25[dead]
Re: Make Your Own Website: A beginner's guide
#26A 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 backgr…
They are also inconsistent and wrong about the usage of a closing slash on the tag. No HTML tag uses or needs a closing slash and never has in any HTML standard.
And before anyone replies, "But...but...XHTML!", XHTML is XML, not HTML.
Re: Make Your Own Website: A beginner's guide
#27A 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 backgr…
They are also inconsistent and wrong about the usage of a closing slash on the tag. No HTML tag uses or needs a closing slash and never has in any HTML standard. The W3C Validator will flag this and even warn about potential problems doing it that way.
And before anyone replies, "But...but...XHTML!", XHTML is XML, not HTML.
Re: Make Your Own Website: A beginner's guide
#28No, we should teach React to beginners! ;)
Better to put that /s or so there, before someone takes this literally.
Re: Make Your Own Website: A beginner's guide
#29I 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 acce…
Elegantly cool. Good job.
Re: Make Your Own Website: A beginner's guide
#30I always like mentioning neocities in this context: https://neocities.org/ It's one if those gems in the Internet
Nekoweb is great too !