Hello, Frontend Mentor community! This is my solution to the Crowdfunding product page.
I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
Hey Catherine, this is a really nice work. What I would like to know is how you make the transition between different media queries stay the same. It's one thing I'm having issues with, trying to make my design stay the same when I resize my screen from 1440px down to 768px. Please how do you handle such situations?
Any feedback is appreciated 🙏 🙏
Hello Ahmed! Nice to meet you here. Great job completing this challenge. I bet it was an exciting one to complete. Let me just chip in one or two suggestions based on your accessibility issues:
If you run through my code, most times I've been able to solve issues regarding labels by using the aria-label which creates a descriptive text for screen readers.
You should always have one h1 tag on your page as this is the most important heading tag on your page and it helps too for SEO. Read more about the importance of the h1 tag
I'm super excited because this is my first JavaScript challenge. I've been working on it for days alongside some others, which I'll submit soon. Feel free to check it out. I used CSS Animation to make things smooth between the rating and thank you state, overall operations were smooth. Try moving around the page with the Tab key and tell me what you think.
@grace-snow I know how you like working around a page with keyboard only. Please check out this component where I tried implementing some accessibility features and let me know areas I need to improve on. Thanks!
I seriously don't know where I'm getting these HTML issues from cause I've validated my code elsewhere and it's giving me no issues here. I really hope someone can explain this to me. @mattstuddert
Hey Deola, Nice work completing this challenge!! let me just chip in some suggestions:
border: .2px solid hsl(303, 10%, 53%); this line of code on the main tag wasn't needed for this design.display: flex; flex-direction: column;, so that the star icon and the text can be on top of each other for the mobile design.text-align: left; in the boxes class.I am excited about this project!
I was able to read up on the suggestions given by @laceeder and @didyouseekyng on naming convention. In a way, I tried implementing them. Kindly look through the code and tell me what you think.
Good evening Tee, I see you've done a great job here, the design is really great I have to be very honest with you, I can imagine how long you had to stare at your screen trying to complete this challenge. I see you looked up the BEM naming convention and trust me it made your class naming much much better than it used to be. I see you still had some accessibility issues again, believe me you'll get over it soon with more research.
I'm currently working on a challenge now where I had to work with icons that are clickable, and using the Accessibility inspector with my Firefox developer tools, I encountered this "Links having discernible text" issue, so I used aria-label="Link to my (social media name)" to actually add a descriptive text to the links containing the icons and it actually solved that problem for me. You can check more on that.
What I find difficult while building the project:
The responsiveness. I tried my best not to make my cards look too big bespecially on desktop but I don't know how to go about it.
Which areas of my code am I unsure of:
That will be the responsiveness.
I need documentations on grid. This should go a long way to boost my learning. This is like the first grid project I will do.
I await you helpful feedback please.
Halo!! I'm back again..I see @laceeder has given some helpful feedback already so i'll chip in one or two:
Considering how you name your classes, I believe you can improve that aspect by learning a naming convention. Currently I use the BEM Naming Covention which helps me name classes easily. Surf YouTube for more content. It's worth the time.
I noticed your code was covered with a whole lotta div tags, which doesn't help semantically. That's probably why you have more accessibility issues here compared to the Four-card Feature challenge where you used semantic HTML tags like your main, header and footer. I think this just needs a more conscious effort when writing code for your next challenge.
if I can use flexbox, why do I need to use grid?
What makes grid different from flexbox anyway?
Good morning Tee, I see you have some accessibility issues here, so to help you with that:
You need to include an h1 tag in your html file.
I think you also need to change the attribution div tag to a footer tag. This would also help.
And then to finally answer your question about the difference between flexbox and grid in the way I've come to understand it:
Are the cards completely responsive? What are some of the best ways to center a div horizontally as well as vertically?
Hey bro, How you doing? You've done a great work attempting this challenge.
.cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
I think this gap of 20px is not necessary on the card as a whole, so the card1, card2 and card3 would merge.
I also noticed that on mobile, the cards don't have a margin which I suggest you add.
From what I learnt from a few mentors here on FEM, I think the display:flex, align-items: center, justify-content: center and min-height: 100vh does the centering trick. You can apply it to the body or the card. Just work your way around and see which one works well for your code.
Also learnt from others too that it's not best practice to actually have more than one h1 tag in your code. I do hope you find this helpful. Cheers bro! Anticipating your feedback.
I finished this project today and I tried to correct certain mistakes I made on my last solution regarding accessibility. I had to do the #nomouse challenge working around the Order Summary with just the keyboard. I also added label elements with screen-reader users in mind. I'm trying to fine tune my consciousness on writing code that is accessible to different users. Please feel free to run through my code. I'm open to receiving positive feedback. Thanks!
@samadeen, @Sdann26, @vanzasetia, @Kamasah-Dickson, @FluffyKas, @grace-snow
I know you might be busy with certain things but I would appreciate it if out of your busy schedule you run through my code and help me identify areas I need to strengthen.
I found working with the equilibrium image challenging since I had to change the image color and also display an svg icon at the center of the image. I think this was the most challenging aspect of this FEM challenge. I had to go through pseudo classes and elements. Please go through my code and help me improve my frontend skills. Thanks for your guidance.
@grace-snow, @ApplePieGiraffe please I need your review based on the accessibility side of this challenge.
Hi, all! This is my second pixel-perfect solution to the Frontend Mentor challenge. I have used CSS-grid. In this challenge, I learned so many things about CSS grid which are very useful and important property values such as min-content, max-content, min-max function, and auto-fit.
Well, I had a struggle styling with the dialog template and didn't do well with it. So left it simple. Any suggestions on how we can style that box and how to approach it?
you actually have to tweak the position property for the popup-box, here is a link to the screen shot [Link] (https://ibb.co/gt1BbvJ)
Hi, all! This is my second pixel-perfect solution to the Frontend Mentor challenge. I have used CSS-grid. In this challenge, I learned so many things about CSS grid which are very useful and important property values such as min-content, max-content, min-max function, and auto-fit.
Well, I had a struggle styling with the dialog template and didn't do well with it. So left it simple. Any suggestions on how we can style that box and how to approach it?
Hi, Akshay
Great job done for the desktop size, but the layout is quite off on the mobile, as the popup-box is positioned to the right which is a great fit, but not on mobile, I suggest putting this particular class code inside a media query for desktop. other than that, you've done very well.
.popup-box { padding: 0.8rem 2.3rem; background-color: #fff; position: absolute; top: 0; right: 3.5rem; z-index: 1; border-radius: 1rem; border-bottom-right-radius: 0; }
