Psssst! Hey, you! Your code doesn't have to be perfect to publish a site.
This series of articles will walk readers through the process of creating my quick sight words application, and the improvements and features made along the way, with the hope that it will inspire even beginner web developers to dig in and make something. The beautiful thing about websites is that they never truly have to be 'finished,' work on them, break them, change them, improve them to your heart's content!
Some Background
For the better part of the last year, I haven't touched code outside of work. Between adjusting to my two sons being in separate schools for the first time, learning the ropes at the new work role I took on last fall, managing the community side of an online coding educational program, using what felt like all my brain power ramping up on the client project I'm assigned to, and just living life, I didn't make coding in my elusive 'free time' a priority, and that's ok.
Just last week, my kindergartener and I were working on memorizing sight words, when the idea came to me that I could very easily make him a simple web application where he could practice his words in a more fun way than looking at a list. Suddenly, I made time for coding again!
I knew that if I was actually going to follow through and create something he could use, it would have to start as simply as possible - something that could be created and live within one coding session. So I did that. He liked it. So I wanted to work on it more. That's when it occurred to me that documenting this iterative improvement of a web application might be worth squeezing a little bit more of my precious free time for.
Getting Started
Barest Bones Project Setup
The best place to start is at the beginning, so I created an index.html file within my project directory and started with boilerplate HTML markup.
Our school sent home 3 sheets of paper in the fall titled, 'Book 1', 'Book 2', and 'Book 3'. Each of these books contains 100 sight words that the students are expected to learn by sight at home throughout the year. I wasn't sure if my son would even take to this app, so I just started by putting the 100 words of the first book into an array within a script.js file linked to my HTML.
(I probably could've gotten away with just inputting 25-50 of the words for an initial interest check, but hey, typing practice is fun)
Tip: Remember to wrap the sight words in quotes as you type them out
Getting Something on the Page
At a minimum, I knew the app had to display a random word from the list and have some way for my son to trigger a new random word. Translated: A text field and a button.
I added an eventListener to the button that would call a function to insert an item from a random array index.
Tip: Click on the 'Edit on Codepen' text in the top right of the embedded box above to see my code in detail.
Make it Look Nicer
Technically that was a working sight words application, but I knew I had to make it look a little bit nicer if there was any chance it would interest my son. Time for some quick CSS in a linked style.css file.
Larger text, an ever so slightly prettier and larger button, slight color adjustments, and a better font for emerging readers (according to this post) were about all I was prepared to invest in terms of styling for this MVP build.
I also threw in a quick line of code to make sure the page always loads with a random word from the book list.
Publish
You could leave your project in a codepen or similar, but I'd recommend throwing it into Netlify quickly for free.
Next Steps
The beautiful thing about this is that if you publish your app and decide you don't like it or are bored of it you can just walk away now and never look back. If you are still into it and want to make it better, you can do that at your leisure.
My son LOVED his flash cards and I earned major mom points. I'll share my thoughts and progress that I made on the next work session in my next article.
In the meantime, if you feel inspired to publish something imperfect, what are you going to create? Let me know in the comments!
