Okay, so I wanted to make a crossword puzzle, you know, like the ones you see in the newspaper? But I wanted it to look and feel kinda like those old Windows ones. So, I started messing around to see if I could pull it off.
First, I thought about what makes those Windows crosswords… well, Windows-y. It’s the simple, almost blocky design, right? So, no fancy gradients or anything like that.
I decided to try making it with just plain old HTML and CSS. No fancy Javascript libraries or anything, just keeping it basic.
I started by making a grid. I used a <table> element, because, well, a crossword is basically a table, isn’t it? Each cell (<td>) would be a square in the crossword.
I used CSS to make it look the part.
I made a simple class using style tag:
<style>
.black-cell {
background-color: black;
</style>
I made it look better, and the look that I wanted to give it:
<style>
table {
border-collapse: collapse;
border: 2px solid black;
td {
border: 1px solid black;
width: 30px;
height: 30px;
text-align: center;
font-family: sans-serif;
</style>
The HTML part was also quite simple:
<table>
<tr>
<td></td>
<td class="black-cell"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="black-cell"></td>
<td></td>
<td class="black-cell"></td>
</tr>
</table>
I gave the cells a fixed width and height to make them square.
I used border: 1px solid black; to get those distinct black lines around each cell.
I used background-color: black; for the filled-in squares.
And, I set the text-align: center; to make sure any letters I typed in would be nicely centered.
The border-collapse did its job.
Then, I just played around with adding letters and blacking out some cells until I had a little mini-crossword. It wasn’t automatic puzzle generation or anything, I just manually put in the letters and black squares.
It took a bit of fiddling to get the borders and spacing just right, but it ended up looking pretty good! It definitely had that old-school Windows vibe.
It’s not perfect, of course. If you wanted to make a real, interactive crossword, you’d probably want to use JavaScript to handle the clues and inputting answers. But for a quick, static crossword that looks like it came straight out of Windows, this worked pretty well!
