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?
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.
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.
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.
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.
The growing irrelevance of the filesystem for the average computer user isn't a ln "epidemic" any more than the obsolescence of the CLI for the average person; it's just additional progress towards adapting computers to be more human-friendly rather than the reverse. We didn't used to have cars with automatic transmissions, cruise control, or blinkers that turned off on their own once you've finished turning, and no one describes the evolution evolution of the way we drove cars from decades ago to the present in the same language as a public health emergency.
Over time, technology becoming simpler to use by parts of the interface getting pushed down into implementation details is a good thing for the vast majority of people in the long run, and it's important for those of us who are technical not to mistake the requirement of a certain feature for the ability to access it. I think the biggest concern with the dominance mobile computing isn't that users might not need to know about the filesystem but that users might not have control of their own devices in the long run if the ability to access the filesystem is removed. There's precedent in getting support from the non-technical public to care about technical details when they understand how it affects them (e.g. right to repair, the pushback against SOPA/PIPA, net neutrality), but I that we'll miss the window to influence things similarly here if we focus on the wrong thing.
It's crazy how well mobile's robust security model has protected the suddenly computing masses.
And here I am shaking my fist insisting these are “directories” not “folders”… ;)
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.
[1]: https://meyerweb.com/eric/tools/css/reset/
As you point out, people who care will use some of the defaults and override others as they go along, but a small bit of effort goes a long way:
html, body {
margin: 0;
padding: 0;
}
body {
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3 {
overflow-wrap: break-word;
}https://www.cultofmac.com/news/files-app-makes-ipad-more-mac...
However, neither of them are typically used in mobile UX patterns.
It may not go over well but I don't think this is some generational thing. Its just plain pure laziness that has become epidemic.
>Joshua Drossman, ..the laundry basket where you have everything kind of together, and you’re just kind of pulling out what you need at any given time,” he says, attempting to describe his mental model.
>I try to be organized, but there’s a certain point where there are so many files that it kind of just became a hot mess
Yeah.....need I say more? Other than gross. I think those statements prove my point better than I can.
Like most on HN I'm extremely computer savvy and I've yet to find a way to avoid dealing with file/folder models and I've tried. All other ways fall apart no matter how "advanced" they are. Maybe it will change with LLMs but so far there is no way for the computer to anticipate what you do/don't want and organize for you.
They will, however, write a long Facebook comment explaining what is wrong and explaining that they cannot edit a wiki.
I'm probably around the average age on HN, so I grew up with early Windows. Yet after years of trying and failing to get into different note-taking/productivity apps, I finally found inner peace by using Obsidian and embracing the exact millenial "laundry basket" approach the article talks about. Maybe 10% of my notes are in a folder, the other 90% all together in the root. Turns out what mattered was 1. the lowest possible entry barrier to writing a note and 2. speed.
(Note: I have nothing to do with this project thus far and have nothing to gain from saying this.)
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.
The MDN tutorial is talking about img alt attributes before you even create a single .html file! That's how to put people off.
web.dev doesn't get as much love as MDN, but it totally should!
I'm very proud of my single file html document for reporting results.
Of course no JS!
I haven't got all the way through it, but seeing the contents drop-down made me feel at home.
I put document structure first so the content looks good with no styling and no class attributes. I use no divs, just the more sensible elements. Sections, Articles, Asides and Navs work for me. There should be headings at the start of these elements, optionally in a Header and optionally ending with a Footer. The main structure is Header - Main - Footer.
Really there should be a need to keep it simple, and that begins with the document structure. It is then possible with scoping to style the elements within a block without having to use any classes except for at the top of a block.
It infuriates me that we have gone the other way to make everything more and more complex. We have turned something everyone should be able to work with into an outsourced cottage industry. Nowadays the tool chain needed for frontend development is stupid and a true barrier to entry. Whenever you look under the hood there is nothing but bloat.
My approach requires strict adherence to a document structure, however, my HTML content is fully human readable and the content looks great without a stylesheet, albeit HTML 1.0 pre-Netscape looking.
Tim Berners Lee did not have class attributes in HTML 1.0 but he did want content sectioning. Now that there is CSS grid it is easy to style up a structured document. However, 'sea of divs' HTML requires 'display: contents' to massage the simplest of form to fit into a grid.
I feel that a guide is needed for experienced frontend developers that are still churning out 'sea of div' content. In the Mozilla guide for 'div' it says that it is the element of last resort. I never need the 'div' because there is always something better.
The CSS compilers are also redundant when working with scoping and structured content. Sadly my IDE is out of date so I have to put the scoping in at the end as it does not recognise @scope. Time to upgrade...
Anyway, brilliant guide, in the right direction and of great interest to me and my peculiar way of writing super neat content and styling.
The text is very well written, straightforward, welcoming, well structured. It seems easy and enjoyable to read.
I believe that putting html in non professional hands is a good goal.
Some feedback:
- About <meta charset="utf-8">, it seems to be introduced quite late. People comfortable with English but wanting to write their website in their own language might be surprised. Or even people with accents in their names (you are putting your name in the title, people will probably try this). You also say that it's for special characters like emojis, but you should probably say it's essential for most languages that are not purely ASCII (event English with words like cliché). Maybe you could introduce that earlier and say that it's there for historical reasons and that without it, you may have issues with characters. To be checked but it might be better to put it before <title>.
- body, head, html tags are mostly useless, except for html because of the lang attribute (accessibility + some browsers incorrectly offering to translate)
- vscode is a bit unfortunate because of the telemetry part, and seems quite heavy and complex for the task. On Windows, notepad++ is a great option. On Linux, any default text editor that's already installed will do. There's always codium, which is code without the bad parts. The intended target doesn't know about the bad parts, so they are installing spyware without knowing.
I didn't know about the aria current page feature, I'll start using this.
A main complication here is that people don't even know about character encodings, so you can't reasonably expect them to save index.html in UTF-8 in the first place. (For example Windows notepad would use the active code page by default.) I agree that it should be featured prominently if that saving issue can be also addressed.
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.
> 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.
He got confused a few years ago because "how can you have a folder inside a folder? Only files get put in folders".
Of course, he would not read this book.
If someone can't figure out how to make a folder but wants to write HTML, they have a problem this book should t be obligated to solve.
"What do I need?
You need a computer with internet access. I wrote this book in a generic way so that it would be applicable for people using macOS, Windows, or Linux. If I point you toward software to install, it will be free (or have a usable free tier) and will be cross-platform (or I will offer platform alternatives)." https://htmlforpeople.com/intro/#what-do-i-need%3F
Are you sure it's this bad, though, or are you not giving people the benefit of the doubt? How can it be this way? Is it due to people using cloud apps for everything?
In the past tech education felt useless because teachers were so far behind, maybe it’s time to revisit now because now the younger generation is far behind.
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?
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.
<textarea onkeyup='results.innerHTML=this.value'></textarea>
<div id=results></div> localStorage.setItem('text',results.innerHTML=this.value)I’ve recently decided to start adding to my website with just hand-written HTML, and slowly migrating the back catalogue. I love its directness, its ability for ad-hoc changes to a page and its robustness. After trying almost every system for publishing on the web under the sun; I’ve concluded HTML is the right tool for the job, even if it means a little extra work up front.
As a retired developer I’m happy to tinker with Rust or SQL or something embedded when the mood strikes, but when I want to write, I just want to write - and HTML kind of lets me do that. I think if more people saw HTML as a document to author rather than just a build target then we’d have a lot simpler systems. This mindset has resulted/allowed for a huge dumbing down of average computer/web users and huge headaches for developers. I can’t think who all the complexity we’ve brought into the world serves 99% of the time.
This resource might be one of the things that nudges us back on track.
Even though I’ve been working as a full-stack for quite a few years now I’ve been hooked while reading just imagining and remembering how magical building my first few websites used to be. I’m hoping this will get some more people to realize how easy it is to build your own webpage and how much fun it can be building your own little place on the internet.
People want to share their thoughts, stories, and photos. In my opinion, we need better tools to allow people to create their own sites without needing to code.
This can be applied to all topics. Knowing the basics of everything is better than knowing nothing.
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.
https://paste.dbohdan.com/internetingishard.netlify.app.1728...
I think that if you want to lower the contrast of a dark-on-light page—well, first, don't lower it too much [1], but second, it is better to make the background darker than the text lighter. Avoid thin faded text.
Here is a minimal edit to the page:
https://paste.dbohdan.com/internetingishard.netlify.app-edit...
This is #333 on an #f9f9f9 background (without the gradient to simplify things and with no change to the headings). I find it more pleasant to read.
However, I did become quite lazy and would never have continued maintaining it as raw HTML. I discovered PHP which gave me superpowers, but it is quite a paradigm shift. I wish I knew about static site generators sooner.
I even x-ed it at https://xcancel.com/brajeshwar/status/1812149514632925525
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.
Here's my user test:
https://news.pub/?try=https://www.youtube.com/embed/j_A2egms...
And, in any case, explaining what HTML stands for does not get anyone closer to understanding what it is.
I think it's a feature that this book doesn't throw technical jargon at the reader before they've even created anything useful yet.
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.
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.
I agree you can pretty much get there with plain HTML academically and in concept work, but this is not a helpful (or exciting) perspective for someone who is likely to be tasked with building non-trivial sites for others. A little bit of color and movement can go a long way in keeping the apprentice's attention.
<BODY BGCOLOR="#FF00FF">
<FONT COLOR="#FF0000">
<H1>My First Heading</H1>
</FONT>
I don't need to read farther than this, I'm never going to recommend this over freecodecamp. Let alone that a lot of people are usually on mobile during learning time, it just makes it too scary, too easy to mess up, too hard to share what you are doing to get help.
I 100% believe online sandboxes are the way to teach coding to people who aren't already comfortable with technical problem solving.
> Imagine if Word documents were only ever created by “Word professionals.”
But they are! OP explain how to create websites using basic text editors, and nobody is able to create a Word document using simple text or binary editors, apart from maybe a handful of gurus in Richmond.
If you really want to democratize HTML, an HTML editor is what you need. Otherwise, your teaching site will not attract much more people than any other teaching site.
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.
Uh, I don't think browsers have had the File toolbar for a long time, I just checked to make sure I'm not crazy and Firefox and Chrome on my system certainly don't.
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.
I don't know why people shouldn't be exposed to markup.
I also don't see how HTML is a poor format. It has its issues but fundamentally? Seems fine.
It's cool someone tries to make it reachable to more people.
Second, it's much more straightforward vs any tags (and remembering having to close them without any help in your plain text editor)
And is also much more discoverable in the intuitive interface with the full list of available styles right there with styled buttons so you don't need to think whether <u> is underline, underscore, or something else entirely.
That's the whole point of why this can't ever be for "everyone" - it requires too much knowledge that's not generally useful.
But yeah, with such a trivialization of the effort required, you'll never understand why people shouldn't be exposed to markup.
> It's cool someone tries to make it reachable to more people.
Not unless he misleads them