18 ms·

Show HN: HTML for People

677 points by blakewatson 2y ago

sova 2y ago
HTML is not for people
- krapp 2y 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.
  - sova 2y 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.
    - krapp 2y ago
      Human beings are capable of dealing with abstract forms of expression other than natural language. Musicians deal with music notation. Stenographers write in shorthand. Mathematical notation. No programming language with its brackets and parentheses "rolls off the tongue" either but human beings nevertheless write code. HTML is just one such abstraction, concerned with adding markup and hyperlinks to a digital simulation of a paper document. HTML is "made for people" because it's a text-based markup format intended to be edited by people when designing a web page, simple as. If it were made for machines it would be a binary bytecode format. It isn't because it's meant for human beings to read and write. And human beings are capable of reading it and writing it. I don't know what to tell you. This is simple, straightforward fact, but you seem weirdly offended by the mere premise.
      - sova 2y ago
         All I'm saying is that if you were to make a semantic markup of English today, would you really want to use keyboard-convenient glyphs just because it's hardware-convenient? What would be the best way to add markup to English? It seems like an unexplored question. And if we were to explore it, we would find many alternatives, ranking much higher on the "for people" scale than HTML.
        krapp 2y ago
        >All I'm saying is that if you were to make a semantic markup of English today, would you really want to use keyboard-convenient glyphs just because it's hardware-convenient? HTML is not a semantic markup of English, it's a semantic markup of digital text documents. Yes, you would want to use keyboard-convenient glyphs to express this markup because the keyboard is the primary means by which a human inputs text into a computer, which itself is the primary means by which HTML documents are viewed. Also because HTML operates primarily within the context of typography, in other words, because the data that HTML marks up also consists of keyboard convenient glyphs. It only makes sense to use text glyphs to describe the transformation of text glyphs within the context of a textual medium of communication. Even Markdown is essentially the same thing. There's little real difference between surrounding a word in asterisks versus <strong> or <b> tags to denote bold text, other than aesthetics. >And if we were to explore it, we would find many alternatives, ranking much higher on the "for people" scale than HTML. Like what? Interpretive dance? Arcane gestures? Singing the markup into being? People have been using written language for thousands of years, representing written language with type for centuries, and using keyboards as an interface for generating text since long before computers were invented. It all seems to work just fine for many people. I'm curious what you think would be better.
        sova 2y ago
        IF it is not a challenge to invent new glyphs and manufacture new keys, then perhaps we can rethink the markup as well. It is a rather open-ended question and I appreciate your asking. I have some thoughts, mainly inspired by the original inspiration to things like cascading styles, which was an inheritance of concepts and a jumble loosely associated with how magazines are structured and arranged / composed on a series of pages that flip together and have images and text. It seems that there are, by now, largely, conventions that are stuck to in the online realm, so maybe there is an amazing shorthand we could develop to get the same point across, now. What we are discussing is becoming closer and closer a reality because the amount of code pressing TAB will output (autocomplete) is increasing, and evening time and sunset time on actual "coding" might happen in our lifetimes. Perhaps not for microprocessors on solo devices requiring direct register access and pointer circuiting, but the trend is that less or fewer keystrokes can produce just as rich content. The markup language makes it "hypertext," right? ꜐expandꜘourꜛglyph꜅workꜝ Wikipedia has something closer to what I envision as what the dudes who done did CSS done thought. Someothing closer to arranging your magazine on the page for others to surf, and also link it with other pages. The soothing letters of English and their stradivarian font-signatures so carefully plucked and delicately labored on in the ethers of Apple headquarters, are bruised and battered by slashing and elbowing />
ErikAugust 2y ago
One additional book recommendation: HTML and CSS, the Good Parts.
henning 2y 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 2y 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.
divbzero 2y 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 2y ago
  You're probably already aware, but <html>, <head> and <body> is optional in HTML5, so it's a "proper" document without them.
  - deleted 2y ago
    [deleted]
  - cryptoz 2y 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'.
    - edflsafoiewq 2y ago
      It enables quirks mode when missing.
    - wild_egg 2y ago
      The only elements that are absolutely required are doctype and a non-empty title. Most minimal valid HTML doc: <!DOCTYPE html> <title>Foo</title>
      - sureIy 2y ago
        Correct. Fun fact: you do not need to close most tags in a valid HTML5 document. This is valid: <!DOCTYPE html> <title>Foo</title> <p>paragraph <p>second <ul> <li>item </ul> <table> <tr><td>hi! </table>
