Skip to content
OverviewSolutions
5
Comments
5
Rgeb1
@Rgeb1

All comments

  • Abimbola•170
    @AbimzzSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    I had some issues with the padding for the image in the mobile view, was unable to make to the image ignore the padding of the card to fill the width of the card.. i ended up having to separate the image from the rest of the card-info, which allowed me to give them different padding ..

    What specific areas of your project would you like help with?

    I would appreciate help with the styling of the list marker, i was unable to figure out how to change only their style without affecting the rest of the link.

    Recipe page

    2
    Rgeb1•110
    @Rgeb1Posted 3 months ago

    I had the same problem styling the list markers too. To target the marker and change the colour, the code posted by Gehad28 will do that. Also to control the spacing between the markers and the text, you can try:

    ol, ul, li { padding-left: /* choose measurement */; }

    0
  • جهاد أحمد•280
    @Gehad28Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?
    1. Using new selectors like tr:not(:last-child)
    2. Using rem for padding and margin
    3. Using media query for the mobile size
    What challenges did you encounter, and how did you overcome them?

    For the mobile size, I wanted to let the image take the whole width of the screen while keeping other content of the main container with padding.

    I used padding for the whole container then negative margin for the image.

    What specific areas of your project would you like help with?

    I don't know why the font of the list markers is different from the list font. I tried to apply the font again to the marker itself, but still different!

    Recipe Page

    1
    Rgeb1•110
    @Rgeb1Posted 3 months ago

    You did a great job overall, and the design came out really well! One small suggestion is to consider consolidating some of your CSS rules to avoid repeating code. For example, .ingredients and .instructions share similar styles and could be combined into one rule with a comma (e.g., .ingredients, .instructions { /* styles */ }). There are a few other similar cases to check as well. Other than that, great work!

    Marked as helpful
    0
  • Sunay Dagar•100
    @suzzy-dszySubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I enjoyed working on this particular challenge and being able to implement what i learnt from previous challenges such as box-shadow as well as trying out the capabilities of the pseudo element :hover and implimenting gradient hover effects 🚀 I also opted to use CSS Grid instead of flexbox for the links as I just learnt CSS Grid very recently and wanted to gain a better understanding of it hands on which proved useful despite its challenges. 🔥

    What specific areas of your project would you like help with?

    None in particular but any help / feedback would be greatly appreciated. 👍

    Social Links Profile Challenge using HTML5, CSS Grid & Flexbox

    2
    Rgeb1•110
    @Rgeb1Posted 3 months ago

    Your project looks great! I love how you personalized it, nice touch! The layout is well-organized, and it's responsive, which is awesome.

    Something to consider would be to use a separate stylesheet for the CSS rather than putting it in the <head> of the HTML file. It'll be good practice to keep these files separate. Overall, you’ve done a fab job!

    Marked as helpful
    1
  • Beatriz Ponces•60
    @BeatrizPoncesIPSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Eu me orgulho muito de ter conseguido tornar o site responsivo, especialmente sem recorrer à IA ou a vídeos no YouTube. Desta vez, decidi deixar os textos em inglês para facilitar a comparação do tamanho da fonte. Usei em em vez de px, e na próxima vez, pretendo experimentar rem.

    What challenges did you encounter, and how did you overcome them?

    Enfrentei desafios consideráveis em relação ao tamanho do post. O que ficava esteticamente agradável em um dispositivo parecia excessivamente grande em outro. A responsividade somente com flexbox foi uma tarefa árdua; utilizar Media Queries torna o processo muito mais simples!

    What specific areas of your project would you like help with?

    Qual é a melhor maneira de se opter responsividade usando flex?

    Blog preview card

    2
    Rgeb1•110
    @Rgeb1Posted 3 months ago

    Hiya, I really like your solution—you can tell you put a lot of work into it, and you should be pleased with the result. Well done on making it responsive; you did a great job, especially considering the challenges you faced in figuring it all out. To enhance accessibility, consider adding more descriptive 'alt' text for the images to help those who depend on screen readers (advice I also need to take myself lol). Other than that, well done! :)

    0
  • Rgeb1•110
    @Rgeb1Posted 3 months ago

    Your project has a solid foundation with clean, well-structured code, and the layout is responsive, which is great. A slight improvement would be to use more semantic HTML elements, like <main> or <section>, rather than just <div>. This will give your content more meaning and improve accessibility. Overall, it’s looking really good!

    Marked as helpful
    0