I'm deep into VS Code. My React application grows like cabbage. With Prettier, ESLint, IntelliSense and Hot Reloading by my side, I can't really be stopped. I fix bugs, avoid files that have too much awful and complex code for me to stomach, and admire a couple of beautifully simple components that render incredible results on the screen using sophisticated chained array methods and smart dynamic styling.
Suddenly my mind wanders off to the millennium. I remember back then I made websites too. For the longest time I was creating my sites in Microsoft Frontpage. Table after table, image after image, font after font; I was building little shrines dedicated to all my hobbies. I also learned a little HTML from a book my mother bought me.
So after a while, each time Frontpage refused to do what I wanted it to do, I opened up my index.html in Notepad. I searched for where I placed text I knew I could read to locate where the code should be adjusted. With a bit of trial and error I got better and better at it.
At one point I didn't really need Frontpage anymore to create a layout. I was just writing pure HTML. I don't think I even knew what CSS was. I designed my layouts in Photoshop, sliced 'm up in little pieces and then fit them into tables. It seemed I had a lot of fun back then, but it got me to wonder though...
Can I still hand write a website in Notepad like I did back then, without looking up anything on Google?
Well... I tried... and the answer is yes. But it's not pretty, it hurt my head and I don't think I ever want to do it again.
Anyway, here's my shameful attempt at hand writing a simple three column website as if I was 12 years old again. I discovered that modern browsers are very forgiving of my mistakes and that I'm blessed to know how CSS works at my now very advanced age.
<html>
<head>
<title>My Handwritten Webpage</title>
</head>
<body>
<table width="1000px">
<td bgcolor="blue" width="200px">
<font color="white" face="tahoma"><b>Navigation</b></font>
<ul>
<li><a href="index.html"><font color="white">Home</font></a></li>
<li><a href=""><font color="white">About</font></a></li>
</ul>
<br>
<br>
<br>
</td>
<td width="600px" bgcolor="red">
<table>
<tr>
<td>
<marquee>
<font color="white" face="verdana" size="4px">My Handwritten Webpage</font>
</marquee>
</td>
</tr>
<tr>
<td>
<font face="arial" size="15px" color="pink"><i>Welcome to my page! I hope you like it :)</i>
</font>
<br>
<br>
</td>
</tr>
<tr>
<td bgcolor="white">
<font>This is so very hard... I can't for the life of me remember how to do this... And I forget to refresh to see my updates.</font>
</td>
</tr>
</table>
</td>
<td width="200px" bgcolor="orange">
<font face="tahoma"><b>Affliates</b></font>
<br>
<a href="https://dev.to">Dev.to</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
</table>
</body>
</html>
Here's the result in a CodeSandBox
So, how about you? Can you handle this challenge? Can you write an index.html in pure HTML without any Googling? Show me!
Top comments (22)
I build all my sites and even the complex web applications in vi. Is that OK ?
I use Neovim and I've never felt like I was missing anything from an IDE. Thanks to PHPactor I've even got the sort of refactoring tools things like PHPStorm make a big song and dance about.
You can't compare Neovim to Notepad. Vim/Neovim are power editors - like Sublime, VSCode, Atom, or even Notepad++.
Vi, on the other hand, is comparable to Notepad.
I don't know, you tell me!
If I may be pedantic, the following is a valid website:
Yep, just an empty file. Consider yourself code-golfed. 😜
This is one thing I love about the "old web" though. You could literally start from zero and learn as you go. And you still can, it just takes a lot longer to catch up to the pack. Module bundlers, build toolchains, transpilers, frameworks...I love these things and the power they give me as a dev, but I am a little sad about what we've lost in the process.
They're not lost, they're still here! All those technologies we used 20 years ago still work just fine. In fact in a lot of cases they work better and are easier to use than the technologies you mention.
My blog is proudly "just" HTML and one CSS file. Works great.
Ha! I was also surprised to see how forgiving the 'old web' is. It definitely had something magical about it, to have such a low barrier to get started. Especially as a kid. But in all honesty, I'm very happy with my modern tools too :)
Oh man, the image for this post is nostalgic. DBZ sites were how I got started. It looks very similar to how mine did (even your code brings back memories). Notepad was my primary editor back then too. 😂
Haha awesome, I remember there was a pretty big community back then! The image above was the very first design and 'implementation' I did for a somewhat big Dragonball Z website in Holland. One of my proudest webdev moments :p
I remember back in the day (late 90's), I was taught to not leverage WYSIWYG editors to create "stuff", to "do it" by hand, queries, stored procedures, database design, data access, HTML, etc. Nowadays, it's all about knowing what tools to get it done for us. Sometimes, when I'm in front of these WYSIWYG editors, it makes me nervous cuz I'm trying to figure out what they do, LOL; TLDR, yeah.
It's sad that there is a whole generation of devs(me included) who will never know that you could create a website with just an index.html file and a bunch of
<script>tags for imports.Not to mention when hosting(very basic course) just meant opening up an FTP client and moving files from your working directory to the server.
People who did experience it, how about a few posts on your experiences back in the day? :D
There's definitely a tendency these days to use a Formula 1 car when a bike would have sufficed. It sometimes makes things unnecessary difficult for beginners. I would be very curious if I could make websites like I did back then, if I was 12 right now. I guess that's the penalty for a very quick evolution in the web dev world.
I would also love to see more stories from devs who were around back then. How they experienced the transition, and think back of those days.
I don't know that I can say I never look anything up: I do ensure that I have things correctly written. Being a multi-language programmer, I don't trust my memory for a lot of boilerplate.
But, if you'll settle for "wrote by hand in a text editor and didn't copy/paste from a tutorial," my entire website is an example of that. Here's index.html.
I'm not insane, of course. I'm going to copy/paste boilerplate from my own websites, to cut down on stupid errors. In this case, that'd be
<head>. However, that was written by hand originally, so it's still all originating from my own fingers.Sure, I remember doing this before discovering proper code editors. (Though I can't remember offhand the proper DOCTYPE declaration...)
Nowadays though I can't imagine writing raw HTML without Emmet. With Emmet your challenge would be complete in 3 keystrokes 😀
The discovery of a proper code editor with syntax highlighting was also a game changer for me back then. Such simple joys!
All those "br" look like shivers of just thinking about writing an entire site like they were done ~10 years ago.
Quite the metaphor :D
Haha, yeah the
br's were my best friend back then. So versatile :pI remember discovering Notepad++. It had syntax highlighting! Mindblown.
And yes, tables for layout!"
Syntax highlighting was, and maybe still is, pure magic! So good and colorful :D