Computer Science Fundamentals Lesson 6.5: WYSIWYG Editors and Code
Computer Science Fundamentals Lesson 6.5 cover, WYSIWYG Editors and Code
Computer Science Fundamentals · Unit 6 · Lesson 6.5

WYSIWYG Editors and Code

Computer Science Fundamentals Grades 9–12 2-day lesson 21 deliverables

In this web design lesson, students learn what a WYSIWYG editor does and what they still need to check themselves. For jobs on a made-up frame shop's home page, they write what the owner does in design view and the HTML the editor writes.

Single lesson
$5

● Instant download · Lifetime access · Editable & print-ready

Print + digitalPDF, PowerPoint, Word & Google
Answer keysA key for every page
Built-in assessmentExit tickets + lesson quiz
45-minute daysEvery day planned and timed
Save when you bundle Unit 6: Web Design with HTML The complete Unit 6, all 6 lessons $40 Save 13% $46 bought separately See the unit bundle
What's inside

What does this lesson cover?

Many people build web pages with editors that write the code for them. Students need to know what those tools do and what can still go wrong in the code. This lesson shows the design view and the code view of the same page, so students see the HTML behind each change.

Featured original activity

Two Views

Students take six jobs on Fir Street Frame Shop's home page, write what the owner does in design view and the HTML the editor writes, then describe what a WYSIWYG editor can do.

21 deliverables

Everything that's included

00 Start Here

  • READ FIRST: every file in the lesson and when you use it
  • Teacher guide and pacing: the plan for each day, what to print and how to grade
  • Skills map: which standards each day teaches

01 Present

  • One editable PowerPoint deck for both days, 18 slides, with speaker notes
  • Slide script: the speaker notes, printed
  • Bell ringers: a short warm-up for each day

02 Student Handouts

  • Guided notes for both days, in PDF and editable Word, with the word bank on the page
  • Vocab slip: the lesson's words and what they mean, on one page

04 Activities

  • Two Views: take six jobs on Fir Street Frame Shop's home page, write what the owner does in design view and the HTML the editor writes, then describe what a WYSIWYG editor can do
  • Editor Check: check the code of a school art club's page on paper

05 Assessment

  • Exit tickets, one per day: quick questions that show who needs more help
  • Lesson quiz: 10 multiple-choice questions and 2 written answers about both days

06 Answer Keys

  • 4 answer key files: a key for each day (its bell ringer, notes and exit ticket) and the activity keys, plus the quiz key

Digital: Google Forms™ + Google Slides™

  • 3 Google Forms™ of the exit tickets and the quiz, ready to copy into your Drive
  • The multiple choice grades itself, and you grade the written answers
  • A Google Slides™ copy of the deck, with the same slides and speaker notes, for Google Classroom™

Why teachers love this lesson

No real editor is needed

The editor in the lesson is made up, and its functions are real. Nobody opens an editor, makes an account or publishes a site.

Students check the code before they publish

A page can look right in design view and still have a broken link or missing alt text. Students learn what to check in code view before a page goes online.

Print and digital

Every page is a print-ready PDF, and the Google Forms™ and Google Slides™ let you teach the same lesson in Google Classroom™.

A key for every page

Every day has its own answer key, and every written question has a sample answer and what to look for.

Every day fits a 45-minute class

Each day's plan is timed activity by activity against real reading and writing speeds.

Written for your students

Every student page is checked for reading level, with plain words and complete sentences.

What Teachers Say

Be the first to review this

Reviews help me a lot, and they help other teachers pick the right resources for their classes. It takes about a minute.

Leave a review

Questions teachers ask

How do I get the files after I buy?

Instant download right after checkout: PowerPoint and Word files you can edit, print-ready PDFs, and links that copy the Google Forms™ and Google Slides™ into your Drive.

Can I buy the whole unit or course instead?

Yes. This lesson is part of the Unit 6 bundle and the complete Computer Science Fundamentals course. Both cost less than buying the lessons one at a time.

Is this AP Computer Science?

No. It is a full-year, non-AP intro course for grades 9 to 12. For AP, see AP Computer Science Principles and AP Computer Science A.

What formats are the files in?

Every page is a print-ready PDF. The slides are an editable PowerPoint and the guided notes an editable Word file. The exit tickets and the quiz also come as Google Forms™, and the deck as Google Slides™.

Which standards does it cover?

Written for Florida's Advanced Information Technology course (9007610). The skills map in the lesson shows which standards each day teaches.