Skip to content
OverviewSolutions
6
Comments
7

Isaac-Victor Providence

@Emoji123-s100 points

Software Engineering Student @alx_africa. Frontend Developer. First-Class Graduate (Computer Science)

Latest solutions

Latest comments

  • m-rooeintan•70
    @m-rooeintanSubmitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    That's good practice for flex basics. We can design this project with grid to.

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

    The main challenge was on 3 columns, which I did by grouping cards and flex box.

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

    using flex box and grid.

    Four card feature section

    1
    Isaac-Victor Providence•100
    @Emoji123-sPosted 11 months ago

    Hi m-rooeintan, amazing work with the project. The website is perfectly accessible, and it looks good on a range of screen sizes. Very well done!😉

    0
  • iliasminas•30
    @iliasminasSubmitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    dcedvqe

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

    xc

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

    cadca

    Product preview card component

    2
    Isaac-Victor Providence•100
    @Emoji123-sPosted 12 months ago

    Hi @iliasminas, congratulations on completing the project. Upon reviewing, your solution differs from the preview design, and here are some improvements I think could be made

    1. Optimizing the area holding the text describing the image. Reduce the height each element has to better match the preview.
    2. I noticed there is only one font used. Every style needed for the project is listed in the style-guide.md file in the project directory, so be sure to check it out.
    3. The container itself. Reduce the width property to make the entire container smaller, and try using either absolute positioning or flexbox to position the entire container properly.
    4. Your mobile view actually looks very good! Though you could avoid the scroll property with the overflow: hidden; style, then adjust each element to fit the screen without scrolling.

    Have fun! 😉

    0
  • P
    yoe7501•470
    @yoe7501Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    I like that I got to make use of a grid layout and figured out how to make lines seperating thet content using background color.

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

    I had a hard time making the card a certain size no matter how big the window was but figured it out at the end.

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

    I would like a good amount of styling tips to make this project easier and some css syntax tips to potentially have less lines of code next time.

    Recipe-Page

    2
    Isaac-Victor Providence•100
    @Emoji123-sPosted 12 months ago

    Hi @yoe7501, amazing work with the project. Upon previewing the webpage, it is accessible, but the font-color of the entire page elements is the same. Color references were provided in the style-guide.md in the project folder, so you can check that out to fix the colors to match the design template. The mobile view looks good, and responsive too, but it doesn't match the mobile design template, and the margins for the image seem to be a lot when moved to the mobile. Basically, the container is supposed to span the entire page for the mobile view, and the image should lose its margins and span the top, while responding to changes in screen sizes.

    With these changes, your project will be much more like the design. Have fun! 😉

    Marked as helpful
    0
  • Isaac-Victor Providence•100
    @Emoji123-sPosted about 1 year ago

    Hi @ZakaryaMeddahi, the preview here looks amazing! Well done with the project. It doesn't seem to open on a new page. It says the github pages isn't found

    1
  • Isaac-Victor Providence•100
    @Emoji123-sPosted about 1 year ago

    Hi @l-white, very well done with the project! It looks amazing. I noticed a "P" at the top right corner of your image, so I'm guessing you're a pro member, meaning you have access to figma files and such. Previewing the website, the entire container element spans to the right, and I know we are not dealing with responsiveness at the moment so I wouldn't talk about that. The positioning issue could be fixed with any one of these 3 ways

    1. Absolute Positioning: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

    2. Flexbox: flex-direction: column; align-items: center; justify-content: center;

    3. Margin: margin-left: auto; margin-right: auto;

    With this, your container element should be aligned properly. Amazing work you've done here, and I can't wait to see you try more :)

    0
  • Moniruzzaman Monir•760
    @ad-monir2001Submitted about 1 year ago
    What challenges did you encounter, and how did you overcome them?

    To fix the hover item of eye image. Help of a brother.

    NFT card

    1
    Isaac-Victor Providence•100
    @Emoji123-sPosted about 1 year ago

    Hi @ad-monir2001. Well done with the project! Previewing the website, the container element was positioned to the right. The image width could be reduced to match the preview design, and the border radius of the container and the image could be increased. On a 320px device width, it doesn't respond as it should, alongside its expansion to other device specifications. The author's name and the image could be resized to match the preview design. Simple tweak here and there and this project will be top notch! :)

    1
View more comments