aardvark179 2y 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 2y 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 2y ago
    "Start typing already"
    - xnorswap 2y ago
      "Start creating already" People don't want to be typists either, they want to be creators.
- blakewatson 2y ago
  I went with "Get started already" :)
mightybyte 2y 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 https://github.com/blakewatson/htmlforpeople (Note: I have nothing to do with this project thus far and have nothing to gain from saying this.)
- otteromkram 2y 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 https://developer.mozilla.org/en-US/docs/Learn/HTML No one is or has been stopping people from learning HTML.
  - baggy_trough 2y ago
    Super approachable. (sure Jan meme.gif)
    - Diti 2y 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 2y 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.
  - 2y ago
simonw 2y ago
This is great. The decision to skip CSS by depending on https://simplecss.org/ 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-website/ 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-directory-structure-education-gen-z 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?
- GoblinSlayer 2y ago
  It's not a problem, consumers won't even edit a wiki, that's just what consumers are.
  - graemep 2y 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.
- _lvbh 2y 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 2y 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.
AlienRobot 2y ago
I'm happy to see more people recommending Neocities :D
- al_borland 2y 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 2y 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?
- blakewatson 2y 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_borland 2y 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.
forbiddenvoid 2y 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.
- Retr0id 2y 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 2y ago
    Android allows you to create directories.
    - Retr0id 2y ago
      As does iOS, but the instructions given were for a desktop device.
  - prmoustache 2y 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 https://htmlforpeople.com/intro/#what-do-i-need%3F
  - IshKebab 2y ago
    So? How many people are editing HTML on their phones?
- 2y ago
stego-tech 2y 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 2y 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 2y 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.
    - al_borland 2y ago
      If we are talking about non-technical people simply making documents for the web, I don’t think they ever really need to know what the DOM, dev tools, or state is. They’ll never really run into that, as the sites will be rather trivial, and that’s ok. For someone looking to be a web developer, I can see where some would need a faster ramp up to hold their interest, but they should also still know that it can be this simple. I saw a video not long ago where someone asked a bunch of people who just finished a web dev bootcamp to make a basic HTML file and put it on the web, much like what this tutorial does in the first couple steps. Most of them couldn’t do it. If someone can make a page using React, but can’t make a simple HTML page, I think that’s a problem. It leads to a lot of overly complex solutions, because they were never taught how simple it can really be. Even for technical folks, their area of expertise may fall outside of the web, but they still want a web page to share information. The basics are perfect and often used. Dennis Ritchie’s page was a perfect example of that. A lot of people from this era have similar sites. https://www.bell-labs.com/usr/dmr/www/ https://www.bell-labs.com/usr/dmr/www/
jimbosis 2y 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://internetingishard.netlify.app/ https://www.washington.edu/accesscomputing/webd2/student/index.html https://www.washington.edu/accesscomputing/webd2/student/ind... This looks very promising and could supplant or at the very least supplement those.
- otteromkram 2y ago
  Check out Mozilla's tutorials, too. https://developer.mozilla.org/en-US/docs/Learn/HTML https://developer.mozilla.org/en-US/docs/Learn/HTML
- networked 2y ago
  I have to say, for me, https://internetingishard.netlify.app 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.1728647160.png 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-edited.1728647177.png 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/ https://contrastrebellion.com/
gabrielsroka 2y 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 2y ago
  Oh yes, that is easy enough and it works fine. It can even save with: localStorage.setItem('text',results.innerHTML=this.value)
  - gabrielsroka 2y ago
    i had the same thought: https://github.com/gabrielsroka/gabrielsroka.github.io/blob/master/html/index.html https://github.com/gabrielsroka/gabrielsroka.github.io/blob/...
debacle 2y 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_borland 2y 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 2y 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.
- Brajeshwar 2y 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/ https://brajeshwar.com/2024/hotdog-sausage-software/
  - krapp 2y ago
    I still remember sitting in my school library being blown away by framesets the first time I saw them.
  - tibordp 2y ago
    Similar - I learned HTML by tweaking ReadMe.htm that was included with Dweep videogame from (now defunct) Dexterity Software.
