Close
Create an Account
Student

Student

Learn the basics of coding while building your own website
Parent

Parent

Track your student's progress and assign them challanges
Teacher

Teacher

Create a classroom and assign lessons to your students
Already have an account?
Log In
Close
I Am A
Student

Student

Learn the basics of coding while building your own website
Parent

Parent

Track your student's progress and assign them challanges
Teacher

Teacher

Create a classroom and assign lessons to your students
Don't have a Google account?
Log In
Close
Log In

Welcome Back!

Login to have access to all of Codemoji's features, including all of our HTML, CSS, and JS lessons!

Forgot password?
Don't have an account?
Sign Up
Login using Google?
Close
Google Log In

Welcome Back!

Google Login allows you to connect with your classroom in the click of a button!

Don't have a Google account?
Log In
Close
Create a Student Account

Welcome to Codemoji!

Not a student? Click here
Already have an account?
Log In
Close
Create a Parent Account

Welcome to Codemoji!

Not a parent? Click here
Already have an account?
Log In
Close
Create a Teacher Account

Welcome to Codemoji!

Not a teacher? Click here
Already have an account?
Log In

Coding Blog By Codemoji!

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.
Codemoji Emoji Box

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.

Header/panda discription

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.

 HTML Lessons 3 instructions

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.

Writen By Doug Peterson
Doug Peterson is a sessional instructor at the Faculty of Education at the University of Windsor. I have taught Data Processing, Computer Science, Accounting, General Business Studies, and Mathematics at the secondary school level and was the Director of Business Education at Sandwich Secondary School in Lasalle, Ontario. I also was a Computers in Education Program Consultant with the Greater Essex County District School Board and before that, the Essex County Board of Education. In the middle of all this, I managed the Information Technology Department for the Greater Essex County District School Board. Most recently, I am teaching the Computer Studies teachable option at the University of Windsor. My formal education includes a Bachelor of Mathematics degree from the University of Waterloo and a Bachelor of Education degree from the University of Toronto. Ontario Ministry of Education and Training qualifications are in Data Processing, Computer Science, Accounting, and Mathematics. My personal website can be found at http://www.dougpeterson.ca . Most of my digital footprint can be found here. Check out my About.Me page.

Parents! Teachers Learn More!