Hour of Code for Teachers Learning HTML in BLEND


Today’s Contributor: Carlos Lopez

Carlos Lopez is a Spanish teacher at LBJ Early College High School and loves languages and communication so much he’s trying to learn the how the computers do it. For the last couple of years he has been dabbling in Computer Science, Web Development, Cyber Security, Javascript, and Python. When not dabbling he is usually thinking about and looking for hip places and events in Austin to ride those scooters to because he is that guy. He also really doesn’t use social media but would like for you to follow him on twitter or linkedIn in case he ever does.


Since there’s a doom and gloom think piece published every 5 seconds about how AI automation machines will kill off more things we love at a faster rate than millennials, this blog post was originally about automating boring teacher stuff with Google Sheets to celebrate educators’ jobs being safe from the evil robots. Then I was asked to add some “simple & easy” design to our campus staff Blend course to prepare for STAAR re-testing. Whatever happiness I felt about surviving the AI apocalypse before was pretty much gone by lunchtime.

I am a really big fan of Blend/Canvas but sometimes trying to make instructional content that is unique, dynamic, responsive to all screens, and nice to to look and navigate can quickly end up being way more challenging than expected. So, as fun as joking about our future AI overlords and automating things with Google sheets could have been – and since it is Computer Science Education Week – I would like to take advantage of this teachable moment I am having and share out a couple of free online tools and resources I used that have made my life just a little bit easier when creating layouts and tweaking the design of my Blend/Canvas pages directly through their HTML. I also want to challenge anyone reading this to knock out at least 1 Hour of Code this week because why should kids be the only ones having fun?

First thing’s first — Keeping up with technologies in education that are actually worth learning is hard enough, so giant kudos to every single educator that insists on leveling up their Blend and digital creator game when they can. The purpose of this post isn’t to get too deep or too heavy into the technical aspects of any design or coding. I just want to share tools, resources, and ideas that have added a bit of light to my own personal blended learning path with hopes that, in the mix, there’s a little something for anyone to take home regardless of technical expertise. I know I really appreciate when someone shares something that gets me excited and curious enough to continue the learning on my own and the goal for this post is to hopefully nudge any of you interested in learning some HTML programming to actually do it. Double points for using what you learned on your Blend pages!

 🤔 “But what the fire does this code even say?”🤔 

Some of y’all may recognize the HTML snippet in the image above from when you accidentally clicked on that little blue HTML Editor link while editing your Blend courses. I know you immediately clicked back to Rich Content Editor for safety. I don’t blame you. Looking at html code in this format can definitely raise anxiety levels and make even best trained eyes crossed. This is a huge barrier to exploring or diving into the deep end of fancy custom course design. (Speaking of swimming, everyone should check out Stuck in the Shallow End by Jane Margolis. Great perspective on Education, Race, and Computing.) Fortunately for us, some angels out in the interwebs have created online tools to help us tackle this garbled mumbo jumbo. Enter Code Beautify.  By simply copying and pasting the gobbledygook code that the Blend HTML Editor creates for you, this site can make even the ugliest code instantly beautiful. Although interpretations of beauty vary, happiness is beauty and the happiness that can come from improved code readability by simply adding indentation and color coding to text cannot be denied. Plus, when your code is pretty and neat, it’s waaaay easier to modify specific lines of code and rapidly implement specific changes.

Click here to get an ‘ugly’ HTML code sample that you can copy and paste into your own Code Beautify page and try it out.

 😍“I have beautiful code– now what?”😍 

Well, Code Beautify is not just a one trick pony. Not only does this site make your code pretty enough for Instagram, it will run your code and instantly show you how most modern browsers interpret it in one click as well. Getting instant feedback on the changes you make can be very helpful while learning HTML and can also take a ton of the guesswork and frustration out of the layout and design process. You can also update and re-run your code as often as needed while making and breaking your page, over and over, on your way to design perfection. When you’re done with your modifications, just copy your new beautiful code and paste it over your old ugly code in Blend’s HTML editor and voila!  Fair warning, not all images and objects will actually display in Code Beautify but the containers they’re supposed to be in will be visible and give you a general idea of what the site layout will look like. (Warning: Until you are very comfortable with HTML, always use the integrations and embed tools Canvas provides on your school projects first.)

 🤷‍ Cool, the code runs when I press a button. So what’s an HTML? 🤷 ‍