famahar 2y 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.
Brajeshwar 2y 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 https://xcancel.com/brajeshwar/status/1812149514632925525
eviks 2y 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.
- jraph 2y 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.
  - eviks 2y 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
    - crabmusket 2y ago
      I'd really like for there to be a WYSIWYG editor that works on HTML, something the level of complexity of like WordPad (which can make RTF files). But supporting the full range of HTML tags like <details>, <table> etc.
    - 2y ago
jraph 2y 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 2y 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 2y 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.
globular-toast 2y 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 2y 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.
RheingoldRiver 2y 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 2y 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
  - RheingoldRiver 2y 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
    - ickelbawd 2y ago
      If making one mistake is enough to put one off forever then they’re really not going to like programming which is just a sequence of writing bugs and fixing bugs. :)
    - morpheuskafka 2y ago
      > tiny mistakes like 1 typo in a file name causing everything to break, which can put someone off coding forever One typo in your math or chemistry homework will quite likely give you the wrong final answer, but hopefully that wouldn't "put you off science" forever. Otherwise none of us would be here as I'm sure we have all made hundreds or more. Are we not expecting students to be resilient and solve problems anymore? One of the Common Core standards that used to be on the classroom wall was "persevere in problem solving." I say it's great for students to make a few easy mistakes like forgetting a semicolon to get in the habit of reading error messages and troubleshooting while they are still straightforward to fix.
worble 2y 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 2y ago
  I just tried Firefox, Vivaldi, Brave, Safari, Orion They all have File->Open File ...
- Toorkit 2y ago
  Sometimes they don't show up until you press Alt, but they're there.
darkdrog 2y 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 2y 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.
- IshKebab 2y 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.
- sureIy 2y 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.
- theoldways 2y 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.
egypturnash 2y 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.”
- egypturnash 2y 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 2y 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 2y ago
Here's a great podcast episode with the author about "home cooked apps", https://shoptalkshow.com/609/ https://shoptalkshow.com/609/
WhiteOwlEd 2y 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 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 2y 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 2y 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 2y ago
Someone should recreate HTML in Markdown just for fun.
itohihiyt 2y 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 2y 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!
bethemoly 2y ago
Thanks for writing the book! I’m glad I came across it while learning how to make a website.
chrisldgk 2y 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 2y 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_A2egmsT0g?si=0iamrS9dDK2OCGAr https://news.pub/?try=https://www.youtube.com/embed/j_A2egms...
ziaee-ashkan 2y ago
cool idea!

677 points by blakewatson 2y ago

sova 2y ago

HTML is not for people

krapp 2y 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.
- sova 2y 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.
  - krapp 2y ago
    Human beings are capable of dealing with abstract forms of expression other than natural language. Musicians deal with music notation. Stenographers write in shorthand. Mathematical notation. No programming language with its brackets and parentheses "rolls off the tongue" either but human beings nevertheless write code. HTML is just one such abstraction, concerned with adding markup and hyperlinks to a digital simulation of a paper document. HTML is "made for people" because it's a text-based markup format intended to be edited by people when designing a web page, simple as. If it were made for machines it would be a binary bytecode format. It isn't because it's meant for human beings to read and write. And human beings are capable of reading it and writing it. I don't know what to tell you. This is simple, straightforward fact, but you seem weirdly offended by the mere premise.
    - sova 2y ago
       All I'm saying is that if you were to make a semantic markup of English today, would you really want to use keyboard-convenient glyphs just because it's hardware-convenient? What would be the best way to add markup to English? It seems like an unexplored question. And if we were to explore it, we would find many alternatives, ranking much higher on the "for people" scale than HTML.
      - krapp 2y ago
        >All I'm saying is that if you were to make a semantic markup of English today, would you really want to use keyboard-convenient glyphs just because it's hardware-convenient? HTML is not a semantic markup of English, it's a semantic markup of digital text documents. Yes, you would want to use keyboard-convenient glyphs to express this markup because the keyboard is the primary means by which a human inputs text into a computer, which itself is the primary means by which HTML documents are viewed. Also because HTML operates primarily within the context of typography, in other words, because the data that HTML marks up also consists of keyboard convenient glyphs. It only makes sense to use text glyphs to describe the transformation of text glyphs within the context of a textual medium of communication. Even Markdown is essentially the same thing. There's little real difference between surrounding a word in asterisks versus <strong> or <b> tags to denote bold text, other than aesthetics. >And if we were to explore it, we would find many alternatives, ranking much higher on the "for people" scale than HTML. Like what? Interpretive dance? Arcane gestures? Singing the markup into being? People have been using written language for thousands of years, representing written language with type for centuries, and using keyboards as an interface for generating text since long before computers were invented. It all seems to work just fine for many people. I'm curious what you think would be better.
        sova 2y ago
        IF it is not a challenge to invent new glyphs and manufacture new keys, then perhaps we can rethink the markup as well. It is a rather open-ended question and I appreciate your asking. I have some thoughts, mainly inspired by the original inspiration to things like cascading styles, which was an inheritance of concepts and a jumble loosely associated with how magazines are structured and arranged / composed on a series of pages that flip together and have images and text. It seems that there are, by now, largely, conventions that are stuck to in the online realm, so maybe there is an amazing shorthand we could develop to get the same point across, now. What we are discussing is becoming closer and closer a reality because the amount of code pressing TAB will output (autocomplete) is increasing, and evening time and sunset time on actual "coding" might happen in our lifetimes. Perhaps not for microprocessors on solo devices requiring direct register access and pointer circuiting, but the trend is that less or fewer keystrokes can produce just as rich content. The markup language makes it "hypertext," right? ꜐expandꜘourꜛglyph꜅workꜝ Wikipedia has something closer to what I envision as what the dudes who done did CSS done thought. Someothing closer to arranging your magazine on the page for others to surf, and also link it with other pages. The soothing letters of English and their stradivarian font-signatures so carefully plucked and delicately labored on in the ethers of Apple headquarters, are bruised and battered by slashing and elbowing />

