A Tribute to J Dilla (WAY Better)

Hey everyone. I decided to do my page over again from mobile-first viewport and scale up. I gotta say, its SO much better looking and the code is way cleaner (thanks @snowmonkey for your helpful code post!). I recently sent a link to my mom (iPhone) to check out the page and she sent me a screenshot back that looked different than what my iPhone looks like.

So could you guys please check mine out, make sure my responsiveness is right and everything looks good? Any suggestions are appreciated! Thanks

2 Likes

Looks good from here, but that’s only testing with Edge on xbox and Silk on fireTv.

Couple small nits though:

  • the body tag contains a single element, a div. That div is solely there to render a background image. Why not get rid of it and apply the image to the body itself?

  • the figure tag contains a single element, also a div. Just… why?

As a general rule, if a tag serves solely as a container for ONE nested tag, one of them is unnecessary.

Thank you! Very much appreciated.

I’m not truly understanding your first bullet point. My div is in my body element and wrapped around my main so that it stretches the whole page. When I remove it, it disappears. Where are you saying I should put it?

For the second bullet, I added the div because it was required =/

  • User Story #3: I should see a div element with a corresponding id="img-div" .

Apply the id img-div to the figure. I think it still passes.

And the background image can be applied to the body rather than a div. In this case, the body should get the background-image property.

ooooooh ok, I got it now! It did pass. Thanks again! My code definitely makes more sense now. I hope if I run into issues I can’t figure out in the future, you could help me? :sweat_smile:

Kinda the point of the forum. I’ve been active in design and development a long time. This is what i do to relax. :wink:

1 Like

Hi, you are applying the correct semantic tags like we learned in the lessons. It is great! I have some appointments:

1. Take a look at your HTML structure. Maybe you can use:

<body>
    <header> your header content </header>
    <main> your main content </main>
    <footer> your footer content </footer>
</body>

2. This DIV tag below is not necessary, is it?

<div id="subtitle">
    <p>A legend and pioneer for modern day hip hop</p>
</div>

3. Again, I think this DIV tag is not necessary

<div>
      <a id="tribute-link" href="https://en.wikipedia.org/wiki/J_Dilla" target="_blank"><strong>Want To Learn More</strong></a>
</div>
1 Like

Ok! Made the changes. The tribute-link was a little tricky to reformat, but it works well and everything is still rresponsive (I hope). Thanks for making my code even nicer~

well, ish. The suggestions are well thought, but a suggestion of my own - google “block-level vs inline elements.” The a tag is inline, and usually requires a block-level container.

1 Like

Thanks for chiming in. I’ll definitely research it, like when to use which at the right time. Always helpful!

Very good but the video’s width and height isn’t responsive yet.

Yeah, the thumbnail for some reason won’t respond to my code, no matter what size. Any suggestions? The video does work at any size though.

1 Like

This video explains how to deal the video part very well, the video talks about how to embed video element and embed YOUTUBE/VIMEO video so jump to that YouTube part that you want to watch.

1 Like

Thank you! I’ve watched many of his videos so its cool that you referenced him. I’ll watch this and let you know when I’ve got it right

2 Likes