Skip to content
OverviewSolutions
7
Comments
6
cisneConCorbata
@cisneConCorbata

All comments

  • AlvaNeedsFood•20
    @AlvaDevsSubmitted over 1 year ago

    🐾 Hello There! 🐾

    This is the first challenge I'm doing on Frontend Mentor so I don't have that much knowledge of the general guidelines to follow around here.

    So it would be very helpful if you could give me some advice on this and any other future challenges I might do.

    In this challenge, I tried to make the page look as close to the QR model as possible with the help of CSS... Do you think I'm handling my code with good practices?

    Any Feedback welcome 📝

    ✨ My GitHub ✨

    QR Code Component - CSS

    2
    cisneConCorbata•170
    @cisneConCorbataPosted over 1 year ago

    Hi there! You did amazing, in fact, I actually learned something while looking at your code, you're going to save me so much time in the future, I didn't know you could establish variables! (I'll credit you in my next project, of course).

    Accessibility

    Landmarks are very important for people who use screen readers, so get used to applying them. They are your basic built in tags that specify the content within them , like <main>, <footer>, <header>, etc. All HTML must be contained by landmarks

    I use <main> to encase the focus of the website (in this case, the QR code), and footer for the attribution:

    <footer>
<div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://github.com/AlvaNeedsFood">Alvaro Alvarez P</a>.
  </div>
</footer>

    Centering vertically

    Whenever I have issues with flexbox I use grid, it's very easy to understand. In this case, you just need to use:

    display: grid;
place-items: center;
height:100vh;

    Hope this helps!

    Marked as helpful
    0
  • cisneConCorbata•170
    @cisneConCorbataPosted over 1 year ago

    Hey! I don't know much about React, but I think your images are not linked to the same folders as the ones referenced in the code, or at least I can't find any folders with those names.

    0
  • cisneConCorbata•170
    @cisneConCorbataPosted over 1 year ago

    Hi! To add hover, just take your element's class and start a new declaration in you stylesheet:

    .image:hover {
background: grey;
cursor: pointer;
}

    Those values are just an example, you can add whatever you like and it will show when you hover the element, the important part is the :hover after the element

    Marked as helpful
    0
  • cisneConCorbata•170
    @cisneConCorbataPosted over 1 year ago

    You can also fix that border by rounding the corners of your container.

    I would also recommend you to stop adding inline CSS because it will get messy once you get to work on bigger projects. Use a .css file or the <styles> tag instead.

    As a last note, please use always use alt text for images and landmarks, it's important for accessibility!

    Marked as helpful
    0
  • Erick Melchor•220
    @Melchor16Submitted over 1 year ago

    I don't really know how to center my main div vertically and I think there's an easiest way to make this excercise.

    QR Code Component Main

    2
    cisneConCorbata•170
    @cisneConCorbataPosted over 1 year ago

    Hi! This is really good, you just need to fix the accessibility issues using landmarks like <main>, <footer>, etc.

    This would be the main content:

    <main>
<div class="square">
    <div class="qr">
      <img src="./images/image-qr-code.png" alt="qrcode" width="375px">
    </div>
    <div class="title">Improve your front-end skills by building projects</div>
    <div class="sub-text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</div>
  </div>
</main>

    This would be your attribution:

    <footer>
<div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://github.com/Melchor16/IntroQr">Erick Villarreal</a>.
  </div>
</footer>

    As for the vertical alignment, you need to use flexbox

    main {
       min-height: 90vh;
       display: flex;
       justify-content: center;
       align-items: center;
   }
    Marked as helpful
    0
  • Kayyrbek Perdebekov•130
    @kayyrbeksSubmitted over 1 year ago

    Hi, eneryone! (｡･∀･)ﾉﾞ

    Finally I finished this project and used relative units was some difficult. And I'd want to ask you: CSS code always takes many line? How can I write CSS code more shorter?

    I'll glad to see any feedback or advice! Thanks for attention! ^____^

    Results summary component (use only HTML & CSS)

    1
    cisneConCorbata•170
    @cisneConCorbataPosted over 1 year ago

    Hi! CSS usually takes me a lot of lines as well, but there are ways to make it a little shorter. For starters, by checking your code, I can see you could save a lot of space by using this format to import fonts

    @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap');

    and most properties have shorthands, ie, the shorthand for font is:

    font: font-style font-variant font-weight font-size/line-height font-family;

    just replace the values with what you need. That way, you don't use a line for each property, and most properties work this way, you can consult them at W3 schools

    Marked as helpful
    1