HTML - 1.7 - supporting content 2


#1

Hey everyone, I'm new to coding and maybe (probably) this is an easy fix.

I'm running into the error "Oops, try again. Add the third supporting content div."

Here's the monster I've created:

<!DOCTYPE html>
<html>
  <body>
  
<div class="nav">
  <div class="container">
	<ul>
	  <li>Robert Burke</li>
	  <li>Browse</li>
	</ul>
	<ul>
	  <li>Sign Up</li>
	  <li>Log In</li>
	  <li>Help</li>
  </div>
</div>
<div class="jumbotron">
  <div class="container">
    <h1>Find a place to stay</h1>
    <p>Rent from people in over 34,000 cities and 192 countries</p>
    <h3>Travel</h3>
    <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 counties.</p>
    <p><a href="#">See how to travel on Airbnb</a></p>
  </div>
</div>

<div>
    <h3>Host</h3>
    <p>Renting out your unused space could pay your bills or fund your next vacation</p>
    <p><a href="#">Learn more about hosting</a></p>
</div>

<div>
    <h3>Trust and Safety</h3>
    <p>From Verified ID to our worldwide customer support team, we've got your back.</p>
    <p><a href="#">Learn about trust at Airbnb</a></p>
</div>
	
  </body>
</html>

#2

@burke8908,

First of all you will have use a closing-ul-TAG
for

<ul>
  <li>Sign Up</li>
  <li>Log In</li>
  <li>Help</li>
</ul>

#3

@leonhard_wettengmx_n
Fixed! thank you for pointing that out!


#4

@burke8908,

If your Browser loads this HTML-document into memory

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>I Know Kung Fu (er, CSS)</title>
	</head>
	<body>
		<div>
			<h3>What's CSS for?</h3>
			<p>CSS is for styling HTML pages!</p>
			<h3>Why use it?</h3>
			<p>It makes webpages look <span>really rad</span>.</p>
			<h3>What do I think of it?</h3>
			<p>It's awesome!</p>
		</div>
	</body>
</html>

the Browser does the load
by using the Document Object Model

               html
                 |
       + - - - - + - - +
       |               |
      head            body
       |               |
   + - - - +           +
   |       |           |
 link    title        div     
                       |
     +- - - +- - -+- - +-+- - +- - - +
     |      |     |      |    |      |
    h3      p     h3     p    h3     p
                         |
                        span

+++
In DOM talk...
html Element has no parent, but is parent to a div Element.
The div Element is a descendant of html Element

div Element is a child of html,
AND is parent to 6 children

Those children are sibling's to each-other,
and are direct descendant of the div Element.

The second paragraph Tag, being the 4th child of the div Tag
is parent to a span Element.

In your link Element you defined
that the Styling specific's are defined
in the file 'stylesheet.css'

The CSS facility of your Browser will read this file
and will expect a specific syntax

css-Selector  {
     **a property**
     **property-key**: **property-Value**;
     }

For instance, we want all p-Tag to have the color red

 p {
    color: red;
 }

We want all span-Tags to be 'yellow'

span {
   color: yellow;
}

#5

@burke8908,

I think it is better, if one understands the concept.

It all start's with you,
using a Browser
in which you load a HTML-file,
which we will call the HTML-Document.

This document has a minimal build of


<!DOCTYPE html>
  <html>
     <head>
          <title> </title>
     </head>
     <body>
     </body>
  </html>

The Browser =load's= this document into Memory
in a pattern that is described as
the Document Object Model
in short the DOM.
( the interpretation of the DOM is Browser & Version specific )

            html
             |
       +-----+------+
       |            |
     head          body
       |
     title

In the description of your document in DOM-talk...
you will encounter terms like:
parent children sibling descendants ascendants...

The HTML-Element has no parent
but is a parent to 2 child-Element's
the 'head'-Element
and
the 'body'-Element.

The 'head'- and 'body'-Element,
both being children to the 'html'-Element
are siblings to each-other.

The 'head'-Element is parent to the 'title'-Element...
the 'title'-Element is a child of the 'head'-Element
the 'title'-Element is also a descendant of the 'html'-Element.

The DOM has several interface's
over which you can access the data**/**information
held by the DOM.

One of the interface's is the Element-interface
you can divide the interface into
properties ( consisting of a property-key and it's associated VALUE )
and
methods ( giving you the functionality to manipulate the Elements )
https://developer.mozilla.org/en-US/docs/Web/API/Element
https://developer.mozilla.org/en-US/Learn/HTML/HTML_tags


#6

@leonhard_wettengmx_n

Thanks man, thats some foundational stuff that will be super useful. I appreciate that!

I haven't moved into css yet, so thanks for that introduction to it. I'm still a little confused on the code for this lesson though. I'm not sure where I went wrong.

Are you saying that I need to restructure the code?


#7

@burke8908,
Try to draw a DOM-representation
of your code...
Maybe you will see a structure in what they are doing...
also do a google search
== the Book ==
container navigate site:getbootstrap.com
and
row grid site:getbootstrap.com
and have a read...


#8

@leonhard_wettengmx_n

Awesome thank you! I have figured it out!