Tribute Page: Didi Kempot, Final Touched up. Feedback appreciated

hi campers,

–Edited : some problem solved. above this line –

please visit to review:

https://codepen.io/sobadrdb/full/yLYGORB

would need styling css review now.
thanks in advance for your time.

Hi @sobadrdb,

  • Baru pertama kali aku dapat orang bahasa Indo.
  • Masalahnya apaan?

Ok, kamu bilang kamu pake direction: rtl, jadi semuanya bakal mulai dari kanan ke kiri krn rtl itu artinya right-to-left. Jadi Karena kuotenya break word, dia mulainya dari kanan lagi, bukan kiri. Ini tengok gambarnya

Klo kamu mau buat gambarnya di kanan dan textnya dikiri, buat aja <img> si Didi Kempot punya float: right;, dan text kuotenya punya
float: left;

1 Like

Ok, so you used display: flex; then you can just use flex-direction: row to make it line up in a row. Then you can just use order: 2 on the image so the image goes to the right. Ex:

element-container {
  display: flex;
  flex-direction: row;
}

element1 {
  order: 2;
}

element2 {
  order: 1;
}

And after I did those stuff it worked nicely.

Yeah, kamu bisa terimakasih dengan tekan tombol hati.

i just finished my final touched up to my tribute page, please if you guys have any sugestions, about my css or any thing that make this page simpler to code, would be appreciated.

and sorry for the article not written in english. its my native language.

thanks in advanced

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • You have elements out of order which can cause problems.
    • Anything the browser renders belongs in the body element. Therefore you’ve incorrectly placed the header and footer elements.
  • Run your HTML code through the W3C validator.
    • If you only put the code that codepen expects you can ignore the first warning and first two errors.
    • If you paste your code the way you have it now with incorrectly placed elements then fix all the errors
    • There are coding errors you should address.
  • Make your page responsive. There shouldn’t be a horizontal scrollbar.

thanks, for your review.
i will try to validate as you recommended.
to find out which element you mentioned.

hi @Roma,

i just did try to validate by copy paste the html, and seen this errors :

Error : End of file seen and there were open elements.

From line 27, column 323; to line 27, column 326

saat ini. </p>

Error : Unclosed element div .

From line 15, column 3; to line 15, column 25

div>↩ ↩ <div id="tribute-info">↩ <h

i already checked few times but still had no clues, how to fix those addressing errors.

im sure the
</p> have open <p class="size-p">
and
<div id="tribute-info"> have closing </div> tag.

thanks for your time.

You saw that message when your elements were out of order. I can see that you’ve fixed them.
Since you’ve fixed them you need to copy/paste your corrected code again and run it through the validator.

hi @Roma,

okay i’ve rechecked, run the validator few times already, back and forth edit the html, but still have the same those 2 errors, tbh i dont know why and how to fix that.
my english are limited, even if i use translator, i still dont undestand.
:upside_down_face:
thanks in advance.

The things you need to correct;

  • Line 51, img element must have an alt attribute. You don’t have an alt attribute. You have one for your first img, you don’t for your second.
  • Line 56, the controlslist attribute is not allowed on the audio element. So delete controlsList="nodownload"
  • Line 70, &copy is incorrect. It’s missing a semicolon. It should be &copy;
1 Like

thanks @Roma,

just fixed as you recommended, and ran the validator again, but still the 2 errors that i mentioned is there. im copy/paste the html, don’t know why the url validation not working error 503.

just a question, why is it not to allowed controlList="nodownload" to be added?

once again thanks for your reviews.:+1:t2:

You’ll have to read what it says. It gives a thorough explanation for each thing flagged that doesn’t pass validation. That’s why the W3C validator is a valuable tool.

1 Like

hi @Roma,

sorry to bother you one last time on my tribute project. please review the:

W3C Validator result

is this mean, the html good enough?:grinning:

thanks for your lessons👍🏻.

like you said, building this curriculum projects is not about sprint, but marathon.