Tag Archives: stem education

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.

Add the A to STEM Education

Educators agree that STEM education is essential to prepare students for the challenges of the 21st century workforce. The skills they learn in science, technology, engineering, and math subject areas also develop vital skills necessary for success: critical thinking, creativity, problem solving, and collaboration. Although there’s quite a debate about whether the A for the arts needs to be added to STEM to make STEAM or if it’s already there inherently, it’s evident that fine arts, language, and music play a key component in a curriculum to prepare young people to face the complex challenges of the future.

The Arts are a vital part of STEM education

Education Models for the Future

Traditional school curriculum segregates studies into separate subject areas. However, project-based learning is an instructional approach that blends subjects. Students are faced with an authentic, meaningful, real world challenge. And these are non-Googleable questions! Students investigate a problem and propose viable solutions in an interdisciplinary study. Technology is commonly used as a tool. Whatever skills are required to solve the problem – math, science, language arts – must be learned and mastered. Students need to be able to think innovatively, plan, create, and communicate the resulting project. Usually STEM subject areas are needed, and students build valuable job skills such as computational thinking, initiative, perseverance, and communication.

Where Do the Arts Appear?

To answer these ‘big’ project-based challenges, students need to integrate the arts. Creative thinking and design are a central part of innovation. Being able to imagine an outcome, visualize a product, or communicate an abstract idea requires artistic skills integrated with multiple STEM skills.

Here are a couple of examples of the arts integrated with STEM in the real world:

STEM Education requires the Arts

Product Design
Designing an innovative product may require engineering, mathematical, and scientific problem solving. But it also needs an attractive appearance to make an emotional connection to consumers. These are artistic decisions.
Advertising
When a new product is brought to the market, communication skills are essential. Advertisers excel in persuasive writing. In addition, the creation of new logos requires a knowledge of graphic design. The success of a venture often depends on artistic choices.

Infuse the arts into STEM education.

The Arts in Computer Science

We’ve been working with Scratch recently to develop a STEM project, TechnoCode, that teaches coding skills. The students will learn programming skills as they make animations, games, or interactive stories.

Coding design decisions should be engaging so that the user who interacts with the finished product is intrigued and captivated. Also, artistic choices affect if the project is user friendly and fun to play. Some of the stylistic choices students need to make when programming include:

Drawing custom characters
Designing backgrounds
Adding sensory cues – motion, sound, visual – to build interest, express an idea, and hook the user
Creating “Game over” messages that encourage and entice the user to try again
Making scoring and timing decisions using aesthetic choices that appeal to players

The brainstorming, problem-solving, and decision making involved in programming demand innovation and ingenuity in design choices. To foster the trailblazers of tomorrow, STEM education needs to acknowledge and incorporate the arts.

STEM Lesson Plans for Career Readiness

Current emphasis on STEM education and the preparation of students for the workplace of tomorrow prompted me to research job opportunities recently. I found lists of the best STEM jobs and articles about essential skills we should teach our students. There is a consistent agreement that to promote career readiness, we should focus on:

Technology competence in a broad variety of apps
Professional skills such as flexibility, time management, and communication
Critical and innovative thinking

TechnoKids technology projects support STEM education

In this post, I’m picking one particular job and exploring how we can engage students with career readiness skills training. If we can spark kids’ interest with a fun activity and then build valuable STEM proficiencies, the knowledge, attitudes, and skills gained will transfer to other areas. Developing an awareness and interest in STEM related careers is the first step to preparing students for the workplace of tomorrow. Trying on one job can encourage young people to reflect on future goals and choices.

Project-Based Learning and STEM Education

TechnoTravel is a technology project in which students take on the role of a travel agent. They research a travel destination and then use presentation software to construct an advertisement that promotes a weekend getaway. The project-based activities correspond to STEM education guidelines:

TechnoTravel Builds Workplace Skills

What does a travel agent do?

A travel agent needs to listen to clients to understand their needs and interests. They must research information and prepare a proposal. They must schedule an itinerary, calculate costs to fit a budget, and attend to details. Finally, they need to promote the trip to the customer in an attractive and persuasive presentation. In TechnoTravel, students practice all of these skills as they plan a trip considering a target audience and then prepare a presentation as an advertisement.

Completing this project develops effective work habits such as time management, problem-solving skills, communication, perseverance, and productivity.

