Skip to content
OverviewSolutions
15
Comments
28
Candela Bramucci
@bramuccci

All comments

  • Candela Bramucci•680
    @bramuccciPosted almost 3 years ago

    Hi Morgan! It's easy, just remove the margin-bottom from the buttons and add margin-top: auto. Also, I think you should make a div that represent the card. Inside, have three divs for the sections. Something like div.card>div.card__division*3. Then, you could put border-radius to the parent div and overflow: hidden to make the child follow it. To finish with, increase the line-height on the paragraphs. Wish this help you!

    Marked as helpful
    0
  • Candela Bramucci•680
    @bramuccciPosted almost 3 years ago

    Hi Naveen! Awesome solution, I love it. I just had a question, why do you choose using ::after instead of brackground-image? Is it more easy that way or have something to do with accessibility?

    1
  • Santiago Carranza•20
    @santiagocarranz-aSubmitted almost 3 years ago

    ¿Algún error, mala práctica u otra manera en que se pueda hacer de manera más práctica y eficiente este mismo trabajo? un saludo ,y estaré agradecido de todo aporte!

    En un desafío anterior ( https://www.frontendmentor.io/solutions/using-flexbox-and-media-queries-nft-preview-card-component-8I0ZcW0Dc ) Me aparece el siguiente problema en la secciones de Reports > Accesibility

    Page should contain a level-one heading Context:

    <html lang="en"> # Para corregirlo he agregado una etiqueta h1, la cual he ocultado con display:none. Pero aún sigue reportándolo.

    Using Mobile first, Flexbox and Media Queries - 3-Column Card Componen

    2
    Candela Bramucci•680
    @bramuccciPosted almost 3 years ago

    Hola Santiago! Ese error en tu desafío anterior de debe a que no usaste ningún h1 en tu html. Como es una tarjeta aislada creo que la decisión de un h2 es correcta. Solo recuerda que cuando hagas una página web entera tenés que incluir un y solo un h1. Sobre este desafío, tengo varias sugerencias:

    • Tu breakpoint es de 1100 px. Es innecesariamente grande y deja a las pantallas de 1024px y 768px (laptop y tablet) de lado. Te recomiendo usar 600px y leer este artículo
    • En el body pusiste font-weight: 400px;
    • Tu card está envuelta solamente por el body. Una tarjeta es un único elemento. Deberías usar un elemento (article, por ejemplo) para toda la tarjeta y usar divs para dividirla. Mi estructura sería article>div*3>h3+p+button
    • Usar flexbox en el body te va a dar problemas en cuanto quieras agregar otros elementos

    Espero que estos tips te ayuden :) Keep coding!

    1
  • Amila•150
    @milla1909Submitted almost 3 years ago

    I didn't know how to fetch a local json file so I just created an array with data from json file. I tried running http server and then fetching the file, but it kept lagging and it didn't update the code when refreshed, so I just gave up and created my own data array.

    If anyone has any suggestions on how to fetch local json file, or any idea on why my http server kept lagging so much that the page wouldn't update when javascript code was changed, please share your thoughts.

    Time tracking dashboard

    1
    Candela Bramucci•680
    @bramuccciPosted almost 3 years ago

    Hi Amila! Keep in mind that you need https or local host to use fetch. Do you try using the vsc extension live server? It's what I used. If you want, you can see my JavaScript code here. Also, would you like to share your old code? About the rest of the page, I believe you did it fantastic. Just is a little to small.

    1
  • Attila•290
    @unexunderscoreSubmitted almost 3 years ago

    It went better than other likes this. (in the last was only email validation, but I went trough the hell to make it work.) :D It seems useful to practice. It was fun to make. (not perfect, but I'm working on)

    Intro Component Challenge

    2
    Candela Bramucci•680
    @bramuccciPosted almost 3 years ago

    Hi Attila! I see a little problem. When I put an incorrect email all the errors shows up, even if the other fields are correct. This only happen with the email. All the other functionalities are well done. Oh and the text of "try it free..." isn't center on the mobile version.

    Overall, good solution :)

    Marked as helpful
    1
  • Candela Bramucci•680
    @bramuccciPosted almost 3 years ago

    Heeey really nice start, you don't miss any details. Congratulations! I have only some picky recommendations:

    • Don't use position: absolute on the attribution. It only cause problems, like the overlap with the card on mobile.
    • I think that a more blurred shadow is better. Something like box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; (I took that of this site)
    • Use a normalize! I highly recommend this one. Great first project, please do more 😊
    Marked as helpful
    1
  • rubbersouls•180
    @rubbersoulsSubmitted almost 3 years ago

    This is my first exercise done with HTML and CSS from frontendmentor.io The code is not perfect but it more or less corresponds to the model :D And it is responsive If you have any advice to improve my code I'm a taker, thank you

    Order summary component by Rubbersouls

    3
    Candela Bramucci•680
    @bramuccciPosted almost 3 years ago

    Hello rubbersouls, congratulation for your first challenge in this platform 😊 It's amazing to see new people. I'm surprise, your solution is very close to the original design. Here are the things I think can help you:

    • Don't use flex (or grid) in your body. You can see that this give you problems, like the need of using position: absolute in the attribution (which in screen of 1024px overlaps with the card). If you want to center use margin: auto, although I wouldn't put in the body but in the section.
    • No need to use a separate class for the width. Just put it in the .card
    • There's absolutely no need of use so many divs inside the card. Just put the content like .card>img+.card__content. Maybe you want the img inside of a div, that is also ok.
    • I write .card__content because this is helpful for the padding. Add padding to that div and you will not have to adjust every element manually.
    • Instead of a @media you can use in the card: width: 90vw; max-width: 50rem (just an example, change those values).

    I... write a lot. This is only to help, I really think that you did a great job. Keep coding!

    Marked as helpful
    1
  • Candela Bramucci•680
    @bramuccciPosted almost 3 years ago

    Hola Ricardo! Acá van algunos tips:

    • Pon el width directamente en la card (container), y no en el main.
    • Podés usar font-family: 'Outfit', sans-serif; directamente en el body y así no repetir líneas.
    • No hace falta anidar tantos divs adentro de la card. Yo haría .card>img+h1+p y daría un padding a card. De esta forma no hace falta ajustar cada elemento manualmente.
    • Te recomiendo aprender de medidas em y rem.

    Veo tu código de css muy ordenado, sacando algunas líneas innecesarias mejoraría aún más. Felicidades por tu solución :)

    0
  • Rumer Tovar•80
    @Rtf747Submitted almost 3 years ago

    Hi! I think I did some spaghetti code in the Styled component Container. If anyone can give me any suggestions it would be a great help. Thanks!

    (I know that the responsive is not the best, I will try to improve it in the next challenge)

    3-column-card

    2
    Candela Bramucci•680
    @bramuccciPosted almost 3 years ago

    Hi rummer! If you see your solution on a screen of 1024px (like mine) you will see that the buttons get out of the card. I think I can help with that.

    • First, do *{ margin: 0, padding: 0} . With that you can work better with the spacing.
    • Remove the grid-template-rows of your container. Just leave the grid-template-colums: 1fr
    • Put the background in the cards, and no in the div inside them. Then, add a padding. With this structure you can adjust the elements like header, img, etc.
    • I see that you use react. I recommend to go back to the bases with only css and html. Keep coding!
    Marked as helpful
    1
  • hariprasad9899•1,170
    @hariprasad9899Submitted almost 3 years ago

    Did some mistakes with the HTML! Have used a div inside ul and an article inside the section, and not using an image inside picture tag.

    Will rectify it by next time.

    Responsive Landing Page

    1
    Candela Bramucci•680
    @bramuccciPosted almost 3 years ago

    Hi! Congratulations for your solution, the responsive is good and the layout seems correct. Here are some tips:

    • You could use semantic better. Use elements like header and footer. I recommend the structure header+main>(section*3)+footer.
    • Try naming your classes in a more descriptive way, like "benefits", "testimonials," "gallery" or what you think is better.
    • Follow header order; I see a header 1 and 3, but not a 2
    • The nav is a little too small.

    Overall I think is a great solution! I hope this helps you.

    0
  • Candela Bramucci•680
    @bramuccciPosted almost 3 years ago

    Hola! Felicidades por tu solución, muy parecida a la original. Acá van algunos detalles que te pueden servir:

    • main no debería ser directamente tu card, en ves de eso usa un div o un article ( main>article.card )
    • Dentro de .card yo tendría .card__header y .card__content, de esta manera podés darle un padding y un gap al contenido, así no tendrías que ajustar cada elemento manualmente.
    • Olvidaste de poner sombras (en la card y en el botón azul)
    • Olvidaste la imagen de fondo

    Espero ayudar 😊

    Marked as helpful
    1
  • Nabil-Y•150
    @Nabil-YSubmitted about 3 years ago

    Welcome !

    Thank you for looking at my work.

    I am a beginner so please tell me if you see anything I can improve on.

    Nabil-Y

    Three Column Card

    1
    Candela Bramucci•680
    @bramuccciPosted about 3 years ago

    Hey this looks really nice! Here are some picky details that I would change: -The cards are typically articles, not sections (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article). So is better to do main>article>div (each part of the big card is a div) -Instead of btn-one, btn-two, btn-three, you could use variables. Put a '--color-accent' and change for every div

    But these are minor things, you did great 😃

    Marked as helpful
    1