ErikAugust 2y ago

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

henning 2y 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 2y 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.

divbzero 2y 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 2y ago
You're probably already aware, but <html>, <head> and <body> is optional in HTML5, so it's a "proper" document without them.
- deleted 2y ago
  [deleted]
- cryptoz 2y 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'.
  - edflsafoiewq 2y ago
    It enables quirks mode when missing.
  - wild_egg 2y ago
    The only elements that are absolutely required are doctype and a non-empty title. Most minimal valid HTML doc: <!DOCTYPE html> <title>Foo</title>
    - sureIy 2y ago
      Correct. Fun fact: you do not need to close most tags in a valid HTML5 document. This is valid: <!DOCTYPE html> <title>Foo</title> <p>paragraph <p>second <ul> <li>item </ul> <table> <tr><td>hi! </table>

aardvark179 2y 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 2y 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 2y ago
  "Start typing already"
  - xnorswap 2y ago
    "Start creating already" People don't want to be typists either, they want to be creators.
blakewatson 2y ago
I went with "Get started already" :)

mightybyte 2y 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 https://github.com/blakewatson/htmlforpeople (Note: I have nothing to do with this project thus far and have nothing to gain from saying this.)

otteromkram 2y 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 https://developer.mozilla.org/en-US/docs/Learn/HTML No one is or has been stopping people from learning HTML.
- baggy_trough 2y ago
  Super approachable. (sure Jan meme.gif)
  - Diti 2y 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 2y 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.
- 2y ago

simonw 2y ago

This is great. The decision to skip CSS by depending on https://simplecss.org/ 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-website/ 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-directory-structure-education-gen-z 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?

GoblinSlayer 2y ago
It's not a problem, consumers won't even edit a wiki, that's just what consumers are.
- graemep 2y 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.
_lvbh 2y 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 2y 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.

AlienRobot 2y ago

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

al_borland 2y 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 2y 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?

blakewatson 2y 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_borland 2y 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.

forbiddenvoid 2y 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.

Retr0id 2y 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 2y ago
  Android allows you to create directories.
  - Retr0id 2y ago
    As does iOS, but the instructions given were for a desktop device.
- prmoustache 2y 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 https://htmlforpeople.com/intro/#what-do-i-need%3F
- IshKebab 2y ago
  So? How many people are editing HTML on their phones?
2y ago

