Skip to content
OverviewSolutions
33
Comments
5

Mohamed -hamid

@alexproman480 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Mohamed -hamid•480
    @alexproman

    . My design does not appear to match the project's screen shot because I added some effects to the content as it appears when scrolling the page.

  • HansGit30•10
    @HansGit30
    What specific areas of your project would you like help with?

    otro sitio donde pueda subirlo porque gitpages no puedo https://hansgit30.github.io/card-QR/ sale en blanco como ordenarlo bien

    he usado flex

    #react
    1
    Mohamed -hamid•480
    @alexproman

    •It seems that you are facing an issue with deploying your design to GitHub.

  • Mário Rodrigues•40
    @Macnur44
    What are you most proud of, and what would you do differently next time?

    I feel that with each challenge I have evolved, I will continue to work on accessibility now and perhaps put the measures in rem, to facilitate responsive mode

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

    Guaranteeing image quality from desktop to mobile, I looked into object-fit and I think I got a good result

    Stats-Preview-Card-Content

    1
    Mohamed -hamid•480
    @alexproman

    "I was really impressed with the result you achieved in your design, and I’d like to share some feedback that could help make your design closer to the ideal version for the project.

    • I noticed that you didn’t use the border-radius property in the main container for larger screens. It’s better to include it in the main container code with overflow: hidden.

    • For smaller screens, it’s advisable not to apply border-radius to the image directly. Instead, you can place the image inside a container, give it the appropriate background color from the original design, and apply the mix-blend-mode: multiply property. Set the opacity to around 0.8 or 0.9 to achieve a closer match to the original design.

    I wish you continued success and look forward to seeing your future achievements in other projects. 😊"

  • Mohamed -hamid•480
    @alexproman

    Good job on your first attempt at implementing the design! I’d like to draw your attention to the fact that there is a guide file included in the starter folder. This file can assist you in selecting appropriate fonts, their sizes, and the colors used in the design.

    I also noticed your excessive use of !important in your CSS implementation, which is not the best practice for achieving an optimal design outcome. Instead, try using variables to set the values you use in the design. This will make it easier for you to manage and adjust them.

    Additionally, pay attention to adjusting the sizes of elements for different screen sizes to ensure they closely align with the design specifications. Wishing you the best of luck, and always strive for improvement!

    Marked as helpful
  • Mohamed -hamid•480
    @alexproman

    Here are some preparations to make your design look good, compatible with all screens, easy to access, and your code organized, readable, and reusable:-

    • Use semantic tags like <header>, <main>, <footer>, <article>, and <section> to structure content.
    • Use <h1> for main headings, followed by <h2> for subheadings, and so on.
    • Use relative units like em, rem, and % instead of fixed units like px.
    • Utilize media queries: css to make your design responsive to different screen sizes
    • Use semantic words that express the content inside each element when assigning a class to it
    • Make sure to use border-radius values ​​correctly to make your design look optimal.