Skip to content
OverviewSolutions
5
Comments
15
Ukaegbu Gray Nneji
@graynneji

All comments

  • Gwen-lego•230
    @Gwen-legoSubmitted over 1 year ago

    This challenge was similar to the previous one, it is a confirmation of the skills for me. Let me know if you see something that need improvement.

    Thank you

    product preview - responsive grid

    3
    Ukaegbu Gray Nneji•220
    @graynnejiPosted over 1 year ago

    You are almost there... Remove this max-width: 37em; from the wrapper class in your CSS and also remove media="(max-width: 33em) from your source tag in your HTML. Now when you load the page and reduce the size of your browser to like phone size. you will see the responsiveness it will be only one column. I have done it here and it works fine. try it out and let me know the result.

    0
  • Ukaegbu Gray Nneji•220
    @graynnejiPosted over 1 year ago

    Congratulations on completing this challenge When working with images in a web application, there are different ways to load them into your project. One way is to import individual images one by one, which can be time-consuming and cumbersome, especially when dealing with a large number of images. Alternatively, you can import the entire image folder or use the require function, which can simplify the process and make it more efficient.

    Importing the entire image folder involves specifying the path to the folder containing all the images, and then accessing each image as needed. This approach can be useful when you have a large number of images, as it allows you to access them all at once without having to import them individually.

    // Import all images in a folder
const images = require.context('./images', true);

// Access a specific image
const myImage = images('./my-image.jpg');
    Marked as helpful
    1
  • Arthur Roberts•410
    @arfarobsSubmitted over 1 year ago

    I had great fun completing this project. It took me a while due to work and other things. But it gave me a great opportunity to learn and develop my skills.

    If you have any questions as to my methods, or you wish to give me some feedback, please feel free.

    Questions

    • How is the speed of my website? I am currently in China and have to use a VPN to view the website and my database is hosted in Europe, so when I view the website, it is pretty slow.

    • Do you think it would be better to import all of the data from Firebase when the client first accesses the website and then store it in state to improve speed when changing page? Or should I just keep it how it is?

    • Should I store the assets for the home page in Firebase as well?

    • Should I just store the Firestore storage location into a Firestore document and load images like this, or should I use getBlob to get my images? Why? I assume getBlob is just for getting the url after uploading it so that you can add a reference to the Firestore DB, but maybe I am wrong here. This confused me quite a bit.

    • What do you think about the readability of my code?

    • Any feedback on my testing would be greatly appreciated.

    • Any feedback on anything else would also be greatly appreciated.

    Also, if you want my feedback on one of your projects, let me know when you give me feedback. Thanks.

    Audiophile | React | Firebase | Jest | ReactTestingLibrary | ReduxTool

    3
    Ukaegbu Gray Nneji•220
    @graynnejiPosted over 1 year ago

    Alright thanks... its actually this challenge I need help for. here is the link you requested for https://github.com/graynneji/audio-ecommerce-app

    0
  • Caleb•180
    @xdcronSubmitted over 1 year ago

    updated version. would you say its much better and where can i improve on it. also i really need help with the responsive side of this. thanks in advance.

    updated results summary

    3
    Ukaegbu Gray Nneji•220
    @graynnejiPosted over 1 year ago

    Another simple way to make it responsive without using media query.. Lets say you use grid for the main-container

    .category-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
