Show HN: HTML for People

by blakewatson • 2 years ago

677 220 2 years ago

ErikAugust• 2 years ago

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

henning• 2 years 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• 2 years 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.

divbzero2• 2 years 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• 2 years ago

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

cryptoz3• 2 years 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'.

aardvark179• 2 years 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.

blakewatson8• 2 years 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!

vivzkestrel• 2 years ago

"Start typing already"

blakewatson8• 2 years ago

I went with "Get started already" :)

mightybyte• 2 years 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.)

otteromkram2• 2 years 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• 2 years ago

Super approachable. (sure Jan meme.gif)

thenameless7741• 2 years ago

As a technical person who recently taught myself frontend from scratch, I found https://web.dev/learn way more structured and thorough. The CSS lesson covers all the essentials and actually made me enjoy working with CSS.

web.dev doesn't get as much love as MDN, but it totally should!

IshKebab3• 2 years ago

HTML for People is waaaay more approachable than this. My wife could follow the HTML for People tutorial. It shows you how to create a real web page in a real browser without first bogging you down in coding details.

The MDN tutorial is talking about img alt attributes before you even create a single .html file! That's how to put people off.

greazy• 2 years ago

This is how I've been learning html + css. It's been fantastic and I treat it as THE docs for the web.

I'm very proud of my single file html document for reporting results.

Of course no JS!

blakewatson8• 2 years ago

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

dartharva3• 2 years 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)?

Theodores• 2 years ago

::backdrop was useful to me. Right now I am learning the last two years of stuff, refreshing my frontend skills. Things like scoping are a dream come true.

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.

crabmusket2• 2 years 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!

simonw2• 2 years 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?

_lvbh• 2 years 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)

MathMonkeyMan2• 2 years 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.

tiffanyh• 2 years 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.

crooked-v• 2 years 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.

bartvk• 2 years 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.

0cf8612b2e1e• 2 years 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.

bombcar• 2 years 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.

ordu2• 2 years 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.

necovek2• 2 years ago

I've been hacking at computers for almost 30 years, and I cannot figure out where a file gets downloaded to on a mobile (Android) phone.

treflop• 2 years ago

With all due respect, it's not like your average person who drives all the time knows how their car works at all either.

rectang• 2 years ago

It's crazy how bad the mobile epidemic has gotten.

It's crazy how well mobile's robust security model has protected the suddenly computing masses.

saghm• 2 years ago

As frustrating as I imagine it is to be in the position of having to figure out how to teach students things that seem like basics they should be aware of, I'd also argue that this issue actually stems from two circumstances that are worth this cost: the filesystem abstraction is increasingly unnecessary for non-technical people, and incoming students who want to study computer science aren't required to already have technical knowledge beyond that of their non-CS peers. The alternatives to where we're currently at would be either regressing the usability of interfaces for the overwhelming majority of people or taking away access to computer science education to people who didn't or couldn't go out of their way to learn topics that only matter to technical people in advance.

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.

asoneth2• 2 years 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.

simonw2• 2 years ago

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

chrisfinazzo• 2 years ago

There's a reason why the CSS ["reset"][1] is still with us - the lower level user-agent stylesheet never really adopted any of this stuff. Presumably, this was to reduce the delta between browser engines (vendor prefixes, etc, etc.) but it would be nice to see some movement in this area.

[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;
    }

BirdEBird• 2 years 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.

divbzero2• 2 years 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.

rapind• 2 years 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”… ;)

assimpleaspossi• 2 years ago

This fundamental understanding is a widespread disease I've had to argue with people--some of whom should know better but allow it anyway.

sureIy4• 2 years ago

Other than "directory came first", what's the reason why something is a "directory but not a folder"?

citizenpaul• 2 years ago

don't understand files and folder

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.

blakewatson8• 2 years ago

Yeah, I think you're right about that. I'm not sure whether I want to write something of an appendix myself and link to it, or find something else on the web and link to that.

maeil• 2 years ago

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!

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.

GoblinSlayer• 2 years ago

It's not a problem, consumers won't even edit a wiki, that's just what consumers are.

graemep• 2 years ago

As someone who is involved in a community run wiki, people will say "that page is wrong" and when you say "please edit it" will say "its too hard" or "I do not have they time".

They will, however, write a long Facebook comment explaining what is wrong and explaining that they cannot edit a wiki.

AlienRobot• 2 years ago

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

al_borland6• 2 years 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.

messo• 2 years 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?

blakewatson8• 2 years 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.

al_borland6• 2 years 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.

forbiddenvoid2• 2 years 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.

Retr0id2• 2 years 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.

Novosell2• 2 years ago

Android allows you to create directories.

prmoustache4• 2 years ago

So what? It is mentionned in the introduction that it is meant for computer users:

"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

IshKebab3• 2 years ago

So? How many people are editing HTML on their phones?

blakewatson8• 2 years 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.

globular-toast3• 2 years ago

If you're concerned about this I think the only solution is to get feedback from your audience somehow. Watching someone try to follow the instructions can be enlightening. I personally doubt it's that bad, I think people know how to create folders, but I might be wrong. If not, directing them to "<os> for dummies" might be a good move.

dartharva3• 2 years 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• 2 years 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.

unethical_ban• 2 years ago

My dad worked at NASA and built circuit boards that are currently in space.

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.

globular-toast3• 2 years ago

If this is true then it's very sad. Is this what people have been reduced to? I would have been able to follow these instructions as a child (in fact I did build my own website when I was 10).

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?

myaccountonhn• 2 years ago

It seems to be the case. See the other thread of people not knowing what a file system is.

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.

stego-tech2• 2 years 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_borland6• 2 years 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.

bob1029• 2 years ago

I think teaching all 3 at once is better. You can take a really simple vertical slice to demonstrate how they interact to compose the DOM. Then, spend the next 2 weeks inside dev tools explaining how to navigate the DOM and browser state. Establishing mapping between dev tools and the examples is where self sufficiency becomes feasible.

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.

card_zero• 2 years ago

Party like it's 1999:

  <BODY BGCOLOR="#FF00FF">
  <FONT COLOR="#FF0000">
  <H1>My First Heading</H1>
  </FONT>

https://werbach.com/barebones/barebones.html

jimbosis• 2 years 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.

otteromkram2• 2 years ago

Check out Mozilla's tutorials, too.

https://developer.mozilla.org/en-US/docs/Learn/HTML

networked• 2 years ago

I have to say, for me, https://internetingishard.netlify.app has uncomfortably pale body text. It is #5d6063 on an #fdfdfe background where I sampled it. (The background is `linear-gradient(0deg,#f9fafb 0,#fff)`.) The serif typeface looks too thin on a low-res display.

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.

[1] https://contrastrebellion.com/

gabrielsroka2• 2 years 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>

hyperhello• 2 years ago

Oh yes, that is easy enough and it works fine. It can even save with:

    localStorage.setItem('text',results.innerHTML=this.value)

gabrielsroka2• 2 years ago

i had the same thought: https://github.com/gabrielsroka/gabrielsroka.github.io/blob/...

debacle• 2 years 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.

al_borland6• 2 years 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.

amanzi• 2 years 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.

Brajeshwar2• 2 years ago

Same here; I stumbled on HTML for the first time in the '90s. I started with HotDog from the CDs that came in the magazines. https://brajeshwar.com/2024/hotdog-sausage-software/

krapp4• 2 years ago

I still remember sitting in my school library being blown away by framesets the first time I saw them.

tibordp• 2 years ago

Similar - I learned HTML by tweaking ReadMe.htm that was included with Dweep videogame from (now defunct) Dexterity Software.

sova4• 2 years ago

HTML is not for people

krapp4• 2 years 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.

sova4• 2 years ago

You think something that starts with "less than exclamation point" is made for people? "less than exclamation point minus minus" ah yes it just rolls off the tongue. HTML was clearly designed to add "semantic web" to the existing text data of the internet, no matter the cost to human readability. If it's "made for people" it's only in the roundabout fashion that eventually it gets hidden away by the interface to change the font color, etc.

famahar• 2 years 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.

Brajeshwar2• 2 years 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

eviks3• 2 years 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.

jraph5• 2 years ago

You need to learn WYSIWYG "codes" and "language" too. It's just that you probably already did so. "Select, then click on the B button to make it bold", or "click B, type, then click B again" is probably not straightforward at first.

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.

eviks3• 2 years ago

First, it's not a "just", but a huge benefit for the audience of "everyone"

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

jraph5• 2 years ago

Well done! I really like how you make people write bare text, publish it and bam, that works, just like this, and how you ease into html.

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.

lifthrasiir• 2 years ago

People comfortable with English but wanting to write their website in their own language might be surprised.

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.

voxic11• 2 years ago

As of Windows 10 1903 the default encoding for Notepad is UTF-8. I think its reasonable to expect relatively modern systems to default text to UTF-8.

morpheuskafka2• 2 years ago

Don't you actually need to set something in the text editor to save it as UTF-8 in the first place if you are going to put that tag? Wouldn't Notepad for example use UTF-16 by default like the rest of Windows?

jraph5• 2 years ago

You totally need to make sure the encoding is right indeed.

globular-toast3• 2 years ago

This is how I learnt to program as a kid around 1997. My dad taught me to do exactly this. I didn't have it up on Neocities, though, in fact I didn't put something on the public web till years later, should've done it sooner! So I just had my own little website with multiple pages that were meticulously maintained.

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.

pif• 2 years ago

Uhm, this post looks based on a flawed premise:

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.

RheingoldRiver3• 2 years ago

Step 1. Create a folder on your computer

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.

