This is great. The decision to skip CSS by depending on https://simplecss.org/ is smart - CSS is a whole other thing, and having that on top of basic HTML would be pretty intimidating.
I did worry a bit about https://htmlforpeople.com/zero-to-internet-your-first-websit... - "Step 1. Create a folder on your computer" - because apparently a large number of people these days don't understand files and folders at all! https://www.theverge.com/22684730/students-file-folder-direc...
Not sure how best to approach that though. Having a whole chapter of the book explaining files and folders feels pretty redundant. Maybe there's something good you could link to?
It's crazy how bad the mobile epidemic has gotten. There are kids coming into a Computer Science degree that can't figure out how to unzip a zip or even finding out where files get downloaded to. (Fwiw, those I know dropped out before 2nd year)
My dad was asking me a question about backing something up onto Google Drive, or saving space on some cloud storage account, or something.
He was using the mental model of files and folders -- that files exist and refer to stored bytes, and that there can be one or several copies of a file. There can be links to a file that take very little space relative to the file.
I had to tell him that I have no idea what sort of storage model these services expose, if any, and that the concept of a file system backed by a storage device is not the analogy that applications expose to their users these days.
He eventually understood, but I could feel his frustration -- that the mental model he had was really just chosen by a past moment in application design, and that what replaced it is nebulous and disempowering.
Can you elaborate on what you told your father?
When i use google drive, the interface appears to be folder/file structure. Whether it is or is made to look that way is irrelevant, i suppose, as long as it works that way. I can also increase storage by downloading/deleting things so Im a bit flummoxed.
I don't remember if he was trying to save space on his Google Drive or on his phone. His question was, mostly, that if he deleted files in one place, where would the space savings appear? I immediately thought of Windows' OneDrive and how it's sort of an automated rsync setup. I didn't know enough about his phone, which apps he was using, or about Google Drive to give an answer better than "I don't know, and I detect that some of your assumptions are probably wrong."
In my opinion, Google Drive is basically the same as the traditional file structure. Where it gets very confusing for people is when it comes to collaboration. Before 2020 or so, there was confusion around copying the same Google Doc so it appears in multiple locations, and making shortcuts to it instead. Look up stuff around the “Shift + Z” keyboard shortcut if you want to learn more.
I'd say half of my first-year CS students don't know how to create a folder with files, at the start of the school year. To me, it's nuts. But on the other hand, lots of students are very curious and come to learn. You can't blame them for not knowing something.
I try not to get overly-annoyed at this kind of thing too, but to me it just demonstrates an incredible lack of self-drive, or curiosity, especially in the CS domain.
If the students are genuinely curious, there is nothing to stop them learning about pretty much any topic in CS - really. There are few university subjects where the entire syllabus is freely available online in almost every format imaginable the way CS often is, and very often the computer you already have works just fine to learn it on.
At one point, every member of a CS program started without having ever seen or touched a computer. Everyone has to start somewhere. We do not reject new biology majors because they had never touched a microscope before entering the program.
The difference is that these days the people are surrounded by computers and probably interact with a computer many hours every day, yet they are barely more tech savvy than that first lot who had never seen a computer before.
But so it goes when society moves forward.
It can be even worse.
I've seen younger generation only use Google Docs and streaming services (music/video) and not even understand what a "file" is, because everything is just on the internet.
Calling it an "epidemic" isn't really helpful. The reason there's this shortcoming isn't because it's some problem inherent to those darn kids, it's because the state of computer education is expect them to just figure it out on their own when they have no need or reason to do so.
Good article, but the reason is obvious: When opening an app or a web app stopped opening a new document and started to present a list of recent documents, that was the beginning of the end. If someone wants a file, they open the app for that file and scroll down. They have never needed to make sense of a file existing independently of the app in which it was create and may be viewed. This process was cemented by iOS's absence of a file manager.
The Android Files app has always allowed access to local files, and the iOS Files app has allowed access to local files since 2019.
https://www.cultofmac.com/news/files-app-makes-ipad-more-mac...
However, neither of them are typically used in mobile UX patterns.
> the iOS Files app has allowed access to local files since 2019
Huh. I just opened my Files app on my iPhone 12 and went to On My iPhone (which was 2-3 more taps once arriving in the app). I don't see many of my files though, just a few. Some PDFs and a Spotify folder. But I don't see my pictures there? Or are pictures no longer stored as 'files'? Or do you mean that the app has allowed access only to some local user files? It's not all local files. And it's not all non-system local files. And it's not all user files. In fact it is missing > 99% of my user-space files (specifically ones created with default-OS applications on device, by the user).
And if I make a Note in the Notes app, will it show up as a file in the Files app? Probably not, I would guess. Because the note probably isn't really a file anyway. So pictures aren't files, and notes aren't files. What would a file be then? Are files only PDFs? That's the only thing that shows up for me. I guess PDFs are the only things that are files then!
Super confusing experience. I'm a mobile app developer by the way - on Android. Android sucks at this too of course. But the iOS Files app is much too limited to enable users to 'get' the concept of a file.
Photos taken on the camera, shared to you, or “saved to photos” will live in the Photos app. The files app primarily contains things you download from your web browser, including images downloaded and not “saved to photos” and images extracted from zip, etc. I guess some apps can save data there too. It would be nice if there was a back road to images stored in Photos app via Files app, but the distinction is otherwise well defined.
The five years since then haven’t been enough time to change 12 years of behavior.
> The decision to skip CSS by depending on https://simplecss.org/ is smart
I was always a little disappointed with how most web browsers choose to render HTML pages that had no explicit styling information. I'm not necessarily saying web browsers should have defaults as opinionated as simple.css, but the default page margins, padding, text styles, headings, etc that they picked aren't particularly attractive.
Opinionated web developers will override the defaults no matter what they are, but if the convention was to have more attractive defaults I wonder if that would have resulted in a larger share of personal websites and blogs created using plain HTML.
I think the fundamental approach being taken by this project is immensely valuable to the world. This kind of education about open standards might actually be the most powerful tool that can help us take steps in the direction away from giant opaque corporations and back towards the systems based on open standards that the internet originated from. I really hope this project continues to be updated and get more and more eyes and contributors. If you feel the same way, I'd say at least throw it a GitHub star. https://github.com/blakewatson/htmlforpeople
(Note: I have nothing to do with this project thus far and have nothing to gain from saying this.)
Mozilla has amazing documentation that's been around for years.
Here's their basic html tutorial section: https://developer.mozilla.org/en-US/docs/Learn/HTML
No one is or has been stopping people from learning HTML.
Super approachable. (sure Jan meme.gif)
OP here. I appreciate the kind words. Yeah, I hope it finds its way into the hands of non-professionals.
I love the idea and I'm thrilled to see more sites like this out there. But I do think this assumes a level of computer literacy that isn't consistent with typical, non-technical users.
Step 1 starts with:
> Pick a location on your computer and create a folder. Call it my-site or something similar.
You've already lost the vast majority of people right here. There are a shockingly large number of people out there that use computers EVERY day that won't know how to do this.
I suspect even a majority of HN users visited the page on a mobile device, and were not in a position to immediately follow the instructions.
Android allows you to create directories.
As does iOS, but the instructions given were for a desktop device.
OP here. Yeah, I was a bit worried about this, and even though I kind of mentioned it in the introduction, I think it deserves more attention. I'm not sure if I want to write something and host it myself, or maybe just point people to some kind of primer on creating files and folders.
I love the order of tutorial, starting simple to deploy something first:
1. Use Notepad/TextEdit to create a plain text index.html.
2. Deploy index.html to Neocities or similar.
3. Add content with headings and images.
And only then going back to:
4. Make it proper HTML with <head> and <body>.
5. Upgrade Notepad/TextEdit to Visual Studio Code.
You're probably already aware, but <html>, <head> and <body> is optional in HTML5, so it's a "proper" document without them.
Isn't doctype still required by the spec in HTML5 in order to be "proper"? Perhaps I'm mistaken but I thought I remembered that it's technically 'required'.
Why, “Start coding already!” rather than something like, “Start writing already?” I think half the barrier to people building sites is that they think they need to know how to code, and that seems scary, but they do know what they want to write, and that seems more approachable.
OP here. Oooh that’s a good suggestion. Yeah it’s hard to shed the webdev persona and see it through fresh eyes—even though I specifically tried to do just that!
> I don’t think websites were ever intended to be made only by “web professionals.”
I absolutely agree with this, in both directions - the tools we have kind of suck if the web WAS meant for professionals, but also that I remember learning HTML from tutorials in 1995, and back then there wasn't much of a difference between a good website or a great website except that a good website used a table based layout and didn't have prev/next navigation.
I have tried so many times to convince non-technical people that they can put together their own website quite easily, but so often they think I'm joking and that it requires a lot of effort.
Next time I'll refer the to this site and ask them to give it half an hour and see what they can create in that time. I know that so many would get hooked if they just get that first taste of "wow, i just published something on the actual web!"
@blakewatson: Any plans to add i18n to the site and accepting pull requests for translations?
Yes! I would love that. I need to update the readme, but I think my strategy would be to place translated chapters in a subfolder, (eg, "/es"). I can configure Eleventy to generate a different nav menu based on the subpath.
I plan to dig in deeper, but this looks like a great introduction to building websites.
I teach a one semester high school Web Design class and currently use a mixture of lessons from these two for learning the basics of making pages by hand with HTML and CSS:
https://internetingishard.netlify.app/
https://www.washington.edu/accesscomputing/webd2/student/ind...
This looks very promising and could supplant or at the very least supplement those.
Check out Mozilla's tutorials, too.
Would something like this work instead of using Notepad/TextEdit (at least at first)? Of course, this code could be made better...
<textarea onkeyup='results.innerHTML=this.value'></textarea>
<div id=results></div>This is great. I love you how started with a tiny HTML file and didn't immediately ask the user to install NodeJS and VS Code and a ton of other webdev shit.
This is a lesson that a lot of professionals could stand to relearn. They don't actually need hundreds of MBs of JS to display basic text and images. Accessibility and failing gracefully are way too often ignored.
We sorely need more of this. HTML was the first language I actually understood (although BASIC was my first ever), and left me feeling empowered to carve out my own survival on the internet. While layering CSS and Javascript aren't bad decisions on their face, I do think they combine to create a steep barrier to entry for most newcomers as they're believed to be "Core" to the language of HTML itself.
Kudos to the author(s) for the site. I'll have to add it to my arsenal as a "next step" for folks who want something more custom than WP/Ghost on PikaPods w/ a theme, or who just really want to be totally independent.
One additional book recommendation: HTML and CSS, the Good Parts.
I'm happy to see more people recommending Neocities :D