Responsive result tab with CSS grid

Community feedback

• 

  Boluwatife Bonaventure•550

  @BoyutifePosted over 1 year ago

  Hi Victor Durodola 👋. Congratulations on successfully completing the challenge! 🎉

  I have some additional suggestions for your code that I believe will be of great interest to you.

  HTML 🏷️:

  -Ensure headings are in a logical order. For example, check that all headings are marked with h1 through h6 elements and that these are ordered hierarchically. For example, the heading level following an h1 element should be an h2 element, not an h3 element. Finally, don't use heading mark up on text that isn't actually a heading.

  -This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to non-semantic markup, which lack landmark for a webpage. To address this issue, you can review the HTML code of the webpage and add appropriate landmarks where necessary. Some common landmarks that you may want to consider including are: <header> <main> <section> <aside> instead of multiple <div> <span>

  CSS 🎨: In response to your question

  
  :root {
    --a: hsl(240, 100%, 50%);
  }
  

  Then, you can use this variable to define another variable with opacity added to it, like this:

  :root {
    --a: hsl(240, 100%, 50%);
    --b: hsla(var(--a), 0.5);
  }
  

  Here, the hsla() function is used to add an opacity value of 0.5 to the --a variable.

  You can then use the var() function to reference these variables in your CSS styles:

  .some-class {
    color: var(--a);
    background-color: var(--b);
  }
  
  

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  1