Intro to HTML Solutions

Warm Up

Use this as an opportunity to get to know your students, their interests, and what they see in sites/applications!

Jot down some of the popular sites; this may come in handy later when you are trying to draw out examples.

Try It: Building a Basic Page

See the Pen Try It: Building a Basic Page by Turing KWK (@turing-kwk) on CodePen.

See the Pen Try It: Adding Links by Turing KWK (@turing-kwk) on CodePen.

Try It: Adding Images

See the Pen Try It: Adding Images by Turing KWK (@turing-kwk) on CodePen.

Turn & Talk

In the first code snippet, which element is nested inside of the div? Why do you think the author of this code decided to use nesting?

  • The a/link is nested inside of the paragraph. I think they used nesting because they wanted the link to be readily available for the user to click while they were reading. If nesting wasn’t used, the link would have to be before or after the paragraph.

In the second code snippet, which element is wrapped around other elements? What do you think the author decided to indent all of the nested elements they way they did? What do you imagine nav stands for/does?

  • The nav wraps all the other elements. Indentation was used to make the code more readable. Since everything inside the nav is indented once, it’s easy for a reader to see what lives inside the nav, and where the nav ends.

Try It: Nesting Elements

See the Pen Try It: Nesting Elements by Turing KWK (@turing-kwk) on CodePen.

Practice: HTML

See the Pen Practice: HTML by Turing KWK (@turing-kwk) on CodePen.