Email or username:

Password:

Forgot your password?
Blake Watson :prami:

The wait is over. HTML for People is OUT NOW!

I feel strongly that anyone should be able to make a website with HTML if they want. This web book will teach you how to do just that. It doesnโ€™t require any previous experience making websites or coding. I will cover everything you need to know to get started in an approachable and friendly way.

And itโ€™s free for all. ๐Ÿš€

htmlforpeople.com

214 comments
Adam Piggott

@bw Congrats, any efforts to lighten the Web and return it to the people are worthwhile.

I noticed that the request to htmlforpeople.com/assets/js/he is currently serving a redirect loop but thankfully it doesn't seem to affect the site functionality.

Blake Watson :prami:

@proactiveservices Thanks! Yeah, I had some DNS issues there for a bit, but I think I got them sorted out now.

Adam Piggott

@bw I'll get the DNS bell for you ๐Ÿ””

Blake Watson :prami:

@proactiveservices futzing with DNS is a rite of passage for sure ๐Ÿ˜…

Marcus Grant

@bw @proactiveservices this may as well be a part of the book because DNS is like half or more of the issues youโ€™ll encounter hosting on the web

Adam Piggott

@marcus_grant Maybe, but it an educational resource can be more effective when it sticks at what it's aimed at. Could just be a chapter that says "It's always DNS" in large, friendly print.
@bw

Amin Hollon ๐Ÿ‡บ๐Ÿ‡ธ๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‡ฎ๐Ÿ‡ณ๐Ÿ‡ฆ๐Ÿ‡ซ

@bw

This looks really good! Iโ€™ll take a deeper look later and will probably start recommending it to people. :D

13 barn owls in a trench coat

@bw I am going to use this to update my skills and make abominations, thank you so much <3

Lunar ๐Ÿ›ธ โ™พ

@bw I look forward to having a read. Thanks for doing this!

Robert Birming

@bw Congrats to the launch! ๐Ÿš€ Such a wonderful contribution! Iโ€™ve added it to the HTML section here:
birming.com/blog-inspiration/

7sleepersmusic

@bw When a client asks me to build a website that they can maintain, I use basic HTML. IMHO Itโ€™s easier to teach them HTML than Wordpress or other CMSs. Years later their sites are still online, updated, and I havenโ€™t heard any complaints. Your book is likely to make my job even easier! ๐Ÿ’ป๏ธ ๐Ÿ‘๏ธ ๐Ÿ˜

starlord

@7sleepersmusic @bw That's interesting. Do you have experience using flat-file cms with markdown?

I teach Markdown to middle-schoolers when they wanna start building and find it really easy to get started. Curious about others'.

Tarren (They/Them)

@bw The link doesn't seem to work for me, at least with Firefox.

jwithy :prami:

@bw fwiw Iโ€™m getting a couple of different โ€œtoo many redirectsโ€ warnings on iOS Safari and a โ€œtoo many HTTP redirectsโ€ in Firefox & Firefox Focus.

I tried your link as well as typing it in directly. Maybe youโ€™re too popular? I canโ€™t wait to check it out!

Jim Mock

