Skip to main content

HTML Iframes — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the HTML Iframes lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Embed a page

    easy10 min

    Add an iframe pointing at /widget.

  2. 2

    Title the frame

    easy10 min

    Give the iframe an accessible title.

  3. 3

    Size the frame

    easy10 min

    Give the iframe a width and height.

  4. 4

    Lazy-load the frame

    easy10 min

    Defer loading until the frame is near the viewport.

  5. 5

    Sandbox untrusted content

    medium10 min

    Add a sandbox attribute allowing scripts only.

Find the bug(5)

  1. 1

    Fix the missing title

    easy8 min

    Screen reader users cannot tell what the frame contains.

  2. 2

    Fix the wrong source attribute

    easy8 min

    An iframe uses src, not href.

  3. 3

    Fix the unsandboxed third-party frame

    easy8 min

    Untrusted embeds should be sandboxed.

  4. 4

    Fix the eager offscreen frame

    easy8 min

    A frame below the fold should lazy-load.

  5. 5

    Fix the deprecated frameborder

    easy8 min

    Use CSS for borders instead of frameborder.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace