DEV Community

Cover image for Can you hand write a website in Notepad?
Thomas Pikauli
Thomas Pikauli

Posted on

Can you hand write a website in Notepad?

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!

Latest comments (22)

Collapse
 
dcjulian profile image
OldBlueBen

This is wicked sweet. I wanna have that sort of fluency in HTML.
May I use this snippet? With a few alterations?

Collapse
 
shayd16 profile image
Shayne Darren

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

Collapse
 
ma5ly profile image
Thomas Pikauli

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.

Collapse
 
nektro profile image
Meghan (she/her)

I still write all my websites by hand. VS Code makes me faster, not better.

Collapse
 
codemouse92 profile image
Jason C. McDonald

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.

Collapse
 
isaacdlyman profile image
Isaac Lyman

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.

Collapse
 
quii profile image
Chris James • Edited

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.

Collapse
 
ma5ly profile image
Thomas Pikauli

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 :)

Collapse
 
maeghith profile image
mæghith | Ramón FSM

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

Collapse
 
ma5ly profile image
Thomas Pikauli

Haha, yeah the br's were my best friend back then. So versatile :p

Collapse
 
ryan profile image
Ryan

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 😀

Collapse
 
ma5ly profile image
Thomas Pikauli

The discovery of a proper code editor with syntax highlighting was also a game changer for me back then. Such simple joys!

Collapse
 
simoroshka profile image
Anna Simoroshka • Edited

I remember discovering Notepad++. It had syntax highlighting! Mindblown.

And yes, tables for layout!"

Collapse
 
ma5ly profile image
Thomas Pikauli

Syntax highlighting was, and maybe still is, pure magic! So good and colorful :D

Collapse
 
hongkongnoit profile image
等投胎窮三代IT狗
<!DOCTYPE html><html><head><title>Hong Kong no IT</title></head><body><h1>香港創科局高官二世祖圍威喂</h1><p>I don't understand how difficult to create a HTML file in raw editor</p></body></html>
Collapse
 
briang123 profile image
Brian Gaines • Edited

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.

Collapse
 
ryansmith profile image
Ryan Smith • Edited

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. 😂

Collapse
 
ma5ly profile image
Thomas Pikauli

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

Collapse
 
dystroy profile image
Denys Séguret

I build all my sites and even the complex web applications in vi. Is that OK ?

Collapse
 
matthewbdaly profile image
Matthew Daly

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.

Collapse
 
idanarye profile image
Idan Arye

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.

Collapse
 
ma5ly profile image
Thomas Pikauli

I don't know, you tell me!