Skip to content
OverviewSolutions
7
Comments
6

Harsh

@HarshPrateek559Lucknow, India210 points

I am Harsh and I am learning FullStack web dev in MERN stack. I am also a technical writer and have a blog where I write articles about coding and web development. This is the link to my blog> https://blogharsh.medium.com

Latest solutions

View more solutions

Latest comments

  • Harsh•210
    @HarshPrateek559

    I think the design is great. You have put in the effort and must have learned a lot from this project

    Although, there are a few things that can still be fixed.

    1:) You should make your card at the absolute center of the screen. To achieve that, you can do to achieve that is to make the body have 0 paddings and 0 margins while making it have 100vh of height and 100vw of width. As you already made the body a flex container so this move would automatically center the div for you.

    2:) Make the image absolute positioned and then give it a z-index of 1. Make another element in your HTML with the required color and place it on top of the image with the visibility hidden property. When hovered over, make this element visible. This would give you the same effect as you want.

    I think that if you implement these solutions then the project would become perfect.

    Let me know what happened😊

    Marked as helpful
  • Harsh•210
    @HarshPrateek559

    You are not alone with that white flash problem. Everyone who attempted this project experienced this problem. I also could not find how to fix it, although I do know why it happens.

    It happens because when your website is loaded for the first time, it has to load all the images and other assets. When this happens for the first time, the assets are loaded a little later than the body of the web page, thus what appears as a white flash is just the white body of the webpage which is covered by the background image as soon as it gets loaded.

    I would advise you to not get into that stuff. Your website is already looking pretty neat, what you can do instead is make the website with React so that it does not reload every time a link is clicked. It would be a great upgrade and could very well become your first step in Javascript Frameworks.

    You can also make the buttons round in CSS if you like with the border-radius of 50%, and make the height and width of the buttons equal. I would look much better that way and would be way closer to the original design.

    Hope these suggestions would help😊.

  • Harsh•210
    @HarshPrateek559

    You could have just made your collapsable navbar. That way, you would have got full control of how it should look and it would have been a better learning opportunity. I too used the bootstrap navbar at first but it was so ugly that I removed it and for the first time made my own collapsable navbar. It is just a personal preference but it helped me with the later project in which I had to make a custom navbar.

    Marked as helpful
  • Harsh•210
    @HarshPrateek559

    Amazing design!!! I was just blown away by all the animations which you have used on your website. I am also trying to do the same, but till now I am no way near as good in terms of animations as you are. Can you tell me how can I improve upon that? It looks so good in the design.

    Also, I saw that your explore button is not redirecting to the destination page. According to the design, you should make use of the button to redirect to the destination page.

  • Harsh•210
    @HarshPrateek559

    Your solution lacks the dropdown menu which was required to make and also you used the wrong bootstrap navbar, you should have used the off-canvas navbar from bootstrap. It would have fitted perfectly with the demands of this project.

  • Harsh•210
    @HarshPrateek559

    Actually, async is used when a function is fetching data from a database or API. Also, you have to wait for the fetch API to get data from the API. For this, you are supposed to use await keyword in front of the response which is coming from the API.

    Marked as helpful