@bw The page wonโ€™t load for meโ€ฆ Iโ€™m getting a too many redirects error :(

ben

@bw Hi, I just tried to take a look at this and it seems like the server is in an infinite loop of redirects to the same URL.

(Tested with a couple of different browsers as well as curl, so I don't think it's browser-specific.)

Blake Watson :prami:

@benjamineskola Yeah, I am having DNS issues, but I think they should be sorted in a few minutes here.

ben

@bw Ah yeah, looks good now! Thanks!

mkj

@bw This seems like just what we need right now!

Is there a download of it available somewhere?

Blake Watson :prami:

@mkj Not at the moment but itโ€™s something Iโ€™m open to offering if people want it.

Jon Hancock

@bw @mkj Yes please! A download would be wonderful and make it considerably easier to read for some of us.

Jessica๐Ÿณ๏ธโ€๐ŸŒˆ

@bw super cool! looks like there might be an overflow declaration missing on the pre tags

Blake Watson :prami:

@ticky Thanks, I just fixed that, although Iโ€™m not sure why the syntax highlighting isnโ€™t showing up for you. Do you disable JavaScript?

Jessica๐Ÿณ๏ธโ€๐ŸŒˆ

@bw I don't have JS disabled, I'm using Safari, I don't see any blocked requests, but I also don't see which bit of your code is supposed to be syntax highlighting ๐Ÿค”

Jessica๐Ÿณ๏ธโ€๐ŸŒˆ

@bw oh, looks like it's not loading the css from the `import` declarations? strange

Blake Watson :prami:

@ticky Ok it was a me problem lol. I think I fixed it. Mind trying it again?

Khleedril

@ticky @bw Whoops-a-daisy! Proof that HTML is really hard and not for people in general.

Jessica๐Ÿณ๏ธโ€๐ŸŒˆ

@khleedril @bw I wouldn't say that, it's at worst proof that even the experienced can make mistakes, and it's fine if you do, too

Blake Watson :prami:

@ticky @khleedril In my defense it was a CSS problem, not an HTML one. ๐Ÿ˜›

Khleedril

@ticky @bw I disagree, this isn't Blake's mistake. It is a mistake which falls between the specification of HTML and the implementation of this particular presenter.

ps. I'm totally with the idea that anyone SHOULD be able to make their own website, I just think the reality is in a parallel universe somewhere.

Ricky de Laveaga

@bw looks cool! Buttons are stacking oddly on my phone

David Gerhart

@bw

"HTML for People is OUT NOW! ...
And itโ€™s free for all. ๐Ÿš€"

This is super! So many times I needed a reference like this to share.

And you did one on CSS?

Awesome.

c0debabe :veilid:

@bw oh this is fucking amazing. when I have money, I will be donating. This is a public service. htmlforpeople.com/zero-to-inte

Isabel

@bw Nice! I recently committed to (eventually) coding my own website by hand, and this will be an invaluable resource.

remmy08

@bw this is so cool wtf. how'd you get this idea

Mx. Luna Corbden

@bw Wonderful!! I first learned HTML 3.5 from a Dummies book. I'm a writer now, and to my shock, in 2021 I worked as an SME with a young web dev my client hired. He not know a lick of HTML. I ended up doing some of the web dev work for him, even though my skills are still stuck in 2003.

I've found it hard to find good HTML quick-lookup reference materials online now for when I want to just bang out a quick site but forgot an attribute. Awesome of you to teach this skill. HTML is very easy and versatile, and kids can be empowered like I once was.

@bw Wonderful!! I first learned HTML 3.5 from a Dummies book. I'm a writer now, and to my shock, in 2021 I worked as an SME with a young web dev my client hired. He not know a lick of HTML. I ended up doing some of the web dev work for him, even though my skills are still stuck in 2003.

I've found it hard to find good HTML quick-lookup reference materials online now for when I want to just bang out a quick site but forgot an attribute. Awesome of you to teach this skill. HTML is very easy and versatile,...

guites

@bw wow the zero to internet step is just awesome. Plain text ftw!

jzilversmit88

@bw I should buy this book because I was a designer for a short time in 2006 and the internet was still wonky at the time but had improved a lot since then.

Kev Quirk

@bw Love this, and appreciate you using Simple.css too. This is exactly the kinda use case it was designed for. โค๏ธ

Blake Watson :prami:

@kev Simple.css is the GOAT when it comes to classless frameworks. Love it.

Mayank

@bw this is perfect, and so easy to recommend. i like HTML and i want people i like to also like HTML

Brandon

@bw this is super great. Good work.

Matt Wilcox

@bw That's an excellent introduction to building websites - nice work!

Mer-fOKxTOwl

@bw that looks interesting thanks for creating, maybe i get a itch and take a look if it helps refreshing my rusty knowledge, especially for newer features.

Mer-fOKxTOwl

@bw quickly looking through i have not seen anything new to me, but feels structured enough to use as a decent place to look at if i struggle with remembering the correct "html grammar"

Devin Prater :blind:

@bw Just going through the book now, should pick this kind of thing back up anyway. Oh, you put tags on their own lines? That's cool, I've usually seen them on the same line as the content, but that does seem more organized to put them on their own line.

Blake Watson :prami:

@pixelate Sometimes I do, sometimes I donโ€™t. Oftentimes I use an editor plugin that automatically formats the code when you save.

Dan Okkels Brendstrup

@bw What an absolutely lovely ressource! ๐Ÿ† Canโ€™t wait to dig in. And teach my son enough English so he can use this to learn HTML ๐Ÿ˜„

โš ๏ธ Heads up: In dark mode, the aside boxes with the robot mascot are currently showing white text on a white background.

Blake Watson :prami:

@bewildergeist Thanks I just fixed it! I used some nested CSS which is a relatively new feature and I didnโ€™t do it right in a few spots.

๐Ÿšฒ

@bw Itโ€™s seldom that I will do every possible interaction with one single toot: boost, favourite, comment, AND bookmark, but here we are.

Dr. Unabart :vepi: :jrbd:

@bw Finally something that might explain Tables better to me.

Devin Prater :blind:

@bw And the image are described! That's really nice to know what output we should be expecting.

Felix ๐ŸŠ

@bw This looks really cool! I'll be saving this for later.

However, I didn't know these boxes were supposed to have text in them until I highlighted it. Using Firefox 115 on Linux

Screenshot of the &quot;zero to internet&quot; page with some sections of the page the same color as the text, so it appears invisible.
Felix ๐ŸŠ

@bw Looks like it happens on later pages as well

Blake Watson :prami:

@crocodisle I *think* I fixed that. Give it a hard refresh.

Blake Watson :prami:

@crocodisle Thanks! I just fixed that. I used some new-ish CSS syntax and didnโ€™t do it right the first time around. ๐Ÿ˜…

osfa_2030

@bw Congrats and thanks! It sounds awesome. I do like so much better simple html pages!!
Best wishes

Ro :queercat_ace: ๐ŸŽƒ

@bw hey, as an intermediate beginner I checked your website and it's a very resourceful website, thank you so much!

If i could make a little request, I think it would be useful to have a direct link to the demo website pinned somewhere in the menu, because I want to reference some stuff from there but I find it hard to dwell on the sections before finding it

qamar

@bw omg sounds amazing. thanks!!!

robo

@bw I am this books target audience. Thank you!

Filip Szulik-Szarecki

@bw Great job! A few things I didn't know and updated my knowledge from 15 years ago. You should consider writing a chapter about static page generators. Then blogging is simpler and the rss generates by itself. :-) although I don't find markdown perfect because it doesn't support <details> tag....

ramonakira

@bw Very cool! Will share any chance I get!

Shell :fedora: :kde:

@bw

*GASP*

You have committed the ultimate sin!

The website says : &quot;You could also just open Notepad and write HTML by hand (spoiler: we are going to do just that)&quot;
nev

@bw just quickly skimmed, but it looks awesome! Also am a huge water.css (and classless CSS in general) fan. It makes things so easy!

Geoff Coffey

@bw This looks so good. And clearly a labor of love. Bless you!

Sciasm :mas:

@bw Holy crap, this is *incredibly* well-written. Thank you so much for doing this! Long live the indie web! ๐Ÿ’™

wesruv

@bw
This is great work!

One thing I noticed, I'm intermittently getting a page without CSS. I checked the console and got:
Failed to load resource: net:: ERR_HTTP2_PROTOCOL_ERROR

I refresh and it's fine ๐Ÿคท๐Ÿผโ€โ™‚๏ธ

Keep up the good work :D

Screenshot of unstyled page with console error:
Failed to load resource: net:: ERR_HTTP2_PROTOCOL_ERROR
Blake Watson :prami:

@wesruv Yeah Iโ€™m having some DNS issues. Once traffic dies down Iโ€™m going to experiment.

Lรฉon Planken

@bw Had a brief look, it's wonderful :)

Also, I see what you did with the time on the phone in that picture ;)

Sara Joy :happy_pepper:

This is wonderful @bw ๐Ÿ’œ๐Ÿ’œ๐Ÿ’œ

Holy quadrilogy of favourite, boost, bookmark, reply.

Just great. Thank you for making it!

Blake Watson :prami:

@sarajw Thanks! That means a lot to me coming from you. :)

Sara Joy :happy_pepper:

@bw It's so good I wish I made it myself!

I have shared it to my linkedin and facebook because there are more laypeople there than my circles on here :)

Arratoon

@bw Thank you. I have a clean-looking website thatโ€™s hosted on Tumblr, but Iโ€™d like to take it off there and do it myself. This could be the impetus I need.

Shane

@bw

Thank you, what a fine thing to do.
Practical, subversive, inclusive.

I hope it will not sound patronising if I say it would be a better world if every other professed Christian lived their faith in the same spirit.

Shane

@bw

You're very welcome.

I admire actually religious people, you're so very rare.

elliot! ๐Ÿ’™

@bw love this! the design of it makes it feel very welcoming and friendly and not scary to beginners. will have to look through the whole thing later

L-)

@bw this is really really nice! And I would love to do this with kids. Is there a way this could be translated?

Blake Watson :prami:

@dosch Yes! Well, not by me. But the whole book is licensed under a creative commons license and the code is on GitHub. github.com/blakewatson/htmlfor

