Help with Project One

Tell us what’s happening:
Please help with with the best way to center my picture and why is my second line of text under my heading soooo small? I am very new to coding and don’t quite understand the relationship between CSS and HTML.

Also this method of asking for help - this screen is so confusing. Can anyone clear up the easiest way to ask for help. I am not sure I am even sending this anywhere. Ug.

Your code so far
https://codepen.io/juligrossman/pen/xxwwMjj
Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15.

Challenge: Build a Tribute Page

Link to the challenge:

that’s the default size of p text, if you want to change it you need to apply some css to the element

also, I see you have various syntax errors, try to use the “Analyze HTML” feature and “Analyze CSS”
(the downward arrow opens a menu

)

Tell us what’s happening:
I am looking at my first run error and I just cannot make progress. I am not sure if they are referring to a problem with line 5 or line 8 or something else entirely? Here is what the error tells me… 4. Within the “img-div” element, I should see an element with a corresponding id=“image”. I am so confused why I even have two img-div listed anyway?? It is only one picture, but yikes I don’t know what I am doing … Thanks

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15.

Challenge: Build a Tribute Page

Link to the challenge:

you need to include your project link for us to be able to check what the issue is

also note that below the failed user story there is the reason for which the test is failing

https://codepen.io/juligrossman/pen/xxwwMjj

you have an empty div with class .img-div which does nothing

you have an image element with an id of #img-div when it should be a div element

then you don’t have the #image given to anything

Can you tell me what a div element is? Is it simply this -

??
When you say I don’t have the #image given to anything, what does this mean? Do I need to change it, delete it or put something in CSS? I am very very new to this and very generalized comments are difficult for me to figure out. Reading your reply to my help, I don’t even know where or how to fix this still. Perhaps your comments related to a line of error can direct me a little?

a div element starts with <div> and end with </div>

no element in your code has the id="image"

Tell us what’s happening: I know why my main font colors are white, but I cannot figure out why my hyper link at bottom is a blue color? I am thinking I need something changed in html and css? Remember this is my first project and I am quite the beginner… Thanks for your help.

Your code so far

    https://codepen.io/juligrossman/pen/xxwwMjj

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15.

Challenge: Build a Tribute Page

Link to the challenge:

That’s the default styling for links in HTML.
Here is an old school example of a plain HTML site: https://www.freepascal.org/docs-html/current/user/user.html

You can override it like all other styles…

Michael is right, it is a default style.
You can change it by making provision for color: —; in a class or id you you created.
Something that would look like this:

style

a{
color: red;
}

/style

Please help us with your feedback!

Try this :

.your-link {
text-decoration: none;
}

@Nalid what has that got to do with the color?

@juliakajill So basically what is happening is this. The <a> element has some default colors that are applied to it by the browser. That means those styles take precedence over any styles the link would otherwise have inherited from the body. So you have to either set a color on it or make it explicitly inherit.

a {
  color: inherit;
}

Thank you Nalid. I set the to a color and it worked. Very strange as it’s over my head why on earth it is in an that in embedded somewhere. That’s advanced knowledge right there.

1 Like

In fact nothing you’re right, but by default the link color is blue with an underline, by using " text-decoration: none; " it take of all of this.

That has historical reasons. The internet developed from military technology, to adaptation at universities, to public use. HTML was developed during the 80s as a way to share documents like scientific papers. For that usage the built in styling works just fine. Then the broader public started to use the internet during the 90s, demand for visual expression/layout grew and CSS got developed.

1 Like

Hi,

I have inspected your code and found several syntax error. I have forked your project and cleaned up your code a bit. Referring to the error you mentioned above, I could not reproduce the same error using the code currently in your codepen, instead I receive " 1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size." which means your img tag should include width or max-width style. In your CSS code you did include the code to alter your img tag however, since you are referring to img element as a whole, you should not put dot (.) in front of your selector (Should be img { your styles } instead you use .img { your styles }. Hope this helps.

Edited to include the link to the forked project
https://codepen.io/kchakreyarat/pen/JjYKObp

Tell us what’s happening:

Not sure what I am doing, but am missing something. Please look at my bottom line with “wiki entry” as it is showing code and shouldn’t be.

Your code so far
https://codepen.io/juligrossman/pen/xxwwMjj
Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15.

Challenge: Build a Tribute Page

Link to the challenge:

HI @juliakajill,

Remove > from here

<a1>
     id="tribute-link"

hi @juliakajill
i just started to use this forum and I’m still learner.
On your following post, I would like to bring this to your notice that syntax for anchor tag you used is in appropriate. That’s why you might be facing difficulty in completing the tribute page because one of it’s task is to link your own page to another. but your link is shown as output as if it is text.

What I found in your code: id=“tribute-link” href=“https://en.wikipedia.org/wiki/Nelson_Mandela” target="_blank">Wikipedia entry

What I feel is correct:
<a
id=“tribute-link”

href=“https://en.wikipedia.org/wiki/Nelson_Mandela”
target="_blank"
>Wikipedia entry