Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
9
Comments
16
Ralph
@RalphPastel972

All comments

  • P
    David Turner•4,130
    @brodiewebdt
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    This is a redo of this challenge. I combined the two desktop images to create the single image for tablet and mobile. I also changed the button text colors and hover states to pass accessibility contrast checks.

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

    I wasn't able to get the images to overflow the page view. I will need to spend more time on this to figure out how to do it. It may be because I used Grid for the Hero section.

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

    If anyone has info on how to get the images to overflow the page, it would be appreciated.

    Meet landing page

    #accessibility
    2
    Ralph•190
    @RalphPastel972
    Posted about 1 year ago

    You're welcome :-)

  • P
    David Turner•4,130
    @brodiewebdt
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    This is a redo of this challenge. I combined the two desktop images to create the single image for tablet and mobile. I also changed the button text colors and hover states to pass accessibility contrast checks.

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

    I wasn't able to get the images to overflow the page view. I will need to spend more time on this to figure out how to do it. It may be because I used Grid for the Hero section.

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

    If anyone has info on how to get the images to overflow the page, it would be appreciated.

    Meet landing page

    #accessibility
    2
    Ralph•190
    @RalphPastel972
    Posted about 1 year ago

    Hey,

    Combining the two desktop images to create the single image for tablet and mobile is really clever. Well done.

    That being said, there are 3 design difficulties that you skipped and I think you will learn a lot by trying to face them:

    • The "image-hero" images are always cut on the left or right side of the banner. And that is the case for all screen sizes (desktop, tablet and mobile). Your solution does not reflect that.
    • You also missed the fact that the footer behaves totally differently on large screen: the elements are not stacked anymore, but are near each other.
    • The image in your footer does not adapt to screen size. It's not the same image for mobile, tablet or computer.

    Good luck

  • P
    Kamran Kiani•2,780
    @kaamiik
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    .

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

    Grid layout was challenging for me. Also combine background color and background-image was challenging

    What specific areas of your project would you like help with?
    • My grid layout is ok? how can I improve it?

    • Please give me feedback about my code and leave me a comment.

    Meet Landing Page

    #accessibility#sass/scss
    1
    Ralph•190
    @RalphPastel972
    Posted about 1 year ago

    Hi Kamran,

    Congratulations! It looks really good.

    I am a bit embarrassed because I do not know Sass and Scss and therefore I cannot comment on your CSS code ;-(

    That being said, there are 2 design difficulties that you skipped and I think you will learn a lot by trying to face them:

    • The "image-hero" images are always cut on the left or right side of the banner. And that is the case for all screen sizes (desktop, tablet and mobile).
    • The 4 images are either in square form (for mobile size) or in line (for tablet and mobile sizes) and of course the square or the line auto resizes responsively. The flex solution you used is not the best because in some screen size you will have 3 images on the 1st row and the last one on a 2nd row.

    Fixing the 2 points above will be challenges that might teach you a lot.

    Good luck!

  • Kerkeb Mohamed•120
    @MohamedKerkeb
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I used TailwindCSS for the first time, and setting up this framework allowed me to better understand its usage. Next time, I would like to use a React library to simplify the code and avoid too much repetition.

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

    I created a small template to use the mandatory color codes, carefully read the documentation, and found the right explanations for the implementation.

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

    Nothing for now.

    testimonials-grid-section-main

    1
    Ralph•190
    @RalphPastel972
    Posted about 1 year ago

    Hey Kerkeb,

    I have no knowledge of tailwind so I can't give any meaningful feedback. I can just point out a couple of small things that could be improved IMHO

    • The first card is not properly set in the layout and it is pretty visible on small screen, just before the breaking point to one unique column.
    • You did not use <h1> , main or article . You could add some of those semantics.

    Keep up the good work.

  • Abdullahi(busybrain)•210
    @abdulbusybrain
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    The ability to apply some concepts with ease easy flexbox

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

    Picture element in order to render but mobile and desktop, i will review it after the submission

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

    Picture source, media-query

    Responsive product preview card component

    #pure-css
    1
    Ralph•190
    @RalphPastel972
    Posted about 1 year ago

    Hey! Congratulation on completing this challenge! It looks good!

    Here are some points that will help to make it even better:

    1. Using margin isn't always the most effective method for centering an element. Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally: Apply this CSS to the body (avoid using position or margins in order to work correctly):
    body {
        min-height: 100vh;
        display: flex; 
        justify-content: center;
        align-items: center;
    }
    

    Also, I couldn't figure out why, but the image does not perfectly match its container as per the design.

    Keep up the good work !

    Marked as helpful
  • Ralph•190
    @RalphPastel972
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Not much. I took way too long for such a simple result.

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

    I was not sure the best option to place the tiles between 2 lines.

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

    n/a

    Responsive Four card feature section solution

    2
    Ralph•190
    @RalphPastel972
    Posted about 1 year ago

    Thank you very much! for your feedback! I will have a look and improve things.

  • J. Júnior•130
    @jjuniorbrasil
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of using CSS Grid and Flexbox at the same elements, based on the user screensize. Basic stuff, but I've got really surprised with the result.

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

    Firstly, I'm not used with the rows declarations along the CSS Grid. So I wen't through some articles and it became fluidly.

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

    No specific area.

    Four card feature section

    1
    Ralph•190
    @RalphPastel972
    Posted about 1 year ago

    Hey,

    That is really good work. Reading your code, I realize that I have still a lot to learn with grid: my solution just used grid-column-start: and I need to learn your approach.

    You didn't respect the shade under the card but that is a detail.

    I feel the break down you used in your media query is too big because just under 1000 px wide, it does not look super good.

    Honestly I have not much to say. Good work.

    Marked as helpful
  • Ralph•190
    @RalphPastel972
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    If I had to start over, I would focus on the layout first and on the styling at the end, instead of doing all at the same time.

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

    Using gap in the text sections created some weird issue whith the media query: While it was perfect with the "mobile diplay", there was a slice shift in the "desktop display".

    I needed to use max-width: calc(100% + 10px); to compensate the shift.

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

    n/a

    Responsive Product preview card component

    1
    Ralph•190
    @RalphPastel972
    Posted about 1 year ago

    Thank you @dakirzakaria,

    Once again it is helpful and insightful!

    I was thinking about using percentage. I should have tried it. Thanks.

    I will correct this bad habit of nesting my h in div

    "Rewrite this message in a different way or with a different concept as if you wrote it yourself." => I do not understand what you mean :-/ Could you elaborate please?

  • Hamid reza Mousavi nasab•120
    @hmousavin
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I did RWD but, none of them gone smooth and confident as the one ! I think I have some progress in this manner.

    What challenges did you encounter, and how did you overcome them?
    1. to fill the container with image, while preserving it's aspect-ratio (I was styling the wrong element ! :)
    2. add some padding while preventing the original width and height (solved by: box-sizing: border-box)
    What specific areas of your project would you like help with?

    Nothing actually .. I need more practice to increase my accuracy and attention-to-details.

    product-preview-card-component

    1
    Ralph•190
    @RalphPastel972
    Posted about 1 year ago

    Hi,

    Really well done! Congrats. I struggled quite a fair bit with this challenge, so I have few advice to give, but I can point out some issues you might want to look at:

    Your choice of breaking points lead to some visibility issues: From 376px wide to 480px wide, the desktop vision cut the old price out.

    Good luck Hamid

    Marked as helpful
  • Tshepo Mahlonoko•20
    @tshepomahlonoko
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of how I was able to manipulate the using Bootstrap 5 in order to achieve the required result. I'm proud of how I used the @media query to make the webpage mobile responsive. Finally I'm proud of how quickly I was able to finish the webpage. It only took me 3 days.

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

    I encountered my biggest challenge when it got to the table part of the page. But with the help of MDN documentation, the Bootstrap documentation as well as the community at Stack Overflow, I was able to overcome this challenge.

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

    I would like to write leaner code in the future because I feel like my CSS file is too long. I would also like to finish projects faster.

    Responsive recipe landing page made using HTML5, CSS, Grid, Bootstrap5

    #bootstrap
    1
    Ralph•190
    @RalphPastel972
    Posted about 1 year ago

    Hi Tshepo,

    You did very well!

    Just a quick one: I would recommend using the <article> and <main> tags. Semantics will make your code more readable and help with accessibility.

    I alos noticed you sometimes create conflict between flex and grid, like on your line 32 of your CSS file.

    I hope that helps. Have a great day!

    Marked as helpful
  • mendesdomingosdev•110
    @mendesdomingosdev
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I could even do it. 😃

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

    For sure was dealing with media queries.

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

    I'd love to get help with the responsive part of the page, I really don't know how my main image is too strange when changing resolutions, well I tried to make it work somehow, but I see that it's wronggg. 🤣🤣 Also a better way to make the last part? tried with flexbox and was a mess, so I used table.

    Recipe Page with Scss

    #accessibility#sass/scss
    1
    Ralph•190
    @RalphPastel972
    Posted about 1 year ago

    Hello,

    It is looking good.

    I may suggest to change your breaking point because at a width of 770px it does not look good. And at a viewport width of 1000px, the actual .card has only 472px of width and it looks like a waste of space that does not respect design.

    I would like to also suggest to use the <section> tags for the different sections (Preparation, Ingredients, Instructions…) instead of just <div>.

    You succeeded to do the nutrition part with table! Well done. I couldn't and used just <div>. I think your approach is way better.


    I do not have a solution for the responsive issue you mentioned (because I am a newbie) but you might try to change

    .card {
        width: 45%;
    }
    

    by

    .card {
        width: 736px;
    }
    

    Good luck!

  • Elias sips 🍵•80
    @wassimboualam
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of how well the site turn out to be without figma designs.

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

    Among the challenges was getting the site to have the same proportions as the design, it was tough relying on a single picture with no details.

    What I did to solve this was write a tkinter app with the design on it ,so that I can overlap it with how the site looked like and get it as close as possible to the design.

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

    Nothing really.

    HTML, Flexbox

    1
    Ralph•190
    @RalphPastel972
    Posted about 1 year ago

    It is very well done. And your CSS file is really well organized.

    I noticed that the height of your card is way bigger than the one from the design. Maybe it is because you used gap with %, I am not sure.

    Also, the way I understood the design, the links should turn green when they are hovered, not clicked. I think it looks better. Have a look at the link below (and feel free to give advice as well):

    https://ralphpastel972.github.io/social-links-profile-main/

    Good job

  • 1of1baw•470
    @1of1baw
    Submitted about 1 year ago

    Blog Preview Card

    2
    Ralph•190
    @RalphPastel972
    Posted about 1 year ago

    Hi,

    We cannot see your images (favicon or the main decoration image) because you didn't upload on Github the following folder:

    ./assets/images/

    I am not sure if that was on purpose or not. I hope that helps.

    Cheers

  • Ralph•190
    @RalphPastel972
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Just happy that I am making progress.

    I used for the first time:

    • CSS variables
    • local fonts
    • Hover pseudo element
    • Firefox Devtool (better than the chrome one)
    What challenges did you encounter, and how did you overcome them?

    installing the fonts was a bit challenging. Still not sure I did it by the book.

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

    n/a

    Blog review - Card

    3
    Ralph•190
    @RalphPastel972
    Posted about 1 year ago

    Thank you very much for the tips. I'll try that.

    I admit I do not understand the reason you added the following line, though:

    min-height: 100vh;
    

    Could you explain?

    Warm thanks again for the feedback. really appreciate it.

  • Syeed-MD-Talha•40
    @Syeed-MD-Talha
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Nothing.If anyone give me feedback i'll be glad.

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

    Nothing

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

    N/A

    Responsive Blog preview card

    1
    Ralph•190
    @RalphPastel972
    Posted about 1 year ago

    Hi,

    I have to say that your CSS file is extremely well organised. Super readable. I'll try to copy your style. Well done.

    I noticed that you didn't use the :hover pseudo css as it was suggested by the design (The card title becomes yellow when being hovered).

  • José Armando•110
    @JoserArmando
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    não sei

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

    não sei

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

    não sei

    flex box

    1
    Ralph•190
    @RalphPastel972
    Posted about 1 year ago

    It is very good. I would have added an "alt" for the image, for accessibility reason. For example:

    alt="QR Code"
    

    instead of just:

    alt=""
    

    The code is really well structured and easy to read.

    The box-shadow deviates a bit from the design but it looks nice.

    Well done

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub