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 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.
This is great. The decision to skip CSS by depending on https://simplecss.org/ is smart - CSS is a whole other thing, and having that on top of basic HTML would be pretty intimidating.
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?
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)
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.
When i use google drive, the interface appears to be folder/file structure. Whether it is or is made to look that way is irrelevant, i suppose, as long as it works that way. I can also increase storage by downloading/deleting things so Im a bit flummoxed.
I don't remember if he was trying to save space on his Google Drive or on his phone. His question was, mostly, that if he deleted files in one place, where would the space savings appear? I immediately thought of Windows' OneDrive and how it's sort of an automated rsync setup. I didn't know enough about his phone, which apps he was using, or about Google Drive to give an answer better than "I don't know, and I detect that some of your assumptions are probably wrong."
In my opinion, Google Drive is basically the same as the traditional file structure. Where it gets very confusing for people is when it comes to collaboration. Before 2020 or so, there was confusion around copying the same Google Doc so it appears in multiple locations, and making shortcuts to it instead. Look up stuff around the “Shift + Z” keyboard shortcut if you want to learn more.
I'd say half of my first-year CS students don't know how to create a folder with files, at the start of the school year. To me, it's nuts. But on the other hand, lots of students are very curious and come to learn. You can't blame them for not knowing something.
I try not to get overly-annoyed at this kind of thing too, but to me it just demonstrates an incredible lack of self-drive, or curiosity, especially in the CS domain.
If the students are genuinely curious, there is nothing to stop them learning about pretty much any topic in CS - really. There are few university subjects where the entire syllabus is freely available online in almost every format imaginable the way CS often is, and very often the computer you already have works just fine to learn it on.
Ya, I have to agree. Although you may learn, it's clearly not the primary intention of a University to teach anything but your ability to do whatever it takes to score well or do publishable research.
I've seen younger generation only use Google Docs and streaming services (music/video) and not even understand what a "file" is, because everything is just on the internet.
> can't figure out how to unzip a zip or even finding out where files get downloaded to.
I have issues with that. FF doesn't show the path in the list of downloads. There is a button to start a file manager, but I have no file managers installed, so button doesn't work. In some cases I didn't find the better way than to copy the link and to download again with wget.
Well, I manage it sometimes, but I then I forget how I did it. I think the way to do it, is to try to download something with ff again, but stop at the file chooser dialog to figure out where it points to.
At one point, every member of a CS program started without having ever seen or touched a computer. Everyone has to start somewhere. We do not reject new biology majors because they had never touched a microscope before entering the program.
Sure, but I think the typical path for those who survive and strive in a CS program is to have touched a computer for the first time well before starting work on a college degree for it.
That's like trying to learn a foreign language by picking reading War and Peace in that language, without ever having seen a single translation to that language, or having already read War and Peace in your own. There are a lot of steps you need to take before then.
I would also be pretty surprised if a biology undergrad had never touched a microscope, possibly with the exception of the most impoverished among us. I imagine most people have tried one at some point along the K-12 journey, and there are more introductory treatments of e.g. life science on the way as well.
Starting CS without having "seen or touched" a computer would be like a biology undergrad who wouldn't be able to tell you whether a dog or a tree is a plant or animal.
If you're saying that at one point in history, a given cohort of new CS students had never seen or touched a computer, I have my doubts, but it depends on how you define CS program. Before computer science was a formalized education stream, it had a variety of other names like "Business Computing" or something related to information technology, but you'd have to go pretty far back imo before you find a whole classroom of entrants into such a program that had never seen or touched a computer. By the time it was called CS, I do find it a bit of a reach that you'd find less than say 10% of students opting into taking it without that low bar being passed.
Likewise the biology example seems strange; sure maybe people haven't used a microscope specifically (unlikely imo), but they very likely have used any number of other implements and taken at least one secondary school biology course
The difference is that these days the people are surrounded by computers and probably interact with a computer many hours every day, yet they are barely more tech savvy than that first lot who had never seen a computer before.
Calling it an "epidemic" isn't really helpful. The reason there's this shortcoming isn't because it's some problem inherent to those darn kids, it's because the state of computer education is expect them to just figure it out on their own when they have no need or reason to do so.
It’s also just what people are familiar with and had to learn.
I know incredibly competent web developers who don’t know what SSH is or how to use it. Boggles my mind, but I grew up with it so it’s what I’m used to.
I was always a little disappointed with how most web browsers choose to render HTML pages that had no explicit styling information. I'm not necessarily saying web browsers should have defaults as opinionated as simple.css, but the default page margins, padding, text styles, headings, etc that they picked aren't particularly attractive.
Opinionated web developers will override the defaults no matter what they are, but if the convention was to have more attractive defaults I wonder if that would have resulted in a larger share of personal websites and blogs created using plain HTML.
Good article, but the reason is obvious: When opening an app or a web app stopped opening a new document and started to present a list of recent documents, that was the beginning of the end. If someone wants a file, they open the app for that file and scroll down. They have never needed to make sense of a file existing independently of the app in which it was create and may be viewed. This process was cemented by iOS's absence of a file manager.
> the iOS Files app has allowed access to local files since 2019
Huh. I just opened my Files app on my iPhone 12 and went to On My iPhone (which was 2-3 more taps once arriving in the app). I don't see many of my files though, just a few. Some PDFs and a Spotify folder. But I don't see my pictures there? Or are pictures no longer stored as 'files'? Or do you mean that the app has allowed access only to some local user files? It's not all local files. And it's not all non-system local files. And it's not all user files. In fact it is missing > 99% of my user-space files (specifically ones created with default-OS applications on device, by the user).
And if I make a Note in the Notes app, will it show up as a file in the Files app? Probably not, I would guess. Because the note probably isn't really a file anyway. So pictures aren't files, and notes aren't files. What would a file be then? Are files only PDFs? That's the only thing that shows up for me. I guess PDFs are the only things that are files then!
Super confusing experience. I'm a mobile app developer by the way - on Android. Android sucks at this too of course. But the iOS Files app is much too limited to enable users to 'get' the concept of a file.
Photos taken on the camera, shared to you, or “saved to photos” will live in the Photos app. The files app primarily contains things you download from your web browser, including images downloaded and not “saved to photos” and images extracted from zip, etc. I guess some apps can save data there too. It would be nice if there was a back road to images stored in Photos app via Files app, but the distinction is otherwise well defined.
Aha! So some photos are actually 'files', but some are not! The confusion continues! I get why Apple has it this way - current iPhones are very very popular and selling them with the current UX makes Apple a lot of money.
But it's pretty clear that the Files app is not meant - in any way - to help users understand computers, what files are, etc. It is obtuse and confusing as soon as the user wants to leave the iOS ecosystem (even to go use a Mac).
you're jumping to conclusions. One does not follow from the other.
(a) apple doesn't show users all the files on their iPhone
(b) apple makes lots of money
There is no evidence that a causes b. It's possible showing the files would make them even more money. It's also possible showing the files would have no effect on how much money they make.
I think the fundamental approach being taken by this project is immensely valuable to the world. This kind of education about open standards might actually be the most powerful tool that can help us take steps in the direction away from giant opaque corporations and back towards the systems based on open standards that the internet originated from. I really hope this project continues to be updated and get more and more eyes and contributors. If you feel the same way, I'd say at least throw it a GitHub star. https://github.com/blakewatson/htmlforpeople
(Note: I have nothing to do with this project thus far and have nothing to gain from saying this.)
I really hope so too. I really wonder what would happen if there was an alternative like... instead of spending X dozen hours learning how to use WordPress, or MS Word for that matter, people (in the general population) felt like spending those X dozen hours learning HTML was a viable and useful alternative to achieving their goals!
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?
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.
Will you add on to it to include custom CSS, or maybe a section for using different CSS templates (and where to find them), to make a slightly larger website like your own (blakewatson.com)?
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.
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.
It's weird seeing this getting emphasized over and again in this thread.
> There are a shockingly large number of people out there that use computers EVERY day that won't know how to do this.
That's very hard to believe. Even my mom, who doesn't use computers at all, would know what folders and files mean.
The people who don't know what files and folders are - can't immediately be beneficiaries of this guide, right? They have a lot more fundamentals to cover before anything like this.
OP here. Yeah, I was a bit worried about this, and even though I kind of mentioned it in the introduction, I think it deserves more attention. I'm not sure if I want to write something and host it myself, or maybe just point people to some kind of primer on creating files and folders.
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.
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.
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!
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'.
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?
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.
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.
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:
> 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.
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.
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.
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.
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.
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
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.
This is great. The decision to skip CSS by depending on https://simplecss.org/ is smart - CSS is a whole other thing, and having that on top of basic HTML would be pretty intimidating.
I did worry a bit about https://htmlforpeople.com/zero-to-internet-your-first-websit... - "Step 1. Create a folder on your computer" - because apparently a large number of people these days don't understand files and folders at all! https://www.theverge.com/22684730/students-file-folder-direc...
Not sure how best to approach that though. Having a whole chapter of the book explaining files and folders feels pretty redundant. Maybe there's something good you could link to?
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)
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.
Can you elaborate on what you told your father?
When i use google drive, the interface appears to be folder/file structure. Whether it is or is made to look that way is irrelevant, i suppose, as long as it works that way. I can also increase storage by downloading/deleting things so Im a bit flummoxed.
I don't remember if he was trying to save space on his Google Drive or on his phone. His question was, mostly, that if he deleted files in one place, where would the space savings appear? I immediately thought of Windows' OneDrive and how it's sort of an automated rsync setup. I didn't know enough about his phone, which apps he was using, or about Google Drive to give an answer better than "I don't know, and I detect that some of your assumptions are probably wrong."
I grew up before cloud storage was mainstream, but I never thought the new model was confusing.
- Google Drive caches recent files and downloads other files on demand. Just like iCloud Drive, MS OneDrive, etc.
- Deleting files will free up space on your Google account.
- Clicking the "clear offline files" button will free up space on device.
All these offering are quite similar with just a few extra features here and there
In my opinion, Google Drive is basically the same as the traditional file structure. Where it gets very confusing for people is when it comes to collaboration. Before 2020 or so, there was confusion around copying the same Google Doc so it appears in multiple locations, and making shortcuts to it instead. Look up stuff around the “Shift + Z” keyboard shortcut if you want to learn more.
Google drive follows the files and folders model that your father was expecting.
I'd say half of my first-year CS students don't know how to create a folder with files, at the start of the school year. To me, it's nuts. But on the other hand, lots of students are very curious and come to learn. You can't blame them for not knowing something.
I try not to get overly-annoyed at this kind of thing too, but to me it just demonstrates an incredible lack of self-drive, or curiosity, especially in the CS domain.
If the students are genuinely curious, there is nothing to stop them learning about pretty much any topic in CS - really. There are few university subjects where the entire syllabus is freely available online in almost every format imaginable the way CS often is, and very often the computer you already have works just fine to learn it on.
Are you sure they have a computer (i.e. something with a keyboard and a filesystem that it is possible to write and run programs on) at home?
To keep that line of reasoning going, what is the purpose of the university, if you're supposed to learn everything on your own?
I know this is sarcasm, but—
Network building, external proof of ability to work, and a place (and just as important - a time) to translate who you are into who you want to be.
These were always the reasons, the rest you learn on the job.
Ya, I have to agree. Although you may learn, it's clearly not the primary intention of a University to teach anything but your ability to do whatever it takes to score well or do publishable research.
It can be even worse.
I've seen younger generation only use Google Docs and streaming services (music/video) and not even understand what a "file" is, because everything is just on the internet.
Doesn’t Google Docs stores its files on Google Drive? What do they call the things they open to open an existing doc?
> can't figure out how to unzip a zip or even finding out where files get downloaded to.
I have issues with that. FF doesn't show the path in the list of downloads. There is a button to start a file manager, but I have no file managers installed, so button doesn't work. In some cases I didn't find the better way than to copy the link and to download again with wget.
If you don't have a file manager on your system chances are you can figure out where downloads are going to.
Well, I manage it sometimes, but I then I forget how I did it. I think the way to do it, is to try to download something with ff again, but stop at the file chooser dialog to figure out where it points to.
You can configure FF that it will ask you each time, where you want to save the file.
At one point, every member of a CS program started without having ever seen or touched a computer. Everyone has to start somewhere. We do not reject new biology majors because they had never touched a microscope before entering the program.
Sure, but I think the typical path for those who survive and strive in a CS program is to have touched a computer for the first time well before starting work on a college degree for it.
That's like trying to learn a foreign language by picking reading War and Peace in that language, without ever having seen a single translation to that language, or having already read War and Peace in your own. There are a lot of steps you need to take before then.
I would also be pretty surprised if a biology undergrad had never touched a microscope, possibly with the exception of the most impoverished among us. I imagine most people have tried one at some point along the K-12 journey, and there are more introductory treatments of e.g. life science on the way as well.
Starting CS without having "seen or touched" a computer would be like a biology undergrad who wouldn't be able to tell you whether a dog or a tree is a plant or animal.
If you're saying that at one point in history, a given cohort of new CS students had never seen or touched a computer, I have my doubts, but it depends on how you define CS program. Before computer science was a formalized education stream, it had a variety of other names like "Business Computing" or something related to information technology, but you'd have to go pretty far back imo before you find a whole classroom of entrants into such a program that had never seen or touched a computer. By the time it was called CS, I do find it a bit of a reach that you'd find less than say 10% of students opting into taking it without that low bar being passed.
Likewise the biology example seems strange; sure maybe people haven't used a microscope specifically (unlikely imo), but they very likely have used any number of other implements and taken at least one secondary school biology course
The difference is that these days the people are surrounded by computers and probably interact with a computer many hours every day, yet they are barely more tech savvy than that first lot who had never seen a computer before.
But so it goes when society moves forward.
Calling it an "epidemic" isn't really helpful. The reason there's this shortcoming isn't because it's some problem inherent to those darn kids, it's because the state of computer education is expect them to just figure it out on their own when they have no need or reason to do so.
It’s also just what people are familiar with and had to learn.
I know incredibly competent web developers who don’t know what SSH is or how to use it. Boggles my mind, but I grew up with it so it’s what I’m used to.
> apparently a large number of people these days don't understand files and folders at all!
And here I am shaking my fist insisting these are “directories” not “folders”… ;)
> The decision to skip CSS by depending on https://simplecss.org/ is smart
I was always a little disappointed with how most web browsers choose to render HTML pages that had no explicit styling information. I'm not necessarily saying web browsers should have defaults as opinionated as simple.css, but the default page margins, padding, text styles, headings, etc that they picked aren't particularly attractive.
Opinionated web developers will override the defaults no matter what they are, but if the convention was to have more attractive defaults I wonder if that would have resulted in a larger share of personal websites and blogs created using plain HTML.
That's a historic artifact. If a browser shipped new default CSS today it would break 30+ years of existing web pages.
Hyperbole. It wouldn't "break" all the web pages, they would simply render differently.
Good article, but the reason is obvious: When opening an app or a web app stopped opening a new document and started to present a list of recent documents, that was the beginning of the end. If someone wants a file, they open the app for that file and scroll down. They have never needed to make sense of a file existing independently of the app in which it was create and may be viewed. This process was cemented by iOS's absence of a file manager.
The Android Files app has always allowed access to local files, and the iOS Files app has allowed access to local files since 2019.
https://www.cultofmac.com/news/files-app-makes-ipad-more-mac...
However, neither of them are typically used in mobile UX patterns.
> the iOS Files app has allowed access to local files since 2019
Huh. I just opened my Files app on my iPhone 12 and went to On My iPhone (which was 2-3 more taps once arriving in the app). I don't see many of my files though, just a few. Some PDFs and a Spotify folder. But I don't see my pictures there? Or are pictures no longer stored as 'files'? Or do you mean that the app has allowed access only to some local user files? It's not all local files. And it's not all non-system local files. And it's not all user files. In fact it is missing > 99% of my user-space files (specifically ones created with default-OS applications on device, by the user).
And if I make a Note in the Notes app, will it show up as a file in the Files app? Probably not, I would guess. Because the note probably isn't really a file anyway. So pictures aren't files, and notes aren't files. What would a file be then? Are files only PDFs? That's the only thing that shows up for me. I guess PDFs are the only things that are files then!
Super confusing experience. I'm a mobile app developer by the way - on Android. Android sucks at this too of course. But the iOS Files app is much too limited to enable users to 'get' the concept of a file.
Photos taken on the camera, shared to you, or “saved to photos” will live in the Photos app. The files app primarily contains things you download from your web browser, including images downloaded and not “saved to photos” and images extracted from zip, etc. I guess some apps can save data there too. It would be nice if there was a back road to images stored in Photos app via Files app, but the distinction is otherwise well defined.
Aha! So some photos are actually 'files', but some are not! The confusion continues! I get why Apple has it this way - current iPhones are very very popular and selling them with the current UX makes Apple a lot of money.
But it's pretty clear that the Files app is not meant - in any way - to help users understand computers, what files are, etc. It is obtuse and confusing as soon as the user wants to leave the iOS ecosystem (even to go use a Mac).
you're jumping to conclusions. One does not follow from the other.
(a) apple doesn't show users all the files on their iPhone
(b) apple makes lots of money
There is no evidence that a causes b. It's possible showing the files would make them even more money. It's also possible showing the files would have no effect on how much money they make.
The five years since then haven’t been enough time to change 12 years of behavior.
I think the fundamental approach being taken by this project is immensely valuable to the world. This kind of education about open standards might actually be the most powerful tool that can help us take steps in the direction away from giant opaque corporations and back towards the systems based on open standards that the internet originated from. I really hope this project continues to be updated and get more and more eyes and contributors. If you feel the same way, I'd say at least throw it a GitHub star. https://github.com/blakewatson/htmlforpeople
(Note: I have nothing to do with this project thus far and have nothing to gain from saying this.)
I really hope so too. I really wonder what would happen if there was an alternative like... instead of spending X dozen hours learning how to use WordPress, or MS Word for that matter, people (in the general population) felt like spending those X dozen hours learning HTML was a viable and useful alternative to achieving their goals!
Mozilla has amazing documentation that's been around for years.
Here's their basic html tutorial section: https://developer.mozilla.org/en-US/docs/Learn/HTML
No one is or has been stopping people from learning HTML.
Super approachable. (sure Jan meme.gif)
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?
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.
OP here. I appreciate the kind words. Yeah, I hope it finds its way into the hands of non-professionals.
Will you add on to it to include custom CSS, or maybe a section for using different CSS templates (and where to find them), to make a slightly larger website like your own (blakewatson.com)?
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.
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.
It's weird seeing this getting emphasized over and again in this thread.
> There are a shockingly large number of people out there that use computers EVERY day that won't know how to do this.
That's very hard to believe. Even my mom, who doesn't use computers at all, would know what folders and files mean.
The people who don't know what files and folders are - can't immediately be beneficiaries of this guide, right? They have a lot more fundamentals to cover before anything like this.
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.
Android allows you to create directories.
As does iOS, but the instructions given were for a desktop device.
OP here. Yeah, I was a bit worried about this, and even though I kind of mentioned it in the introduction, I think it deserves more attention. I'm not sure if I want to write something and host it myself, or maybe just point people to some kind of primer on creating files and folders.
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.
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.
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!
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.
You're probably already aware, but <html>, <head> and <body> is optional in HTML5, so it's a "proper" document without them.
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'.
It enables quirks mode when missing.
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?
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.
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.
HTML is not for people
Would something like this work instead of using Notepad/TextEdit (at least at first)? Of course, this code could be made better...
Oh yes, that is easy enough and it works fine. It can even save with:
i had the same thought: https://github.com/gabrielsroka/gabrielsroka.github.io/blob/...
I plan to dig in deeper, but this looks like a great introduction to building websites.
I teach a one semester high school Web Design class and currently use a mixture of lessons from these two for learning the basics of making pages by hand with HTML and CSS:
https://internetingishard.netlify.app/
https://www.washington.edu/accesscomputing/webd2/student/ind...
This looks very promising and could supplant or at the very least supplement those.
Check out Mozilla's tutorials, too.
https://developer.mozilla.org/en-US/docs/Learn/HTML
> 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.
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.
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.
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.
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.
One additional book recommendation: HTML and CSS, the Good Parts.
I'm happy to see more people recommending Neocities :D
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.