Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
4
Comments
5

Victor Lantigua

@lantiguav50 points

Web developer

Latest solutions

  • Responsive bento grid using CSS layers


    Victor Lantigua•50
    Submitted 6 months ago

    0 comments
  • Responsive layout with CSS Grid and Flexbox

    #accessibility

    Victor Lantigua•50
    Submitted about 1 year ago

    0 comments
  • Profile card with named grid lines

    #accessibility

    Victor Lantigua•50
    Submitted about 1 year ago

    0 comments
  • QR card with CSS variables and flexbox


    Victor Lantigua•50
    Submitted over 1 year ago

    1 comment

Latest comments

  • Chukstev•80
    @Chukstev
    Submitted 6 months 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
    @lantiguav
    Posted 6 months ago

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

  • Sirajul Islam•260
    @sirajshaon
    Submitted 6 months ago

    Four card feature section challenge on Frontend Mentor

    1
    Victor Lantigua•50
    @lantiguav
    Posted 6 months ago

    Looks good. Great use of CSS grid

  • Code-x-goal•120
    @Code-x-goal
    Submitted 6 months ago

    Responsive four card section using grid

    1
    Victor Lantigua•50
    @lantiguav
    Posted 6 months 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.

  • Arash Asghari•270
    @AriArash44
    Submitted 6 months 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
    @lantiguav
    Posted 6 months ago

    Works great. Good job.

  • Iván Zapata•20
    @Ivanzapata2126
    Submitted over 1 year ago

    Página 100% responsiva usando flexbox

    1
    Victor Lantigua•50
    @lantiguav
    Posted over 1 year 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;
    }
    

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub