Skip to content
Submitted over 2 years ago

Advice App

#bootstrap#react#webpack
Yuliya•230
@Ambrolla
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

I'm always happy to read feedback. However, the only question so far is how does everyone deploy their React Apps? Lol First one that I've deployed using GitHub Pages.

But this app was very interesting to build, I love quotes and it was interesting to work with images only for mobile version and only for laptops.

Anyway, this was made with React.js.

Community feedback

  • Karishma Garg•1,010
    @karishma-devPosted over 2 years ago

    Hi, your solution looks good. Few suggestions:

    1. Your card is not properly aligned to the center of the page and also the button is not properly aligned. You can center the card by adding display: flex; justify-content: center; align-items: center; min-height: 100vh; to the body. In this, justify-content will align the content to the center of the main axis and align-items will align the content to the center of the cross-axis (perpendicular to the main axis). Also, remove the margin from the card and footer for this to properly work, and for the button alignment you can use position absolute; left: 50%; transform: translate(-50%); and add position-relative to the wrapper class. I think you need to learn more about the position and centering the div. Hope this freecodecamp article will help you: here
    2. Your HTML code also contains more than one meta tag for charset.

    For deploying the react app on Github, I mostly follow this article.

    Marked as helpful
    1
    Yuliya•230
    @AmbrollaPosted over 2 years ago

    @krrish105 Thank you! This helped me! I was a bit stuck on the css/html part.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord