Show HN: HTML for People

283 pointsposted 11 hours ago
by blakewatson

93 Comments

simonw

8 hours ago

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?

acheong08

7 hours ago

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)

MathMonkeyMan

7 hours ago

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.

username135

7 hours ago

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.

layman51

6 hours ago

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.

MathMonkeyMan

6 hours ago

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

NavinF

2 hours ago

I grew up before cloud storage was mainstream, but I never thought the new model was confusing.

- Google Drive caches recent files and downloads other files on demand. Just like iCloud Drive, MS OneDrive, etc.

- Deleting files will free up space on your Google account.

- Clicking the "clear offline files" button will free up space on device.

All these offering are quite similar with just a few extra features here and there

mch82

43 minutes ago

It’s ridiculous how complicated it’s gotten to answer my parents’ questions about stuff like this. The old desktop metaphors are gone. Screens are difficult for older eyes to read. Every app has a cloud service. Really seems like huge step back in usability.

peterkelly

2 hours ago

Google drive follows the files and folders model that your father was expecting.

Suppafly

an hour ago

It gets confusing when you use all google services though, because while google photos technically use your drive space, they aren't really exposed that way. Android generally gives you a warning that when you delete a photo that it's also being removed from your cloud storage too though. But google photos will also constantly prompt you to let it delete your local copies and only have the cloud copies, so you end up having no idea what they are actually doing. Just drive itself is pretty straight forward though since it's mostly separate from the phone and deleting from the phone has no bearing on what's on drive, unless you deleting from within the drives app itself.

bartvk

6 hours ago

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.

JodieBenitez

38 minutes ago

I'm probably old, but we used to learn DOS prompt basics (and folders and files and stuff) in what would be the equivalent of junior high school in the US. And not in special courses, it was "normal". Heck, I was even introduced to Microsoft Basic at school while in the equivalent of 4th grade on these funny Thomson MO5 computers.

But that's not what they are taught now. They are taught to use social media and cloud services, which is completely useless since they figured this out themselves already.

The education system here just keeps them early in a consumer mind state. It has absolutely no ambition and is just a race to the bottom.

giobox

5 hours ago

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.

bo1024

2 hours ago

Are you sure they have a computer (i.e. something with a keyboard and a filesystem that it is possible to write and run programs on) at home?

dockd

4 hours ago

To keep that line of reasoning going, what is the purpose of the university, if you're supposed to learn everything on your own?

Suppafly

an hour ago

>To keep that line of reasoning going, what is the purpose of the university, if you're supposed to learn everything on your own?

It's not that you have to learn everything on your own though, it's that if you enter a program without having some understanding of the basics, you're going to have to pay to take a bunch of remedial classes.

It'd be like going for a mathematics degree when the highest class you took in high school was algebra, where the normal degree students would be starting with Calc 3 or Differential Equations. You might be ok in the major or you might not, but you don't even know enough to start on the path at that point.

lmm

36 minutes ago

That's exactly why I switched out of CS and did a degree in something that was harder to teach myself (mathematics).

I'm a programmer now, but I don't think finishing the CS course would've helped much with that.

james_marks

4 hours ago

I know this is sarcasm, but—

Network building, external proof of ability to work, and a place (and just as important - a time) to translate who you are into who you want to be.

These were always the reasons, the rest you learn on the job.

brailsafe

3 hours ago

Ya, I have to agree. Although you may learn, it's clearly not the primary intention of a University to teach anything but your ability to do whatever it takes to score well or do publishable research.

Suppafly

an hour ago

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

I learned CS ~20 years ago and it was mostly the same. Half of the first year is people that are vaguely interested in computers, video games, or heard it was a good way to make money, and didn't really have any real skills going into it.

It is somewhat different now, because there are students that think they are good with technology but really have no idea how things work, they just think they know because they are slightly better than their peers at using phones and tablets.

tiffanyh

7 hours ago

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.

al_borland

3 hours ago

Doesn’t Google Docs stores its files on Google Drive? What do they call the things they open to open an existing doc?

Suppafly

an hour ago

It does, but the file structure isn't really exposed unless you go looking for it. You mostly just work off your recent files and such.

0cf8612b2e1e

6 hours ago

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.

mckn1ght

4 hours ago

Sure, but I think the typical path for those who survive and strive in a CS program is to have touched a computer for the first time well before starting work on a college degree for it.

That's like trying to learn a foreign language by picking reading War and Peace in that language, without ever having seen a single translation to that language, or having already read War and Peace in your own. There are a lot of steps you need to take before then.

I would also be pretty surprised if a biology undergrad had never touched a microscope, possibly with the exception of the most impoverished among us. I imagine most people have tried one at some point along the K-12 journey, and there are more introductory treatments of e.g. life science on the way as well.

