Skip to content
OverviewSolutions
7
Comments
7

Gabriel Rodriguez Perez

@glrodriperez98Edinburgh, Scotland160 points

IBM DevOps & Software Engineering Professional Specialization | Heriot Watt Msc Computer Science Student | Entrepreneur to Software Engineer

Latest solutions

  • Responsive Testimonials using Grid and media queries

    Gabriel Rodriguez Perez•160
    Submitted 2 months ago

    I'd appreciate feedback on:

    My use of em units for media queries...are there best practices for choosing the base value?

    Whether my grid positioning using nth-child is maintainable or if there’s a cleaner way to handle this for large-scale layouts.

    How I could improve my utility class naming or structure for scalability and clarity.

    2 comments

  • Four card feature section using CSS Grid

    Gabriel Rodriguez Perez•160
    Submitted 2 months ago

    I’d love feedback on how to structure responsive layouts more efficiently, especially when combining Flexbox and Grid. I’d also like to get better at translating designs more precisely without relying too much on trial-and-error, and would appreciate tips on how to choose breakpoints based on the design rather than using arbitrary widths.

    1 comment

  • Product Review Component using Flexbox and Media Query

    Gabriel Rodriguez Perez•160
    Submitted 2 months ago

    I’d love to get feedback on how to make the layout even more scalable and maintainable, especially when dealing with more complex designs or components. Specifically:

    • Are there any best practices for structuring the layout that I could use to make future projects easier to scale?

    • What’s the best way to approach fluid typography and spacing that adjusts more elegantly across breakpoints?

    • Are there accessible or semantic HTML improvements I can make to strengthen the structure further?

    1 comment

  • Recipe Page using Flexbox and Media Query for mobile responsiveness

    Gabriel Rodriguez Perez•160
    Submitted 3 months ago

    I’d love feedback on how to better manage spacing and border styles more efficiently, particularly in sections like the nutrition facts where a cleaner CSS solution might exist. Also, suggestions on how to simplify or refactor my responsive styles would be appreciated, especially now that I'm starting to explore media queries.

    I'd also be open to tips on improving overall CSS organization and best practices, like when to use utility classes vs. semantic ones, and how to better structure styles as projects grow more complex.

    1 comment

  • Social Links Preview card using CSS Flexbox

    Gabriel Rodriguez Perez•160
    Submitted 3 months ago

    An element where I struggled in this project, along with my other projects in matching the size of my solution to the solution provided by the design. When time to review my screenshot in comparison my solution is either too big or too small. If there are any tips or feedback that would help me gauge getting the initial size right at the beginning of the project that would be much appreciate.

    Also any additional feedback around the lines of:

    • Are there any accessibility improvements I could make to improve screen reader support or keyboard navigation
    • Are there any tips or tricks with my solution to improve the experience without overwhelming the simplicity, along with making it more readable and scalable

    Thanks!

    1 comment

  • Blog Preview Card Challenge

    Gabriel Rodriguez Perez•160
    Submitted 3 months ago

    I’d love some feedback on how to make the layout more responsive, particularly for smaller mobile devices and large desktop screens. Additionally, I’m curious about best practices for accessibility in a design like this. For example, are there ARIA attributes or semantic improvements I should be including to make the preview card more screen-reader friendly?

    1 comment
View more solutions

Latest comments

  • Gabriel Rodriguez Perez•160
    @glrodriperez98

    @MgMyatHtayKhant,

    Great job! Great use of CSS custom properties and semantic HTML This makes your code clean, easy to update and accessible. I also thought your media queries and grid-template-areas approach were effective. The layout scales nicely across breakpoints and mirrors the original design closely.

    Here's some feedback:

    • Your box-shadow is a little heavy. Try box-shadow: 0 1.5rem 2rem rgba(0, 0, 0, 0.1) or using a lighter customer property.
    • You’re repeating a lot of border-radius and flex styles like .image-wrapper and .author. Consider grouping these into utility classes or using BEM-style naming for better reuse and scalability.
    • The quotation background image in .testimonial-1::after looks great! But make sure it doesn’t overlap too much with text at smaller screen sizes. Maybe reduce its opacity or move it further to the right on medium screens

    All in all amazing job! Good luck on your journey.

    Kind regards, G

    Marked as helpful
  • Gabriel Rodriguez Perez•160
    @glrodriperez98

    @Cipher126,

    I checked out your Four Card Feature project and just wanted to say...great job overall! Your layout is super clean, your use of :root variables makes the CSS really organized, and everything feels polished and accurate to the design.

    Here are a few things I really liked:

    Grid Layout: Your use of CSS Grid to position the cards was awesome. I liked how you used specific grid-column and grid-row placements to arrange them uniquely — it mirrors the original design well!

    Card Styling: Each card looks visually distinct with the top colored border using the ::before pseudo-element - something I have yet to dive into so nice job!

    Responsiveness: I appreciated that you included media queries to make it mobile-friendly by switching to a column layout using Flexbox. That really helps the user experience on smaller screens.

    A few small suggestions:

    On mobile, the .card styles inside the media query have a grid-template-columns line that doesn’t apply to Flexbox — you might be able to clean that up.

    You could consider using grid-template-areas to make your layout even more readable and maintainable, especially if you plan to iterate on the design more later.

    But honestly, you're super close to pixel-perfect! You clearly put in a lot of effort...well done!

    Kind regards, G

    Marked as helpful
  • Gabriel Rodriguez Perez•160
    @glrodriperez98

    First off, awesome job on this Product Preview Card! Your layout is clean, your structure is thoughtful, and the styling matches the design spec well. You’ve used semantic HTML elements appropriately and wrote clean CSS using custom properties and a mobile-first approach...solid work!

    Heres some feedback I have for you:

    HTML:

    1. Nice usage of the picture element! I didn't think of doing that
    2. You forgot a closed > tag for your google font link tag
    3. You have some inconsistencies in your class names - eg. card__cattegory ---> should be card__category and card__tittle ---> should be card__title

    Just to keep your code consistent and readable and prevent styling issues in the future

    CSS: You're using 76.8rem which equals 768px, but it’s a little unconventional to include the decimal. Usually, devs write: @media (min-width: 768px)

    This is not a functionality issue but a readability one - the footer is currently set to position: absolute, which could cause it to overlap or misplace itself on certain screen sizes. Consider using margin or flexbox to push it to the bottom after the card content, rather than using absolute positioning.

    body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

