Skip to content
OverviewSolutions
4
Comments
2
Joy
@joykara

All comments

  • Joy•80
    @joykaraPosted over 2 years ago

    Hello!.. Congratulations on your solution.🎉 I viewed your code and would like to add insight into the accessibility issues you faced.

    • You could add a main tag <main> instead of the div tag in <div id="product-background"> and a footer tag <footer> instead of the div in <div class="attribution">.
    • Also, start with a <h1> tag in your body's text instead of the <h4>, and write the heading tags in order if need be, i.e; h1,h2,h3,h4,....

    For the HTML accessibility issues, I would recommend using the measurements instead such as px, rem, vh, vw,... instead of the %. I think that would be a better option.

    Finally, in response to your questions:

    • Yes, you should create an external CSS file, which I find to be the best option especially if you'll be working on a site with several pages that may require the same CSS codes, rather than constantly repeating them. Also, I find having an external CSS file makes the work look more presentable. Even so, an internal CSS file would work just fine, but wouldn't serve you best on all occasions.
    • In reference to using --webkits, I, unfortunately, have no expertise in it but I'd recommend looking into CSS tricks website and MDN web docs for further guidance
    Marked as helpful
    1
  • Andre Franco•70
    @AFranco-devSubmitted over 2 years ago

    The part that I found the most complicated was to set the prices in that position, I don't think I did it the best way so if anyone could tell me a better way to do it I would really appreciate it :)

    How would be the best way to arrange the prices in that position?

    Product preview challenge no framework pure CSS

    1
    Joy•80
    @joykaraPosted over 2 years ago

    Hello✨!!... I'd suggest trying to list the prices <li> in your HTML code using <ul>, then using CSS to style them to your desired output. e.g: in CSS have the list as ;

    list-style-type: none; display: flex; justify-content: space-between; .....

    and edit each of the lists as desired. You could try that out and see if it works for you. I previously tried it out in my nft-preview challenge. Hope this helps.😊

    Marked as helpful
    1