@iNavac03
Melvin Aguilar ๐ง๐ปโ๐ป
@MelvinAguilarAll comments
- @MelvinAguilar
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.
- For instance, you've placed your
-
The media query is fine, but you can enhance the width by directly using
max-widthwith a fixed value instead of usingwidth: 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!
- 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.
- @cipdanilaWhat 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...
@MelvinAguilarHello 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
altattribute 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
altattribute, 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: absoluteto 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 -
- @AlyssonDemari@MelvinAguilar
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 - Use
- @SilentOw1@MelvinAguilar
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 - @drefle@MelvinAguilar
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
.envfile to a GitHub repository โ ๏ธโ ๏ธโ ๏ธ. You should add it to your.gitignoreto 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 - @a-fox-on-the-moon@MelvinAguilar
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
-
You should remove the
overflow: hiddenfrom 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 ofoverflow: hiddenprevents 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 -
- @Enthroned07@MelvinAguilar
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
emorrem. 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 - Use semantic elements such as
- @shaihumohammed@MelvinAguilar
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: pointeron 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!
- You should enclose the
- @m07mmad-nasr@MelvinAguilar
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 -
- @hashiharis@MelvinAguilar
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
altattribute, 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 -
- @DevK-Eire@MelvinAguilar
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 - 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.:
- @Adicoder24hr@MelvinAguilar
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- The
altattribute 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
altattribute, 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
380pxto make sure that the component will have a maximum width of380pxon any device, also remove thewidthproperty with a percentage value.
- Use
min-height: 100vhinstead ofheight. 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!
- The
- @xdevimran@MelvinAguilar
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 - I've noticed that you've used
- @Samarth-5109@MelvinAguilar
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
altattribute 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
altattribute, you can read this article. ๐.
I hope you find it useful! ๐
Happy coding!
- Wrap the page's whole main content in the
- @karldreta@MelvinAguilar
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.jpgto 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.jpgandmobile-design.jpgto 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 -
- @Aishat02@MelvinAguilar
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
altattribute, you can read this article. ๐.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful - Use semantic elements such as
- P@good-mistake@MelvinAguilar
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 - @beyzarslann@MelvinAguilar
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-widthfor the width of the component withmax-w-[320px](max-width: 320px;)
- Use
min-h-screen(min-height: 100vh) instead ofh-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 - For a responsive and resizable component, consider using
