Teaching Ideas for Programming with TechnoCode

TechnoKids’ newest release is TechnoCode, a technology project that introduces coding with Scratch to elementary and middle school students. It is an ideal project for Grades 4 and up. Jam-packed with programming activities, TechnoCode sparks an interest in computer science. Step by step instructions explain how to build animations, stories, games, art, music, and simulations.

Empower students with real-world skills they can use in the workplace. The instructional materials in TechnoCode encourage students to think like programmers. Resources include sample videos to inspire imaginations, planning sheets with guiding questions to help design scripts, assessment tools to evaluate student work, and coding journal logs to reflect upon learning.

Ideas for Implementation

The TechnoCode project has students create animated scenes, construct mazes, broadcast stories, engineer games, design artwork, compose music, build a diorama, and more! The activities are suitable for any teaching situation. Select the option that works best for you and your students:

Coding Unit with Elementary Students: Assignments in Sessions 1-3 in TechnoCode are ideal for students new to Scratch. The activities are perfect for Grades 4 and up. Students design animations, create art, develop games, and compose music. The emphasis is on coding basics including how to build scripts, sequence commands, control action with if then conditions, and create simple loops. The activities focus upon directing movement, synchronizing sound, and understanding x and y coordinates.

Coding Unit with Middle School Students: Once students understand the fundamentals of coding in Sessions 1-3, they extend their learning in Sessions 4-6. The activities are ideal for students that understand the fundamentals and are ready for a challenge. The critical and computational thinking required is ideal for students in Grades 6-8. They produce a story, engineer a game, develop a treasure hunt, build a diorama, and remix a project. The emphasis is on having students manipulate the appearance of sprites, direct the timing of events with broadcasting, and create original artifacts using conditions, variables, and operators.

Build games using Scratch. Learn how to use variables to track the score.

Computer Science Course: TechnoCode has 25 assignments designed to ignite an interest in computer science. The focus is on thinking like a programmer. Each coding activity is divided into four parts – exploration, practice, freestyle, and reflection. Using a question and answer format, students discover the function of command blocks. Next, they follow guided instructions to build scripts. Afterwards, they apply their skills to complete open-ended challenges. Once a Scratch project is finished, students write a coding journal entry to reflect upon the experience.

Hour of Code: If you only have one class to teach coding there are many assignments in TechnoCode that can be used for this purpose. If your students are beginners, they can develop simple animations. Assignment 5 targets how to build a script, Assignment 6 explores directing movement, and Assignment 14 focuses upon changing the appearance of a sprite. If your students have existing knowledge of Scratch, the skill reviews in Sessions 2-5 are excellent challenges.

Coding Workshop Series: If you are running a workshop series as part of an after-school program or community event, then you will need to select assignments that fit the number of classes offered. As well, consider the age range and coding abilities of students.

Coding with Scratch is highly addictive and fun! Your students will develop a host of essential technology skills as they create unique games, interactive stories, animations, and more!

Teach HTML Coding using Chromebooks

A web-based HTML Text Editor is required to teach HTML coding using Chromebooks. There are several free apps available that integrate with Google Drive. This allows your students to easily create or edit HTML files.

If you are using a Google Classroom you may need to gain permission from your system administrator to have students connect an HTML Text Editor to their Google Drive. Our favorite app is HTML Editey . If you are unsure if your students have access to this app, refer to the section Multiple Ways to Access HTML Editey at the bottom of this blog article for helpful suggestions.

Use HTML Editey to Teach HTML Coding using Chromebooks

When developing the TechnoHTML5 version for Chromebooks we tested many HTML Text Editors. This technology project has STEM activities that spark an interest in computer science. Although the instructions will work with most web-based HTML Text Editors the app we recommend to introduce programming to kids is HTML Editey. Here is why!

Preview Pane

Students can live preview their HTML coding as a web page. This provides instant feedback when coding. HTML Editey has two panes. On the left side is the source code. On the right side is the web page. As students type an HTML tag they can immediately see the text, image, or hyperlink. Students can quickly notice if an HTML tag is correct. If it is not, the content won’t display. This is a great way to develop coding skills.

Teach HTML coding using Chromebooks with HTML Editey. See a live preview of the web page as you code.

Line Numbers

HTML Editey has line numbers beside each line of code to label each HTML tag or CSS attribute. The number line is on the left side of the pane. This information provides an identifier when analyzing the code.

Temporarily Hide a Code Snippet

Most HTML tags have an opening and closing tag. The content between these tags can be temporarily hidden from view. This is helpful if you have a table or long list of items that is taking up space in the source code pane. Code snippets that can be collapsed or expanded are shown with an arrow beside the line number. When the arrow is clicked the code is no longer visible and a symbol shows in the code. When the symbol is clicked the code reappears.

Temporarily hide a group of code from view.

Wrap Text

Some HTML Text Editors keep each line of code as one continuous line that stretches across the screen. When there is lots of text it becomes difficult to read or edit. The great news is HTML Editey wraps long lines of code to fit inside the source code pane.

Color Code HTML Tags

HTML tags are used to add content to a web page. HTML Editey color codes the HTML tags. For example, HTML tags are red. Web addresses are green and equal signs are blue.

The color coding of HTML tags makes them easy to read.

Color Code CSS Tags

CSS is used to style the content of a web page. It sets how the background, headings, paragraphs, or images look. HTML Editey color codes the CSS attributes. To illustrate this point, CSS properties are yellow. CSS values are orange and the size of the CSS values such as px or % are purple. This makes it easy to code the appearance of the web page.

The color of CSS attributes helps to code the style of a web page.

Auto-pairing of Tags

