Skip to content
OverviewSolutions
7
Comments
13
Hugo Padilla
@HugoPadilla

All comments

  • Hugo Padilla•210
    @HugoPadillaPosted almost 3 years ago

    Hi @bladupsy!

    Congratulations on completing this challenge. You really did a great job!

    I'll share some advice for you:

    1. I hope you to add transition effect on heading and creator name part. That will make your work more beautiful. This also seems to me to be an interesting part of the challenge.

    Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me. Ver solución

    Marked as helpful
    0
  • Brice GOUDALO•10
    @Harley755Submitted almost 3 years ago

    Good evening sir/madam, is there a shorter solution on the CSS side to properly meet the challenge? How can I correctly write the lines of code on the responsive side?

    flexbox

    1
    Hugo Padilla•210
    @HugoPadillaPosted almost 3 years ago

    Hi @Hatley755, you are doing a great job!

    Here are some resources for writing better CSS.

    • The BEN methodology has helped me a lot to write more organized CSS. Learn more here

    • I also like to use SASS to write CSS. I like the feature of being able to create variables (although this is a feature that CSS also supports) and the way of nesting selectors among other things. Learn more here

    I hope this is helpful. See my solution here for a reference! See solution

    Marked as helpful
    0
  • Hugo Padilla•210
    @HugoPadillaPosted almost 3 years ago

    Hi @dev-k1, you are doing a great job!

    I quite like the result. The css code looks pretty clean to me.

    I share with you some suggestions:

    • Try as much as possible to structure your HTML with semantic tags and try to use div when you don't have an HTML tag that represents what you want to layout.

    Here is an article to learn more about the importance of semantic structuring. Read the article here

    Marked as helpful
    1
  • Hugo Padilla•210
    @HugoPadillaPosted almost 3 years ago

    Hello! Your live preview is not available. Try to check that section.

    Some suggestions for you:

    Maybe the problem is because in your repository you uploaded all the files inside a folder. It may be more appropriate to upload everything inside your repository.

    0
  • Nico Radin•40
    @niicodeerSubmitted almost 3 years ago

    [English] Hi everybody! This is my solution for the QR code component challenge. I built it by my own and i feel it is a little progress for me. If there is any tip about how to no breake the desing when it is on very small resolutions, please let me know.

    [Español] Hola! Esta es mi solución para el desafío de la tarjeta de código QR. Lo pude construir por mi cuenta sin fijarme en soluciones como referencias y para mi es un pequeño avance, aún falta mucho, lo sé. Si hay algún consejo sobre cómo no romper el diseño cuando se visualiza en resoluciones muy pequeñas ( o tal vez no lo hay), díganmelo!

    Saludos!

    QR code component challenge #html #css #flexbox

    1
    Hugo Padilla•210
    @HugoPadillaPosted almost 3 years ago

    [English]Hi @niicodeer!

    Nice work! I really like the result!

    Personally, the smallest screen size I try to work with is width: 375px; so I try to make the design look good from here on.

    Responsive design concepts is an approach to make the page look good on any size device. You can do some more research on this topic and start practicing.

    I leave you an article here: See article

    [Español] Hola @niicodeer!

    Buen trabajo! me gusta mucho el resultado!

    En lo personal, el tamaño mas pequeño de pantalla con que intento trabajar es width: 375px; así que trato que el diseño se vea bien de aquí en adelante.

    Los conceptos de diseño responsivo es un enfoque para que la pagina se vea bien en cualquier tamaño de dispositivo. Puede investigar un poco mas sobre este tema y comenzar a practicar.

    Te dejo un articulo por aquí: Ver articulo

    0
  • AYUSH RANJAN•170
    @aayusranjanSubmitted almost 3 years ago

    Hey there! Hope everyone doin well.

    is there anything to do span text in same line?

    Order summary card

    2
    Hugo Padilla•210
    @HugoPadillaPosted almost 3 years ago

    You are doing a good job!

    To solve the problem with your text you could do the following:

    1. Wrap your stats__heading and stats__rate element in a div tag and remove their position: relative property.
    2. To the new div element you could use flexbox to create a column and your text that one below the other with the properties:
      • display: flex;
      • flex-direction: column;
      • width:100%
    3. To your card__stats you can add the justify-content: space-between; property.

    he above can be a more organized solution.

    The reason why the text does not expand completely is because it is using the position: relative property that allows you to position it in the place that you want, but this property does not eliminate the element of the flow of the document. That is to say, in the background all the elements are one next to the other occupying a part of the available space in your card__stats.

    The property position: Absolute; if you remove the element from the normal document flow but this is positioned in references to its parent but it is close that has the property position: relative, that is, if in your card__stats you add the property position: relative and change in your stats__heading and stats__rate the property position: relative by position:absolute you solve the inconvenience and only remains to position them properly. But it is a not very elegant and simple solution.

    You can see my solution here:

    and get some management on how I have done it.
    Leave me your comment or feedback if I have helped.

    Marked as helpful
    1
  • Hugo Padilla•210
    @HugoPadillaPosted almost 3 years ago

    Good job.

    0
  • Hugo Padilla•210
    @HugoPadillaPosted almost 3 years ago

    Hi, that's great work!

    I like what I see.

    I share with you some recommendations:

    • You can wax all your content in a <main> tag and put <body> styles on it, this helps you with accessibility issues and improve your html structure.
    • You can research about Flexbox and try to implement it, it will help you to organize better the elements without using position: absolute; all the time.

    You can check my solution and have a guide. I want to see

    Happy coding :)

    Marked as helpful
    0
  • Hugo Padilla•210
    @HugoPadillaPosted almost 3 years ago

    Hola, ¡has hecho un gran trabajo!

    Happy coding 🤗

    0
  • Anna•130
    @Anq92Submitted almost 3 years ago

    What is your way to organise CSS code and what would you recommend me to change in my style.css file? Do you think the way I used div tags and flexbox properties is optimal for this challenge or is there a better way to do it?

    QRCode using CSS Flexbox

    3
    Hugo Padilla•210
    @HugoPadillaPosted almost 3 years ago

    Saludos! buen trabajo.

    0
  • Hugo Padilla•210
    @HugoPadillaPosted almost 3 years ago

    good job, keep up the good work!

    Marked as helpful
    0
  • karlkodes•20
    @karlkodesSubmitted almost 3 years ago

    Any feedback please. Not sure if I did it properly? I did a lot of trial and error to get it as close as possible

    QR Code Component Challenge

    1
    Hugo Padilla•210
    @HugoPadillaPosted almost 3 years ago

    Great job!

    If you need a reference you can see my solution here : https://www.frontendmentor.io/solutions/qr-code-component-using-html-and-csssass-GtiN3jg4T

    Marked as helpful
    1