Add an iframe pointing at /widget.
Acceptance criteria
- 1.Add an iframe pointing at /widget.
HTML Tutorial · HTML Layout
These 10 tasks go with the HTML Iframes chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “An iframe (short for inline frame ) is an HTML element that allows you to embed another webpage or document inside the current webpage. It acts like a window or a mini browser within your page.” .
1.Embed a pageexercise · easy · 10 min
Add an iframe pointing at /widget.
Passes when: Add an iframe pointing at /widget.
2.Title the frameexercise · easy · 10 min · practice plan
Give the iframe an accessible title.
Passes when: Give the iframe an accessible title.
3.Size the frameexercise · easy · 10 min · practice plan
Give the iframe a width and height.
Passes when: Give the iframe a width and height.
4.Lazy-load the frameexercise · easy · 10 min · practice plan
Defer loading until the frame is near the viewport.
Passes when: Defer loading until the frame is near the viewport.
5.Sandbox untrusted contentexercise · medium · 10 min · practice plan
Add a sandbox attribute allowing scripts only.
Passes when: Add a sandbox attribute allowing scripts only.
6.Fix the missing titlebug fix · easy · 8 min
Screen reader users cannot tell what the frame contains.
Passes when: Screen reader users cannot tell what the frame contains.
7.Fix the wrong source attributebug fix · easy · 8 min · practice plan
An iframe uses src, not href.
Passes when: An iframe uses src, not href.
8.Fix the unsandboxed third-party framebug fix · easy · 8 min · practice plan
Untrusted embeds should be sandboxed.
Passes when: Untrusted embeds should be sandboxed.
9.Fix the eager offscreen framebug fix · easy · 8 min · practice plan
A frame below the fold should lazy-load.
Passes when: A frame below the fold should lazy-load.
10.Fix the deprecated frameborderbug fix · easy · 8 min · practice plan
Use CSS for borders instead of frameborder.
Passes when: Use CSS for borders instead of frameborder.
Between them these tasks cover iframe element, title for accessibility and Sandboxing.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.