Code Is Pass-Fail

August 13, 2025

To run a program is to test the code. It passes the test, or else it fails. For students of code-writing (like me), failure is the better teacher. The better students embrace failure and turn it to their good.

There is usually a recent story behind a sermonesque subject such as this one. Mine involves one wrong word in one instruction.

A companion site at Neocities.org describes a recent struggle to fit a wide web page onto a narrow smartphone. The target of learning was CSS Media Query. The idea was to shape a page differently depending on the size of the screen.

On a wide screen, the page would exhibit two columns. On a narrow screen, it would re-align everything into a single column. Either way, the page would look nice and appear in a logical order when read left-to-right, top-to-bottom.

All went well at first, viewing the result on a computer. The screen is wide and the two-column format looked right. The browser window can be re-sized by dragging the mouse. When I narrowed the window the visual presentation changed to a single column, as intended.

But a passing grade gives no information about quality or completeness. When I viewed the page in a phone it looked horrible. It stayed in two columns, squished down too tiny to read. Failure!

I spent a day and most of a sleepless night looking for what went wrong. The web fairly crawls with articles explaining how to make this trick work. I read many, over and over. I looked and looked at my code. It sure seemed like I was doing everything right. Yet it would not work.

Finally found the trouble, tucked innocuously into some early lines of the web page html code. I had written:

<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<meta rel="viewport" content="width=device-width, initial-scale=1.0">

The error was in the line beginning with “meta”. The word “rel” should instead have been “name”. The discrepancy evaded my notice when I searched fast and furiously for it. I should have written the line this way:

<meta name="viewport" content="width=device-width, initial-scale=1.0">  
  

Repeated reading about how CSS code detects and deals with different screen sizes kept returning my attention to this essential “meta” code line. Finally I slowed down enough to see my mistaken word. Changed it, fixed it. Worst of all, I had known it all along. I simply fell into a rhythm on that page of typing “rel” and stopped paying attention.

Thanks to my phone giving my code its failing grade, I move forward not only more humble about paying attention but also a lot better educated about working with viewports (the visible part of a screen) when laying out a web page. By contrast, a passing grade would have taught me nothing that I did not already know.

We pay for our mistakes in toil, time and tears. Treat the cost as tuition at The School of Hard Knocks, where the school colors are Black and Blue, and the school song is Ouch!