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?
Hello there š. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
<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!
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...
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.
If you want to learn more about the alt attribute, you can read this article. š.
CSS šØ:
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!
Leave your feedback on the code, and if possible, let me know if the semantics are correct, even better
Hello there š. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
<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>).I hope you find it useful! š
Happy coding!
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!
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.
Is anyone as a solution/tutorial, to run my express server for free for a project host in github ?
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!
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 :)
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.
height: 35%.I hope you find it useful! š
Happy coding!
Feedbacks are welcomed. Thank you.
Hello there š. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML š·ļø:
<main> and <footer> to improve accessibility and organization of your page.CSS šØ:
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!
all feedbacks would be appreciated
Hello there š. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
<nav> tag within a <header> tag.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!
Evaluate my work
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>
<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!
Hi all, Here's my solution for blog preview card. Please feel free to review my code and suggest for any potential improvements that I can do in my code.
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.
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!
Feel free to leave a comment
Hello there š. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>.I hope you find it useful! š Above all, the solution you submitted is great!
Happy coding!
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
Hello there š. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
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. š.
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.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!