footer {
  margin-top: 2rem;
  text-align: center;
}

    All in all you did a great job and are well on your way to mastering HTML and CSS! Good luck on your journey!

    Kind regards, G

  • Gabriel Rodriguez Perez•160
    @glrodriperez98

    Hey Cristian! First off, awesome job completing the challenge! Your layout is super clean and well-structured and I've taken a note of how you used your media query to make the page more responsive for smaller screens so thank you! A few suggestions for polishing things up even more.

    • Consider using <header>, <main>, and <footer> for improved screen reader navigation and accessibility (a big focus on this platform)

    • Your list items have both ul and li padding set, which could be simplified by only using padding-left on the <ul>

    • object-fit doesn't apply to divs for what I've learned...you can remove it from the .hero-img class

    All in all this was a great project! I've taken some notes that will help me out moving forward so I appreciate it. Good luck on your journey!

    Kind regards, G

    Marked as helpful
  • P
    Alexander3717•280
    @Alexander3717
    What challenges did you encounter, and how did you overcome them?

    I've noticed that the padding of the card is larger on desktop than on mobile and was wondering how can I achieve responsive padding without using media queries.

    Finally I managed this by deciding that the minimum padding value will be 24px based on how the mobile design looked and maximum will be 40px when the card reaches its max width, which I set to 400px looking at the desktop design (I guessed these values by eye because I didn't use the figma file for this project).

    I then calculated when does the card reach its maximum width provided I set its width to 87% (based on how wide it looked in the mobile design) and plugged the value (400px/0.87 = ~ 460px) into https://utopia.fyi/clamp/calculator/ as the max viewport width because that's when I want the padding to reach its max value.

    For the min viewport width, I set it to 375px which is the size of the mobile design and I want the padding to reach its min value (24px) at that point.

    And then of course I set the min and max length unit in the calculator to 24px and 40px. And this is the result I got: clamp(24px, -46.5882px + 18.8235vw, 40px);

    I pasted it into my code

    .linkcard {
    width: 87%;
    max-width: 400px;
    padding: clamp(24px, -46.5882px + 18.8235vw, 40px);
  ...
}

    and it worked exactly like I wanted :)

    Responsive social links profile using flexbox and clamp()

    2
    Gabriel Rodriguez Perez•160
    @glrodriperez98

    Alexander3717.....amazing job! Your solution is practically identical to the design. While I'm suppose to offer you feedback I've got to say that you inadvertently answered my feedback question regarding sizing and padding. I will have to take your formula with the site and try it out myself.

    My one big piece of feedback would be to try using more semantic HTML. You used a <main>, headings and <nav> very well, but maybe try incorporating a <header> <section> and <footer> for accessibility purposes.

    Amazing job!

    Kind regards, G

  • Sreejith c s•20
    @sreejithcs007
    What are you most proud of, and what would you do differently next time?

    I'm proud of how far I’ve come from my previous project. In this blog card design, I was able to implement a clean layout using flexbox, apply good use of typography with Google Fonts, and create a component that actually looks like something you'd find on a real website. Compared to my earlier QR code project, this one feels more polished, detailed, and functional. I’m also proud that I managed to keep the styling clean and consistent — it’s visually appealing without being overcomplicated.

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

    One of the main challenges I faced was balancing spacing and typography. It was tricky to make sure everything had enough breathing room without making the card feel too stretched or empty.

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

    I'd love help making the blog card more responsive — especially tips on using media queries or CSS Grid to adapt the layout for smaller devices without breaking the design.

    Responsive Blog Card with HTML & CSS

    2
    Gabriel Rodriguez Perez•160
    @glrodriperez98

    Hey! Great job on this project, your progress is really clear, and it's awesome to hear how you're building on your previous work like all of us. The way you described your improvement from the QR code project to this one shows solid growth in both layout and design thinking.

    Your use of flexbox and Google Fonts gives the card a clean, modern feel.

    The attention to typography and visual balance stands out, it's not easy to keep things looking polished and functional, and you pulled that off nicely.

    A couple of suggestions:

    • Since you're thinking about responsiveness, you're on the right track! Starting small with media queries to adjust padding, font sizes, or even switch to a CSS Grid layout at certain breakpoints could really level up the flexibility of your design.

    • You might also want to explore using relative units like em, rem, or % instead of fixed px values in some places, this helps layouts scale more naturally across screen sizes. You used % once or twice but could be worth exploring more!

    The one other thing I noticed is that your border shadow is a little bit thicker around the top and left than it is in the design. This is something I struggled with as well! If you get any additional feedback regarding that part I'd love to hear it.

    All in all it was a great solution and you're definitely on your way to becoming a developer!

    Kind regards, G

View more comments