Learning HTML all over again

If you’ve been around constructing content for the web for a while, you’ve undoubtedly created your own using a plain ol’ text editor.  

That was me, in the beginning.  I had a printout of all of the HTML tags available to me along with the source code of a website or two that had impressed me.  That’s how I learned to develop for the web.  There was a great deal of typing, saving with a .htm or .html extension and then opening it in a web browser to see how badly I had been.  Then, back to the editor for a tweak here and a tweak there, save, reload in the browser and see if that fixed it.  Talk about your step-wise refinement.

Then, along came an update to Netscape and its Composer.  It was a huge improvement although it felt like cheating!  We used it at the heart of our Women in Technology program with a great deal of success because you could be up and running pretty quickly.  Next, through OSAPAC, we licensed Dreamweaver and never looked back.  And yet, despite the tools we have today, the skills from those early days of learning all the HTML tags is still one that I use with this blog to tweak content here and there.

So, I guess the bottom line message is that there still is a need to learn HTML at some level.  I know that many use it with their Hour of Code strategies because it’s easy to publish for the web and see familiar results.  At the teaching heart of it, though, you need to keep in mind that typing text just doesn’t have the motivation factor that dragging and dropping coding has.

Until you give Codemoji a shot.

When you enter the site, you do have a choice of going to a Playground or take some Lesson.  The ego in me said to go and play but I quickly learned that maybe that wasn’t the best of choices so I went back and took some lessons.

Essentially, you have an open workspace where you drag and drop some emoji to program your webpage.  Think of it as Scratch-like for HTML.

You’ll see that each is attached to the familiar (at least to us) HTML tag.  Like other drag and drop languages, you essentially drag a template for an instruction onto the workspace.  Then, with your keyboard you modify it so that it does what you need it to do.

Once selected, each of the emoji has details about just what it does and how it’s used.

Quickly frankly, it was a nice review for me to go through and click on each of them to refresh my memory as to what each tag does.

Of course, the proof is to actually run your code to see what happens and you do it right in the environment.  Certainly, the web doesn’t always run on emoji so you can flip to see the actual code that you’re generating.  

I actually quite enjoyed poking my way through the lessons.  There is a great deal of the basics that I hadn’t had to remember for quite some time.  Today’s tools have largely made things “behind the scenes” invisible.

The more I poked around, the greater kick I got from the choice of emoji to represent the HTML.  Get the hamburger reference?

I would encourage you to kick the tires to see if this has a place in your coding plans.  It’s a rather unique way of presentation.

I’ll bet that it wakes some memories of your own.