Skip to content
OverviewSolutions
3
Comments
5
P
Gabriel Marques
@GMarqz

All comments

  • Denlikaa•10
    @DenlikaaSubmitted 21 days ago
    What are you most proud of, and what would you do differently next time?

    I am proud of actually taking up the challenge and getting a solution!!! i would be more focused and consistent with my future projects or challenges.

    What challenges did you encounter, and how did you overcome them?

    I encountered issues with actually understanding the challenge although it looked easy I was confused about what exactly I needed, I sorted that out by looking at other submitted solutions and also help from ChatGpt..... I am being honest😂

    What specific areas of your project would you like help with?

    I would need help with my CSS, I don't understand the function of the :root and I need a better way to style that doesn't involve excess code if possible.

    Qr-Code challenge

    1
    Gabriel Marques•90
    @GMarqzPosted 21 days ago

    Hi there!👋 Nice job on completing the challenge!

    About your concern with the :root pseudo-class... :root is helpful for declaring global CSS variables. Let’s say you're building a landing page and want to use green across multiple elements. With :root, you could do something like this:

    :root {
--primary-color: green;
}

.container {
background-color: var(--primary-color);
}

.form-btn {
color: var(--primary-color);
}

    Why is this useful?

    In the example above, only two elements use the color for simplicity. But imagine you have ten elements using the same shade of green. If you (or the designer) decide to change the primary color to blue, you won’t need to adjust each element individually. You just change the color in :root:

    :root {
--primary-color: blue;
}

.container {
background-color: var(--primary-color);
}

.form-btn {
color: var(--primary-color);
}

    This keeps your code cleaner and easier to maintain. Also, you can use variables for other properties like font-size, font-family, and more! You can read more about global css variables here📗

    Hope you find this helpful. 😊

    Happy coding!

    1
  • Gabriel Marques•90
    @GMarqzPosted 22 days ago

    Fala Jean, tudo bom? 👋 Parabéns por ter completado o desafio! 🎉

    Tenho algumas sugestões que podem te interessar:

    • Deixar seu texto alt mais informativo para leitores de tela ao explicar o propósito do QR code (no caso, levar ao site Frontend Mentor). Um exemplo:
    <img src="./src/images/image-qr-code.png" alt="QR code com link para o site Frontend Mentor">
    • Considerar o uso de rem/em em vez de px. Essas unidades ajudam a criar layouts mais flexíveis e escaláveis. Aqui está um artigo sobre isso em português📗, e outro em inglês📗 se preferir.

    No geral, sua solução para este desafio está bem feita, parabéns!

    Marked as helpful
    1
  • Ahmed Dosunmu•60
    @Ay-DeeSubmitted 25 days ago
    What are you most proud of, and what would you do differently next time?

    Seeing this through

    What challenges did you encounter, and how did you overcome them?

    I didn't know how to import the font file I downloaded from Google Fonts but found the solution after a little Google searching. I imported it using this:

    @font-face {
    font-family: 'Outfit';
    src: url(font/Outfit/Outfit-VariableFont_wght.ttf) format('truetype-variations');
    font-weight: 100 900;
}

    And also the good old div centering problem but I worked through it fine

    QR Code Component Using HTML/CSS

    1
    Gabriel Marques•90
    @GMarqzPosted 25 days ago

    Hello there! 👋 Nice job on completing the challenge!

    There are multiple ways to import fonts into your project. One effective method is to visit Google Fonts and search for your desired font (in this case, Outfit). Once you select it, you’ll be redirected to the font's page. Click on the "Get font" button, then select the "< > Get embed code" option. Make sure to mark the "@import" radio button and copy the code inside the style tag.

    You can then import it in your style.css like this:

    @import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');

    This way, you don’t have to download the font, making it a convenient option.

    This is one way to import fonts into your project; feel free to choose the method that suits you best.

    Additionally, I believe the attribution should be placed outside the component. Consider moving the attribution div outside the content div while keeping it inside the main div.

    Lastly, please add an alt text to your QR image. Including alt text is essential for accessibility as it allows screen readers to convey the content and purpose of images to visually impaired users, ensuring everyone can understand the information being presented. It also enhances SEO by providing context to search engines.

    You could use something like this for the alt text:

    alt="QR code linking to the Frontend Mentor website"

    I hope this was helpful. 😊

    Marked as helpful
    1
  • Gabriel Marques•90
    @GMarqzPosted 25 days ago

    Hi there! 👋 Good job on completing the challenge!

    I noticed you’re using px units, which can work, but rem might be a great option for improved responsiveness! Using rem scales more consistently across different devices and screen sizes. What do you think about experimenting with it here? If that interests you, you can read about it here.

    You might also consider using the box-sizing: border-box;.

    Border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. - developer.mozila

    To set up both a padding/margin reset and border-box in one go, you could use the universal selector like this:

    * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

    You can check more about universal selectors here📗 and more about box-sizing here📗.

    I hope this is helpful. Keep it up!

    Marked as helpful
    1
  • Gabriel Marques•90
    @GMarqzPosted 26 days ago

    Hi there 👋 Nice job on completing the challenge! 🤝

    I'd like to suggest you to add an alt text to your qr image for screen readers. The alt text should say what the image is and where it leads to.

    Here's an example:

    <img src="./assets/images/image-qr-code.png" alt="QR Code to frontendmentor.io">

    Hope you find this helpful. 😊

    0