Skip to content
OverviewSolutions
16
Comments
26
ajeet achal
@ajeetachal

All comments

  • ajeet achal•510
    @ajeetachalPosted about 1 year ago

    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>```
    0
  • Parviz Azeroglu•150
    @ParvizAzerogluSubmitted about 1 year ago

    Background Image Issue:

    -- Problem: I'm attempting to set a background-image in CSS, but I'm not successful. The background image is not being displayed.

    -- Code Example :

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

    Img Tag SRC Setting Issue

    -- Problem: I'm trying to set the src of an <img> tag using JavaScript, but I'm still not succeeding.

    -- Code Example:

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

    -- Question: How can I correctly set the src attribute of an <img> tag using JavaScript?

    Hover Effect Not Working on Success Button:

    -- Problem: The CSS I provided for the success button doesn't seem to work when I hover over it.

    -- Code Example : in my style.css file

    -- Question: Why aren't the CSS styles I defined for the hover state of the success button working?

    (I'm using Markdown for the first time, so please excuse any mistakes or issues that may occur. <3)

    Newsletter sign-up form with success message using BEM

    2
    ajeet achal•510
    @ajeetachalPosted about 1 year ago

    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
    1
  • ajeet achal•510
    @ajeetachalPosted about 1 year ago

    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. 👏💻🚀

    1
  • ajeet achal•510
    @ajeetachalPosted about 1 year ago

    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.

    0
  • patsy005•170
    @patsy005Submitted about 1 year ago
    • I would like to know if my code uses good practises
    • I wanted to deploy this project with parcel but then I had "syntaxerror: unexpected token '<', "<!doctype "... is not valid json" error. I cound not manage to fix fetch() source : I added localhost path and 'Content-Type': 'application/json'

    Does someone can give me tip how to fix it for the next time ?

    Results Summary Component SCSS, JS

    1
    ajeet achal•510
    @ajeetachalPosted about 1 year ago

    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
    1
  • ajeet achal•510
    @ajeetachalPosted about 1 year ago

    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! 🚀😊

    0
  • ajeet achal•510
    @ajeetachalPosted about 1 year ago

    It's clear that you've put in some great effort on your project, and you've successfully met all the challenge requirements. Your project looks solid, and you've demonstrated strong skills.

    I did notice that in the challenge, the background was intended to be a linear gradient. While it's not mandatory, using a linear gradient background can add a visually appealing touch to your project. It's a great way to enhance the overall look and feel, providing depth and style to your design.

    Ultimately, the choice is yours, and it's not obligatory to use a linear gradient background. However, if you decide to give it a try, it could be a valuable learning experience and a way to make your project stand out even more.

    Keep up the good work, and feel free to explore different design elements and techniques as you continue to grow your frontend development skills!

    Marked as helpful
    0
  • ajeet achal•510
    @ajeetachalPosted about 1 year ago

    That's a great start on your first project! You've done an excellent job in many aspects, and your project shows a lot of promise. Your attention to detail is evident, but I noticed that the text alignment isn't centered, which can be improved for a more polished look.

    Center-aligned text can enhance the overall aesthetics and readability of your project. Here's a suggestion: You can try using CSS to center-align your text. Depending on the context and the element you're working with, you can use the text-align property set to center for block-level elements, or text-align: center for inline or inline-block elements. Additionally, consider using CSS Flexbox or Grid to center elements within containers.

    Keep up the good work, and don't hesitate to explore different techniques to make your projects even better. You're off to a great start, and I look forward to seeing more of your work in the future!

    Marked as helpful
    0
  • ajeet achal•510
    @ajeetachalPosted about 1 year ago

    "Excellent job on your work! I do have some valuable suggestions and feedback to share with you, if you don't mind.

    While reviewing the design comparison, it appears to be well-centered and visually appealing. However, when it comes to the preview section, it's currently occupying the entire screen. To enhance control over this element, consider implementing a 'max-width' property. For desktop mode, employing a 'flex' layout could optimize the display, while sticking to the default grid layout would work well for mobile devices. These adjustments will undoubtedly elevate the visual aesthetics and professionalism of the project."

    1
  • ajeet achal•510
    @ajeetachalPosted about 1 year ago

    Your design is incredibly impressive and appealing, and I appreciate the clarity and cleanliness of your code. The functionality of your project works smoothly. However, I have a few suggestions that could help make your project even more professional and authentic.

    I noticed that you've implemented form validation, which is excellent. However, currently, it only checks for minimal email format validation and might accept inputs like "ajjet@". To enhance this validation, you can use the following regular expression to ensure that email addresses follow a more standard format like "[email protected]":

    const emailValue = emailInput.value.trim();
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

    By using this regular expression, you can enforce a stricter validation for email addresses, which helps ensure data integrity and professionalism in your project. You can also consider displaying error messages just above the input field to provide more user-friendly feedback.

    Overall, your project is impressive, and these suggestions are meant to enhance its functionality and user experience further.

    Marked as helpful
    2
  • ajeet achal•510
    @ajeetachalPosted about 1 year ago

    Your code project is a shining example of excellence and clean code. It's impressively organized, easy to read, and efficient. Your attention to detail and commitment to quality are truly commendable. Keep up the fantastic work! 👏👍

    0
  • ajeet achal•510
    @ajeetachalPosted about 1 year ago

    Your code project is a shining example of excellence and clean code. It's impressively organized, easy to read, and efficient. Your attention to detail and commitment to quality are truly commendable. Keep up the fantastic work! 👏👍

    1