Code with Byte · Syllabus
Tag & Style (Grade 7)
School year 2026–27 · Mr. Comen
Course overview
In Tag & Style, 7th graders write real JavaScript to guide Byte the bulldog, then build and style their own web pages with HTML and CSS, across 43 lessons.
| Course detail | |
|---|---|
| Course | Tag & Style (HTML, CSS & JavaScript) |
| Grade | 7 |
| Teacher | Mr. Comen |
| Where students work | The Code with Byte website, codewithbyte.com |
| What students need | A school Chromebook and their school Google account |
| Course size | 6 chapters + a final project, 43 lessons (exercises, challenges and quizzes) |
By the end of the year, students can:
- Write JavaScript commands, variables, for loops and functions
- Use if, else and while so a program reacts to its world
- Solve multi-step puzzles that must work on several different worlds
- Build web pages with HTML headings, paragraphs, lists, links and images
- Style pages with CSS colors, fonts, boxes and side-by-side layouts
- Publish an original About Me page
Units and lessons
The first four chapters teach JavaScript with Byte; the last two and the final project teach web pages.
| Chapter | What students learn | Lessons |
|---|---|---|
| 1. First Steps | Give Byte JavaScript commands: move, turn, paint, talk, and remember a color with a variable | Hello, Byte!; Turn Left; Paint!; Ball Drop; Byte Talks; Favorite Color; Unit 1 Quiz |
| 2. Loops & Functions | Repeat code with for loops and teach Byte new tricks with functions | Repeat with for; Make a Function; Draw a Square; Ball Towers; Unit 2 Quiz |
| 3. Decisions | Check the world with if, else and while, then paint a pixel-art badge | Which Way?; Water Slide; Wall Ahead!; Find North; Black and White; Empty Squares; Pixel Art Badge; Unit 3 Quiz |
| 4. Byte Challenges | Twelve tough puzzles, each tested on several worlds | Red Counter; Color Sorter; Ball Collector; Hurdle Race; Mountain Climber; Bone Hunt in the Yard; Paint the Room; Compass Run; Secret Door; One Ball Each; Parking Spots; Maze Runner |
| 5. HTML | Build web pages with tags | Headings; Paragraphs; Lists; Links; Images |
| 6. CSS | Style pages with colors, fonts, boxes and layouts | Colors; Text style; Boxes; Side by side |
| Final Project | Build an About Me page and pass the HTML & CSS quiz | About Me page; HTML & CSS Quiz |
Pacing calendar
The course runs the full school year: four marking periods of about 9 weeks each. Students who finish early move ahead; students who fall behind catch up during the review weeks.
| Marking period | Weeks | Chapter | Focus |
|---|---|---|---|
| 1 | 1 | Getting started | Sign in with Google, join the class, tour Code with Byte, typing practice |
| 1 | 2–5 | 1. First Steps | Commands, variables and the JavaScript editor |
| 1 | 6–9 | 2. Loops & Functions | for loops and making functions |
| 2 | 10–13 | 3. Decisions | if, else and while |
| 2 | 14–18 | 4. Byte Challenges | Multi-step puzzles that work on every world |
| 3 | 19–23 | 5. HTML | Building pages with tags |
| 3 | 24–27 | 6. CSS | Styling and layout |
| 4 | 28–32 | Final Project | Plan, build and style an About Me page; HTML & CSS quiz |
| 4 | 33–36 | Review and showcase | Catch-up, page gallery walk, Top Coders celebration |
NJ standards
The course addresses the 2020 New Jersey Student Learning Standards for Computer Science and Design Thinking, grades 6–8 (NJSLS-CS&DT).
| Standard | What it asks | Where students practice it |
|---|---|---|
| 8.1.8.AP.2 | Create clearly named variables of different data types and operate on their values | Ch. 1 Favorite Color, Byte Talks |
| 8.1.8.AP.3 | Develop programs that combine control structures, including nested loops and compound conditionals | Ch. 2 Loops; Ch. 3 Decisions; Ch. 4 Challenges |
| 8.1.8.AP.4 | Decompose problems into parts | Ch. 4 Byte Challenges |
| 8.1.8.AP.5 | Create procedures with parameters to organize and reuse code | Ch. 2 Make a Function, Draw a Square |
| 8.1.8.AP.7 | Design programs that incorporate existing code and media, and give attribution | Ch. 5 Links and Images; About Me page |
| 8.1.8.AP.8 | Systematically test and refine programs using a range of test cases | Ch. 4: each challenge is tested on several worlds |
| 8.1.8.IC.2 | Describe issues of bias and accessibility in the design of technologies | Ch. 5 Images (alt text); Ch. 6 readable colors and fonts |
| 8.2.8.ED.1 | Evaluate the function, value and aesthetics of a product from the user's view | Ch. 6 CSS; About Me page |
Grading and expectations
Grades come from the work students complete on Code with Byte, which saves to their account and shows on the teacher dashboard.
| Category | Weight | What counts |
|---|---|---|
| Lessons and challenges | 40% | Exercises and Byte Challenges completed, checked by the site when they run |
| Quizzes | 20% | Unit quizzes and the HTML & CSS quiz |
| Projects | 25% | About Me page, graded with a rubric: works, styled with CSS, original, explained |
| Habits and participation | 15% | On task, helps classmates, uses class time well |
Class expectations:
- Sign in with your school Google account every class, so your work saves.
- Try first, then ask: reread the hint, test again, ask a neighbor, then ask Mr. Comen.
- Bugs are normal. Fixing them is how programmers learn.
- Your work is your own. Help others by explaining, not by typing it for them.
- Use only school-appropriate words and pictures on your web pages.
- Take care of the Chromebooks and the computer lab.
Late and missed work: lessons stay open all year, so students can catch up at any time before the marking period closes. Assignments with a due date in the Courses menu should be done by that date.
For families
Families can look at the whole course without signing in.
- See the course: go to codewithbyte.com and choose HTML & CSS in the Courses menu. You will see every chapter and lesson. Only students can open the lessons.
- En español: press ES at the top of any page to see the whole site, and every lesson, in Spanish. Your child can switch too; their progress stays the same in both languages.
- At home: your child can sign in with their school Google account on any computer and pick up where they left off.
- Questions: contact Mr. Comen through the school or Google Classroom.
Code with Byte · Programa del curso
Tag & Style (7.º grado)
Año escolar 2026–27 · Mr. Comen
Descripción del curso
En Tag & Style, los estudiantes de 7.º grado escriben JavaScript de verdad para guiar a Byte, el bulldog, y luego crean y diseñan sus propias páginas web con HTML y CSS, en 43 lecciones.
| Datos del curso | |
|---|---|
| Curso | Tag & Style (HTML, CSS y JavaScript) |
| Grado | 7 |
| Maestro | Sr. Comen |
| Dónde trabajan | El sitio web Code with Byte, codewithbyte.com |
| Qué necesitan | Un Chromebook de la escuela y su cuenta de Google de la escuela |
| Tamaño del curso | 6 capítulos + un proyecto final, 43 lecciones (ejercicios, desafíos y cuestionarios) |
Al final del año, los estudiantes pueden:
- Escribir comandos, variables, bucles for y funciones en JavaScript
- Usar if, else y while para que un programa reaccione a su mundo
- Resolver rompecabezas de varios pasos que deben funcionar en varios mundos
- Crear páginas web con títulos, párrafos, listas, enlaces e imágenes en HTML
- Dar estilo a las páginas con colores, fuentes, cajas y columnas en CSS
- Publicar una página original "Sobre mí"
Unidades y lecciones
Los primeros cuatro capítulos enseñan JavaScript con Byte; los dos últimos y el proyecto final enseñan páginas web.
| Capítulo | Qué aprenden | Lecciones |
|---|---|---|
| 1. Primeros pasos | Dar comandos de JavaScript a Byte: mover, girar, pintar, hablar y recordar un color con una variable | ¡Hola, Byte!; Gira a la izquierda; ¡Pinta!; Suelta la pelota; Byte habla; Color favorito; Cuestionario 1 |
| 2. Bucles y funciones | Repetir código con bucles for y enseñarle trucos nuevos a Byte con funciones | Repite con for; Crea una función; Dibuja un cuadrado; Torres de pelotas; Cuestionario 2 |
| 3. Decisiones | Revisar el mundo con if, else y while, y pintar una insignia de pixel art | ¿Por dónde?; Tobogán de agua; ¡Pared delante!; Busca el norte; Blanco y negro; Casillas vacías; Insignia de pixel art; Cuestionario 3 |
| 4. Desafíos de Byte | Doce rompecabezas difíciles, cada uno probado en varios mundos | Contador rojo; Clasificador de colores; Recolector de pelotas; Carrera de vallas; Escalador de montañas; Búsqueda de huesos en el patio; Pinta el cuarto; Carrera con brújula; Puerta secreta; Una pelota cada uno; Lugares de estacionamiento; Corredor del laberinto |
| 5. HTML | Crear páginas web con etiquetas | Títulos; Párrafos; Listas; Enlaces; Imágenes |
| 6. CSS | Dar estilo con colores, fuentes, cajas y diseño | Colores; Estilo de texto; Cajas; Lado a lado |
| Proyecto final | Crear una página "Sobre mí" y aprobar el cuestionario de HTML y CSS | Página "Sobre mí"; Cuestionario de HTML y CSS |
Calendario de ritmo
El curso dura todo el año escolar: cuatro períodos de calificaciones de unas 9 semanas cada uno. Quien termina antes avanza; quien se atrasa se pone al día en las semanas de repaso.
| Período | Semanas | Capítulo | Enfoque |
|---|---|---|---|
| 1 | 1 | Para empezar | Iniciar sesión con Google, unirse a la clase, recorrer Code with Byte, práctica de mecanografía |
| 1 | 2–5 | 1. Primeros pasos | Comandos, variables y el editor de JavaScript |
| 1 | 6–9 | 2. Bucles y funciones | Bucles for y crear funciones |
| 2 | 10–13 | 3. Decisiones | if, else y while |
| 2 | 14–18 | 4. Desafíos de Byte | Rompecabezas de varios pasos que funcionan en todos los mundos |
| 3 | 19–23 | 5. HTML | Crear páginas con etiquetas |
| 3 | 24–27 | 6. CSS | Estilo y diseño |
| 4 | 28–32 | Proyecto final | Planear, crear y diseñar una página "Sobre mí"; cuestionario de HTML y CSS |
| 4 | 33–36 | Repaso y muestra | Ponerse al día, galería de páginas, celebración de Top Coders |
Estándares de NJ
El curso trabaja los Estándares de Aprendizaje de Nueva Jersey 2020 para Ciencias de la Computación y Pensamiento de Diseño, grados 6–8 (NJSLS-CS&DT).
| Estándar | Qué pide | Dónde lo practican |
|---|---|---|
| 8.1.8.AP.2 | Crear variables con nombres claros de distintos tipos de datos y operar con sus valores | Cap. 1 Color favorito, Byte habla |
| 8.1.8.AP.3 | Crear programas que combinen estructuras de control, incluidos bucles anidados y condiciones compuestas | Cap. 2 Bucles; Cap. 3 Decisiones; Cap. 4 Desafíos |
| 8.1.8.AP.4 | Dividir problemas en partes | Cap. 4 Desafíos de Byte |
| 8.1.8.AP.5 | Crear procedimientos con parámetros para organizar y reutilizar código | Cap. 2 Crea una función, Dibuja un cuadrado |
| 8.1.8.AP.7 | Diseñar programas que usen código y medios existentes, dando crédito | Cap. 5 Enlaces e Imágenes; página "Sobre mí" |
| 8.1.8.AP.8 | Probar y mejorar programas con distintos casos de prueba | Cap. 4: cada desafío se prueba en varios mundos |
| 8.1.8.IC.2 | Describir problemas de sesgo y accesibilidad en el diseño de la tecnología | Cap. 5 Imágenes (texto alternativo); Cap. 6 colores y fuentes legibles |
| 8.2.8.ED.1 | Evaluar la función, el valor y la estética de un producto desde el punto de vista del usuario | Cap. 6 CSS; página "Sobre mí" |
Calificaciones y normas
Las calificaciones vienen del trabajo que los estudiantes completan en Code with Byte, que se guarda en su cuenta y aparece en el panel del maestro.
| Categoría | Peso | Qué cuenta |
|---|---|---|
| Lecciones y desafíos | 40% | Ejercicios y Desafíos de Byte completados, revisados por el sitio al ejecutarlos |
| Cuestionarios | 20% | Cuestionarios de unidad y el de HTML y CSS |
| Proyectos | 25% | Página "Sobre mí", calificada con una rúbrica: funciona, tiene estilo CSS, es original, está explicada |
| Hábitos y participación | 15% | Concentrado, ayuda a sus compañeros, aprovecha el tiempo de clase |
Normas de la clase:
- Inicia sesión con tu cuenta de Google de la escuela en cada clase, para que tu trabajo se guarde.
- Primero inténtalo y luego pregunta: vuelve a leer la pista, prueba otra vez, pregunta a un compañero y después al Sr. Comen.
- Los errores (bugs) son normales. Arreglarlos es como aprenden los programadores.
- Tu trabajo es tuyo. Ayuda a otros explicando, no escribiéndolo por ellos.
- Usa solo palabras e imágenes apropiadas para la escuela en tus páginas web.
- Cuida los Chromebooks y el laboratorio de computación.
Trabajo atrasado o perdido: las lecciones están abiertas todo el año, así que los estudiantes pueden ponerse al día en cualquier momento antes de que cierre el período de calificaciones. Las tareas con fecha de entrega en el menú Cursos deben terminarse para esa fecha.
Para las familias
Las familias pueden ver todo el curso sin iniciar sesión.
- Ver el curso: entre a codewithbyte.com y elija HTML y CSS en el menú Cursos. Verá todos los capítulos y lecciones. Solo los estudiantes pueden abrir las lecciones.
- In English: presione EN arriba en cualquier página para ver todo el sitio en inglés. Su hijo también puede cambiar de idioma; su progreso es el mismo en los dos idiomas.
- En casa: su hijo puede iniciar sesión con su cuenta de Google de la escuela en cualquier computadora y seguir donde se quedó.
- Preguntas: comuníquese con el Sr. Comen a través de la escuela o de Google Classroom.