Skip to content
OverviewSolutions
14
Comments
6

Sebastian Rico Vela

@AgilePanda482México190 points

Full-stack developer, sometimes more back, sometimes more frontend. I like Arduino/ESP32 too.

I’m currently learning...

React, Tailwind, CSS, Java, Typescript.

Latest solutions

View more solutions

Latest comments

  • Tiffany•10
    @tiffahahahu7
    What are you most proud of, and what would you do differently next time?

    I'm able to achieve the ideal result with minimal code and ensure the image alt text satisfies accessibility standard by changing it from "QR code image" to "Scan to visit Frontend Mentor website". It's also my first time defining CSS variables with :root selector.

    If I do it differently, I may try to apply other tools and approaches instead of plain HTML and CSS, and use more class selectors to replace HTML element selectors for accuracy.

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

    Noticing that the width of the QR code container is set to Hug Content in Figma, with the image having a fixed width and the text set to Fill Container, I struggled to prevent the container from taking up the full block width. As a workaround, I ended up assigning a fixed width of 320px to the container to ensure a proper layout.

    What specific areas of your project would you like help with?
    • For a simple challenge like QR code component, what possible tools and approaches can I use other than plain HTML and CSS?
    • What are the best practices for writing initial CSS styles for a webpage, particularly for the *, html, and body selectors?
    • Regarding the challenge I mentioned earlier, is there an alternative way to restrict the width of the QR code container while ensuring other width settings applied correctly to all related elements?

    Responsive QR code component

    #accessibility
    2
    Sebastian Rico Vela•190
    @AgilePanda482

    Hello @tiffahahahu7!

    First of all, I'd like to welcome you to Frontend Mentor and congratulate you on starting your Frontend development journey. Here you'll find amazing challenges to practice and a respectful community where you can ask questions.

    Now, answering your questions:

    "For a simple challenge like QR code component, what possible tools and approaches can I use other than plain HTML and CSS?"

    There are countless tools for developing a website. As a personal opinion, I think as developers we've gone overboard with this, but the most common ones are TailwindCSS, React, SASS, among many others that I'm currently unfamiliar with.

    My recommendation is that you learn the basics first. Learn what flexbox is or how to use it, CSS Grid, how to properly structure HTML, among other things that you'll learn with the challenges here on Frontend Mentor. And right there, jump to SASS which, in simple terms, gives CSS a different approach, or Tailwind which provides predefined classes so you can build a webpage faster.

    "Don't try to run before you've walked or crawled"

    "What are the best practices for writing initial CSS styles for a webpage, particularly for the *, html, and body selectors?"

    Looking at your code on GitHub, you're doing well. The following reset:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

    This is very common among programmers and there's not much more I could tell you. Maybe add this property to ::before as well as ::after, but simply having it in * is sufficient.

    The html part is very rare to touch - I'd even risk saying it's bad practice to modify the <html> tag. What we always do with CSS is modify the <body> and its content. Regarding the <body>, everything looks correct. The only advice I could give you is that dvh adjusts even better on screens than vh.

    "Regarding the challenge I mentioned earlier, is there an alternative way to restrict the width of the QR code container while ensuring other width settings applied correctly to all related elements?"

    Unfortunately, I won't be able to answer this last question since, although I've worked with Figma, not enough to see how properties like "Hug" or "Fill" work.

    The most valuable advice I could give you:

    If you're starting out, focus better on achieving functional and understandable layouts rather than making everything millimetrically exact. Extreme visual precision can come later, with experience.

    My second advice is to use flexible measurements. On Google or YouTube you could find more information, but in summary:

    A flexible measurement refers to one that adjusts when rescaling the screen (making the page more responsive). These measurements are usually rem, vh, vw, % and with flexible CSS properties like max-width/max-height or min-width/min-height. These properties will help everything adjust correctly, thus avoiding static measurements like px.

    You're on the right track, just don't stop studying. Remember:

    "Practice makes perfect"

    Best regards,
    Sebastian.

    Marked as helpful
  • Sebastian Rico Vela•190
    @AgilePanda482

    Nice solution! Excellent job.

  • afan_10•20
    @afanrajiwate
    What are you most proud of, and what would you do differently next time?

    I'm proud of completing the Order Summary component as it helped me apply the HTML and CSS skills I've been learning. Next time , I would like to spend more time on responsiveness.

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

    One of the main challenges I faced was getting the layout to match the design exactly, especially with spacing and alignment. I struggled with centering the component both vertically and horizontally on the page. To overcome this, I experimented with different CSS layout techniques and eventually found that using flexbox with justify-content and align-items helped me achieve the correct positioning.

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

    I'd appreciate feedback to improve responsiveness of component ,especially for smaller screen sizes.

    Order Summary component

    1
    Sebastian Rico Vela•190
    @AgilePanda482

    Hi @afan_10!

    I was reviewing your code on GitHub and here are some recommendations:

    🧱 HTML in the HTML and CSS in the CSS:

    I noticed you have a little CSS code in your index.html. Although that is not bad, it's highly recommended to only write HTML code in the index.html.

    🚫 Don't call the label two times:

    I also noticed that in your style.css, you call both the class and the label. This is unnecessary — only call the class and everything will be OK.

    📱 Responsive:

    There are many ways to make a page responsive. I think that if I said there's only one method to do this, I would be very wrong. But I recommend my method, which is the Mobile-First methodology. As the name suggests: design for mobile first, and then for desktop.

    This is achieved with the @media tag in CSS, which I see you used. But instead of using it for mobile, use it to finalize the desktop design.

    Like this:

    @media (min-width: 700px) {
    body {
        background-image: url(./assets/images/pattern-background-desktop.svg);
    }

    /* More boring code */
}

    I hope these recommendations are useful to you, and don't give up! You got off to a great start — practice makes perfect!

    Best regards, Sebastian.

  • P
    Jose•160
    @josenegrete123
    What are you most proud of, and what would you do differently next time?

    Most proud of how I used the @media in CSS. Next time I would figure out which code to include inside of the tag instead of reusing code.

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

    Main challenge was figuring out how to make the `` tag into a Flexbox. I googled and was able to figure out the answer by using details &gt; summary in CSS to create a Flexbox.

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

    I would like to ask for help on the @media area of my CSS and if anyone could explain how to better utilize it and if rewriting the code is good practice or better to exclude already written code.

    FAQ Accordion Solution using HTML and CSS

    1
    Sebastian Rico Vela•190
    @AgilePanda482

    Hi @josenegrete123!

    The best way to use @media is interestingly enough to use it in the least possible way.

    The idea of modern CSS development is to use the “Mobile-First” approach, since a large part of web traffic comes from mobile devices. So, it is better to start designing on small screens and then the big screens, so we use good practices in programming, save code and have more ease in maintaining it.

    So, if it is best to use @media as little as possible, what is the right way?

    To what I have been seeing, is to make the web as smooth as possible, achieving this by using more “flexible” units such as rem, vh or % instead of using px. Also using min-height / max-height or min-width / max-width instead of just width or height since these last values are static values, making our page less responsive. As an observation, you will use the min-width / min-height values more but remember that it all depends on what you want to do.

    Finally, as a tip, I noticed that in your CSS code with the @media you repeat all the code, thing that the @media serve for the opposite, so that you only modify certain values, example:

    main {
    min-height: 95vh;

    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    padding: 1.70rem;
    max-width: 42vh;

    display: flex;
    flex-direction: column;

    border-radius: 1rem;
    background-color: var(--White-color);
}

@media (min-width: 500px) {
    main {
        min-height: 90vh;
        min-width: 270px;
    }
    .container {
        padding: 2rem;
        max-width: 95vh;
    }
}

    I hope all this has helped you!

    Best regards, Sebastian.

    Marked as helpful
  • Sebastian Rico Vela•190
    @AgilePanda482

    Great solution!

    Marked as helpful
  • P
    Jan•290
    @Jan-Dev0
    What are you most proud of, and what would you do differently next time?

    The Figma files wern't 100% accurate so I just fiddeled it out. I am also not sure if using all that flex boxes were really necessary or if there would have been an easier way to do it.

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

    Trying to get the figma desings to code.

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

    I am not sure with the measurements using fixed width and height. Is this how it should be done? Also I am not sure about the use of all thoses flex boxes.

    My solution for the Blog preview card challenge

    3
    Sebastian Rico Vela•190
    @AgilePanda482

    Yep, that's the correct way to use “flexbox”. So, don't worry about it, just a recommendation:

    Don't write all the code in the “body” tag, it's better to use a div with “container” class or also the “main” tag.

    Congratulations!

    Marked as helpful