Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions11Comments20

All comments

  • 👾 Ekaterine Mitagvaria 👾• 7,640

    @catherineisonline

    Submitted

    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

    Crowdfunding product page

    10

    Kingsley Agu• 285

    @didyouseekyng

    Posted

    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?

    0
  • Kingsley Agu• 285

    @didyouseekyng

    Posted

    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:

    1. 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.

    2. 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

    Marked as helpful

    1
  • Kingsley Agu• 285

    @didyouseekyng

    Submitted

    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!

    Smooth Interactive Rating Component with CSS Animation

    #accessibility#bem#semantic-ui#sass/scss

    2

    Kingsley Agu• 285

    @didyouseekyng

    Posted

    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

    0
  • Kingsley Agu• 285

    @didyouseekyng

    Posted

    Hey Deola, Nice work completing this challenge!! let me just chip in some suggestions:

    1. border: .2px solid hsl(303, 10%, 53%); this line of code on the main tag wasn't needed for this design.
    2. I think on your ratings class, you can use display: flex; flex-direction: column;, so that the star icon and the text can be on top of each other for the mobile design.
    3. The paragraph tag in the boxes class should actually be aligned to the left on the mobile design and desktop design. So I think you can use text-align: left; in the boxes class.
    4. Have you thought about using a naming convention for your classes to make it more understandable? Currently I'm using BEM, you can check this on YouTube. Trust me when I say it makes structuring your code way better and organized.
    • Overall you have done a nice job trying to get through this challenge. Kudos! Keep it up! 🙌🏾

    Marked as helpful

    1
  • Kingsley Agu• 285

    @didyouseekyng

    Posted

    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.

    Marked as helpful

    0
  • Oluwatosin Abigail Daramola• 490

    @Heph-zibah

    Submitted

    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.

    Responsive Testimonial Grid Section using HTML amd CSS Grid

    #accessibility

    2

    Kingsley Agu• 285

    @didyouseekyng

    Posted

    Halo!! I'm back again..I see @laceeder has given some helpful feedback already so i'll chip in one or two:

    1. 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.

    2. 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.

    • Anyway, you've done well completing this challenge, but the aim is to make the next code better! Kudos 🙌

    Marked as helpful

    1
  • Kingsley Agu• 285

    @didyouseekyng

    Posted

    Good morning Tee, I see you have some accessibility issues here, so to help you with that:

    1. You need to include an h1 tag in your html file.

    2. 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:

    • Flexbox can be used for layouts that are one-dimensional, if I'm dealing with a layout that has one row and column, what's the essence of grid? while Grid can be used on layouts that seem two-dimensional, a situation where in a layout you have things stacking on top of each other. I hope this helps, we could talk more about it if there's anything. Overall, It's nice to see you've completed this challenge. Kudos!!

    Marked as helpful

    0
  • Kingsley Agu• 285

    @didyouseekyng

    Posted

    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; }

    1. I think this gap of 20px is not necessary on the card as a whole, so the card1, card2 and card3 would merge.

    2. I also noticed that on mobile, the cards don't have a margin which I suggest you add.

    3. 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.

    4. 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.

    0
  • Kingsley Agu• 285

    @didyouseekyng

    Submitted

    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!

    Mobile-first Order Summary Component Using HTML, Scss, Flexbox

    #accessibility#bem#sass/scss

    6

    Kingsley Agu• 285

    @didyouseekyng

    Posted

    @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.

    1
  • Kingsley Agu• 285

    @didyouseekyng

    Submitted

    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.

    NFT Card Component Using HTML, CSS and SCSS

    #bem#sass/scss

    1

    Kingsley Agu• 285

    @didyouseekyng

    Posted

    @grace-snow, @ApplePieGiraffe please I need your review based on the accessibility side of this challenge.

    0
  • Akshay Meshram• 390

    @akshay63

    Submitted

    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?

    Fylo Storage component using power of CSS grid

    2

    Kingsley Agu• 285

    @didyouseekyng

    Posted

    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)

    0
  • Akshay Meshram• 390

    @akshay63

    Submitted

    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?

    Fylo Storage component using power of CSS grid

    2

    Kingsley Agu• 285

    @didyouseekyng

    Posted

    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; }

    0
  • P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Submitted

    Hello, everybody! 👋

    This is my 30th solution on Frontend Mentor! 🎉 (And my first Guru level challenge submission.) 😎 This was definitely a tricky challenge, but I got to learn and try out many new things! 😀

    I used React and Next.js to build the site, styled-components to style it, Formik (and Yup) to handle the forms in this challenge, and Framer Motion to add some page transitions and animations. 😄

    There were quite a few things I had to learn in order to complete this challenge, and I'm not sure if I did them all correctly. 😥 Looking back, there are a few things I wish I would have differently, but it's a learning experience! 🙂

    If anyone could share some resources on how to manage and organize larger projects like this, I'd really appreciate it! 👍 Lots of resources that I find only focus on specific things (like creating a popup or using certain features of a tool) and not so much how to approach and think about an entire app. 🙃

    If you'd like to learn more about my project, see the README in my Git repo (where I also list a few quirks in my solution).

    Feedback welcome and appreciated! 😊

    Happy coding! 😁

    BTW, click on the sidebar avatar for the attribution.

    Invoice App | React, Next.js, styled-components, Formik, Framer Motion

    #framer-motion#react#styled-components#next

    16

    Kingsley Agu• 285

    @didyouseekyng

    Posted

    Honestly I really admire your work, especially what you do with animations, I'm getting there someday and you're juss motivating me to get there. I love the dark and light theme, well done APG!! Mobile design is pretty solid.

    1
  • Deborah Odion• 10

    @Deborah-Odion

    Submitted

    Hello Community,

    I tried to position the background images to the best of my knowledge, but would be grateful if I am told the best way to go about it, as it actually took me a whole day to get this challenge done.

    Thank you.

    Profile Card using CSS

    1

    Kingsley Agu• 285

    @didyouseekyng

    Posted

    Hey, Debbie... Good morning I actually like how you made your background image fixed, honestly... I struggled with the background positioning, I'm hoping you can help me look at what I did and actually help with the background positioning by creating a pull request on Github. So back to your code, I've gone through it, and this is what I have to say;

    1. I noticed you didn't use the semi-colon here which is something you have to watch out for when there's an error. background-size: 700px, 700px; background-color: hsl(185, 75%, 39%)

    2. It's something I learnt recently but I wouldn't mind if you learn it too, and it's based on naming of classes, I had to learn how to use the BEM naming style in order for me to name classes better, the class names are long but it actually makes it easier for you to work with and for people to understand your code easily. You can try it out and see if it works for you.

    3. Regarding font size units, which is also something I'm guilty of but I'm changing now, You'd have to use rem for font size, like what I do now is that I downloaded an extension in my code editor which converts px to rem. So you could actually do the same.

     <div class="figures">
          <div> 80K </div>
          <div> 803K </div>
          <div> 1.4K </div>
        </div>


         <div class="info">
          <div id="followers"> Followers </div>
          <div id="likes"> Likes </div>
          <div id="photos"> Photos </div>
        </div>

    1. Maybe you didn't need the div with the info class, it could have been inside the div with figures class and then you use display flex on them. I know we can learn from each other, so feel free to look at how I code, tell me what you think, I'll be expecting a positive response.

    2. Before I forget, try to always use the alt attribute with your img tag for accessibility. I've gotten used to this now, you will also have to do the same.

    3. Try to actually limit your usage of the ID selector as you know it is very unique. Try using classes instead.

    0
  • Kingsley Agu• 285

    @didyouseekyng

    Posted

    Hey @Yevgeniy-hup, how you doing? nice to see you submitting your first challenge but I feel there's more to be done especially with your Font Family, and also the spaces inside the box(e.g Padding ). I think the boxes would be better arranged if you possibly used CSS Grid and Flexbox which is going to be useful in your Web Dev career instead of the absolute positioning. We all have to keep improving and I believe you can do it. 👍

    0
  • Kingsley Agu• 285

    @didyouseekyng

    Posted

    I think if you had given the '.down' class a margin, all the boxes would space out accordingly, same thing I did with mine, feel free to check it out. You can also work on the 'border-radius' of your cards and also the 'border-width' so it can match the design. It's nice to complete a challenge, and there's more to come from you. Keep it up. we all need this encouragement. 💯

    0
  • Kingsley Agu• 285

    @didyouseekyng

    Submitted

    This challenge was very useful for me in terms of building my confidence when laying out elements. Please I would like to know if I picked the best approach to aligning the cards and make them re-align down to mobile screen size. Your feedback is very important for my growth. That being said, if you could take a minute to review my work, I would really appreciate it. Thanks so much for your time.

    Mobile First Four Card Feature Section Using HTML and CSS(Flexbox)

    1

    Kingsley Agu• 285

    @didyouseekyng

    Posted

    @grace-snow I would really love a review from you, I love how you mentor people. please do me this favour

    0
  • Kingsley Agu• 285

    @didyouseekyng

    Posted

    Hey, Adding to the great review from @AgataLiberska, I was going to talk about using media queries to work with the mobile design first, and also some things I noticed on the desktop design which I'll list now which you can probably work on:

    • The width of your border top could possibly be reduced. • Adding a margin bottom of about 5px to the image inside the card just to give it a little bit of space at the bottom of the card. • Try using box-shadow on the cards. • Try adjusting the font-weight of the headings (team builder, supervisor e.t.c) inside the card since they're actually bold on desktop.

    I hope this helps you improve, we learn every day of our coding career. 💪🏾

    1
  • Kingsley Agu• 285

    @didyouseekyng

    Posted

    Hey, you've done a pretty good job but I think there's more to be done on the mobile design, especially with your margin. Adding a margin-bottom of about 10px or 15px on your .rating__cards class and also adding a margin-right on your . testimonial-card class might do the trick on mobile. I hope this helps, Let's communicate more and see how it goes for you 😄

    0
  • Kingsley Agu• 285

    @didyouseekyng

    Posted

    It's a nice one, the design is really close from observation, apart from the accessibility issues with the IMG alt attribute, I think it's something you can work on, I still had the same issue with my own challenge also, there's always room for improvement. I still haven't submitted my own testimonial grid section, I'm inspired.

    0