Learn Enough to Be Dangerous
Create Account (or log in )
You have to make a choice. Choose...wisely.

Get occasional notifications about things like product discounts, blog posts, and new or updated tutorials. Unsubscribe at any time.

Gift Delivery Options
Quick Checkout
or Pay by Credit Card
Error processing your payment
  • You didn't choose whether or not to be added to the mailing list
Confirm
$0.00

Payments and credit card details are securely managed and protected by Learn Enough's payment processor, Stripe. More information on their site:

CART
Total
$0.00

Your Cart is Empty

$30
$300
$300
$XY
$XY
1234
  • HTML

Learn Enough Society

Certificate of Course Completion

This page certifies that kartikmandar has completed Learn Enough HTML to Be Dangerous! 🎉

About the tutorial
Learn Enough HTML to Be Dangerous by Michael Hartl and Lee Donahoe is an introduction to HyperText Markup Language, the language of the World Wide Web. You’ll learn the most important HTML techniques by building a simple but real website, which you’ll start by deploying to the live Web in the very first section! Read full post
23 Nov 02:38, 2022
28 May 22:28, 2023
Exercise Answers
Exercise Question:
  • Identify all the tags in Listing 1.2. Notice that you don’t have to know what a tag does to be able to identify it correctly. (This is a good example of technical sophistication (Box 1.1).)
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Some HTML tags don’t contain any content, and instead are known as void elements, also called self-closing tags. Which tag in Listing 1.2 is a void element?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • HTML tags can be nested, which means that one tag can be put inside another. Which tags in Listing 1.2 are nested? Don’t include any self-closing tags.
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Add and commit a file called README.md, taking care to use at least a few Markdown tags. What is the result at GitHub?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • What happens if you visit <username>.github.io/<repo_name>/README.md in a browser? What does this imply about including sensitive information in a public website repo?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Replace the contents of index.html with the markup from Listing 1.2. Can you guess what the a tag does?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Use your browser’s web inspector to inspect the source from the previous exercise. (Google for “<browser> web inspector” to learn how to use your browser’s web inspector. Or just right-click.) Does it differ in any way from Listing 1.2?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Using the HTML validator, confirm that Listing 1.6 is valid HTML.
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Remove </title> from index.html as shown in Listing 1.9 and verify that it breaks the page (Figure 1.25). This underscores the importance of closing your tags. Confirm using the HTML validator that the resulting code fails validation.
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • By pasting the contents of Listing 1.10 into index.html, confirm that the browser ignores the extra whitespace (including newlines) in the mailing address.
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • By adding the break tag <br> to the end of each of the first two lines of the address, obtain the nicely formatted address shown in Figure 1.26.
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Listing 2.2 uses headings h1 down to h3. By experimenting directly in index.html, determine how many levels of headings HTML supports.
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Add the paragraph shown in Listing 2.6 under founders, then make the text at least a billion people bold (Figure 2.5).
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • What happens if you nest the em and strong tags? Is it possible to make something both italic and bold?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Using the content shown in Listing 2.9, add short founder bios to the index page.
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Now add Twitter follow links as shown in Listing 2.10. Does the content appear as shown in Figure 2.8?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • It’s sometimes convenient for external links (like those in the previous exercise) to open in a new browser tab. To do this, add the attribute target="_blank" to each of the Twitter links from Listing 2.10. (For technical reasons, it’s important to add the rather obscure rel="noopener" as well.) Does clicking on one of the links open in a new tab, as shown in Figure 2.8?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Why might the images shown in Figure 2.11 not match your results exactly? Hint: It’s not a bug, it’s a feature.
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • The kitten image in Figure 2.9 is available under a Creative Commons license that requires attribution. We’ll fulfill this requirement by linking the image on our page to the original image’s URL, which involves nesting the a and img tags, as shown in Listing 2.13. (Be sure to replace FILL_IN with the right URL.) How does this change the page’s (a) appearance and (b) behavior?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Under the first paragraph on index.html, let’s add a link to the Learn Enough Twitter account. First, download the Twitter logo as shown in Listing 2.14. Then, add a link to both the text and the logo image, as shown in Listing 2.15. Be sure to replace FILL_IN with the right path to the image. Note that Listing 2.15 introduces inline styling, which is the subject of Chapter 4. Extra credit: Follow Learn Enough on Twitter here.
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Does the HTML in Listing 3.1 validate?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • As with the kitten image, the Stormtrooper tag image is used under a Creative Commons license that requires attribution. By following the model in Listing 2.13, fulfill this requirement by linking the image in Listing 3.1 to the original image URL.
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Follow the template in Listing 3.6 to add information on the strong, a, and img tags. Why does the img tag example use the Bitly link shortener?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Add an additional row for the code tag. Does the page validate?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Validate the HTML in Listing 3.7 and confirm that there’s one warning and one error. Apply the fixes suggested by the validator and confirm that the new page validates with no warnings.
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • In the previous exercise, you should have found a warning that suggested setting the language of the page to English. Update the site’s other pages with the same change. (This repetition of effort is inconvenient, and would be handled automatically by a templating system.)
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Add header, div, and span to the tables in tags.html. Hint: Like div, header is a block element.
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Add ol, ul, and li tags to tags.html. Which are block elements and which are inline?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Add the menu links to the Moby Dick page.
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • In the menu links, change the order of the links so that the tags page comes second. How many files do you have to edit?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Verify that color: red; has the same effect as color: #ff0000;. What are the advantages of each approach?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • What would you guess the color of #cccccc is? Temporarily modify the color of the span in Listing 4.2 to check your guess. How does it differ from #ccc?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • What happens if you change float: left to float: right in Listing 4.4?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • How does the margin in Listing 4.6 change if we replace the margin with margin-right: 40px?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Add the style rule padding: 10px; to the td elements for the first two block elements in the table in tags.html. How annoying would it be to add them to every td? How annoying is it to change 10px to 20px everywhere? (This is one reason why in real life you always use CSS.)
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • What happens if you use margin: 0 auto; for the book cover image (together with display: block;) without changing the float rule? What does this tell you about the precedence of the two rules?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Temporarily change padding to margin in Listing 4.9. What difference does this make in the appearance?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Change margin: 0 0 0 10px; to margin-left: 10px; in Listing 4.13. What, if anything, changes in the appearance?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • It’s conventional for navigation links not to change color after being followed, and they also look better if they’re not underlined like normal links. Using your Google-fu and the w3schools reference, guess the style rules for making these changes, and apply them to each element in the menu. Hint: The property you’ll have to modify to remove underlining is text-decoration. The result should look something like Figure 4.16.
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Add a new table for the “document tags” that define the properties of the document. Include html, head, body, title, and meta.
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Add any missing tags to tags.html. (By our count there are five, after including the tags from the previous exercise.)
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • If you followed the exercises in Section 2.4.2, there is an image link to the Learn Enough Twitter account that has an inline style to remove underlining, as shown in Listing 2.15. Add a sensible class to this element (such as "image-link") and move the corresponding style rule into main.css. Does the page remain unchanged as required?
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • The updated menu shown in Listing 4.19 appears only on the Home page; to fix this, propagate the changes to the other two pages. (Appreciate once again how cumbersome this is, and how nice it would be to have a proper templating system.)
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • Move the style rules for the HTML Tags page and the Moby Dick page into main.css and confirm that the appearance of the pages stays the same.
    • kartikmandar's Answer:
    Show Formatting
    Exercise Question:
  • One of the simplest and most useful applications of CSS ids is for creating links to arbitrary HTML elements using a convenient hash symbol (#) syntax. By adding the id founders to the “Founders” h2 tag, show that you can visit that section of the page directly by pasting the URL sample_website/index.html#founders into your browser’s address bar.
    • kartikmandar's Answer:
    Show Formatting

    Join the Mailing List

    Get occasional notifications about things like product discounts, blog posts, and new or updated tutorials. Unsubscribe at any time.

    All Access Subscription

    Get free access to all 10 Learn Enough courses (including the Ruby on Rails Tutorial) for 7 days!

    Free 7 Day trial details

    We require a credit card for security purposes, but it will not be charged during the trial period. After 7 days, you will be enrolled automatically in the monthly All Access subscription.

    BUT you can cancel any time and still get the rest of the 7 days for free!

    All Learn Enough tutorials come with a 60-day 100% money-back guarantee.

    Billed Yearly
    Save up to 20%
    Billed Monthly

    Monthly Cost: $39

    Billed $ 468.0 Anually

    A quick guide to
    Your Courses
    Welcome to Learn Enough!