A travel agent’s responsibilities are similar to many other careers. The work ethic and skills learned, both professional and technological, can be transferred to other jobs.

TechnoTravel is Interdisciplinary

Integrating technology into other curriculum teaches multiple learning objectives in one activity. The teacher guide for TechnoTravel offers a great variety of suggestions for integrating technology into curriculum. Language Arts, Social Science, Science, History, or Geography learning objectives can be combined in a single project. Here are just a few of the many ideas listed in the guide:

Ecotour – Promote environmental stewardship by taking tourists into a natural or wilderness area.
Follow the Footsteps – Visit places of historical importance by following the route of a famous explorer.
Celebrate Cultural Differences – Feature the festivals, folklore, and cuisine of a unique culture.
Transport Back in Time – Travel to an ancient civilization with a time machine and experience the values, beliefs, and daily life of the time period.
Explore the Undiscovered – Visit other parts of the solar system or the ocean depths using futuristic technology.
Indulge a Hobby – Design a trip that caters to a specific sport, hobby, or interest.

TechnoTravel Develops Technology Skills

Students master a variety of learning objectives in an integrated project: online research, word processing, presentation, and spreadsheet skills, including:

✓ Research Skills – apply search strategies, organize facts in a planner, gather websites with travel advice, pictures, and maps
✓ Word Processing Skills – format text and paragraphs, copy formatting, select paste options
✓ Presentation Skills – customize the slide master, insert and format picture files and objects, organize information in tables, insert links and videos, apply transitions and animation, customize the handout master, configure output options for presentations
✓ Spreadsheet Skills – enter and format data into a workbook, modify columns and rows, apply currency format, calculate data using the Sum feature, apply fills and borderlines

TechnoTravel Engages Students

Learning is enhanced when students are interested and find a project personally meaningful. Planning a weekend getaway is a sure way to spark student interest and make connections using a relevant, real-world activity.

STEM lesson plans

TechnoTravel Builds Creativity

As each student designs a unique travel promotion, they generate original ideas, solutions, and final projects. STEM education stresses the importance of creative thinking in the jobs of the future. We don’t know exactly what the careers will require, but the ability to develop innovative insights and concepts will be essential.

STEM lessons

TechnoTravel Supports Personalized Learning

As students choose the destinations of their travel ads, they design unique promotions. Differentiation is a key part of the project. Students build on their individual strengths, needs, and interests. They gain ownership over their learning as they develop technology and interpersonal skills. TechnoKids step-by-step student workbooks allow for flexible pacing. Performance-based assessment is achieved through testing of the slide master, checklists throughout the project, and an itemized final marking sheet. Teachers play the role of mentor as students take the responsibility for their projects. An inquiry-based, student-centered approach is the foundation of personalized learning.

TechnoTravel Adds the “A” to STEM

Educators frequently propose adding art and design to STEM education to change it to STEAM. TechnoTravel builds creative arts skills along with technology, curricular, and personal skills. Students are challenged to design a promotional tool enticing clients to take a travel vacation. They discover the value of a unique slide master design, attractive presentation appearance, eye-catching formatting decisions, and an easy to read and balanced layout.

STEM Career Readiness with TechnoTravel Technology Project

Visit TechnoTravel to learn more about this technology project. View a short video of a sample student project, examine the learning objectives, and read teacher reviews of TechnoKids projects. Teach STEM and STEAM career readiness skills in a fun, engaging activity for middle school students.

Prepare Students to Succeed: 6 More Top STEM Jobs

In a previous blog, I wrote about preparing students for the future. I searched online for best STEM jobs: Scientists, Technology experts, Engineers, and Mathematical thinkers. The results were an eye-opener: the complex workplace of the future will require mastery of Information and Computer Technology skills along with professional skills such as time management, communication, and teamwork. Critical thinking skills and a resourceful, adaptable attitude are essential too. It’s a daunting task for teachers!

TechnoKids projects blend Information and Computer Technology with Science, Technology, Engineering, and Math. Art and design are often included too.

The good news is that an interdisciplinary curriculum can teach crucial technology, interpersonal, and thinking skills. Using TechnoKids project-based activities, students build a foundation in word processing, spreadsheets, presentation, animation, desktop publishing, graphic design, coding, and more! These skills can provide students with the knowledge and skills needed to pursue STEM jobs.

Here are another 6 best STEM jobs. Check out the career descriptions and see how the skills mastered in TechnoKids projects provide a basis for future success.