Starting CS without having "seen or touched" a computer would be like a biology undergrad who wouldn't be able to tell you whether a dog or a tree is a plant or animal.

Suppafly

an hour ago

>We do not reject new biology majors because they had never touched a microscope before entering the program.

No but you'd presumably make them take some remedial classes that the mainstream students wouldn't be required to take. Or maybe not, I'm not sure how it works in biology, but in the harder STEM majors, you're generally expected to have some basic knowledge beyond what the 'easy' track at high school required for graduation.

Novosell

6 hours ago

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.

brailsafe

3 hours ago

If you're saying that at one point in history, a given cohort of new CS students had never seen or touched a computer, I have my doubts, but it depends on how you define CS program. Before computer science was a formalized education stream, it had a variety of other names like "Business Computing" or something related to information technology, but you'd have to go pretty far back imo before you find a whole classroom of entrants into such a program that had never seen or touched a computer. By the time it was called CS, I do find it a bit of a reach that you'd find less than say 10% of students opting into taking it without that low bar being passed.

Likewise the biology example seems strange; sure maybe people haven't used a microscope specifically (unlikely imo), but they very likely have used any number of other implements and taken at least one secondary school biology course

bombcar

3 hours ago

It’s also just what people are familiar with and had to learn.

I know incredibly competent web developers who don’t know what SSH is or how to use it. Boggles my mind, but I grew up with it so it’s what I’m used to.

crooked-v

7 hours ago

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.

ordu

2 hours ago

> can't figure out how to unzip a zip or even finding out where files get downloaded to.

I have issues with that. FF doesn't show the path in the list of downloads. There is a button to start a file manager, but I have no file managers installed, so button doesn't work. In some cases I didn't find the better way than to copy the link and to download again with wget.

eddd-ddde

2 hours ago

If you don't have a file manager on your system chances are you can figure out where downloads are going to.

ordu

2 hours ago

Well, I manage it sometimes, but I then I forget how I did it. I think the way to do it, is to try to download something with ff again, but stop at the file chooser dialog to figure out where it points to.

tiborsaas

2 hours ago

You can configure FF that it will ask you each time, where you want to save the file.

rapind

2 hours ago

> apparently a large number of people these days don't understand files and folders at all!

And here I am shaking my fist insisting these are “directories” not “folders”… ;)

asoneth

7 hours ago

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

simonw

3 hours ago

That's a historic artifact. If a browser shipped new default CSS today it would break 30+ years of existing web pages.

MrVandemar

2 hours ago

Hyperbole. It wouldn't "break" all the web pages, they would simply render differently.

BirdEBird

6 hours ago

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.

divbzero

6 hours ago

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.

cryptoz

5 hours ago

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

jwagenet

5 hours ago

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.

cryptoz

5 hours ago

Aha! So some photos are actually 'files', but some are not! The confusion continues! I get why Apple has it this way - current iPhones are very very popular and selling them with the current UX makes Apple a lot of money.

But it's pretty clear that the Files app is not meant - in any way - to help users understand computers, what files are, etc. It is obtuse and confusing as soon as the user wants to leave the iOS ecosystem (even to go use a Mac).

nox101

5 hours ago

you're jumping to conclusions. One does not follow from the other.

(a) apple doesn't show users all the files on their iPhone

(b) apple makes lots of money

There is no evidence that a causes b. It's possible showing the files would make them even more money. It's also possible showing the files would have no effect on how much money they make.

jachee

6 hours ago

The five years since then haven’t been enough time to change 12 years of behavior.

mightybyte

8 hours ago

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

crabmusket

5 hours ago

I really hope so too. I really wonder what would happen if there was an alternative like... instead of spending X dozen hours learning how to use WordPress, or MS Word for that matter, people (in the general population) felt like spending those X dozen hours learning HTML was a viable and useful alternative to achieving their goals!

otteromkram

7 hours ago

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.

baggy_trough

7 hours ago

Super approachable. (sure Jan meme.gif)

Diti

5 hours ago

That’s the website my high school used in engineering sciences classes to give students an introduction to HTML. I don’t see the point of your comment (I think it’s sarcasm, but I’m not even sure), can you be a little bit more constructive?

dartharva

2 hours ago

The point may be that OP's guide is not meant for high school/engineering students, it is meant for everyone. MDN's "introductory" sections have too many big words to be of use to laypeople.

blakewatson

5 hours ago

OP here. I appreciate the kind words. Yeah, I hope it finds its way into the hands of non-professionals.

dartharva

2 hours ago

Will you add on to it to include custom CSS, or maybe a section for using different CSS templates (and where to find them), to make a slightly larger website like your own (blakewatson.com)?

forbiddenvoid

