Frontend Mentor | Ralph's profile

Latest comments

P
David Turner•4,130
@brodiewebdt
Submitted 12 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
#accessibility
2
Ralph•190
@RalphPastel972
Posted 12 months ago
You're welcome :-)
P
David Turner•4,130
@brodiewebdt
Submitted 12 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
#accessibility
2
Ralph•190
@RalphPastel972
Posted 12 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
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 12 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!
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
@abdul-busybrain
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.