Skip to content
OverviewSolutions
16
Comments
3
P
Fernando Falcon
@ferfalcon

All comments

  • Fernando Falcon•220
    @ferfalconPosted 8 months ago

    Hello Stax, I've had a chance to review your social links profile page and I'm truly impressed by your custom font integration and the overall clean design layout.

    To further enhance your page, I suggest moving away from <font> tags in favor of more semantic elements like <h1> for names and <p> for descriptions, improving both accessibility and SEO. The current use of <font> tags is somewhat outdated and generally not recommended.

    Introducing CSS variables for frequently used colors could greatly simplify your styling process, making it easier to maintain and update your design.

    If not already present, ensuring all images have alt attributes will significantly boost accessibility, helping screen readers interpret the content more effectively.

    For improved responsiveness, I recommend using relative units for element widths and setting a max-width to ensure your layout remains consistent across various devices. Regular testing on different screen sizes can offer the best insights for a universally smooth user experience.

    Marked as helpful
    1
  • Anwar Mestycer•420
    @AnwarMestycerSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    First time working with shadow in CSS

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

    no challenge encountered yet

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

    always needs to upgrade responsiveness.

    blog-preview-card

    3
    Fernando Falcon•220
    @ferfalconPosted 8 months ago

    Hi Anwar, I hope you're doing well.

    Your project closely aligns with the design goals, which is commendable. For an enhanced visual appeal, adjusting the padding within the .status div could provide more breathing space and balance. Additionally, consider reserving the vibrant yellow for hover states on the header to add an interactive element to your design.

    To improve responsiveness, adopting relative units for widths and incorporating a max-width can ensure your layout adapts seamlessly across devices. Don't forget to test on various screen sizes for the best user experience.

    Also, exploring more semantic HTML tags could enhance the structure and accessibility of your project. For instance, the header class used within a <div> could potentially be replaced with a semantic <header> tag for the card's header section.

    Reviewing your CSS for opportunities to reduce repetition and streamline your code can also lead to cleaner and more efficient styling. For example, the repeated use of margin-left: 24px; could potentially be streamlined by applying it to a parent element or using a utility class.

    Keep up the great work, and I look forward to seeing your project evolve!

    Marked as helpful
    0
  • Enrique DC•80
    @TheEdaL06Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    It is my first project on the platform and the truth is that it has taken me quite a while to get everything focused as I wanted it to be.

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

    The difficulties I found were centring the QR card and placing the footer at the bottom of the page.

    I helped myself by setting borders to all the elements so I could see how the changes I made to the css code were behaving.

    * {
    border: 1px solid red;
}
    What specific areas of your project would you like help with?

    For my first project I would say that the positioning of everything in its place as I said in the previous questions but otherwise fine.

    QR code

    2
    Fernando Falcon•220
    @ferfalconPosted 8 months ago

    Hi Enrique, I hope you're doing well.

    I noticed your solution closely matches the intended design, which is fantastic. To further enhance your project, consider incorporating more semantic HTML elements. For instance, replacing the <div> with the card class with a <main> tag and the <div> with the attribution class with a <footer> tag could improve both accessibility and SEO. These changes can be validated by generating an Accessibility report, which provides valuable insights.

    Additionally, to make your layout more responsive, you might switch from absolute units to relative ones, like percentages, for element widths. Setting a max-width can also help maintain control over the layout's scalability, ensuring it looks great on both small and large screens.

    I hope these suggestions are helpful to you. Keep up the good work!

    Marked as helpful
    1