Skip to content
OverviewSolutions
9
Comments
16
Ralph
@RalphPastel972

All comments

  • David Turner•4,150
    @brodiewebdtSubmitted 5 months 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

    2
    Ralph•190
    @RalphPastel972Posted 5 months ago

    You're welcome :-)

    0
  • David Turner•4,150
    @brodiewebdtSubmitted 5 months 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

    2
    Ralph•190
    @RalphPastel972Posted 5 months 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

    0
  • Kamran Kiani•1,280
    @kaamiikSubmitted 7 months 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

    1
    Ralph•190
    @RalphPastel972Posted 5 months 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!

    0
  • Kerkeb Mohamed•120
    @MohamedKerkebSubmitted 6 months 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
    @RalphPastel972Posted 6 months 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.

    0
  • Abdullahi(busybrain)•210
    @abdul-busybrainSubmitted 6 months 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

    1
    Ralph•190
    @RalphPastel972Posted 6 months 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
    0
  • Ralph•190
    @RalphPastel972Submitted 6 months 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
    @RalphPastel972Posted 6 months ago

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

    0
  • J. Júnior•130
    @jjuniorbrasilSubmitted 6 months 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
    @RalphPastel972Posted 6 months 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
    0
  • Ralph•190
    @RalphPastel972Submitted 6 months 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
    @RalphPastel972Posted 6 months 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?

    0
  • Hamid reza Mousavi nasab•120
    @hmousavinSubmitted 6 months 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
    @RalphPastel972Posted 6 months 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
    0
  • Tshepo Mahlonoko•20
    @tshepomahlonokoSubmitted 6 months 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

    1
    Ralph•190
    @RalphPastel972Posted 6 months 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
    0
  • mendesdomingosdev•110
    @mendesdomingosdevSubmitted 7 months 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

    1
    Ralph•190
    @RalphPastel972Posted 6 months 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!

    0
  • Elias sips 🍵•80
    @wassimboualamSubmitted 7 months 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
    @RalphPastel972Posted 6 months 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

    0