L-)

@bw I am already so inspired. My kid asked me just last week if we can make a website together and I was already planning to go to wordpress. But this is so much better.

I'm gonna use the build-in machine translation of Firefox for now. Together we'll get a long way.

Thnx for this!

Blake Watson :prami:

@dosch You have no idea how happy I am to hear this. This is why I made it.

L-)

@bw โค๏ธ I'll ask my kid if we can show you the work when we're done ;-)

steev hise

@bw wow i feel like itโ€™s 1994 again.

12 Dollar General

@bw I have to assume the <blink> tag has now been deprecated? Good job on the book. Got yourself a new follower.

Sia Karamalegos

@bw TIL classless CSS frameworks. This is great!

Duda Lias

@bw Great content! Parsed the whole thing and for getting the basics straight, this is a very well thought through resource.

One thing to add, since this is not 1990: git. In any folder that will be used for a project, the first thing I type is "git init". Now, this needs a local setup, but so does your PHP intro. I think adding this to the bonus chapters would get some people on the right track to versioning their work properly. Throw in a publish to Github pages as well if you want.

Since you introduced VSCode, another bonus track could cover the Emmet plugin for some serious html on steroids. I doubt that after the initial surge of delight, many sane people cherish typing a 10 element unsorted list by hand.

๐Ÿ€

@bw Great content! Parsed the whole thing and for getting the basics straight, this is a very well thought through resource.

One thing to add, since this is not 1990: git. In any folder that will be used for a project, the first thing I type is "git init". Now, this needs a local setup, but so does your PHP intro. I think adding this to the bonus chapters would get some people on the right track to versioning their work properly. Throw in a publish to Github pages as well if you want.

Nicolas Bourdais

@bw neocities... This name reminds me so about geocities
nostalgia ๐Ÿ˜„

PrivateMe

@bw Brilliant! I learnt how to write HTML when I wanted to code in lockdown, and if I had something like this, it would have been so much easier.

Nik | Klampfradler ๐ŸŽธ๐Ÿšฒ

@bw Thanks, mostly very cool work, and a good learning resource.

I found a few bad practices promoted by this tutorial, though. The most relevant are using Visual Studio Code, and the second embedding YouTube videos directly.

Both can easily be fixed, the first by pointing people to vscodium.com/ instead and the latter by showing how to embed uploaded video files instead of YouTube iframes.

w7com

@bw
HTML 1.0 was the original HTML for People.

mikkel

@bw this is super neat and useful even to people who know how to โ€œcodeโ€ but havenโ€™t done webhosting before.

I will say though, as someone who interacts with new programmers at my university (undergrad) frequently, I might add that there are a few hidden assumptions in some of the first tutorials. It assumes the reader understands what file extensions are, or knows how how to navigate/understand folders. Should index.html be next to or outside the folder? You havenโ€™t specified :c

Wynke

@bw Hi! Looks like a very cool and educational book.

