@LukichLabadzeSubmitted 5 months ago
induwara-thisarindu
@induwara-thisarinduAll comments
- @induwara-thisarinduPosted 5 months ago
Hi, nice job on solving this challenge. Congrats 🎉 But I would like to give you some pointers that I used to do this challenge.
- Normally you don't want to set a fixed height in designs like this it messes up the responsiveness so I suggest not doing that. I believe you did that to keep your image up here's how I did it
.card .image { background-image: url(../images/drawers.jpg); width: 985px; background-repeat: no-repeat; background-size: cover; border-top-left-radius: 20px; border-bottom-left-radius: 20px; }- Also, in the design we can see that the card's text is not expanding over the whole area of the card. In your design the text keeps goings and I believe that is because you added the width in percentage to the card I think adding a fixed width is the way to go as this only a card design
.card { width: 950px; }- Also, on the user info space I think it would be better if you stack them in a div and then display them flex column
<div class="profile-info"> <div class="avatar"> <img src="images/avatar-michelle.jpg" alt="avatar"> </div> <div class="info"> <h4>Michelle Appleton</h4> <p>28 Jun 2020</p> </div> </div>Now you can style it
Also, you can do mobile responsive designs by @media queries check them out. 😊 While these may not be the best way hope it helped you out
Happy Coding!
0 - @grgrnkooSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of making my first project with remote JSON data. But I'll definitely will finish all the CSS media queries before even starting JS next time.
Left those as a last part of project and turned out that I need few more divs to make a look-a-like design as in the task. But adding those divs ruined the whole JS script
So I decided to leave few strings as it is because I understand how to apply it easily while making a project from the beginning. But from this point it'll take few unnecessary hours
What challenges did you encounter, and how did you overcome them?Researching on Promises and fetch()
What specific areas of your project would you like help with?Nothing, just an honest review. Maybe I skipped smth
@induwara-thisarinduPosted 5 months agoWow this looks super good.
It is responsive on every screen nice job 🎉
1 - @Caelus111Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of the email validation that implemented, it's not perfect but it's working okay for now, maybe later will take more time to make it better.
What challenges did you encounter, and how did you overcome them?the validation was kinda tricky at first but with little search and thinking, I got it but not as perfect as I want it.
What specific areas of your project would you like help with?I would love how to make my js more readable, so I can write with the normes and convention to write when working professionally or with clients
@induwara-thisarinduPosted 5 months agoHi, your solution looks super good. I wish mine was that way. I can't really notcie any mistakes from my inexperienced eye but I could suggest emptying the email.value field when the success card button is pressed here's how I did it
dismissButton.addEventListener('click', (e) => { containerCard.classList.remove('display'); successCard.classList.remove("display-show"); emailEl.value = ''; })Hope I was some kind of help 😊
Marked as helpful1 - @medic-codeSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Getting the design mostly accurate. i think i would've probably done less on getting the inbetween sizes working correctly and sticked to the desktop and mobile view only.
What challenges did you encounter, and how did you overcome them?Whilst i was able to get the desktop and mobile versions to the design, inbetween sizes of height were incredibly difficult to figure out how to fix the overflowing top part of the card. It looked like the flexbox was actually causing this problem and was unable to find a solution to center the card without, despite thinking about floats or using auto margin.
Additionally getting the padding between the bullet point and the text in the list was really challenging, solutions made to seem this was relatively easy but nothing seemed to work, using ::marker, using ul or li padding/margin. Not quite sure why!
What specific areas of your project would you like help with?Better responsiveness on intermediate desktop sizes, the card overflows on my own laptop for example.
A better way to add padding on the bullet point lists.
@induwara-thisarinduPosted 5 months agoHi good job on the submission first of all I want to say I am no expert so I will help as I can. In your css I noticed that you have written this,
h1,h2,h3,p,div,img,section,article,main,ol,li,ul { margin: 0; padding: 0; }I believe it will be better if you do it like this,
*{ margin: 0; padding: 0; }I believe It is much more easier to write and time saving.
Also, I think adding a height to body is what is causing the problem try removing that line and see I think the image will be visible in every screen
html,body { height: 100%; margin: 0; padding: 0; overflow: auto; }The problem is that you are adding an overflow to both html and body maybe just add it to body like this
body { overflow: auto; /* Ensure content is scrollable if necessary */ }That's all I have to say Hope this helps 😊🎉
0 - @rohantayalSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I most proud of writing a cleaner code even after writing a code that functioned correctly.
What challenges did you encounter, and how did you overcome them?I faced a challenge creating the active state, which ended up taking longer than expected.
What specific areas of your project would you like help with?HTML accesibility: While w3c validator says no issue, frontendmentor's validator does show some.
CSS: I utilized absolute positioning for the active state in my desktop design. Is there an alternative method to solve this issue?
@induwara-thisarinduPosted 5 months agoWoah! awesome job. I recently tried this and even though I did my best I can't even compare to this good job It's so clean If you don't mind I would like some help on the mobile design as to how you approached it. Thanks and again awesome job 🎉
0 - @hmousavinSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Getting skilled in CSS Grid .. The previous project is quite a challenge, but this, is not!
What challenges did you encounter, and how did you overcome them?Every thing goes smoothly .. Almost no challenge exists.
What specific areas of your project would you like help with?nothing.
@induwara-thisarinduPosted 5 months agoWow! good job Glad to see someone learning css grid like me. Since I am no expert or have that much experience I can't give you a good review but I can say what I see. In your mobile design there's a large bottom padding from the review text maybe lower the bottom padding. That's all I could see and your code see much readable than mine so Nice job
Marked as helpful1 - @ShymaaRagabSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
@induwara-thisarinduPosted 5 months agoHey that looks neat! I can't really give much of a review as I am a beginner myself but I think since you have only added one media-query that is 360px, it is not really responsive on anything above 360px and under 950px. So maybe you can add more media-queries's in my case I only too added two but my media query was higher than yours not best practice I know he he anyway Nice job. I got some ideas while looking at your code so thanks! 👋😊
Marked as helpful1 - @porumbachanovSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I'm sure there's a way to make this without media queries, so probably try that next time.
What challenges did you encounter, and how did you overcome them?It was pretty straight forward.
What specific areas of your project would you like help with?Tips on how to do this without media queries.
@induwara-thisarinduPosted 5 months agoHey! I am not writing a review but asking for help your design look so good I want to know how you like decide the exact width of the card design your answer looks so simillar to the design while mine is bigger than the design
my solution - https://www.frontendmentor.io/solutions/product-component-preview-card-with-html-and-css-J8huNkNmOz
sorry If I bothered you
1
