Skip to content
OverviewSolutions
7
Comments
3
Isaac Saettel
@INS140

All comments

  • Isaac Saettel•100
    @INS140Submitted almost 2 years ago

    This is the first project I have completed on this site using React. I started the project using create-react-app. I have finished all of the development aspects, however I have not posted an actual live version of the app because I am unsure of how the production build works. I tried posting from GitHub Pages, however the README file was all that would appear. For now I have posted my solution to get feedback on my use of React.

    Any tips on cleaning up or improving my code are greatly appreciated! I would also be very grateful if you have any recommendations for posting the live version.

    Create-react-app, CSS, Vanilla JS, React.js

    1
    Isaac Saettel•100
    @INS140Posted almost 2 years ago

    I have fixed the issue and my live site is now the actual app. If anyone else sees this and is having trouble deploying their react app to github pages, check out this article on LogRocket.

    0
  • Yushi61•10
    @Yushi5058Submitted about 2 years ago
    • I found that CSS is quite difficult since I'm learning to upgrade my design skills. Learnt how to use margins, paddings and flexbox.
    • I was unsure about positions, margins, paddings and flexbox in css.
    • How to upgrade my design skills? As it is not mandatory because there is a web designer, but I need to have basic skills in web design.

    Responsive landing page using Flexbox and pure CSS

    1
    Isaac Saettel•100
    @INS140Posted about 2 years ago

    Hey Yushi61, congrats on completing this challenge!

    If you are looking for a good resource to learn CSS, I highly recommend W3schools website. They have a very comprehensive tutorial on all the CSS properties.

    Here's a link to their CSS tutorial: https://www.w3schools.com/css/default.asp

    Hope this helps and good luck on future projects!

    Marked as helpful
    0
  • Isaac Saettel•100
    @INS140Posted about 2 years ago

    Hello! Congrats on completing the challenge!

    I had some difficulty with this portion of the challenge as well, but I do believe that my solution is a good fit. How I ended up getting the active state over the image was by adding a <div> element underneath the image that is set to the exact same size as the image. Both the image and the <div> need to have the CSS attribute position: absolute so that they stack. Next, add the opaque background color to the <div> element. I used hsla(178, 100%, 50%, 0.3).

    The view icon will need to be added to the <div> element as well and the <div> should have the attribute display: none until the cursor is hovering over the image container.

    Here are some snippets from my code:

    <div class="image-container"> <img> <div class="hover-cover"> <img> </div> </div>

    .equilibrium-image { position: absolute; }

    .hover-cover { display: none; position: absolute; background-color: hsla(178, 100%, 50%, 0.3); }

    .image-container:hover .hover-cover { display: block; }

    I hope this helps!

    0