poulpy123• 2 years ago

I strongly disagree, someone who create a web site or learn to program needs to know the basic of the basic of using a computer

RheingoldRiver3• 2 years ago

it's not about knowing the basics of using a computer, it's about eliminating the possibility of tiny mistakes like 1 typo in a file name causing everything to break, which can put someone off coding forever

prmoustache4• 2 years ago

So basically you want to train a generation of copy/paster who don't understand what they are actually doing and who will never actually deploy anything because it is scary.

theoldways5• 2 years ago

Hey, at least those of us who can actually hack it will never run out of messes to bill time and a half to clean up!

theoldways5• 2 years ago

Should we get rid of the keyboard, too? After all, it's so complicated.

worble• 2 years ago

Alternatively, you can launch your browser first, click File > Open File…, then navigate to your index.html file.

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.

pasc1878• 2 years ago

I just tried Firefox, Vivaldi, Brave, Safari, Orion They all have File->Open File ...

Toorkit• 2 years ago

Sometimes they don't show up until you press Alt, but they're there.

darkdrog• 2 years ago

this is a great tutorial even for experienced programmers, many of them even don't understand the nature of website behind the coding , but this tutorial leads a wise way to illustrate this concept

lemonberry• 2 years ago

This is great, but most people don't care about coding or building their websites for scratch. Most people don't work on their own cars. Authors don't bind their own books.

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.

IshKebab3• 2 years ago

Yeah I agree that is true for most people, but there are also people who do want to code their own website from scratch, and for them this is a really good introduction.

sureIy4• 2 years ago

While you're right, I like to think that people, especially kids, would greatly benefit from seeing this stuff once or twice in their lifetime. They don't need to learn it or use it, but they will forever recognize it. And maybe one day they'll have to write that closing tag someone forgot.

This can be applied to all topics. Knowing the basics of everything is better than knowing nothing.

theoldways5• 2 years ago

People who don't care can continue to not read the things they don't want to read. But those same people should be prepared to pay money for someone else to care for them. This is not a new situation.

egypturnash2• 2 years ago

Is HTML ever actually defined in the beginning of this book? There’s a reference to what the acronym expands to when tags start getting introduced but the chapters before this never come out and say “HTML stands for HyperText Markup Language, and here are three sentences that very briefly explain what that means; we’ll be exploring that in much more detain in the coming chapters.”

egypturnash2• 2 years ago

I’m getting downvoted for this question but I think that is a pretty important thing to be getting out of the way in a book for someone who might not know what the heck HTML is, and why they might want to learn it!

runeks• 2 years ago

I disagree. People reading a book on how to write HTML already have an idea of what it is — why else would they read the book?

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.

brianzelip• 2 years ago

Here's a great podcast episode with the author about "home cooked apps", https://shoptalkshow.com/609/

WhiteOwlEd• 2 years ago

With OpenAI and other LLMs, web development is accelerating. For example, I put together a AI call center demo ( https://www.youtube.com/watch?v=Vv7mI_qRrhE ) by using Open AI o1-preview. There I could take a lot of different files on typescript and backend server stuff written in python. I would add logs into the mix to make one massive prompt, and then I would let the AI work on reasoning in the cases where I needed to accelerate the writing of additional code.

monkeynotes• 2 years ago

Don't coding LLMs kind of fill this gap? I can't imagine anyone who isn't a pro wanting to spend time learning HTML when they can just describe what they want in plain text and get something good enough.

jamiedumont• 2 years ago

This is a brilliant endeavour and incredibly well executed! I’ll certainly be bookmarking it to share with others.

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.

serverlord• 2 years ago

Someone should recreate HTML in Markdown just for fun.

itohihiyt• 2 years ago

I think this is great, my biggest stumbling block is deploying what I've created. I have a domain and need a host. The paragraph about deploying only covers hosting by a service you can't use you own domain on (as far as I can tell). It mentions netlify, which I assume would be an option if you have your own domain, however their website talks about shit but tells you nothing.

brunoarueira• 2 years ago

The concept is great, my father, which is a doctor, bought a minibook at a newsstand about HTML for dummies. At the time (maybe 98 upto 2000) explaining the good old markee, blink and other tags besides the basic HTML document composition. So, I think learn HTML is for everyone!

chrisldgk• 2 years ago

An absolutely great tutorial and something I wish I had when I first started playing around with HTML about 11 years ago (I’m 26, quite late to the party).

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.

breck• 2 years ago

Nicely done! Might be cool to offer a PDF version? It would be nice to zoom out and see all the content at once.

Here's my user test:

https://news.pub/?try=https://www.youtube.com/embed/j_A2egms...

ziaee-ashkan• 2 years ago

cool idea!

bethemoly• 2 years ago

Thanks for writing the book! I’m glad I came across it while learning how to make a website.

Show HN: HTML for People

Related Stories