7 hours ago

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.

dartharva

2 hours ago

It's weird seeing this getting emphasized over and again in this thread.

> There are a shockingly large number of people out there that use computers EVERY day that won't know how to do this.

That's very hard to believe. Even my mom, who doesn't use computers at all, would know what folders and files mean.

The people who don't know what files and folders are - can't immediately be beneficiaries of this guide, right? They have a lot more fundamentals to cover before anything like this.

prisenco

39 minutes ago

As far as I've noticed, it's not older people who have the issue but younger. The average 22 year old today has been using mobile devices as their primary device for 10+ years. This is especially noticeable amongst poorer families, where a $20 a month low end financed android phone is much more of an option than a $300 computer.

forbiddenvoid

19 minutes ago

It's a bit of both, really. The typical computer or mobile user doesn't have general purpose computing knowledge or expertise. They don't know how their computer works or what any of the things in it ARE. They know how to follow a particular defined sequence of steps to get an outcome.

I worked over the phone tech support for a few years about 20 years ago, and it really opened my eyes to how far the gap is between the tech literate and everyday computer users.

I think this guide is terrific, for what it's worth. I just also think there's a lot more people out there that this guide SHOULD help, that it won't, because of that fundamental gap.

Retr0id

7 hours ago

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.

Novosell

6 hours ago

Android allows you to create directories.

Retr0id

6 hours ago

As does iOS, but the instructions given were for a desktop device.

blakewatson

5 hours ago

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.

aardvark179

8 hours ago

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.

blakewatson

5 hours ago

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!

divbzero

8 hours ago

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.

have_faith

8 hours ago

You're probably already aware, but <html>, <head> and <body> is optional in HTML5, so it's a "proper" document without them.

cryptoz

5 hours ago

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

al_borland

3 hours ago

Thank you for being one of the few people who realize TextEdit on the Mac supports plain text. The number of “experts” who say it doesn’t support it and tell people to download some other app drives me nuts.

messo

8 hours ago

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?

al_borland

3 hours ago

Schools should really be doing this. I had to make several personal websites in high school and college, that were just HTML and maybe a little CSS (or just old HTML styles). This should be everyone’s first step, imo. It’s a great way to write something and see results quickly and easily. It doesn’t even need a server.

blakewatson

5 hours ago

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.

Brajeshwar

an hour ago

A few months back, someone asked for suggestions on which new AI options to learn to beef up his marketing career. I told him to learn HTML first. That will be useful for a long time and will likely last his lifetime. After that, he can start learning others.

I even x-ed it at https://xcancel.com/brajeshwar/status/1812149514632925525

famahar

an hour ago

I love making stuff like this accessible for many people. Giving it a quick read and while I do find it more readable I think you can still lose people when you define terms. More fun analogies and simple silly (non technical looking) pictures could really help a concept sink in faster. Great work overall though.

gabrielsroka

7 hours ago

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>

amanzi

an hour ago

I still remember creating my first html page back in the 90s. It felt really magical creating it with just Notepad - changing the bgcolor of a page to red or blue or whatever, was amazing.

jimbosis

7 hours ago

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.

debacle

6 hours ago

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

eviks

an hour ago

> It’s for anybody, the way documents are for anybody. HTML is just another type of document.

You don't ask anybody to learn XML tags to edit a Word document in a plain text editor even though it's technically possible. Similarly, HTML is not "just another type", but one of the many poorly designed (especially so if CSS is added) document formats that no non-tech "anybody" should be exposed to

WYSIWYG is for anybody.

henning

9 hours ago

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.

autoexec

8 hours ago

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.

ErikAugust

9 hours ago

One additional book recommendation: HTML and CSS, the Good Parts.

stego-tech

7 hours ago

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.

al_borland

3 hours ago

I think CSS and JS should be things the user graduates to when they decide they need them, if they ever do.

Show someone basic HTML and most people will eventually look at their page and think, “this is neat, but how to I make this title red and change the background?” This is when to introduce the very basics of CSS.

If someone has a goal the learning process is easier and more exciting, because it’s relevant and allows them to learn something to give them a result they already want. Learning to learn is hard.

sova

an hour ago

HTML is not for people

krapp

an hour ago

I mean, HTML is a plain text format, it was literally made for people to write, and people wrote websites with it, by hand, for years. Literal children with almost no technical skills taught themselves to do it.

There was a time when it was easy. Even Javascript was easy. All of this stuff was made for people, but we've abstracted it away so only machines ever touch it and what used to be easy is now a dark art.

AlienRobot

8 hours ago

I'm happy to see more people recommending Neocities :D

al_borland

3 hours ago

I see far too many tutorials starting with git and GitHub, which is going to lose a lot of people and really not important on day 1.