Art Gallery Website | Leaflet JS

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted over 2 years ago

  Hi, Vanza! Another excellent job! 🙌

  To your questions:

  • I think the alt text is fine, especially since the all the location information is in the next section.
  • When it comes to the HTML on the location page, I think using p tags, as you've done here is just fine. You could change the .area__wrapper div to an address element for slight semantic improvement, but I'm not sure it's necessary.

  Hope your exams go/went well! Looking forward to your next solution!

  Marked as helpful

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @brasspetals Hello, Anna! It's great to see your comment again on my solution. Thank you for answering my questions! 👍

  Regarding the address element, the spec said the following:

  The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The p element is the appropriate element for marking up postal addresses in general.)

  So, based on the information, I should only use address for the contact person such as email and phone number. However, if the location information is related to the contact person, then it is okay to use address.

  For example, if the location is related to the contact person.

  <address>
    <p>Contact John</p>
    <a href="mailto:[email protected]">[email protected]</a>
    <p>London, United Kingdom</p>
  </address>
  

  In this case, the location is not related to any contact person. So, I guess using p is fine.

  2

  

  Anna Leigh•5,135

  @brasspetalsPosted over 2 years ago

  @vanzasetia Ack! I suppose the few times I've used it has also been in conjunction with some other contact info like a telephone number. Yeah, according to the spec, it wouldn't work here. 🙈 So much for being helpful! 😅

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  Hey Vanza, congratulations for this solution!

  Nailed it! Everything seems so perfect and the responsiveness is fluid. The most beautiful thing here is the behavior of the h1 heading with the mix-blend-mode. Can you explain me how you've done that? Great effect.

  Congrats bro.

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @correlucas

  Hi, Lucas! Thanks for your nice comment! 👍

  For that effect which is reversing text color based on the background color, it works by doing the following.

  • First, make sure the text color is the opposite color of the background color. In this case, the text color is white (#fff) and the background color is black (#000).
  • Second, add mix-blend-mode: difference to the h1.

  Be aware that if the background color is not dark enough then the text color won't have enough contrast. For example, if the background-color is #1e1e1e and the text color is #fff, then the text color will be gray. As a result, the text color doesn't have enough color contrast.

  So, be careful with the color choice.

  For more information, you can read this article, Reverse Text Color Based on Background Color Automatically in CSS | CSS-Tricks.

  I hope this helps!

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @vanzasetia Thank you for this complete feedback Vanza. I'm doing this challenge right now and I was wondering how to apply this effect. Now its much clear the idea. Thank you also for the other resources, really useful!

  Have a nice day!

  👏👏👏

  1
• 

  Hamzat Lawal•560

  @EngineerHamzieyPosted over 2 years ago

  😊 how was your exam? I guess you nailed it 😁. I was also wondering that I haven't seen your activities here in a while. And when I asked for your feedback on one of my solution the last time and I didn't see your reply, then I realized you must be busy with a project or something.

  And thanks for the last feedback. It really helped.

  Incase it's convenient, here is the link to that solution.

  Although I already have some comments but I'm not satisfied 😃 I still want yours.

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @EngineerHamziey My exam was doing great. Thank you for asking! 👍

  Thank you also for understanding me! I was a bit busy with my own stuff last month. 😅

  Oh, I already gave you some feedback on the solution. Hope you find it useful! 😉

  1