@brukmg
Ramon-Alvez
@Ramon-AlvezAll comments
- @Ramon-Alvez
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.
- @mojtaba-mehrzad@Ramon-Alvez
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 helpful - @YonHuJJ@Ramon-Alvez
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> - @EKriley-ciWhat 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-AlvezCongratulations 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 helpful -
- @Abdullah-trial@Ramon-Alvez
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 helpful -
- @BuildAndBreak@Ramon-Alvez
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 helpful - @jmprzWhat 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-AlvezCongratulations 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 helpful -
- @Kaua-AlmeidaWhat 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-AlvezOlá @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 ;)
- @V0zmoWhat 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-AlvezI 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!
