Skip to content
OverviewSolutions
16
Comments
26

ajeet achal

@ajeetachalNew Delhi510 points

I am a Fullstack Developer with over 3 years of experience in creating responsive web applications using HTML, CSS, JavaScript, React, PHP and Laravel, and expertise in CMS development. I have extensive experience in building websites on popular CMS platforms like WordPress, Opencart, and Shopify.

I’m currently learning...

react js node js

Latest solutions

View more solutions

Latest comments

  • ajeet achal•510
    @ajeetachal

    Your HTML and CSS code looks quite clean and well-structured. However, I can provide some suggestions to make it even cleaner and more organized:

    CSS Cleanup:

    1.You have defined the img selector twice in your CSS. You can combine them into one declaration.

    2.Use consistent naming conventions for CSS variables. For example, use --light-gray instead of --Light-gray.

    3.Organize your CSS rules by grouping them logically (e.g., typography, layout, colors) to improve readability.

    4.Consider using more descriptive class names if the project grows.

    HTML Structure:

    1. Consider adding a lang attribute to the <html> element for specifying the document's language.

    2.You can move the CSS <link> and favicon <link> from the <head> to just before the closing </body> tag. This helps improve page loading performance.

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frontend Mentor: QR Component</title>
</head>```
  • ajeet achal•510
    @ajeetachal

    to display background image you have define length and with and add this

    .my-element { background-image: url('path/to/image.jpg'); background-position: center; background-size: cover; }

    ** Img Tag SRC Setting Issue **

    It looks like you're on the right track, but there seems to be a small issue with the code. It appears that there are extra spaces in the attribute name and value. Try removing those spaces, and your code should work as expected. Here's the corrected code:

    var imgElement = document.getElementById('my-img'); imgElement.setAttribute("src", "path/to/image.jpg");/

    Marked as helpful
  • ajeet achal•510
    @ajeetachal

    Absolutely, we all encounter hiccups in our projects from time to time. Your design work looks fantastic, and I can see that you've put a lot of effort into it. Don't worry too much about the form validation issue; you'll easily iron it out once you've had a chance to relax after your UI design sprint. Great job overall – keep up the fantastic work! Keep coding, and you'll only get better with each project. 👏💻🚀

  • ajeet achal•510
    @ajeetachal

    I have thoroughly reviewed your design, and I must say it is truly remarkable. I was particularly impressed by the button hover effect, which is nothing short of awe-inspiring.

    I understand that it is your creative choice to generate a link to help users understand what they are about to see. However, I'd like to suggest considering placing your design directly in the main frame. This would enable Front-End Mentors to make direct comparisons between your design and the user experience.

    Regarding your design, I couldn't find any significant issues. However, if you consider increasing the border size of element 76 and slightly reducing the font size of the last text, it could enhance the overall authenticity and professionalism of your design. Please remember that these are optional suggestions, and the final decision rests with you. Your design prowess is evident, and I look forward to seeing where you take it next.

  • ajeet achal•510
    @ajeetachal

    Your work on this project is truly commendable! 👏 The attention to detail and the overall design are fantastic. If you'd like to take it a step further to make the UI appear even more authentic and professional, you might consider increasing the padding or the height and width of element 76. This could provide a more spacious and polished look. However, please remember that it's entirely up to you, and this suggestion is by no means mandatory. Your design choices have been excellent so far, and I trust your judgment. Keep up the great work! 🌟😊

    Marked as helpful
  • ajeet achal•510
    @ajeetachal

    Wow, congratulations on completing the project! 🌟 You've handled every aspect beautifully, and the user interface (UI) is incredibly appealing. It's clear that you've put a lot of thought and effort into it.

    If I may offer a small suggestion, you could consider adding a linear-gradient in the background. This could add an extra layer of visual depth and enhance the overall aesthetics of the project. Of course, this suggestion is entirely optional and up to you, but here's a quick example of how you could implement it:

    /* Add this to your CSS */
class {
  background: linear-gradient(to bottom, #ffcc00, #ff9900); /* You can customize the colors to your liking */
}

    Once again, fantastic job on the project, and I can't wait to see where you take it next! 🚀😊

View more comments