place-items: center
text-align: center;
}

    Grid columns breaks after hitting 20rem of width. I hope this helps you in your future projects.

    Marked as helpful
    1
  • Ukaegbu Gray Nneji•220
    @graynnejiPosted over 1 year ago

    Congratulations Some suggestions. To optimize your code and make it more readable you should use one for loop and you will still get the same result.

    Marked as helpful
    1
  • Arthur Roberts•410
    @arfarobsSubmitted over 1 year ago

    I had great fun completing this project. It took me a while due to work and other things. But it gave me a great opportunity to learn and develop my skills.

    If you have any questions as to my methods, or you wish to give me some feedback, please feel free.

    Questions

    • How is the speed of my website? I am currently in China and have to use a VPN to view the website and my database is hosted in Europe, so when I view the website, it is pretty slow.

    • Do you think it would be better to import all of the data from Firebase when the client first accesses the website and then store it in state to improve speed when changing page? Or should I just keep it how it is?

    • Should I store the assets for the home page in Firebase as well?

    • Should I just store the Firestore storage location into a Firestore document and load images like this, or should I use getBlob to get my images? Why? I assume getBlob is just for getting the url after uploading it so that you can add a reference to the Firestore DB, but maybe I am wrong here. This confused me quite a bit.

    • What do you think about the readability of my code?

    • Any feedback on my testing would be greatly appreciated.

    • Any feedback on anything else would also be greatly appreciated.

    Also, if you want my feedback on one of your projects, let me know when you give me feedback. Thanks.

    Audiophile | React | Firebase | Jest | ReactTestingLibrary | ReduxTool

    3
    Ukaegbu Gray Nneji•220
    @graynnejiPosted over 1 year ago

    I have been trying to display my images in the asset folder but I keep getting Module not found, the only way I was able to load my images in my react app is when I upload those images in a server and I use the URL but when I want to load them locally I get that error except i import the image and I cannot import all images in all my components

    0
  • Gwen-lego•230
    @Gwen-legoSubmitted over 1 year ago

    This challenge was similar to the previous one, it is a confirmation of the skills for me. Let me know if you see something that need improvement.

    Thank you

    product preview - responsive grid

    3
    Ukaegbu Gray Nneji•220
    @graynnejiPosted over 1 year ago

    Very Clean Design but I will give you a solution that will help make your gird responsive without media query

    .wrapper {
background: white;
border-radius: 0.5em;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(37em, 1fr));
}

    Grid columns break after hitting 37em of width

    Marked as helpful
    0
  • Ukaegbu Gray Nneji•220
    @graynnejiPosted over 1 year ago

    Congratulations I think you might want to learn more on typography.

    Typography is an important aspect of web design that involves the selection of fonts, font sizes, line heights, and other stylistic elements to improve the readability and visual appeal of text. Here are some tips for using typography in CSS.

    Line height: Use a line height that is appropriate for the font size and improves the readability of the text. A good rule of thumb is to use a line height of 1.5 to 1.6 times the font size. You can use the line-height property in CSS to specify the line height, like this:

    body {
font-size: 16px;
line-height: 1.5;
}

    For smaller font you bigger line height while for bigger font you use a smaller line Height

    Letter spacing: Use letter spacing to improve the readability of the text. You can use the letter-spacing property in CSS to specify the letter spacing, like this:

    h1 {
letter-spacing: 0.1em;
}

    In this example, a small amount of letter spacing is added to the h1 element to improve the readability of the text.

    By following these guidelines, you can create effective typography in CSS that improves the readability and visual appeal of your text.

    Marked as helpful
    0
  • Mehdi•990
    @siavhnzSubmitted over 1 year ago

    Hello Dear Comunity

    I used React and React Router for creating this project.

    I faced plenty of challenges with React Router Loader and Action features that has added to React Router newly but that was interesting

    Thanks for reviewing my solution :)

    Rest Countries API

    1
    Ukaegbu Gray Nneji•220
    @graynnejiPosted over 1 year ago

    Very nice. But I have a suggestion for you. Your country cards are not aligning with one another I suggest you specify a height in order to make the of the same height.

    1
  • Kamal Osama•420
    @KamalAboridaSubmitted over 1 year ago

    NOTE " The geolocation API provided by frontendmentor.io doesn't return latitude & longitude which is necessary to initialize a map location so I used another API "

    Please feel free to check the website and provide me with some tips (Best practices, Mistakes, etc...)

    Used SCSS, BEM, Ajax, 7-1 Architecture, JSLeaflet

    1
    Ukaegbu Gray Nneji•220
    @graynnejiPosted over 1 year ago

    you can use the browser Geolocation API

    1
  • Ukaegbu Gray Nneji•220
    @graynnejiPosted over 1 year ago

    This is an Excellent Job I think you should work on your typography, use some letter spacing and font-size, font-family to give your text a professional appearance

    0
  • amrajat•170
    @amrajatSubmitted over 1 year ago

    I faced some issues with some unnecessary white space below our image which is wrapped in a picture tag when I resize the screen size [after art direction @ media query ~600px] and when I make the screen size smaller the white space gets more significant. I fixed it by making the picture tag display: flex-inline. Please share your thoughts on this for a better way to approach it. Thank you. Waiting for your feedback.

    Product Preview Card Component Using CSS Grid

    2
    Ukaegbu Gray Nneji•220
    @graynnejiPosted over 1 year ago

    Using display: inline-flex on the picture tag to remove unnecessary white space is a valid solution. However, there might be a better way to approach it depending on the specific use case and design requirements.

    One possible alternative solution is to set the height of the picture tag to 100%, and then use object-fit: cover on the img element inside the picture tag. This will ensure that the image fills the available height of the picture tag without distorting its aspect ratio. Here's an example:

    <picture style={{ height: "100%" }}> <img srcSet="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1200w" sizes="(max-width: 600px) 480px, (max-width: 768px) 768px, 1200px" src="image-large.jpg" alt="Alt Text" style={{ objectFit: "cover", width: "100%", height: "100%" }} /> </picture>

    With this approach, you can avoid using display: inline-flex and rely on CSS properties specifically designed for handling images, such as object-fit. This can make your code more readable and maintainable, and also help ensure that your images display correctly across different devices and screen sizes.

    I hope this helps!

    Marked as helpful
    0