Member Avatar for beyermusic2

I am new to html and css. I am putting together a project to display favorite singers and favorite movies.

I am getting errors in the code. They are: I have been trying to find answers but need a little help.
Any help would be greatly appreciated.

✗ The photo <img> tag should point to photo.jpg (+ 4 related tests)
✗ There should be a 3rd <div> tag in the <body> tag (+ 7 related tests)
✗ There should be a 4th <div> tag in the <body> tag (+ 7 related tests)
✗ The 5th <div> tag should have an <a> tag (+ 3 related tests

Here is HTML and CSS Code.  Any help woild be greatly appreciatd.

<html>
<title> CBeyer</title>

<head>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <div id="name">
        <h1> Chris Beyer</h1>
    </div>

    <div id="instruments">
        <img id="photo" img src="photo.jpg>  The pjoto is in same folder as code.

    </div>

   <div  id = " Favorite Artists">
    </div>
    <h2>Favorite Music Artists</h2>
    <ul>
        <li>Carlos Santana</li>
        <li>Jerry Garcia</li>
        <li>Rush</li>
        <li>Eddie Van Halen</li>
        <li>Prince</li>

    </ul>

    <div id="Films"

    <h2> 5 Favorite Films</h2>

        <ol>
            <li> Wall Street</li>
            <li> Radio Days</li>
            <li> The Godfather</li>
            <li> Annie Hall</li>
            <li> Play i again Sam</li </ol>
    </div>


    <div id="profile"

    <a href="https://facebook.com/chrisbeyerdev" Chris Beyer</a>

    </div>





</body>

</html>


CSS

photo{
    border-width:2ox;
    border-color: blue;
}

h1{
    color:blue;
}

h2{
    color:gray;
}
.border{
    margin:4px;
}
  • 3 Contributors
  • 5 Replies
  • 1K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Dani
Member Avatar for Dani 
<img id="photo" img src="photo.jpg>  The pjoto is in same folder as code.

You are missing the closing quote after photo.jpg. You also have an extra img inside the tag. It should be:

<img id="photo" src="photo.jpg">  The pjoto is in same folder as code.

The Films opening div tag is missing its closing bracket.

<div id="Films"

It should be:

<div id="Films">

The Profile opening div tag is also missing its closing bracket.

<div id="profile"

It should be:

<div id="profile">

IDs must be one word, and typically lowercase.

<div  id = " Favorite Artists"></div>

Should probably be something like:

<div id="artists">Favorite Artists</div>

In the CSS, you have:

photo{
    border-width:2ox;
    border-color: blue;
}

If your CSS is selecting an element tag (<h1>, <div>, etc.) then you can just select that tag, as you've correctly done with h1 { ... } and h2 { ... }.

If your CSS is selecting elements that have a particular class, then you preface that selector with a .. For example, you will want to use .border { ... } to select something such as <div class="border"> ... </div> but I don't see you using the border class anywhere in your HTML, so that part of your CSS is currently being unused.

If your CSS is selecting elements that have a particular ID, then you preface that selector with a #. For example, to style <div id="profile"> then you would have CSS that looks like #profile { ... }.

You currently have CSS that looks like photo { } but you can't do this because there's no such thing as <photo> ... </photo>. I assume you want to style:

<img id="photo" src="photo.jpg">

Therefore, your CSS should look like:

#photo {
    border-width:2ox;
    border-color: blue;
}

Good luck!

Member Avatar for rproffitt

I have to ask. What IDE are you using? I like using IDEs that have syntax checking.
Example: https://www.activestate.com/products/komodo-ide/

Why do I use such things? Over the years I find myself writing in language after language and while I've written in what must be over a dozen (much more than that!) there's no way I will burden myself by using say Windows Notepad and go without a good IDE that does syntax checking.

Not only that, there are good free IDEs that do this today.

So what are you using?

Member Avatar for Dani

They said in their profile they’re going through Coursera where they are given a short assignment, type the code into its web-based editor, and it spits out what they failed to do. So they have to just keep editing the code until it passes and they can go to the next lesson.

Member Avatar for Dani

Beyermusic, were you able to figure it out? Do you still need assistance?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.