Computer Support Specialist

What does a computer support specialist do?

Ensures that equipment and software are working
Provides support and technical assistance to computer users
Troubleshoots and solves computer and network problems

A computer support specialist may work in an office, telecommunications companies, financial and insurance industries, or at a help desk.

How does a TechnoKids project prepare students for this career?

In TechnoSpecialist, students play the role of a computer specialist. They design an information package to inform customers about hardware. A presentation with advanced features explains components in order to help the public make purchasing decisions.

TechnoSpecialist Learning Objectives:
✓ Understand and explain computer components and terminology
✓ Describe and compare devices
✓ Design a presentation with a master slide, table, graphic organizer, video, sound, and images

Sales Engineer

What does a sales engineer do?

Collaborates with sales teams to understand customer requirements
Plans, recommends, and modifies products to meet customer needs
Prepares and delivers reports that explain products to customers and management

A sales engineer works for a manufacturer that designs consumer products such as food, clothing, fashion, or technology devices.

How does a TechnoKids project prepare students for this career?

In TechnoCandy, students solve the challenge of boosting candy sales. They investigate the problem, conduct a survey, graph results, research packaging, and finally submit a report to recommend a solution.

TechnoCandy Learning Objectives:
✓ Develop critical thinking and inquiry skills
✓ Organize, format, calculate, sort, and chart data
✓ Formulate a plan based on evidence and explain reasoning in a written report

Accountant

What does an accountant do?

Organizes, computes, and prepares tax records
Examines and assesses financial statements
Suggests ways to reduce costs, enhance revenue, and improve profits

An accountant may be self-employed or may work for the bookkeeping department of a company, or for the tax agency of a government.

How does a TechnoKids project prepare students for this career?

In TechnoBudget, students learn personal finance. They build a budget and justify a spending plan to gain financial literacy and money management skills.

TechnoBudget Learning Objectives:
✓ Problem solve to make financial decisions
✓ Organize, graph, format, calculate, sort, and filter data using formulas
✓ Justify financial choices in a report

Graphic Designer

What does a graphic designer do?

Creates innovative images to convey a message using photo editing software
Incorporates changes recommended by clients or the art director
Self-manages projects, including reviewing designs for errors and meeting deadlines

A graphic designer works freelance or may be employed by a sign company, advertising agency, publisher, or as a college art instructor.

How does a TechnoKids project prepare students for this career?

In TechnoPhotoshop, students create a digital scrapbook. They capture a series of photographs and then explore artistic techniques using Photoshop to make a collection of whimsical and wacky illustrations.

TechnoPhotoshop Learning Objectives:
✓ Apply the elements of design to edit photographs
✓ Retouch, crop, adjust, warp, recolor, and superimpose images
✓ Combine images to transform them into a unique scene

Database Administrator

What does a database administrator do?

Organizes company information such as customer shipping or financial data
Plans, sets up, tests, assesses, and updates databases
Ensures that software operates efficiently and securely

A database administrator may work in a small business, warehouse, and in healthcare organizations such as medical insurance or in a hospital.

How does a TechnoKids project prepare students for this career?

In TechnoPlanner, students become event planners. They use a database to organize party planning information in tables, forms, queries, and reports.

TechnoPlanner Learning Objectives:
✓ Construct a database and create data entry forms
✓ Set field properties and establish a relationship between tables
✓ Sort, find, and filter records
✓ Evaluate database design

Statistician

What does a statistician do?

Designs surveys, experiments, or opinion polls to collect data
Develops mathematical models using technological tools to analyze real-world data
Reports conclusions to improve business decisions

A statistician may work in marketing, education institutions, research and development for consumer goods, healthcare, or government.

How does a TechnoKids project prepare students for this career?

In TechnoQuestionnaire, students explore a key concern. They create a questionnaire and conduct a survey to track popular opinion. They interpret the results, draw conclusions, and share their findings.

TechnoQuestionnaire Learning Objectives:
✓ Investigate a research question, design questions, and identify bias
✓ Display data in charts, tables, and graphs
✓ Present a summary report

Prepare Students Now for the STEM Jobs of the Future

TechnoKids computer projects build skills for career readiness in a fun, engaging way. The projects blend curriculum disciplines to foster a solid foundation in technology as well as professional skills. As a bonus, students develop a resourceful, confident attitude to learning that will ensure their success in acquiring STEM jobs in the workplace of the future.