Skip to content
OverviewSolutions
15
Comments
8
FrontendBy-GJ
@FrontendBy-GJ

All comments

  • FrontendBy-GJ•430
    @FrontendBy-GJPosted over 1 year ago

    Looks great, well done! 👍

    1
  • Kenny Ng•400
    @kennylun123Submitted over 1 year ago

    This is my first exercise using React. I tried to keep elements tidy and separated into tiny components. I would love to hear any comment on my page or coding. Thanks for your help.

    What I learned:

    • CSS Grid and Flexbox. Use grid-template-column: 1fr 1fr 1fr to keep columns or rows in same ratio.
    • Responsive image using <picture> to switch imgage source.
    • Use the silbling selector (~) to link up the active state of navigation button and the following classes. (When a nav button is activated, the related CSS should be followed)
    .nav-menu.active {
transform: translateX(0);
transition: all 200ms ease-in-out;
}

.nav-menu.active ~ .background {
width: 100%;
opacity: 0.5;
}

    🔥🔥🔥 Responsive news homepage using React

    1
    FrontendBy-GJ•430
    @FrontendBy-GJPosted over 1 year ago

    Well done! Did you enjoy using React?

    1
  • FrontendBy-GJ•430
    @FrontendBy-GJPosted over 1 year ago

    Looks awesome!

    Not sure if you're aware, but your site doesn't function on Safari browser. I tried others browsers and they work fine.

    0
  • Engineer Providence•310
    @EngProvidenceSubmitted over 1 year ago

    hello there! the little problem I faced on this challenge was to reverse the grid items on small screen and this caused me to learn a new bootstrap property called ( flex-row-reverse) and I it's great power.

    please I any contributions to improve this code will be appreciated.

    stats-preview-card-component with html and css

    1
    FrontendBy-GJ•430
    @FrontendBy-GJPosted over 1 year ago

    Your footer is not centered, do...

    .attribution {
  text-align: center;
}

    If you want to center the card, you can do...

    body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

    also change your div with attribution class to footer.

    0
  • FrontendBy-GJ•430
    @FrontendBy-GJPosted over 1 year ago

    Looks good!

    1
  • Manish Patel•730
    @savvystriderSubmitted over 1 year ago

    I had a lot of fun with this challenge, despite it being, well, challenging...

    I am having a bit of a problem with the image overlay leaving behind an outline after being clicked. I tried setting its background color to transparent and that doesn't seem to help.

    I would appreciate any feedback whatsoever on this project. I'm still fairly new to coding and have a lot to learn.

    Planets Fact Site

    1
    FrontendBy-GJ•430
    @FrontendBy-GJPosted over 1 year ago

    Hey Manish, the outline you speak of only appears in safari browser. No other browser leaves an outline. Don't know if this will fix the problem, but try giving the image container border-style: none or outline-style: none. If that doesn't work, apply the border/outline styles and set them to none to the images.

    Marked as helpful
    1
  • FrontendBy-GJ•430
    @FrontendBy-GJPosted almost 2 years ago

    Great work on the layout! You seem to have forgotten to add alternate text for some of your images. You shouldn't leave them empty, if the image doesn't load properly, the alternate text would then be used telling the user what the image is, like a description almost. Also, your index.html file has some commented code you aren't using like the attributions and the style for that piece of code. If I were you, I would uncomment that code and use it, place it at the bottom (footer). I should be doing the same :)

    0
  • FrontendBy-GJ•430
    @FrontendBy-GJPosted almost 2 years ago

    I think it looks pretty good! Some things you can do to improve is change the font, it looks like you didn't use the same font the project has. I would also move the "Challenge by... Coded by..." towards the bottom. Other than that, well done!

    0