Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • @iNavac03

    Submitted

    Now that I have finished this challenge, I have a few questions about my work.

    Is my page actually responsive to mobile phones by using @media? Did I use media right?

    My html writing is correct? In terms of semantic and hierarchy

    What can I change? How can I improve?

    @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • The indentation of the code is inconsistent, making it difficult to read and understand. It's recommended to use a code formatter tool, such as Prettier, in your code editor to automatically format your code and maintain consistent indentation.
      • For instance, you've placed your <footer> tag outside the <body> tag, which is incorrect.
    • The media query is fine, but you can enhance the width by directly using max-width with a fixed value instead of using width: 50%;.

    • Consider replacing "Your Name Here" in the footer with your actual name/nickname.

    • Instead of <div class="main">, you could use a landmark element <main>.

    • It might be beneficial to separate styles into another file to organize the code more efficiently.

    I hope you find it useful! šŸ˜„ Above all, the solution you submitted is great!

    Happy coding!

    1
  • @cipdanila

    Submitted

    What are you most proud of, and what would you do differently next time?

    Since is my second project, I like it!

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

    I found it quite difficult to make the main image (illustration-article.svg) fit the project requirement on the 'mobile-design' side. For some reason, the image is displayed in the browser at a height of 181px, whereas in reality, it should be 201px! Any help is welcome!

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

    As I mentioned, on the 'mobile-design' side, the main image does not fit the requirement. I must be missing something, I assume...

    @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    Alt text šŸ“·:

    • To make the alt attribute as useful and effective as possible, avoid using words such as "image", "photo", or "picture" as they are redundant because the image tag already conveys that information. Also, the alt attribute should not contain underscores or hyphens. Instead, try to make the description as human-readable and understandable as possible.

      • For a photo of a person, use their name as the alt text

      If you want to learn more about the alt attribute, you can read this article. šŸ“˜.

    CSS šŸŽØ:

    • Simply use max-width: 400px in your component. This eliminates the need for using a percentage width and a media query to adjust the width.
    • Avoid using position: absolute to center an element as it may result in overflow on some screen sizes. Instead, utilize the flexbox or grid layout for centering. Get more insights on centering in CSS here here šŸ“˜.

    I hope you find it useful! šŸ˜„ Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful

    1
  • Alysson Demariā€¢ 240

    @AlyssonDemari

    Submitted

    Leave your feedback on the code, and if possible, let me know if the semantics are correct, even better

    @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • Use <ul> and <li> for the content under "Why Us": Since the content is a list of items, it's more semantically correct to use an unordered list (<ul>) and list items (<li>) instead of using paragraph (<p>).
    • The link should have the same color and height as your div with the class "button." The entire element should function as the link, not just the central part.

    I hope you find it useful! šŸ˜„

    Happy coding!

    Marked as helpful

    2
  • Karen Wuā€¢ 10

    @SilentOw1

    Submitted

    Hi there! While reviewing the "style-guide.md," I noticed the layout instructions provided are as follows:

    ## Layout
    
    The designs were created to the following widths:
    
    - Mobile: 375px
    - Desktop: 1440px
    

    However, the guide didn't specify the width for the qrcode component. I made a visual guess and set the qrcode component's width to 375px.

    To create a clear separation between mobile and desktop widths, I researched online and implemented the following CSS code, intending to use 600px as the breakpoint:

    @media screen and (max-width: 600px) {
      .qrcode-container {
        min-width: 375px;
      }
    }
    

    I'm not sure if this is what the instruction means. If anyone can tell me about that, I would be really grateful!

    @MelvinAguilar

    Posted

    Hello, the values of 375px and 1440px provided in the style-guide.md are simply the dimensions in which the design screenshots of the solution are presented. All challenges include images named "desktop-design.jpg" and "mobile-design.jpg," and these dimensions represent the size at which these screenshots were taken.

    These values don't correspond to the width of the component or breakpoints; they serve merely as references.

    In this particular challenge, since the mobile and desktop views are the same, you could potentially skip using a media query by directly applying max-width: 300px; to the component. This simplifies your styles when dealing with a consistent design across different screen sizes.

    Marked as helpful

    4
  • @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    Hi, have you tried Render.com? It's free and allows you to deploy Express APIs.

    Also, I've reviewed your GitHub, and NEVER, I repeat, NEVER upload your .env file to a GitHub repository āš ļøāš ļøāš ļø. You should add it to your .gitignore to prevent it from being uploaded. If you do upload it, you expose sensitive information like credentials. Even with just your MONGODB_URL, someone could delete your entire MongoDB database without needing your MongoDB account. Be cautious.

    You need to configure your application in the hosting to add environment variables.

    Happy coding!

    Marked as helpful

    2
  • @a-fox-on-the-moon

    Submitted

    Hi everyone !

    Pretty simple challenge, I still wanted to do it because I want to re-use it for myself in the future.

    I would love some feedback anyway :)

    @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • You should remove the overflow: hidden from the body element. This could prevent scrolling, and you should test your solution on a mobile device in landscape orientation, where you might notice that the content doesn't fit on the screen, and the use of overflow: hidden prevents scrolling.

      The scroll issue in your solution is caused by the default margin of the body tag. You should set its margin to 0 or use a CSS reset to clear default styles imposed by the browser.

    • Define the height of the image using fixed units such as pixels/rem/em. On my laptop, the image stretches too much because of using height: 35%.

    I hope you find it useful! šŸ˜„

    Happy coding!

    Marked as helpful

    1
  • @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    HTML šŸ·ļø:

    • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.
    • Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy. Source šŸ“˜

    CSS šŸŽØ:

    • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource šŸ“˜.

    I hope you find it useful! šŸ˜„

    Happy coding!

    Marked as helpful

    1
  • @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • You should enclose the <nav> tag within a <header> tag.
    • When you use the hover effect or cursor: pointer on an element, it usually implies interactivity. To enhance user experience, consider wrapping all the news in an <a href="#"> tag. This way, users can click on it, expecting some action, like navigating to a page with more information about the news.

    I hope you find it useful! šŸ˜„

    Happy coding!

    1
  • @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • You can use the <picture> tag when you have different versions of the same image šŸ–¼. Using the <picture> tag will help you to load the correct image for the user's device saving bandwidth and improving performance. You can read more about this here šŸ“˜.

      Example:

      <picture>
          <source media="(max-width: 460px)" srcset="./images/image-product-mobile.jpg">
          <img src="./images/image-product-desktop.jpg" alt="{your alt text goes here}">
      </picture>
      
    • You could use the <del> tag to indicate the price that was before the discount.

    I hope you find it useful! šŸ˜„ Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful

    1
  • @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • To make the alt attribute as useful and effective as possible, avoid using words such as "image", "photo", or "picture" as they are redundant because the image tag already conveys that information. Also the alt attribute should not contain underscores or hyphens. Instead, try to make the description as human-readable and understandable as possible.

      • For a photo of a person, use their name as the alt text

      If you want to learn more about the alt attribute, you can read this article. šŸ“˜.

    • You can use the following styles to center the element effectively using either of these two methods: For Grid:

      body {
        min-height: 100vh;
        display: grid;
        place-items: center;
        /* Additional styles if needed */
      }
      

      For Flexbox:

      body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* Additional styles if needed */
      }
      

      Later, you can remove this margin:

       .coursecard__container {
         /*margin: 0 auto;*/
         /*margin-top: var(--mrg-tp);*/
       }
      

    I hope you find it useful! šŸ˜„ Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful

    0
  • @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • The <div> tag can be useful for styling and positioning, but it doesn't convey any semantic meaning. Instead, consider using more semantic elements like <p> to better describe the type of content. e.g.: <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>.
    • Don't use a height in the text; it will cause it to overflow, and that's why there is no space between the two paragraphs of your solution

    I hope you find it useful! šŸ˜„ Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful

    0
  • Adicoder24hrā€¢ 20

    @Adicoder24hr

    Submitted

    hiii this is my first project on frontend mentor i am a beginner to frontend if anyone have any suggestions or improvement about this project i am open to it

    @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.
    • For a photo of a person, use their name as the alt text

      If you want to learn more about the alt attribute, you can read this article. šŸ“˜.

    • Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of 380px to make sure that the component will have a maximum width of 380px on any device, also remove the width property with a percentage value.
    • Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

    I hope you find it useful! šŸ˜„ Above all, the solution you submitted is great!

    Happy coding!

    1
  • Imranā€¢ 150

    @xdevimran

    Submitted

    your valuable feedback is always welcome... review the code and help me to make the code better... Thank you...

    @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • I've noticed that you've used <li>, but at no point do you wrap those list items in a <ul> tag, which is used for an unordered list.
    • I noticed you used arbitrary values for the color. In Tailwind CSS, you can easily define custom colors to ensure consistency throughout your design.

      In your Tailwind CSS configuration file (usually tailwind.config.js), you can define custom colors under the extend section. For example:

      /** @type {import('tailwindcss').Config} */
      module.exports = {
        content: ["./index.html", "./src/**/*.{html,js}"],
        theme: {
          extend: {
            colors: {
              'custom-blue': '#007acc',
              'custom-green': '#00b894',
              // Add more custom colors as needed
            },
          },
       },
        plugins: [],
      }
      

      Once you've defined your custom colors, you can use them in your HTML just like any other Tailwind utility class:

      <p class="bg-custom-blue text-custom-green">Custom Colors</p>
      

      For a more detailed guide and additional options, I recommend checking out this resource on Tailwind's official documentation: Using Custom Colors.

    I hope you find it useful! šŸ˜„ Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful

    3
  • @Samarth-5109

    Submitted

    Hi all, I have completed this challenge. But this is not still responsive as I will learn responsiveness now. Any feedback on HTML and CSS will be appreciated, as I have centered the card component in the view crudely.

    @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • Wrap the page's whole main content in the <main> tag.
    • Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">.
    • The <h1> is the most important heading on the page, In this challenge the perfumer's name can be considered like the title of the page, so it should be the <h1>
    • You could use the <del> tag to indicate the price that was before the discount.
    • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

      If you want to learn more about the alt attribute, you can read this article. šŸ“˜.

    I hope you find it useful! šŸ˜„

    Happy coding!

    1
  • @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    Background šŸŒ†:

    • You should not recreate the background, you used the image desktop-preview.jpg to create your solution, but that image is for decoration and is a nice way to present the challenge, for example, you can use it in your github README.

      You must use the images desktop-design.jpg and mobile-design.jpg to create your solution.

    HTML šŸ·ļø:

    • Wrap the page's whole main content in the <main> tag.
    • Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy. Source šŸ“˜
    • For specificity reasons you should work with classes instead of ids because they are more reusable. You can use ids to work with JavaScript, but you should use classes to style your elements. You can read more about this here šŸ“˜.

    I hope you find it useful! šŸ˜„

    Happy coding!

    Marked as helpful

    1
  • Arisā€¢ 60

    @Aishat02

    Submitted

    Any feedback would be appreciated. I'd appreciate it if you could analyse the code and tell me where to improve.

    @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have other suggestions about your code that might interest you.

    HTML šŸ·ļø:

    • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

    Alt text šŸ“·:

    • To make the alt attribute as useful and effective as possible, avoid using words such as "image", "photo", or "picture" as they are redundant because the image tag already conveys that information. Instead, try to make the description as human-readable and understandable as possible.

      The alt attribute should explain the purpose of the image, for example, in the case of a QR code, a description like "qr code to frontendmentor.io" would be more appropriate.

      If you want to learn more about the alt attribute, you can read this article. šŸ“˜.

    I hope you find it useful! šŸ˜„ Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful

    1
  • good-mistakeā€¢ 180

    @good-mistake

    Submitted

    Hi, this is my solution for this challenge. If you have any ideas on what I can improve , please let me know. Your feedback is welcome. Thank you

    @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • Even though the number '76' is the largest text in the component, it doesn't necessarily mean it should be an <h1>. Headings have a hierarchy and are meant to indicate the structure and importance of content .In your solution, one of the important header elements is a number that does not describe the component itself.
    • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.
    • If the image is purely decorative, meaning it's an icon that doesn't add any essential information to the page, you can leave its alt attribute empty so that screen readers can ignore the image.

    • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here šŸ“˜.

    I hope you find it useful! šŸ˜„ Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful

    1
  • @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • For a responsive and resizable component, consider using max-width for the width of the component with max-w-[320px](max-width: 320px;)
    • Use min-h-screen (min-height: 100vh) instead of h-screen. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.
    • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

    I hope you find it useful! šŸ˜„

    Happy coding!

    Marked as helpful

    2
  • @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • Consider using a button instead of an anchor tag for the "change" element, as buttons are designed for actions like altering the order's plan. Anchors are typically used for linking In this instance, the action involves altering the order's plan, making a button a more fitting choice.
    • Avoid using position: absolute to center an element as it may result in overflow on some screen sizes. Instead, utilize the flexbox or grid layout for centering. Get more insights on centering in CSS here here šŸ“˜.

    • Wrap the page's whole main content in the <main> tag.

    I hope you find it useful! šŸ˜„ Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful

    0
  • @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.
    • For a photo of a person, use their name as the alt text

      if an image is purely decorative and doesn't convey specific information, using an empty alt attribute (alt="") is the recommended practice.

    • You can use the following styles to center the element effectively using either of these two methods: For Grid:

      body {
        min-height: 100vh;
        display: grid;
        place-content: center;
        /* Additional styles if needed */
      }
      

      For Flexbox:

      body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* Additional styles if needed */
      }
      

    I hope you find it useful! šŸ˜„ Above all, the solution you submitted is great!

    Happy coding!

    0
  • @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    • You can use the following styles to center the element effectively using grid layout, also, use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens :

      body {
        min-height: 100vh;
        display: grid;
        place-items: center;
        /* Additional styles if needed */
      }
      
    • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

      CSS resets that are widely used:

    I hope you find it useful! šŸ˜„

    Happy coding!

    Marked as helpful

    0
  • @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • Consider using a button instead of an anchor tag for the "change" element, as buttons are designed for actions like altering the order's plan. Anchors are typically used for linking In this instance, the action involves altering the order's plan, making a button a more fitting choice.
    • For icons, you should still use the alt attribute, but it should be empty (alt=""). This indicates to screen readers and other assistive technologies that the icon is decorative and that they should skip over it
    • While setting height: 100%; is a common practice and even comes by default in some CSS resets, on smaller screens like mobile devices, the content can often exceed 100% of the screen. Consider using min-height: 100vh; or a min-height with dynamic viewport units instead for this type of components.

    I hope you find it useful! šŸ˜„ Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful

    1
  • @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have other suggestions about your code that might interest you.

    • The cursor: pointer property should only be used on interactive elements that perform an action. If you apply it to a <main> tag, you might confuse the user, making them think that clicking will trigger something.
    • To make the alt attribute as useful and effective as possible, avoid using words such as "image", "photo", or "picture" as they are redundant because the image tag already conveys that information.
    • For a photo of a person, use their name as the alt text
    • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource šŸ“˜.

    I hope you find it useful! šŸ˜„

    Happy coding!

    Marked as helpful

    1
  • @MelvinAguilar

    Posted

    Hello there šŸ‘‹. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • The result is identical to the design, there are many hours behind achieving this impeccable result.
    • When you use the hover effect and cursor: pointer on an element, it usually implies interactivity. To enhance user experience, consider wrapping the name of the "Equilibrium #3429" text in an <a href="#"> tag. This way, users can click on it, expecting some action, like navigating to a page with more information about the collection.
    • To make the alt attribute as useful and effective as possible, avoid using words such as "image", "photo", or "picture" as they are redundant because the image tag already conveys that information.
    • For a photo of a person, use their name as the alt text and remove thearia-hidden="true" of this image

    I hope you find it useful! šŸ˜„ Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful

    0