Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions15Comments28

All comments

  • Candela Bramucci• 680

    @bramuccci

    Posted

    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

    @bramuccci

    Posted

    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-a

    Submitted

    ¿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

    #accessibility

    2

    Candela Bramucci• 680

    @bramuccci

    Posted

    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

    @milla1909

    Submitted

    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

    @bramuccci

    Posted

    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

    @unexunderscore

    Submitted

    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

    #solid-js

    2

    Candela Bramucci• 680

    @bramuccci

    Posted

    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

    @bramuccci

    Posted

    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

    @rubbersouls

    Submitted

    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

    @bramuccci

    Posted

    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

    @bramuccci

    Posted

    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

    @Rtf747

    Submitted

    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

    #react#styled-components

    2

    Candela Bramucci• 680

    @bramuccci

    Posted

    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

    @hariprasad9899

    Submitted

    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

    @bramuccci

    Posted

    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

    @bramuccci

    Posted

    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-Y

    Submitted

    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

    @bramuccci

    Posted

    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
  • murilo• 110

    @mlzzi

    Submitted

    I finished this one and it was quite a challenge.

    I used flexbox, but in desktop view I don't think is the more elegant solution. I tried grid also, but no success.

    If anybody can get me a hint I would appreciate it. Or any feedback on whatever improvements I could make.

    Best regards!

    Solution made with Flexbox and mobile first

    2

    Candela Bramucci• 680

    @bramuccci

    Posted

    Hi! For me your solution sees great with flex (maybe I would the media querie to a lower min value) but as you say, maybe it's more elegant with grid because the use of that extra div. I got this way: first, remove that div

    .cards{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
}
.card__supervisor {
    grid-row: 1/3;
}
.card__calculator {
    grid-column: 2/3;
}
.card__karma {
    grid-column: 3/4;
    grid-row: 1/3;
}

    Feel free to try it! Your solution is great and I hope this help you :D

    Marked as helpful

    1
  • Louie J• 230

    @ljmarket13

    Submitted

    Here's my attempt with form validation. Styling is a bit off but the main focus was the js side. All feedback is welcome! Let me know if there is anything that needs to be changed or removed.

    Intro Component with Signup Form

    1

    Candela Bramucci• 680

    @bramuccci

    Posted

    Hi Louie! Your form only checks if the input has any value, so if I type something like a space it will be considered valid. This in the real life has no sense. Also, you use the html email validation which it's no secure because the users can modify the html and erase that attribute. I recommend to learn about regular expressions and form verification (for the later you can see https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation). I hope this help you! happy coding

    Marked as helpful

    1
  • Zack Bauer• 20

    @thezrbauer

    Submitted

    Hello, this will the first project I upload. I had some trouble getting the daily/weekly/monthly JSON functions to not stack on top of each other, and to clear the previous function upon each onclick event. I eventually got it to work by creating functions that set the same json calls to null, and called those before the new JSON was called.

    To me, my approach seemed kind of redundant. And I would appreciate any tips on how to streamline the JS, or if there was a more obvious way of handling it.

    Thank you for your time.

    Time Tracker: Tailwind, Async.

    1

    Candela Bramucci• 680

    @bramuccci

    Posted

    Hi Zack! I saw your code and also think it's redundant 😅. You don't need to do different h2 and p for every situation, instead put a single h2.current time , p.previous-time (or something like that) and then modify it in JS. Now, put an addEventListener to the buttons daily, weekly, monthly(I think they should be li) and call a function. That function can edit the time frames using a for cycle. You can use template string for every context (like currentTime.textContent = data[index].timeFrames.${context}.current).

    I hope I have explained well, don't doubt in asking if you want. Remember when you are coding, don't repeat yourself. This is great for a first challenge summited, keep going~

    Marked as helpful

    1
  • Candela Bramucci• 680

    @bramuccci

    Posted

    Hello! This is really nice, almost identical to the original. I think you should give to .content__error a display: none and change later with JS (because it give to much space in the mobile version). Keep coding 🤗

    Marked as helpful

    0
  • Amon• 2,560

    @A-amon

    Submitted

    Hello again! Let me know what to fix on the semantics and accessibility~ 😀

    Any other feedback is very much welcome too! 😁

    By the way, I have no idea what the three dots does so I just assume it should be toggling a popup or something hence, the attributes on it. (I didn't create any popup so nothing will appear when you click it 😂)

    Time tracking dashboard - HTML, SCSS, JS

    3

    Candela Bramucci• 680

    @bramuccci

    Posted

    wow, the animations are amazing 😦 I love this! The only I noticed is that the card in small devices (less than 375px) isn't very responsive, but great solution anyway

    Marked as helpful

    0
  • Candela Bramucci• 680

    @bramuccci

    Posted

    Hi Leon, this solution looks amazing! I see it in the newsletter and I think it's great. In fact, I'm studying it so thanks for the readme!! The dark and light theme looks amazing too, just a question: The theme preference is not saved in the localStorage? When I reload the page, is always dark. Please keep coding! This is awesome.

    Marked as helpful

    1
  • Felix Criollo• 575

    @FelixCriollo

    Submitted

    • how to make dots work?
    • how improve with manipulate JSON data?
    • any advice is very welcome :3

    thanks for see my challenge.

    pd: if you see undefined restart the page :: 'c

    Sass, js(vanilla), BEM

    2

    Candela Bramucci• 680

    @bramuccci

    Posted

    Wow, this is really incredible! The design is indistinguible from the original and the responsive is magnificent, you use the grid layout so well. I really like this so much, please keep going 💖. And for the dots... maybe you can put a mini menu who cover the card with fake options? You can use addEvenListener click and mouseover.

    1
  • Candela Bramucci• 680

    @bramuccci

    Posted

    Hi Nguyen! This amazes me, it's beauty and clean like the original. Congratulations :D The only thing I would change it's the background in the setion-1, when I try it with different sizes it overlaps with the title. I played and think background-size: 33em; background-position: top left -10em for mobile it's good, and then other media querie with background position: top center. Background are hard, but maybe this help you. Oh and, cursor: pointer; in the social media icons will be great. Again, amazing solution!!!

    Marked as helpful

    0
  • Candela Bramucci• 680

    @bramuccci

    Posted

    Hi Nawfel! Your solution looks really close to the original, congratulations! I saw that you responsive can improve if the media querie was bigger (maybe 700px). Instead to put padding and margin to all the sections of the card, you can put

    .card > div {
padding: 2em;
}

    Or something similar. Keep coding! You have good eye👀

    Marked as helpful

    1
  • James Greilick• 50

    @jgreilick

    Submitted

    This is my third challenge. So far, I do the mobile layout first, then make alterations for the desktop version in a media query. What else should I be considering? Is the result of my layout satisfactory to the design? How is the organization of my CSS? What other tips or tricks might I employ? Any and all feedback is helpful. Thanks!

    3-Column Layout w/ Flex and Grid

    1

    Candela Bramucci• 680

    @bramuccci

    Posted

    Hey, this is pretty awesome! The only things I want to say is that the padding in .preview-card-section is a little arbitrary, I think 3rem is better. And don't use border-radius in individuals card, instead .preview-card { border-radius: 0.5rem } is easy to deal. Again, great work. Keep going~

    Marked as helpful

    1
  • Tiago Heras• 45

    @tiagoheras

    Submitted

    Hey guys! As you may have noticed on the live preview, the pseudo element I used to add that purple filter to the heading image is overflowing on the bottom side. This only happened in the mobile version. Thanks in advance!

    Mobile first site using plain semantic HTML and CSS

    1

    Candela Bramucci• 680

    @bramuccci

    Posted

    Hi Tiago! I think that, unfortunately, there is not solution for that problem. I have the same issue doing this challenge and cannot find why this happened. Use filter as an alternative if you want (pretty awkward I have to mention). Sorry for not give much help on this, but I want to say that I love you solution, everything looks good :)

    Marked as helpful

    0
  • Candela Bramucci• 680

    @bramuccci

    Posted

    Hi! In my opinion all related to padding and margin is confuse. Instead, you could do:

    .container{
    width: 85%;
    max-width: 65em;
    margin: 0 auto;
}

    and for the items inside a .column{ display: flex } , .column > * { width: 100% } (see https://www.youtube.com/watch?v=9e-lWQdO-DA)

    I hope this help you!

    Marked as helpful

    1