Hi. Just finished the first project on FCC. Please give feedback?

https://codepen.io/manasvis29/pen/yLbVqGY

This is the first project I have evermade. Kindly provide feedback, fellow campers? As I learn more, I am hoping to add links to Halsey’s albums on Spotify and others.
Thanks!!
xoxo

Cool, it looks pretty good.

Keep in mind that I am a picky reviewer.

Looking at the page…

It looks good.

I think the contrast in colors on the caption line could be better.

Speaking of that line, this looks odd to me:

Screen Shot 2021-07-12 at 5.03.31 PM

You could fix that by adding:

#img-caption > a {
  background-color: inherit;
}

There might be an easier way to fix that - that’s just what popped into my head.

Looking at the code…

There are some little things. When plug your HTML validator like https://validator.w3.org/ (removing the first three errors because we are on codepen and they don’t apply), I see a lot of little things:

  1. Error : Heading cannot be a child of another heading.From line 5, column 71; to line 5, column 74 Frangipane<h3>↩ <
  2. Error : End tag div seen, but there were open elements.From line 6, column 5; to line 6, column 10 e<h3>↩ </div>↩ <
  3. Error : Unclosed element h3 .From line 5, column 71; to line 5, column 74 Frangipane<h3>↩ <
  4. Warning : Empty heading.From line 5, column 71; to line 5, column 74 Frangipane<h3>↩ <
  5. Error : Saw < when expecting an attribute name. Probable cause: Missing > immediately before.At line 9, column 155 pane smiling." </figure>↩
  6. Error : A slash was not immediately followed by > .At line 9, column 157 ne smiling." </figure>↩
  7. Warning : Attribute < is not serializable as XML 1.0.From line 9, column 9; to line 9, column 163 >↩ <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/4/49/Halsey_2015.jpg" alt="Still of a blue-haired Ashley Frangipane smiling." </figure>↩
  8. Error : Attribute < not allowed on element img at this point.From line 9, column 9; to line 9, column 163 >↩ <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/4/49/Halsey_2015.jpg" alt="Still of a blue-haired Ashley Frangipane smiling." </figure>↩

Attributes for element img :

Global attributes

alt — Replacement text for use when images are not available

src — Address of the resource

srcset — Images to use in different situations, e.g., high-resolution displays, small monitors, etc.

sizes — Image sizes for different page layouts

crossorigin — How the element handles crossorigin requests

usemap — Name of image map to use

ismap — Whether the image is a server-side image map

width — Horizontal dimension

height — Vertical dimension

referrerpolicyReferrer policy for fetches initiated by the element

decoding — Decoding hint to use when processing this image for presentation

loading — Used when determining loading deferral

  1. Error : Attribute figure not allowed on element img at this point.From line 9, column 9; to line 9, column 163 >↩ <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/4/49/Halsey_2015.jpg" alt="Still of a blue-haired Ashley Frangipane smiling." </figure>↩

Attributes for element img :

Global attributes

alt — Replacement text for use when images are not available

src — Address of the resource

srcset — Images to use in different situations, e.g., high-resolution displays, small monitors, etc.

sizes — Image sizes for different page layouts

crossorigin — How the element handles crossorigin requests

usemap — Name of image map to use

ismap — Whether the image is a server-side image map

width — Horizontal dimension

height — Vertical dimension

referrerpolicyReferrer policy for fetches initiated by the element

decoding — Decoding hint to use when processing this image for presentation

loading — Used when determining loading deferral

  1. Error : End tag div seen, but there were open elements.From line 11, column 5; to line 11, column 10 tion>↩ </div>↩ <
  2. Error : Unclosed element figure .From line 8, column 7; to line 8, column 14 r">↩ <figure>↩
  3. Error : End tag br .From line 19, column 195; to line 19, column 199 gle Hands.</br>Halsey
  4. Error : End tag br .From line 23, column 409; to line 23, column 413 eir heart.</br>Halsey
  5. Error : End tag section seen, but there were open elements.From line 25, column 5; to line 25, column 14 </li>↩ </section>↩ <
  6. Error : Unclosed element ul .From line 15, column 7; to line 15, column 20 h3>↩ <ul id="list">↩

It’s not as bad as it looks - a bunch of easy to fix things.


<h1 style="font-family:Segoe Script">HALSEY</h1>

I think you should handle this in your CSS pane. And the next line.


This line:

        <figcaption id="img-caption">Wednesday March 11, 2015. Halsey performing live at The Troubadour in Los Angeles California on her first headlining tour captured by Justin Higuchi. https://www.flickr.com/photos/jus10h/, <a target="_blank" href="https://creativecommons.org/licenses/by/2.0">CC BY 2.0</a>, via Wikimedia Commons.</figcaption>

Why do you have the link “Justin Higuchi | Flickr” in there?


Is this doing anything:

  font-family: gadugi;

But still, it looks good. Remember that I am a nit-picker. Have fun on the Survey Form.

1 Like

Hello @manasvis welcome to the forum! your page looks good for me.

It would be a good idea as long as you dont affect space and continue making your page responsible.

1 Like

Thankyou for taking out time to review this. Picky is exactly the kind of reviewer I would be needing to move up. I had been having trouble with some of these and still decided to post it since it passed all the tests. Thankyou! I’ll take a look at these advices and get to work then :smiley:

Hi @manasvis !

First of all, congratulation on finish your 1st project! Second, I will have some feedbacks on your page.

First, your background-color looks good. The text is able to see easily. But the caption of the picture is kinda hard to look because of the background-color #bf3f7f. Next, I recommend you to change the font, because that will make your page looks nicer. The picture is perfectly placed. The text is also perfectly placed. Next, I see that the caption is 100% width which looks not so good with the page. Overall, your page looks really nice, function well but has some small problems that don’t matter much.

I see that in your post says that you hoping to add some albums links. I think to do this, you should only need to put Halsey’s albums links. Because from what I can remember, to add the whole small Spotify or other music platform’s pages. It’s really hard and requires a lot of advance knowledge to do it. I recommend you to ask some developers or someone who has experienced if what you mean is to add some small pages from other platforms in your website

1 Like

Hello. Thank you for your feedback. I changed the font colour of the caption to make it more readable. Oh, I wanted to add the album links so the album covers would show up as they do on Spotify. If it is too difficult I will just post links as your suggestion. Again, thank you so much for taking out time to check this out.

Thanks for reading my feedback and fix some of your problems. I took a look on your website again and it looks good! Looks like you fixed almost everything. I pretty like the border around the picture, it makes the pic prettier. Anyway, your footer shoudl be bigger a little bit. Overall, your website is amazing now. Good Job!

Now to the 2nd thing,

I see that you want to do this right? So from what I know, when you make a website, the covers won’t show up when you just add the link. You may see some website have this techniques because they use complex codes to do it. Unfortunately, I’m not that pro to understand and use those codes. I’m sorry because I can’t help you with this problem. But I recommend you to ask some devs or you can make a whole new topic on this forum. I’m sure, some better people will know it. Once again, i’m sorry that I can’t help you.

Anyway, happy coding :slight_smile: !

1 Like

Looks Good!!

The caption line could use a better contrast of colors.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.