Irving Independent School District Smart Solutions

Student material · Assignment · Unpublished in Canvas

Day 9: Mini-Project: Style Your Page

Points
15
Submission
upload, media recording
Canvas state
Unpublished

Intro to CS · Day 9 of 10

Mini-Project: Style Your Page

Make a small set of design choices that help a reader understand the page.

  • Tool: CS Discoveries Unit 2, Lesson 10
  • Time: one class period
  • Turn in: styled-page screenshot, published link, and reflection

English

Words for today: rule · design · contrast

What to do

  1. Open Mini-Project: Adding Style to a Web Page and read the requirements.
  2. Choose two or three colors and decide what the reader should notice first. Write those choices down before editing CSS.
  3. Add at least six CSS rules. Include rules for headings, paragraphs, and the page background; one font-family or font-size; and one border, padding, or margin.
  4. Check the page at normal Chromebook size. Every word should remain readable, and the headings should still show the page structure.
  5. Ask a classmate to look for ten seconds and tell you what the page is about. Revise one thing based on that test.
  6. Publish again and test the link in a new tab.

If your code is not working

  1. Compare the page with the design choices you wrote before coding.
  2. If several rules stop working, inspect the punctuation immediately before the first broken rule.
  3. Use a simple light or dark background if contrast is getting hard to control.

Before you submit

  • Upload a screenshot of the styled page.
  • Paste the tested published link in the submission comment.
  • Complete the reflection in the same comment.

Reflection

Write 2 or 3 sentences: "I wanted the page to feel ____, so I chose ____. After a classmate tested it, I changed ____."

Word bank: rule · design · contrast · selector · property · font · background

Español

Palabras de hoy: rule (regla) · design (diseño) · contrast (contraste)

Qué hacer

  1. Abre Mini-Project: Adding Style to a Web Page y lee los requisitos.
  2. Escoge dos o tres colores y decide qué debe notar primero el lector. Escribe esas decisiones antes de editar el CSS.
  3. Agrega al menos seis reglas de CSS. Incluye reglas para encabezados, párrafos y el fondo; un font-family o font-size; y un border, padding o margin.
  4. Revisa la página al tamaño normal de la Chromebook. Cada palabra debe poder leerse y los encabezados deben mostrar la estructura.
  5. Pídele a un compañero que mire la página durante diez segundos y te diga de qué trata. Revisa una cosa basándote en esa prueba.
  6. Publica de nuevo y prueba el enlace en una pestaña nueva.

Si tu código no funciona

  1. Compara la página con las decisiones de diseño que escribiste antes de programar.
  2. Si varias reglas dejan de funcionar, revisa la puntuación justo antes de la primera regla rota.
  3. Usa un fondo claro u oscuro sencillo si el contraste se vuelve difícil de controlar.

Antes de entregar

  • Sube una captura de la página estilizada.
  • Pega el enlace publicado y probado en el comentario.
  • Completa la reflexión en el mismo comentario.

Reflexión

Escribe 2 o 3 oraciones: "Quería que la página se sintiera ____, así que escogí ____. Después de la prueba de un compañero, cambié ____."

Banco de palabras: regla · diseño · contraste · selector · propiedad · fuente · fondo