@brukmgSubmitted 29 days ago
Ramon-Alvez
@Ramon-AlvezAll comments
- @Ramon-AlvezPosted 29 days ago
Congratulations on the challenge, it was very well written and responsive.
Just a note to pay attention to the title of the lighter cards that are in bold (and these have normal weight) and the font of the darker cards that need to be lighter to help with visibility.
0 - @mojtaba-mehrzadSubmitted 29 days ago@Ramon-AlvezPosted 29 days ago
Congratulations on the challenge, it was very well written and responsive.
Just a note, do not limit the max-width of the body resolution to 900 unless this limited container is already horizontally centered. This is because in higher resolutions (like mine) the page will be off center (sort of shifted to the left). Replace it with 100% (or leave it without) and it will work without problems.
Marked as helpful0 - @YonHuJJSubmitted 29 days ago@Ramon-AlvezPosted 29 days ago
Congratulations on the challenge, it was very well written and responsive.
Some tips that can help you, regarding image responsiveness, it is a good idea to use the picture tag with a source and an img, as you can set breakpoints where the source will be replaced by the img.
<picture> <source media="(breakpoint)" srcset="location/image1"> <img src="location/image2"> </picture>0 - @EKriley-ciSubmitted 29 days agoWhat are you most proud of, and what would you do differently next time?
Fier : Je suis particulièrement fier de l'effet de survol que j'ai ajouté aux images. Cela donne un aspect interactif et moderne à la carte de recette.
Différemment : La prochaine fois, j'ajouterais des animations supplémentaires aux sections de texte pour rendre la lecture encore plus engageante et dynamique.
What challenges did you encounter, and how did you overcome them?Franchement, je n'ai pas rencontré de grandes difficultés. Grâce à mes connaissances solides en Flexbox et en CSS, j'ai pu créer cette carte de recette sans trop de problèmes. Tout s'est déroulé comme prévu.
What specific areas of your project would you like help with?J'aimerais obtenir de l'aide pour optimiser le code et rendre les transitions encore plus fluides, surtout pour les utilisateurs sur mobile.
@Ramon-AlvezPosted 29 days agoCongratulations on completing the challenge! It is well written and responsive. Some observations:
-
You forgot to close the table tag
-
The model for 'mobile' resolutions is different from the desktop version, take a look later.
-
Another thing, the style of the fonts used in the model was missing, to use them you need to go to the google-fonts website, get the embed link and paste it into the html or css.
Marked as helpful0 -
- @Abdullah-trialSubmitted 29 days ago@Ramon-AlvezPosted 29 days ago
Congratulations on completing the challenge! I thought he was well done. Some tips that may be useful:
-
Card centering - to maintain responsiveness in all resolutions, do not limit the body's max-width to a specific value, leave it at 100% and it will center in any resolution. (my monitor has a resolution higher than 1440px and that's why the card was shifted to the left)
-
Links containers without links - missing the <a> tag inside the divs, my suggestion to make it better (and more semantically) would be to use a nav + links or a nav + ul + li + links, this way you keep the code more " semantic".
Like:
<nav> <ul> <li><a href="#">Github</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">LinkedIn</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Instagram</a></li> </ul> </nav>Marked as helpful0 -
- @BuildAndBreakSubmitted 29 days ago@Ramon-AlvezPosted 29 days ago
Congratulations on completing the challenge! It was well done and looks very similar to the proposed design. Here some observations I made:
- There was a lack of a hover effect in "HTML & CSS foundations"
- The spacing of card items is a little smaller
- Lastly (but I think this was a question of aesthetics of yours) the author's name is not in italics
Marked as helpful0 - @jmprzSubmitted 29 days agoWhat are you most proud of, and what would you do differently next time?
Finishing the challenge is satisfying and I want to learn more. This is a good start to improve my skills on web design.
What challenges did you encounter, and how did you overcome them?I got hard time figuring out about the container of the image and text then I learn how to use flex, margin and padding. I'm also confused on making it responsive but then I open the Figma file (which is super useful!) to know the exact sizes of image and the spacing.
What specific areas of your project would you like help with?Does my code for the title and paragraph good? I didn't use the to perfectly center the text as seen on the preview designs. Is there other ways to improve the styling for centered text or paragraph?
@Ramon-AlvezPosted 29 days agoCongratulations on completing the challenge! When looking at your code I have some suggestions:
-
Make the code more user-friendly with indentation and spacing.
-
Instead of using divs to make titles and paragraphs, use the h and p tags.
-
And to center the container vertically with the flexbox you need to set the height on the container.
Answering the question about text centering, you can use Text-align to position the text wherever you want. As for the image, I prefer to use padding or margin (depending on where I'm styling it) to make it responsive in the container
Marked as helpful1 -
- @InaJaweedSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of how it looks I think it looks similar as the design given. I probably over complicated css for this project so next time after I have more experience I will do this project more simple and easier.
What challenges did you encounter, and how did you overcome them?CSS was the main issue. I am terrible when it comes to styling. It was confusing trying to understand how to style, using flex, position and everything. I used youtube, docs and more to understand how to use flex and other styling methods.
What specific areas of your project would you like help with?CSS - Have I used css in places where it's not needed, have i over complicated this project. HTML - Is it semantic and meets its needs
@Ramon-AlvezPosted 3 months agoI found the flex display a bit useless in the content div, you could have already centered everything with text-align, or since you used the flex display you could have given some space between the items with a gap or justify-content: space-evenly.
Remember this, Flex display makes the children float (this sounds a little funny but thinking about it helps me a little hahaha)
0 - @InaJaweedSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of the end outcome, It was bit confusing as CSS is completely new to me and I suck at it. It has been a good practice with css flexbox and media queries. Next time I want to make sure my code is maintainble and can be read easily by others as I feel like i have used css elements in areas that I didnt have to or there was a better solution to this approach.
What challenges did you encounter, and how did you overcome them?Media Queries was confusing and trying to guess the sizes of each area for this project. For media queries a simple google search and little bit reading helped me understand the basics.
What specific areas of your project would you like help with?Media Queries and CSS. I think i have overcomplicated this simple project and used a lot of redundant css in different areas making it hard to maintain and read.
@Ramon-AlvezPosted 3 months agoYou could try using max-width instead of width, this saves me a lot of headaches in terms of responsiveness, the site basically becomes responsive on its own.
Another thing I do is to maintain the spacing givin the card a side margin, so it stays "floating" on the page, it ends up combining well with max-width ;)
0 - @Kaua-AlmeidaSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Gostei do resultado e de ter incluído tags semânticas dessa vez, não sei o que poderia fazer de diferente.
What challenges did you encounter, and how did you overcome them?não sabia como fazer a tabela do jeito do design apresentado então fiz um por conta própria.
What specific areas of your project would you like help with?nenhuma em específico, mas gostaria de uma avaliação geral e saber no que posso melhorar.
@Ramon-AlvezPosted 3 months agoOlá @Kaua-Almeida!
Dei uma olhada no seu código e realmente esta bem semântico, mas você disse que não soube fazer a tabela igual ao design, observando a sua estrutura de tabela, você a criou com duas linhas ao invés de duas colunas, para arrumar é só seguir essa estrutura:
<table> <tr> <!--TR significa TableRow, é a linha da coluna --> <td>E aqui entra os dados da tabela</td> <td>Para ter duas colunas é só usar 2 tds por linha</td> </tr> <tr> <td>Exemplo</td> <td>Exemplo</td> </tr> </table>Para estilizar a divisória dos itens da tabela nutricional você pode usar o border-bottom ou um <hr>.
Outra coisa que observei foi seu mediaquerry, na versão mobile o container ocupa toda a largura da tela, e a imagem não possui mais o border-radius.
Te desejo sorte nos estudos ;)
0 - @V0zmoSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I added some simple JavaScript for a custom cursor, I'm quite improved say myself for the CSS and HTML, it's much tidier and cleaner. Still need to learn how Flex works and the hierarchy of HTML.
What challenges did you encounter, and how did you overcome them?The JavaScript code, the element implementation of CSS to do animation, and probably how CSS and JavaScript syntax work. But with quick Google search can solve the problem!
What specific areas of your project would you like help with?Personally nothing, quite impressed by myself. However, if there is some room for improvement in my code please give me feedback and criticism!
@Ramon-AlvezPosted 3 months agoI just looked at your code, and I really like the card hover effects!
I liked the way you structured and styled the page, keep it up!
1