Well now that you made your blend code pretty and know how to quickly check to see what it does, it’s time to start cooking with fire and making your own HTML elements. If you’re familiar with HTML then Code Beautify could be all you need to continue modifying your Blend code. If you’re not sure where to even start, I want to share another site that could be a little more helpful in learning HTML.

Repl.it – Creating and Testing HTML Elements and Page Layouts Online

If repl.it had a ‘beautify’ feature it would have been a one-stop shop for this entire post. Repl.it is an online IDE that also allows you to edit code and execute it on one screen without downloading or installing any extra software on your machines. There are many of these online IDE’s out there, but for now I really like this one because it also has learning and teaching components built in, and it seems to get better every time I visit. Skip down to the links to see some HTML code samples I created using repl.it to help you better understand specific HTML elements that are frequently used in our Blend courses. They should help in identifying certain attributes and styles that you can fidget with to change the size, color, and justification of the elements on a page. Just click the link and code away. Don’t worry about breaking anything either. You can always reset this code and you’ll probably learn more by fixing what you broke anyway.

FYI, The grey lines of code are informative comments and challenges. Edit the multi colored code that follows those comments. Click “Run” to see what the code executes.

Practice Code Samples:

YouTube Iframe Embed

Working with Titles, Text, & Lists

Full Announcement Page with Lists, YouTube, and Google Doc Embeds and navigation links.

 🤓But where can I learn more about HTML on my own for free?🤓 

There are ton of resources online these days, but I would definitely start with one of these sites down below, especially if the code samples above made no sense at all. The key to learning any language is to take in a much comprehensible input as you can, make meaning and own it, and continue to build on top of that little by little. These sites are great introductory learning sites that contain plenty of scaffolding to get anyone started and definitely break down the learning and present it in easily-digestible chunks. After leveling up your baseline knowledge, go back to trying to create content for your Blend site and then just watch your HTML skills blow up!

Free Code Camp – Great user interface. Also has a nice certificate track with projects to submit. Plus it’s for a a good cause.

Code Academy – Same as above. You gotta pay for projects though. This site has improved so much lately that I’m tempted to go do the html track for fun

Repl.it  HTML Course- Explanations are not as in depth as in the previously referenced sites but the environment they set up for you is way closer to real deal HTML programming.  

W3schools.com – This site has easy to read tutorials and plenty of sandbox exercises to play with. They have also pretty much cataloged almost every little tiny detail in HTML and many other web development technologies so it really is great for quick reference.

And that concludes this “Way more than 1 Hour of Code” post. I really hope everyone takes away at least something from this because making this ended up being way more work than my original Google Sheets post would have. I also really truly hope that this motivates at least one person to continue their HTML design journey just a little bit further. This type of work can be tough up front, but it is so worth it. My advice is to keep on pushing through because that’s what we tell our kids to do, and as educators we should all know that the “Aha” moments taste way better when you have to swim way upstream to get them (another swimming reference to plug Stuck in the Shallow End.)  Keep on making, coding, and learning, my friends.

<h1>Happy Computer Science Week, everybody!!</h1>

If you have any questions, concerns, or comments, leave them down below. If you know any other tools that are really cool and you would like to share, please drop those down there as well. And if you’re in Austin and interested in starting a coding learning community of some sort, put it out there in the comment universe and maybe we can will it.

 

5 Comments

  1. Thanks for the push to learn more code, Carlos, I am going to pin this tab until I have actually spent that hour (or more) working on coding. I’m excited to check out these suggestions.

  2. Thanks for the tips and the (much) needed push to work on my HTML skills. I have pinned this blog post and will keep it pinned until I get to that hour (or more) of practicing. I am excited to check out your suggested sites.

  3. So many times being able to see/understand (sorta) the html code allows us to fix those stupid problems that we can’t fix through the word formatting. Borrowing and editing code is one of the best ways to learn how to do it yourself!

    1. Borrowing and dissecting code can be helpful, and sometimes it goes from sorta making sense to “Wow, I can’t believe I can do this now!!” lol. It can also be a nightmare if you totally break something and absolutely have no idea where. But don’t let that scare you. Mindful practice makes you better. Nothing is perfect in coding. Good luck learning.

Leave a Reply