stego-tech 2y 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 2y 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 2y 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.
  - al_borland 2y ago
    If we are talking about non-technical people simply making documents for the web, I don’t think they ever really need to know what the DOM, dev tools, or state is. They’ll never really run into that, as the sites will be rather trivial, and that’s ok. For someone looking to be a web developer, I can see where some would need a faster ramp up to hold their interest, but they should also still know that it can be this simple. I saw a video not long ago where someone asked a bunch of people who just finished a web dev bootcamp to make a basic HTML file and put it on the web, much like what this tutorial does in the first couple steps. Most of them couldn’t do it. If someone can make a page using React, but can’t make a simple HTML page, I think that’s a problem. It leads to a lot of overly complex solutions, because they were never taught how simple it can really be. Even for technical folks, their area of expertise may fall outside of the web, but they still want a web page to share information. The basics are perfect and often used. Dennis Ritchie’s page was a perfect example of that. A lot of people from this era have similar sites. https://www.bell-labs.com/usr/dmr/www/ https://www.bell-labs.com/usr/dmr/www/

jimbosis 2y 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://internetingishard.netlify.app/ https://www.washington.edu/accesscomputing/webd2/student/index.html https://www.washington.edu/accesscomputing/webd2/student/ind... This looks very promising and could supplant or at the very least supplement those.

otteromkram 2y ago
Check out Mozilla's tutorials, too. https://developer.mozilla.org/en-US/docs/Learn/HTML https://developer.mozilla.org/en-US/docs/Learn/HTML
networked 2y ago
I have to say, for me, https://internetingishard.netlify.app 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.1728647160.png 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-edited.1728647177.png 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/ https://contrastrebellion.com/

gabrielsroka 2y 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 2y ago
Oh yes, that is easy enough and it works fine. It can even save with: localStorage.setItem('text',results.innerHTML=this.value)
- gabrielsroka 2y ago
  i had the same thought: https://github.com/gabrielsroka/gabrielsroka.github.io/blob/master/html/index.html https://github.com/gabrielsroka/gabrielsroka.github.io/blob/...

debacle 2y 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_borland 2y 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 2y 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.

Brajeshwar 2y 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/ https://brajeshwar.com/2024/hotdog-sausage-software/
- krapp 2y ago
  I still remember sitting in my school library being blown away by framesets the first time I saw them.
- tibordp 2y ago
  Similar - I learned HTML by tweaking ReadMe.htm that was included with Dweep videogame from (now defunct) Dexterity Software.

famahar 2y 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.

Brajeshwar 2y 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 https://xcancel.com/brajeshwar/status/1812149514632925525

eviks 2y 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.

jraph 2y 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.
- eviks 2y 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
  - crabmusket 2y ago
    I'd really like for there to be a WYSIWYG editor that works on HTML, something the level of complexity of like WordPad (which can make RTF files). But supporting the full range of HTML tags like <details>, <table> etc.
  - 2y ago

jraph 2y 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 2y 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 2y 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.

globular-toast 2y 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 2y 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.

RheingoldRiver 2y 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 2y 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
- RheingoldRiver 2y 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
  - ickelbawd 2y ago
    If making one mistake is enough to put one off forever then they’re really not going to like programming which is just a sequence of writing bugs and fixing bugs. :)
  - morpheuskafka 2y ago
    > tiny mistakes like 1 typo in a file name causing everything to break, which can put someone off coding forever One typo in your math or chemistry homework will quite likely give you the wrong final answer, but hopefully that wouldn't "put you off science" forever. Otherwise none of us would be here as I'm sure we have all made hundreds or more. Are we not expecting students to be resilient and solve problems anymore? One of the Common Core standards that used to be on the classroom wall was "persevere in problem solving." I say it's great for students to make a few easy mistakes like forgetting a semicolon to get in the habit of reading error messages and troubleshooting while they are still straightforward to fix.

worble 2y 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 2y ago
I just tried Firefox, Vivaldi, Brave, Safari, Orion They all have File->Open File ...
Toorkit 2y ago
Sometimes they don't show up until you press Alt, but they're there.

darkdrog 2y 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 2y 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.

IshKebab 2y 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.
sureIy 2y 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.
theoldways 2y 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.

egypturnash 2y 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.”

egypturnash 2y 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 2y 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 2y ago

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

WhiteOwlEd 2y 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 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 2y 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 2y 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 2y ago

Someone should recreate HTML in Markdown just for fun.

itohihiyt 2y 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 2y 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!

bethemoly 2y ago

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

chrisldgk 2y 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 2y 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_A2egmsT0g?si=0iamrS9dDK2OCGAr https://news.pub/?try=https://www.youtube.com/embed/j_A2egms...

ziaee-ashkan 2y ago

cool idea!