Skip to content
OverviewSolutions
15
Comments
11
P
Valeria Montoya
@ValeriaMontoya

All comments

  • Yasser Harzelli•80
    @ItsYasserSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    didn't include fonts because its repetitive

    only html css

    2
    Valeria Montoya•240
    @ValeriaMontoyaPosted 4 months ago

    Hi Yasser 👋🏼 your code seems well structured in general. However here are some steps you could consider for your next project. To easily import fonts from Google Fonts into your website follow these simple steps:

    1. Go to the Google Fonts website at fonts.google.com.
    2. Browse or search for the font you want to use.
    3. Once you click on the font, click on "Get font" button.
    4. Once you have selected all the fonts you want to use, click the icon on the top right.
    5. Now click "Get embed code" and you will find a code snippet that you need to add to your HTML file. Copy this code snippet.
    6. Paste the code snippet into the <head> section of your HTML file, between the <head> and </head> tags.
    7. Save your HTML file and refresh your website. The fonts should now be imported.

    By following these steps, you can easily import and use Google Fonts on your website to enhance the typography and design.

    I hope this is helpful to you!

    Marked as helpful
    0
  • Mohammad Aminul Islam•160
    @aminbd90Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?
    What challenges did you encounter, and how did you overcome them?
    What specific areas of your project would you like help with?

    Social-links-profile

    1
    Valeria Montoya•240
    @ValeriaMontoyaPosted 8 months ago

    Hi, your solution looks amazing! 👍🏼 Just a small suggestion. Changing the <section> tag to <main> in your HTML code might be a good idea since using <main> would be semantically more correct.

    0
  • Alan Mesquita•40
    @alan-mesquitaSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    me orgulho do design, acredito ter conseguido desenvolve-lo mais fiel possível do projeto do figma e na próxima tentarei trazer novas formas pra ir aprimorando e refatorando meus códigos.

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

    A dificuldade que tive foi de como deixar meu card adaptável para diversas telas e com esforço, testes e pesquisa consegui deixa-lo adaptável.

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

    Na refatoração, tentando deixa meu código menor e mais simples criei classes reutilizáveis e não se esse seria o ideal.

    blog-preview-card-main

    2
    Valeria Montoya•240
    @ValeriaMontoyaPosted 8 months ago

    Hi 👋🏼 about your question, I think using reusable classes is a good practice in terms of code maintenance and scalability. It allows for quick and consistent changes throughout the site if necessary. In my opinion you did a great job, keep going!

    Marked as helpful
    1
  • Phushya Mithra Gauri•40
    @PhushyamithraSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Learnt how to build a HTML page with CSS styling from scratch without any tutorial HELL.

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

    Didn't know how to start CSS styling so actually created all the HTML styling then using the sketch made the changes one by one.

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

    CSS Styling, JS, Responsive Design and also Development using React. JS framework.

    Responsive QR Design

    3
    Valeria Montoya•240
    @ValeriaMontoyaPosted 8 months ago

    Hi, here are some suggestions to improve the accessibility of your code:

    • Screen readers rely on alt text to describe images to users. Add an alt attribute to the <img> tag with a description of the QR code's purpose. For example: <img src="./images/image-qr-code.png" alt="QR code for Frontend Mentor" />
    • While <div> is generic, consider using more descriptive elements for specific content. In this case, replace the outer <div> with a <main> tag to indicate the main content area.
    • Headings (<h1> to <h6>) should be used in a logical order to structure the content hierarchy. Since there's only one heading currently, you can simply remove the <b> tag for bold styling (use CSS instead) and replace it with a <h1> tag.

    I hope my feedback is helpful! 🤓

    0
  • Valeria Montoya•240
    @ValeriaMontoyaPosted almost 3 years ago

    Hi! Here are some suggestions after reviewing your code: you should always use semantic HTML to wrap the content and avoid using many divs. Another suggestion is that you should read the style guide provided in the challenge files, you'll find all the colors and fonts you need. Good luck!

    0
  • Valeria Montoya•240
    @ValeriaMontoyaPosted almost 3 years ago

    Hi! I wasn't able to see your code on GitHub, it seems like your repository link is wrong. Looking at the live site I'd like to say that the cards needed more padding to make them look better. I also notice that you used h3 tags, but I always recommend to use h1, h2, in that order and so on due to best practices. Hope my tips are useful.

    0
  • Jintax•20
    @Jintax1Submitted almost 3 years ago

    I don't know how to do shadows and it's not as pixel perfect as I would like. I will return to make it a little better in the future. Any feedback would be appreciated :)

    Order summary component

    2
    Valeria Montoya•240
    @ValeriaMontoyaPosted almost 3 years ago

    Hi Jintax. You got close to the design, you did great. I just want to give you a tip: you should always use the <main> tag to wrap all the content so you avoid accessibility issues. Happy New Year btw 🎉

    Marked as helpful
    1
  • Valeria Montoya•240
    @ValeriaMontoyaPosted almost 3 years ago

    You did a great job, it looks amazing. My only tip is that you can separate the CSS on different files, for example create a mobile.css and desktop.css files and add something like this in the HTML head: <link rel="stylesheet" href="mobile.css" />

    <link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1440px)"/>
    1
  • Valeria Montoya•240
    @ValeriaMontoyaPosted almost 3 years ago

    Hi! I recommend you to use a main tag to wrap all the page content. This way you avoid accessibility issues.

    Good luck 😊

    0
  • Valeria Montoya•240
    @ValeriaMontoyaPosted almost 3 years ago

    Hi Lucas. My first tip to you is that you should use classes instead of id's for your CSS selectors, this is due to id's are more used to work with JavaScript. Another thing I recommend to you is to import the fonts from Google Fonts and add them in your HTML file instead of adding them in your CSS file. That way your page will have a better performance. Also try not to mix CSS styles on the HTML file because it's not a good practice (this has to do with specificity). I hope my tips help you, good luck! ☺️

    Marked as helpful
    1
  • Valeria Montoya•240
    @ValeriaMontoyaPosted almost 3 years ago

    Hi Aakash. I really appreciate your feedback, you're completely right and I'll be more careful with responsive design from now on. Thanks a lot!😊

    1