Someone I work with recently published this online book that teaches non-technical people how to create their first website. He's a pretty great writer and developer, and I'm quite impressed with...
Someone I work with recently published this online book that teaches non-technical people how to create their first website. He's a pretty great writer and developer, and I'm quite impressed with the book. Even though most Tildes users may be more technically capable than the target audience, I'm sharing it here because I think it might be a good reference to pass along to less technical friends who are interested in dipping their toes in the world of web development.
If you click around in the splash image on the main page there are a few easter eggs hidden in there.
This website is lovely and your friend should feel very proud of this! It's very thoughtful and to me at least, very clearly written. I'm already familiar with HTML and CSS, but I suspect this is...
This website is lovely and your friend should feel very proud of this! It's very thoughtful and to me at least, very clearly written. I'm already familiar with HTML and CSS, but I suspect this is going to be very useful to people dipping their toes in for the first time.
These resources are great. When I was just getting into web junk as a hobby I read a series called "HTML Goodies" that took a very casual approach to explaining things. This site seems to be in...
These resources are great. When I was just getting into web junk as a hobby I read a series called "HTML Goodies" that took a very casual approach to explaining things. This site seems to be in the same vein, I wish it well. Skipping around it in, it points to Neocities which is also a great host. I hope Neocities eventually got FTP or some other client access for uploads, I remember thinking that was a limitation last time I checked it out.
What a great resource. My start to web dev was not too dissimilar to what's written here, so it's almost a walk down memory lane. I like that it's very much focused on HTML specifically and not...
What a great resource. My start to web dev was not too dissimilar to what's written here, so it's almost a walk down memory lane. I like that it's very much focused on HTML specifically and not web development as a whole; as they point out it's important to have that foundation.
I'm definitely going to file this away for future reference in case anyone asks what good beginner resources there are.
Great resource. It bugs me that the simplest way around the "update your nav on every page" problem is "install PHP". That cuts off a lot of inexpensive hosting options. I wonder if we can do...
Great resource. It bugs me that the simplest way around the "update your nav on every page" problem is "install PHP". That cuts off a lot of inexpensive hosting options. I wonder if we can do better.
What's the simplest solution you can think of? HTMX?
I don't know if they're still supported, as I haven't used them in ~15 years, but Server Side Includes were the solution to this problem way back when. <!--#include file="navigation.html" --> (I...
I don't know if they're still supported, as I haven't used them in ~15 years, but Server Side Includes were the solution to this problem way back when.
<!--#include file="navigation.html" -->
(I do think using PHP here is the better choice though. It's ubiquitous and available on even the cheapest of shared hosting options out there)
I used SSIs just last week for this exact purpose, making the nav on my website updatable! They do work in 2024, at least with Apache. When you don't want to do anything more I really like them...
I used SSIs just last week for this exact purpose, making the nav on my website updatable! They do work in 2024, at least with Apache. When you don't want to do anything more I really like them for this purpose because you can use them with the tools you already have.
I'd go with a static site generator, but there are downsides: Any SSG adds complexity. Instead of previewing or publishing your code directly, you generate the static site, then preview or publish...
Any SSG adds complexity. Instead of previewing or publishing your code directly, you generate the static site, then preview or publish that. When the site has a problem, you have to figure out whether it's the generator, the source code, or neither but you forgot to re-generate it.
Some SSGs let you avoid HTML and build your site entirely in another language, which is presumably the antithesis of this book. At that point, why not skip the book and just read the Hugo tutorial? The ones that use HTML augment the language, even if they just process comments a special way, in order provide the non-HTML features like including common fragments in multiple pages.
There are hundreds of options. Each have their own additional downsides, many aren't beginner-friendly, and some are very buggy.
Personally, I think it would be cool if the book guided readers to build their own tiny static-site generator, to alleviate HTML issues like every page having a common "scaffold", and maybe do other cool things like render data (CSV or JSON). Then it would still be covering front-end web design from the bottom up. But I'm not sure how beginner-friendly or useful that would be. Otherwise, I guess I'd recommend simplest-sitegen (found from this list), although I didn't test it, because from the README it provides the simplest (as is advertised) way to do the common scaffold.
I really don't like this resource, I think it's written by a dev who has never taught coding to an actual nontechnical person before. A lot of my job is doing precisely this, and I would never,...
I really don't like this resource, I think it's written by a dev who has never taught coding to an actual nontechnical person before. A lot of my job is doing precisely this, and I would never, not in a million years, link someone a get-started guide that starts out with "Step 1. Create a folder on your computer"
What even!!?!?!!? NO!!!!!!!!!!!!
Start out with a zero setup online playground ffs
https://www.freecodecamp.org/ is amazing, and I will never link to anything else unless (a) they get super enshittified (tbh unlikely I think, it's backed by major tech that has a huge stake in new people learning to code so that they can hire them) or (b) someone launches a similar free platform that's even better (again unlikely I think, but it could happen)
I was so annoyed by the discussion of this article on HN that I wrote a blog post about my feelings on the matter
FreeCodeCamp looks cool, but I don't think it's even in the same category as this book. It seems very clear just from clicking around a bit that their target audience is people who want to become...
FreeCodeCamp looks cool, but I don't think it's even in the same category as this book. It seems very clear just from clicking around a bit that their target audience is people who want to become software developers, which is an entirely different audience than what I think HTML For People would be good for.
For example if my super non-technical parents (they know how to create directories and open and save files and use a web browser, but not much more than that) told me that they want to make a website where my Mom can publish recipes and cooking tips, and I told them to check out FreeCodeCamp, and the first thing they were presented with after creating an account is a list of certifications to earn named things like "Responsive Web Design" and "Javascript Algorithms and Data Structures" I'm pretty sure that journey would end shortly thereafter and the recipe website would never see the light of day. On the other hand, if I sent them to HTML For People I believe there's at least a decent chance they could end up actually creating their first website by the end of it.
Different people will have different goals, different skill levels, and different learning styles--I think it's misguided to imply that one way of teaching is superior to all others for all people all of the time.
That's a little unfair of a comparison imo, you would of course not link them to FCC main page, you would link them to this page which is the first lesson of the HTML class. All of my...
That's a little unfair of a comparison imo, you would of course not link them to FCC main page, you would link them to this page which is the first lesson of the HTML class.
All of my documentation contains both links to the FCC main page (in case the more direct URL changes and I don't catch it) but also to the specific lessons I suggest people use. And I am not talking hypothetically here, this is what I have done for many people who are not developers but want to write a bit of MediaWiki code, and want a structured class. I have never had anyone say "I couldn't figure out FCC it was too confusing" though it's certainly possible some people have looked at it and given up without telling me that they did that. But I also know several people who have actually done the lessons and become super confident with webdev basics as a result.
It seems that the target audience for writing MediaWiki code is a niche, and already quite different from the one proposed in the original post. A non-tech person might not even know that they...
It seems that the target audience for writing MediaWiki code is a niche, and already quite different from the one proposed in the original post. A non-tech person might not even know that they want to write mediawiki, and the fact that they get there makes them a totally different audience to begin with.
You mentioned that creating a directory as the first step isn't ideal. I had a look at page you referenced, I noticed that its first step is:
Step 1
HTML elements have an opening and closing tag with content in between.
I haven't read the rest of either guides, but based on this initial step alone, I believe that someone without technical experience (like my mom) might find it more confusing than "create a directory".
Freecodecamp looks like an amazing resource, but it seems like there's an assumed level of knowledge that some may find trivial, others not. That's why I think different resources serves different people.
Yeah, that's a good point, I would also prefer if the sandbox where you write code were MUCH larger and labeled with a very large WRITE YOUR TEXT HERE: at the top. (And avoid the word "code") But...
Yeah, that's a good point, I would also prefer if the sandbox where you write code were MUCH larger and labeled with a very large WRITE YOUR TEXT HERE: at the top. (And avoid the word "code") But I don't know of anything that's engineered for interactivity as well as FCC. And the most important aspect of FCC to me is by far the interactive playgrounds with friendly starting points that you can edit and reset. And that's what any other class needs to do, not say "make a file on your computer."
There's a world of difference between writing HTML - which is literally a plain text that will run in your browser after a double-click - and setting up a full dev environment for, say, Python,...
There's a world of difference between writing HTML - which is literally a plain text that will run in your browser after a double-click - and setting up a full dev environment for, say, Python, Rust, or PHP.
If you want to teach people HTML for a day-to-day use, "create a folder and an index.html file" does not prevent anyone getting an "early success". The barrier of entry is definitely NOT higher than "first, create an account on this highly tech-looking site that is clearly made for aspiring developers".
If creating a folder on your computer is the step that's preventing you to learn HTML, then don't bother.
I've always found that those specialized "learner environments" create an additional disconnect that's harder for people to get past. Starting on the ground level, with a practical skill, is...
I've always found that those specialized "learner environments" create an additional disconnect that's harder for people to get past. Starting on the ground level, with a practical skill, is always better than "live in this sandbox and figure out how to turn meaningless exercises into something practical later."
Taking learning Python as an example, it's more useful to start with making a Hello World file and running it, when 100% of any future use will involve modifying programs in a proper text editor. Explaining what IDLE is and that it's not what you'll be using in the future is pointless and adds extra separation from the goal.
I learned HTML when I was 9 or 10 years old, using only HTML3 and HTML4 books. CSS was barely a thing, and JavaScript was generally considered just to be a nuisance. This site seems like it's trying to recreate that experience of editing HTML locally and maybe dropping them onto a server, which is perfect.
FreeCodeCamp is great for learning exercises - I too have recommended that site to lots of people getting started. For a web host that follows the same principle, you might like Glitch. It has a...
FreeCodeCamp is great for learning exercises - I too have recommended that site to lots of people getting started.
For a web host that follows the same principle, you might like Glitch. It has a built-in coding environment, and it will host anything from basic HTML pages all the way up through full React apps.
That's some good stuff, I just checked it out. I think the UX is also maybe not the friendliest here (captcha & long waits isn't an optimal start point) and once I'm in my new site I would really...
That's some good stuff, I just checked it out. I think the UX is also maybe not the friendliest here (captcha & long waits isn't an optimal start point) and once I'm in my new site I would really like the preview to already exist, plus maybe make the bottom bar a bit more visible. But UX issues aside, functionally this is exactly the kind of playground I think works best!!!
Someone I work with recently published this online book that teaches non-technical people how to create their first website. He's a pretty great writer and developer, and I'm quite impressed with the book. Even though most Tildes users may be more technically capable than the target audience, I'm sharing it here because I think it might be a good reference to pass along to less technical friends who are interested in dipping their toes in the world of web development.
If you click around in the splash image on the main page there are a few easter eggs hidden in there.
This website is lovely and your friend should feel very proud of this! It's very thoughtful and to me at least, very clearly written. I'm already familiar with HTML and CSS, but I suspect this is going to be very useful to people dipping their toes in for the first time.
These resources are great. When I was just getting into web junk as a hobby I read a series called "HTML Goodies" that took a very casual approach to explaining things. This site seems to be in the same vein, I wish it well. Skipping around it in, it points to Neocities which is also a great host. I hope Neocities eventually got FTP or some other client access for uploads, I remember thinking that was a limitation last time I checked it out.
What a great resource. My start to web dev was not too dissimilar to what's written here, so it's almost a walk down memory lane. I like that it's very much focused on HTML specifically and not web development as a whole; as they point out it's important to have that foundation.
I'm definitely going to file this away for future reference in case anyone asks what good beginner resources there are.
Great resource. It bugs me that the simplest way around the "update your nav on every page" problem is "install PHP". That cuts off a lot of inexpensive hosting options. I wonder if we can do better.
What's the simplest solution you can think of? HTMX?
I don't know if they're still supported, as I haven't used them in ~15 years, but Server Side Includes were the solution to this problem way back when.
<!--#include file="navigation.html" -->(I do think using PHP here is the better choice though. It's ubiquitous and available on even the cheapest of shared hosting options out there)
I used SSIs just last week for this exact purpose, making the nav on my website updatable! They do work in 2024, at least with Apache. When you don't want to do anything more I really like them for this purpose because you can use them with the tools you already have.
I'd go with a static site generator, but there are downsides:
Any SSG adds complexity. Instead of previewing or publishing your code directly, you generate the static site, then preview or publish that. When the site has a problem, you have to figure out whether it's the generator, the source code, or neither but you forgot to re-generate it.
Some SSGs let you avoid HTML and build your site entirely in another language, which is presumably the antithesis of this book. At that point, why not skip the book and just read the Hugo tutorial? The ones that use HTML augment the language, even if they just process comments a special way, in order provide the non-HTML features like including common fragments in multiple pages.
There are hundreds of options. Each have their own additional downsides, many aren't beginner-friendly, and some are very buggy.
Personally, I think it would be cool if the book guided readers to build their own tiny static-site generator, to alleviate HTML issues like every page having a common "scaffold", and maybe do other cool things like render data (CSV or JSON). Then it would still be covering front-end web design from the bottom up. But I'm not sure how beginner-friendly or useful that would be. Otherwise, I guess I'd recommend
simplest-sitegen(found from this list), although I didn't test it, because from the README it provides the simplest (as is advertised) way to do the common scaffold.I really don't like this resource, I think it's written by a dev who has never taught coding to an actual nontechnical person before. A lot of my job is doing precisely this, and I would never, not in a million years, link someone a get-started guide that starts out with "Step 1. Create a folder on your computer"
What even!!?!?!!? NO!!!!!!!!!!!!
Start out with a zero setup online playground ffs
https://www.freecodecamp.org/ is amazing, and I will never link to anything else unless (a) they get super enshittified (tbh unlikely I think, it's backed by major tech that has a huge stake in new people learning to code so that they can hire them) or (b) someone launches a similar free platform that's even better (again unlikely I think, but it could happen)
I was so annoyed by the discussion of this article on HN that I wrote a blog post about my feelings on the matter
FreeCodeCamp looks cool, but I don't think it's even in the same category as this book. It seems very clear just from clicking around a bit that their target audience is people who want to become software developers, which is an entirely different audience than what I think HTML For People would be good for.
For example if my super non-technical parents (they know how to create directories and open and save files and use a web browser, but not much more than that) told me that they want to make a website where my Mom can publish recipes and cooking tips, and I told them to check out FreeCodeCamp, and the first thing they were presented with after creating an account is a list of certifications to earn named things like "Responsive Web Design" and "Javascript Algorithms and Data Structures" I'm pretty sure that journey would end shortly thereafter and the recipe website would never see the light of day. On the other hand, if I sent them to HTML For People I believe there's at least a decent chance they could end up actually creating their first website by the end of it.
Different people will have different goals, different skill levels, and different learning styles--I think it's misguided to imply that one way of teaching is superior to all others for all people all of the time.
That's a little unfair of a comparison imo, you would of course not link them to FCC main page, you would link them to this page which is the first lesson of the HTML class.
All of my documentation contains both links to the FCC main page (in case the more direct URL changes and I don't catch it) but also to the specific lessons I suggest people use. And I am not talking hypothetically here, this is what I have done for many people who are not developers but want to write a bit of MediaWiki code, and want a structured class. I have never had anyone say "I couldn't figure out FCC it was too confusing" though it's certainly possible some people have looked at it and given up without telling me that they did that. But I also know several people who have actually done the lessons and become super confident with webdev basics as a result.
It seems that the target audience for writing MediaWiki code is a niche, and already quite different from the one proposed in the original post. A non-tech person might not even know that they want to write mediawiki, and the fact that they get there makes them a totally different audience to begin with.
You mentioned that creating a directory as the first step isn't ideal. I had a look at page you referenced, I noticed that its first step is:
I haven't read the rest of either guides, but based on this initial step alone, I believe that someone without technical experience (like my mom) might find it more confusing than "create a directory".
Freecodecamp looks like an amazing resource, but it seems like there's an assumed level of knowledge that some may find trivial, others not. That's why I think different resources serves different people.
Yeah, that's a good point, I would also prefer if the sandbox where you write code were MUCH larger and labeled with a very large WRITE YOUR TEXT HERE: at the top. (And avoid the word "code") But I don't know of anything that's engineered for interactivity as well as FCC. And the most important aspect of FCC to me is by far the interactive playgrounds with friendly starting points that you can edit and reset. And that's what any other class needs to do, not say "make a file on your computer."
There's a world of difference between writing HTML - which is literally a plain text that will run in your browser after a double-click - and setting up a full dev environment for, say, Python, Rust, or PHP.
If you want to teach people HTML for a day-to-day use, "create a folder and an index.html file" does not prevent anyone getting an "early success". The barrier of entry is definitely NOT higher than "first, create an account on this highly tech-looking site that is clearly made for aspiring developers".
If creating a folder on your computer is the step that's preventing you to learn HTML, then don't bother.
I've always found that those specialized "learner environments" create an additional disconnect that's harder for people to get past. Starting on the ground level, with a practical skill, is always better than "live in this sandbox and figure out how to turn meaningless exercises into something practical later."
Taking learning Python as an example, it's more useful to start with making a Hello World file and running it, when 100% of any future use will involve modifying programs in a proper text editor. Explaining what IDLE is and that it's not what you'll be using in the future is pointless and adds extra separation from the goal.
I learned HTML when I was 9 or 10 years old, using only HTML3 and HTML4 books. CSS was barely a thing, and JavaScript was generally considered just to be a nuisance. This site seems like it's trying to recreate that experience of editing HTML locally and maybe dropping them onto a server, which is perfect.
FreeCodeCamp is great for learning exercises - I too have recommended that site to lots of people getting started.
For a web host that follows the same principle, you might like Glitch. It has a built-in coding environment, and it will host anything from basic HTML pages all the way up through full React apps.
That's some good stuff, I just checked it out. I think the UX is also maybe not the friendliest here (captcha & long waits isn't an optimal start point) and once I'm in my new site I would really like the preview to already exist, plus maybe make the bottom bar a bit more visible. But UX issues aside, functionally this is exactly the kind of playground I think works best!!!