Reading it with 'my child might want to do this' in mind, I am missing one thing, though. While her dad and I work mainly with linux, her computer is a chromebook (because that's what they use in school as well, we got it during the covid school closures). I think many young people these days have chromebooks or similar. Would it be worth mentioning how to proceed on those?

Shib Willoughby

@bw This is so lovely! It reminds me of all the websites back in the early 00s that taught me how to build websites (no javascript, just step by step HTML).

Love this so much! <3

Dusty Pomerleau

@bw This is the best introduction to HTML I've ever seen! Great work :)

VS Code: A fancier Notepadโ„ข

hnapel

@bw

I will only click on the link if it has image maps, does it have image maps?

qwazix

@bw I was telling my partner the other day how I wanted to start doing lessons on how to write simple websites not in order to be a developer, but in the way a diy woodworking workshop teaches w/w as a hobby.

Now I may have found a book for my class.

Felix Urbasik

@bw Did you just take my idea from literally 14 hours ago and just make it a reality? That's awesome!

Jokes aside, this obviously took longer than 14 hours to make. But dude, this is exactly the approach I would've taken and I'm *so* glad you did it!

Now, all we need to do is get it onto mainstream social media. ๐Ÿš€

villon

@bw
Is there any chance for localization in other languages?

Paul Williams

@bw This is great. I haven't done front end for such a long time, and just flicked through this - so much new stuff that you have covered in such a simple book. Thank you!

cybr

@bw this seems a lot easier to read and understand than most other guides iโ€™ve seen. i wish i had a resource like this when i was starting to code websites!

CMDR Yojimbosan UTC+(12|13)

@bw In the first chapter, you say "You can literally make a website with Notepad." But I don't think your intended audience will even know what Notepad is ...

Something like "You can literally make a website with just the free tools already installed on your computer" might be better?

And please please please make sure they don't just think "oh, it's just text is it? I'll use Word then ... ". They've got to know that simple isn't just an option, it's a requirement ...

I've seen things like this. They scarred me.

@bw In the first chapter, you say "You can literally make a website with Notepad." But I don't think your intended audience will even know what Notepad is ...

Something like "You can literally make a website with just the free tools already installed on your computer" might be better?

And please please please make sure they don't just think "oh, it's just text is it? I'll use Word then ... ". They've got to know that simple isn't just an option, it's a requirement ...

Aborigen

@bw This is incredibly cool. I'm playing around with it to update my knowledge, and I'm sharing it widely. I've urged my communities to please set up a backup website, just in case it ever turns out that social media is less than stable.

bigTanuki

@bw I just tried your tutorial 1st step. To make it more age accessible I did it on a mobile device since I feel that most young people are more likely to have a mobile device at hand than a computer. Still went super smooth and had a live webpage up in under 5 mins (maybe under 3 minutes).
Longest step was making the geocities account.

Full disclosure: I am not young (but I am an educator for college kids and grade school kids, who will be the future communicators, most likely to be impacted by the small web and POSSE workflows).
#SmallWeb #posse

@bw I just tried your tutorial 1st step. To make it more age accessible I did it on a mobile device since I feel that most young people are more likely to have a mobile device at hand than a computer. Still went super smooth and had a live webpage up in under 5 mins (maybe under 3 minutes).
Longest step was making the geocities account.

ben ๐Ÿ‡ต๐Ÿ‡ธ ui

@bw this is wonderful, thank you for making it

villon

@bw
Perhaps members of the #selfhtml bubble would like to and can help support this.

villon

@bw
I've posted just now in the #selfhtml forum with the request for support for your project especially with localization.
Because ultimately this is exactly the same objective that your project is aiming for. wiki.selfhtml.org/

forum.selfhtml.org/

Karithina

@bw This is so great thankyou for this, I've shared it around because it is a great resource for newbies! I noticed though that mobile view stretches on pages with video so you might have to tweak the video embeds to be more responsive, but great otherwise :)

Strange Culprits

@bw Thank you, thank you, thank you for sharing your work!

Taking back control over our tech may be the trend of the decade

tinta

@bw Reminds me of the most creative era of website building! ๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ™‚๐ŸŽ‰

Hideki Motosuwa

@bw
Teach people only HTML. A basic HTML. Don't teach them CSS or JS. Encourage them to have a simple website like motherfuckingwebsite.com that is how a website should be.

mapto

@bw well done! I teach computer science to humanities students and as much as I can tell, this is really accessible for them. In particular, I was curious how you introduce files, hosting and content reuse, and you've done a great job to keep all this simple.

Alan Levine

@bw right on! Build to last, I have one done in 1994 that is still standing mcli.cogdogblog.com/tut/

Go Up