Many HTML tags are written in pairs <body> </body> <h1> </h1> <table> </table>. Each pair has an opening and closing tag. For instance, a paragraph starts with the tag <p>. The text that will show on the web page comes next. The paragraph ends with the tag </p>. To speed up coding, HTML Editey automatically adds the closing tag.

Inspect Images

When using a web-based text editor to design a web page, images are added by linking to an existing picture on the Internet. File properties can be shown directly in the preview page of HTML Editey. Right click on an image and select Inspect or press CTRL + SHIFT + I on the keyboard. The dimensions will display.

The height and width information can be used to set the size of the image in your web page. To give you an idea, if the original image is 600 pixels wide by 400 pixels high but you want it smaller on your web page, you can divide each number by two to cut the size in half. This can be put into the img src tag to control the appearance
<img src=”https://www.site.com/picturename.gif” width=”300″ height=”200″>.

Display image information to set dimensions.

Identify and Explain Errors

HTML Editey does show coding errors. A red x will appear beside a line number. When clicked a message displays describing the error. If you are new to coding often the explanations are not very meaningful. However, they do help beginners know that there is a problem they need to solve.

Multiple Ways to Access HTML Editey

There are several ways to access HTML Editey.

Option 1: Visit https://html.editey.com/ and login to Google Drive to create a new HTML document.

Option 2: To create a new HTML document, you can access HTML Editey directly from Google Drive. To do this, sign into your Google Drive. Click the New button and then select More. From the list, select HTML Editey from the list. Afterwards you may need to sign into the app to use it. If the tab opens to a blank window, you may not be signed into the HTML Editey app. Close the blank window. You may see a message. If you do, click Sign back in. Now, try the steps again. If this doesn’t work, use Option 1.

Option 3: To edit an existing HTML document in Google Drive, select the html file. Click More actions or right click the file in your Google Drive. Select Open with.
Pick HTML Editey from the list.

TIP: To right click on a Chromebook, press the ALT key at the same time you click the mouse button or track pad.

New! HTML Coding for Chromebook Users

Teach HTML coding using Chromebooks

TechnoHTML5 has always been a favorite top seller for educators. With the current focus on STEM education, teaching HTML coding is more relevant than ever. Now that Chromebooks are prevalent in the classroom, TechnoKids has modified this popular project specifically for Chromebook users. Using a web-based text editor that integrates with Google Drive makes HTML coding a breeze. Now when you order TechnoHTML5 you will receive two versions: one for desktop HTML text editors such as Notepad or Code Writer and a version for Chromebook users that uses a free app such as HTML Editey.

STEM Activities to Learn Life Skills

I wrote in a previous blog about the reasons to teach programming. Of course, not many students will choose careers as computer scientists or program developers, but that’s not the main rationale for coding lessons. Strong communication skills and personality traits that lead to success in life and the workplace are critical goals for students. Learning to code does just that. As they learn to plan, organize, write, edit, and troubleshoot, students build invaluable life skills. Perseverance, problem solving, analytical thinking, creativity, and collaboration are enhanced by learning programming. These crucial personal habits will benefit students for life.

Everything Educators Need to Teach HTML

TechnoHTML5 for Chromebooks is an introductory HTML project for middle and high school grades. Students build a web page using HTML and CSS. They style text, graphics, and hyperlinks. Optional challenges have them format lists, add a background image, create a class, add animated gifs, and more! Step-by-step instructions with checklists in the Student Workbook build organizational skills. The Teacher Guide includes assessment tools such as a summary of skills and customizable marking sheet to evaluate the completed web page projects. Digital resources include sample files, reference sheets, review questions, and skill reviews for practice.

Students design a web page on the topic of their choice using TechnoHTML5.

Chromebooks Make HTML Coding Easy

HTML Coding is fun and easy using a Chromebook and Google Drive. coding for Chromebook On a desktop, I found it cumbersome to always save my work in the text editor then toggle to a browser and refresh to see a preview. But using a free text editor for Chromebooks such as HTML Editey provides instant feedback. Two panes allow the user to write code and see immediate results.

There are many other great features to HTML Editey that we’ll write about in an upcoming post.

New Free Video and Sound Library

As a sound library resource for students, I posted a blog a while ago with a list of free sites. Here’s another one that’s definitely worth a visit! Videvo is a great resource for high quality music, sound effects, video footage, and motion graphics. The site was originally created as a resource for filmmakers to find free video and sound clips, but they aim to be a powerful educational tool too. And best of all, much of the Videvo sound library is free.

Here are six features I liked about Videvo:

Free!
When browsing through the library or performing a search, you can always select to show only free clips.
Multiple Search Options
To find a sound or video clip, you can search by keywords, type of clip, category, resolution, or license. The site is engaging, simple, and easy to use. Clips are clearly labelled with file information such as duration, file size, resolution, format, and more, as applicable.
School Themed Categories
The categories suit use by students. Themes include animals, food and drink, nature, musical, sport, people, and more.
Easy Preview
Mouse over to preview a sound or watch a motion clip. Note: when previewing sounds before downloading, there is a Videvo voice over, but it’s not part of the sound after saving.
Free Account
You can register for a free account, but it’s not necessary. A free account allows you to see your download history, create a profile, and upload your own video content to the site.
License Information
Downloading and using online materials is a practical way of teaching students about copyright. Students should be made aware that copyright belongs to the author of each clip even if they are royalty free. For free clips, you are asked to share your Videvo experience via social media, but this is not required.

There are 4 different types of licensed clips on Videvo:
1. Royalty Free – can be used for any use, just not be made available to any other site for download
2. Videvo Attribution License –the author must be credited when using a clip
3. Creative Commons 3.0 – free to share and adapt; you can remix, transform, and add to a clip
4. NASA Guidelines – free to use but should acknowledge NASA as the source