Skip to content
OverviewSolutions
4
Comments
5

Victor Lantigua

@lantiguav50 points

Web developer

Latest solutions

Latest comments

  • Chukstev•50
    @ChukstevSubmitted 26 days ago
    What are you most proud of, and what would you do differently next time?

    I am really proud of this solution, because I know what I went through in the process😂😂. I was finally able to learn how to use grid-template-areas(I was clueless of its usage until I started this challenge) and how to use grid to create responsive webpages.

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

    The challenge I encountered while undertaking this challenge was the layout generally. I really found it difficult to set up the layout in the bento style. I eventually decided to do some studies which included watching some youtube videos and as well as some reading.

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

    I believe that there are other ways to use grid layout, and I know that I can do better. I will really make use of a guide on how to use every tool I need to become a self sufficient frontend engineer.

    Frontend Mentor Bento-Grid Challenge

    1
    Victor Lantigua•50
    @lantiguavPosted 24 days ago

    Nice job. Great use of grid-template-areas!

    1
  • Victor Lantigua•50
    @lantiguavPosted 25 days ago

    Looks good. Great use of CSS grid

    0
  • Victor Lantigua•50
    @lantiguavPosted 27 days ago

    Looks good, congrats.

    You could make the spacing between cards more consistent by removing grid-template-rows: repeat(4, 150px); from the gridbox class, and changing column-gap: 20px to gap: 20px.

    By removing the grid-template-rows, you would let the browser figure out how many rows there should be, and the size of them, effectively reducing the space between your "Team building" and "Karma" cards.

    gap is a shorthand for column-gap and row-gap. This will ensure the distance between the cards is consistent, vertically and horizontally.

    1
  • AriArash44•30
    @AriArash44Submitted 27 days ago
    What are you most proud of, and what would you do differently next time?

    Positive aspects of this project:

    • I am glad to have used SCSS and PurgeCSS to generate optimized and reusable stylesheet code.
    • I successfully integrated an API to generate QR codes based on user input.
    • I learned how to deploy my project on Vercel and GitHub Pages.
    • I gained an understanding of how to secure API keys by making server-side requests.

    What I would do differently in my next project:

    • First, I will start with the backend, ensuring that all endpoints are fully developed and tested using Postman.
    • Once the backend is stable and functional, I will proceed with the frontend implementation.
    What challenges did you encounter, and how did you overcome them?

    Challenges:

    • The deployment process was completely new to me.
    • The API provides images directly in SVG format, so rendering them using Base64 encoding techniques and related methods was a new learning experience.
    • At times, I updated the README markdown file directly on GitHub but forgot to pull the latest changes before committing locally. This led to merge conflicts, which were frustrating to resolve.

    How I overcame the challenges:

    • I searched the internet and used AI chatbots (ChatGPT and Copilot) to help me through the process.
    What specific areas of your project would you like help with?

    I appreciate any suggestions regarding project structure and code improvements to enhance readability and ensure adherence to clean code principles.

    QR code generator component for links

    #axios#sass/scss#vite#node
    2
    Victor Lantigua•50
    @lantiguavPosted 27 days ago

    Works great. Good job.

    0
  • Victor Lantigua•50
    @lantiguavPosted 11 months ago

    Nice solution! I would recommend avoiding the use of pixels for font sizes because they override the user's text size settings in the browser. Instead, I suggest using REM.

    On a separate note, it looks like you're missing a box shadow on .card-container:

    .card-container {
    ... your styles
    box-shadow: 0px 25px 25px 0px #0000000C;
}
    0