Skip to content
OverviewSolutions
7
Comments
9
Eman Salama
@emzzz56

All comments

  • oduwa-A•160
    @oduwa-ASubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    Focusing on the HTML for the first time made the process extremely easy to tackle, to where the mobile is flawless and I barely had to make edits to make the desktop version work. I still had issues, of course, and it isn't perfect, but I am definitely proud of how streamlined the process was. I will definitely do this again the future.

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

    Messing around with the prices to make them spaced properly in both versions was difficult, but messing around with rem size for the overall width made it alright and responsive in all different sizes I believe.

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

    I need help with the Desktop version of the image, cause it squishes at the top and bottom and I didn't know how to fix that.

    Product Review using picture element + flexbox

    1
    Eman Salama•120
    @emzzz56Posted 2 months ago

    Congratulations on completing this Challenge!

    I like how you used the picture tag to show different images based on media size :) I think you can center the box vertically by making the body display flex and set justify-content: center; align-items: center; min-height: 100vh;

    I'm looking forward to seeing more of your work. Keep up the good work :)

    1
  • Eman Salama•120
    @emzzz56Posted 2 months ago

    Congratulations José for completing this challenge. you have created a super design; your design looks very much like the screenshot. As the next step, I suggest 1- Use semantic HTML tags like main, footer, section, etc for better accessibility so I think it would be good to wrap the card in main and add a footer for "Challenge by Frontend Mentor." 2- It's always a good practice to start your CSS with reset CSS so the layout looks the same on all browsers. You can try Josh Comeau's approach to resetting the CSS.

    I'm looking forward to seeing more of your work. Keep up the good work :)

    0
  • Eman Salama•120
    @emzzz56Posted 3 months ago

    Congratulations Bailey for completing this challenge. you have created a super design; your design looks very much like the screenshot. As the next step, I suggest 1- Use semantic HTML tags like main, footer, section, etc for better accessibility so I think it would be good to wrap the card in main and add a footer for "Challenge by Frontend Mentor." 2- It's always a good practice to start your CSS with reset CSS so the layout looks the same on all browsers. You can try Josh Comeau approach for CSS reset.

    I'm looking forward to seeing more of your work. Keep up the good work :)

    Marked as helpful
    0
  • Gustavo Gutiérrez•150
    @gustavo2023Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I think I did a good job structuring the HTML, however I have some doubts about using and h1 tag for the main text in the component. Maybe I could have used a different tag that fits better for that purpose.

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

    The only thing that felt kind of challenging was aligning the text in the place I wanted, aside from that the rest wasn't difficult.

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

    I would like to receive any feedback on things I may have done wrong or things I could have done in a more efficient way. In regards to the way I positioned the elements I would like to know if there better practices that I should have implemented, or things I should change or correct. Any feedback on the use of the tags in my html would be appreciated. As for the CSS properties I used and their values I would also appreciate any feedback on improvements I can make.

    QR component using HTML and CSS

    1
    Eman Salama•120
    @emzzz56Posted 3 months ago

    Congratulations Gustavo for completing this challenge. you have created a super design and your code is super clean. As the next step, I suggest moving the "Challenge by" text to the footer instead of having it in the main section. also, it's a good practice to start your CSS for any project with reset CSS so your CSS doesn't look different on different browsers.

    I'm looking forward to seeing more of your work. Keep up the good work :)

    Marked as helpful
    1
  • Rgeb1•110
    @Rgeb1Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm really pleased with how the project turned out; it’s a lovely design, and I'm glad I was able to do it justice. Moving forward (based on feedback I received), I’m considering using rem instead of px for setting widths. I believe rem is a better choice because it scales more consistently across different screen sizes and respects the user's accessibility settings.

    Also, I learned how to directly target ol/ul > li bullet points or numbers to style them independently, instead of styling the entire li element. This can be done using the li::marker pseudo-element.

    Responsive Recipe Page using HTML and CSS

    1
    Eman Salama•120
    @emzzz56Posted 3 months ago

    Perfect

    0
  • Jennifer Chen•50
    @JenniferjjChenSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Not particularly proud of anything in the challenge.

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

    I initially wanted to use grid to display the profile, but changed to flex because I wasn't sure how to center the texts with grid. Same with the social links. I just decided to use the break tag.

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

    Is there a better way to format the tags instead of using the break tag? I know some tags automatically start on the next line, but when trying to use semantic html, I'm not too sure.

    Responsive css design using flex.

    1
    Eman Salama•120
    @emzzz56Posted 3 months ago

    Perfect

    0
  • Eman Salama•120
    @emzzz56Posted 3 months ago

    Perfect

    1
  • Franciscus Agnew•10
    @franciscusagnewSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    This was my first challenge with Frontend Mentor, I found myself thinking... what a wonderful concept & service they have provided myself and others like me who are passionate, motivated, & constantly curious about web development & its steady evolution.

    I had a lot of fun completing this challenge! I initially considered integrating TailwindCss, React & TypeScript for my solution, but decided to use only semantic HTML, CSS, & a simple layout using CSS grids.

    
  
    
    
      
        Improve your front-end skills by building projects.
      
        Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
    
  


    .container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 'card';
    grid-template: "card";
    justify-content: center;
}

.card {
    grid-area: card;
    background-color: hsl(0, 0%, 100%);
    width: 320px;
    height: 499px;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 16px 16px 40px;
    outline: 1px solid hsl(0, 0%, 80%);
    box-shadow: 5 5 5px 0 hsl(0, 0%, 80%);
    max-height: 499px;
    max-width: 320px;
}
    What challenges did you encounter, and how did you overcome them?

    I did not encounter any challenges in creating a solution.

    QR Code Component Solution [Using Semantic HTML5 markup & CSS Grids]

    1
    Eman Salama•120
    @emzzz56Posted 3 months ago

    Perfect

    0
  • Kaila Marcano•50
    @kmarcano3Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Most proud of time-table able to keep when designing this project- wanting to further hone HTML skills

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

    Ran into HTML structure issues and used StackOverflow to find answers

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

    Overall structure and readability

    Responsive blog preview card

    1
    Eman Salama•120
    @emzzz56Posted 3 months ago

    Congratulations Kaila for completing this challenge. you have created a super design and your code is super clean. As the next step, I suggest working on making the design responsive as it has some issues on smaller screens. You can use media queries to set the width on smaller devices or better practice is to avoid using fixed width for the containers. I'm looking forward to seeing more of your work. Keep up the good work :)

    Marked as helpful
    1