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!