FAQ: Learn HTML – Intro to HTML – Review

This community-built FAQ covers the “Review” exercise in Codecademy’s lessons on HTML.

FAQs on the HTML exercise Review

Join the Discussion. We Want to Hear From You!

Have a new question or can answer someone else’s? Reply (reply) to an existing thread!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources about HTML in general? Go here!

Want to take the conversation in a totally different direction? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account, billing, Pro, or Pro Intensive? Reach out to our support team!

None of the above? Find out where to ask other questions here!

Other Resources

Chelsea mentioned resources in the video attached to this lesson, they are copied below. In future, if you’re interested in resources mentioned in YouTube videos, click the YouTube logo to head to that video and you’ll be able to see links in the description.

Other FAQs

The following are links to additional questions that our community has asked about this exercise:

  • This list will contain other frequently asked questions that aren’t quite as popular as the ones above.
  • Currently there have not been enough questions asked and answered about this exercise to populate this FAQ section.
  • This FAQ is built and maintained by you, the Codecademy community – help yourself and other learners like you by contributing!

Not seeing your question? It may still have been asked before – try searching for it by clicking the spyglass icon (search) in the top-right of this page. Still can’t find it? Ask it below by hitting the reply button below this post (reply).

A post was split to a new topic: What are all the attributes needed?

A few times throughout the video, Chelsea references ‘resources’ regarding this video that we can check out later. For example she said she would include the computerphile video in resources, and also we can check resources for more info on when we should use a div vs. a section element. Where exactly can I find these resources?

3 Likes

I am looking for the same answers as well.

1 Like

Me too! Very confusing…

i am curious .What is the name of the text editor that codecademy uses ?

It’s very likely a licensed product designed for the type of embedding used in the Learning Environment and not something you or I could get our hands on without purchasing a license. Not a helpful answer, I know. A very similar environment is available for online at repl.it. It’s free to register.

Thanks for replying. Youu are kinda right

1 Like

In the lessons and projects I do not see a vertical scroll in part of the webpage, so I do not see all the changes. How can I see the whole page?

The first phase mentioned <span> tags which are a block of tags. I didn’t get a chance to use <span>. Whats the difference between <span>, <p>, and <div> tags?

The greatest difference is between the SPAN and the other two. It is an inline element. The other are block level elements.

We can write a SPAN inside either of the other two, but not the other way around, unless we elevate the inline element to block level. This implies we are fully aware of the new behavior and placement.

The best use of SPAN is to isolate a word or phrase within a sentence so that it can be highlighted or emphasized, and/or given a title attribute so it has a tooltip.

<p>Wishing everyone <span title="Good health" lang="FR" style="text-decoration: underline; font-style: italic">Bonne santé</span>.</p>

We’ll come back to this. Block level elements all demonstrate the same basic qualities…

  • They reach across the entire viewport.
  • They have no height attribute
  • They inherit from their parent(s), the BODY and HTML

P has a special added style:

P {
    margin: 1em 0;
}

That means a P is just a DIV except they render with a blank line between. DIVs don’t have margins.


Now comes a practical exercise for you to perform in the JavaScript Console.

I use Chrome just because it is the one I’m set up for.

Open Chrome

In the location bar, type and entire, about.blank.

Bookmark this page on your Bookmarks Bar as, ‘about.blank’.

Now click the bookmark.

Ctrl + Shift + J gives us the JS console.

Let’s do some stuff at the input prompt, >

 > body = document.querySelector('body')
<-     <body></body>
 > body.appendChild(document.createElement('p'))
<-     <p></p>
 > p = document.querySelector('p')
<-     <p></p>
 > p.innerHTML = "Wishing everyone <span>Bonne santé</span>."
<- "Wishing everyone <span>Bonne santé</span>."
 >  s = document.querySelector('span')
<-      <span>​Bonne santé​</span>​
 > s.style.textDecoration = 'underline'
<- "underline"
 > s.style.fontStyle = 'italic'
<- "italic"
 > s.style.fontWeight = '600'
<- "600"
 > p
<-  >

Click on the arrow to expand the text node of P.

<p>​"Wishing everyone "<span style=​"text-decoration:​ underline;​ font-style:​ italic;​ font-weight:​ 600;​" title=​"Good health">​Bonne santé​</span>​"."</p>​

In one short lesson we have taken control of the DOM. Everything you learn from here on in will in one way or another by tied to this concept of manipulation.

We appended a P element to the document BODY. To that we inserted text and HTML. Then we styled the embedded HTML (SPAN) Finally we added a title attribute to the same element. If we view the source, it looks like it was written by the page author in the raw document (sans quotes).


I forgot to mention, most importantly, watch the browser window in the console as we carry out the above command steps.