Skip to content
OverviewSolutions
26
Comments
41
Kehinde
@jonathan401

All comments

  • Kehinde•680
    @jonathan401

    Congratulations @Karol on completing this challenge 🎉🎉. The solution looks great on my mobile device. I hope everything works out fine with you too.

  • Kehinde•680
    @jonathan401

    Congratulations on completing this challenge 🎊🎊. I don't have any suggestions. You really a great job 🎉. I REALLY love your html structure 💪🏾. Good job!.

  • Kehinde•680
    @jonathan401

    Congratulations on completing this challenge 🎊🎊. Well a few suggestions:

    1. Let the div with class container be a main element instead.
    2. There should only be a h1 element per page. So you make the other h1 a h2 instead.
    3. It's important that you don't write content in all caps in the html. You should change PERFUME to Perfume and then use the CSS text-transform: uppercase; in the CSS to make it all caps.
    4. To remove that space from the image, you should add a picture element that can be used to render different images for different screen sizes. You could check out my solution here and if you're still not clear, you could reach out. Hope the little suggestions helped.

    Once again, congratulations on completing this challenge 🎊🎊.

  • Kehinde•680
    @jonathan401

    A wonderful solution 🎊🎊. This is my first time hearing about npoint.io. I'll try using it in my solution to this challenge. Love the extra features ❤️❤️

  • Kehinde•680
    @jonathan401

    Wonderful solution as always 🎉🎉. Just curious though, how do you match the design exactly. It's always eluded me 😅. I'll like to make my solution match the design but since I'm a free subscriber, it's really hard achieving that 😅. Any tips on how I could match the mobile and desktop design 'perfectly'?

  • Kehinde•680
    @jonathan401

    Congratulations on completing this challenge 🎊🎊. Honestly I was waiting for you to submit your solution since mine is taking me longer than I expect 😅. Wonder solution as always. I have a few suggestions though from what I observed from the live site.

    1. When you click the reply button, it continues showing the comment box repeatedly, maybe consider making sure it only appears once when the user clicks it 🤔.
    2. When you click the reply button and the reply box (or comment box) shows up with the @usermame, the user can just clear out the content and reply and the card no longer has the @username. I don't know if you understand me though.

    Those are mainly the two observations I have. Hopefully you understand me because I find it hard to really express myself. Congratulations on completing this challenge 🎊🎊. Happy Coding 💪🏾. I really look forward to your solutions 💫💫.

    Marked as helpful
  • Kehinde•680
    @jonathan401

    Hey @IliaIvashkevich 👋🏽. Congratulations on completing this challenge. To answer your question, you could use two approach to change the background to cyan.

    1. In your html, you could make the div element with class img an overlay, give it a background colour of cyan and when the div is hovered, show the background colour. or
    2. You could use the ::before or :: after pseudo element to create an overlay for the image. I don't know if the above is enough without using a code example though 😆.

    And also,.you could try checking out the accessibility reports to you solution. You could try wrapping the whole elements in a main element. That is <main>{the rest of your html code}</main>. So you should change that <div class="container"> to main.

    You could checkout this freecodecamp article on semantic html.

    Hope you got at least something from this feedback.

  • Kehinde•680
    @jonathan401

    Hey 👋🏽. Congratulations on completing this challenge 🎊🎊. Well I didn't check out your code but I have a suggestion based on the live site. Maybe you should consider the social media links of the searched user clickable. What I mean is that I should be able to go the user's Twitter profile of available for example.

    That's all.

    Happy coding.

    Marked as helpful
  • Kehinde•680
    @jonathan401

    Congratulations!. This is a beautiful solution!. I just have one suggestion though. Is there a way for you to make the steps at the left side of the solution clickable? So that whenever a user wants to visit a step that user can just click on those steps. I don't know how I could explain this clearly enough :). But I think it'll be nice if you could implement it. I'll also try to implement it when working out the next solution. But really, this was a beautiful solution. Haven't gotten the time to check your code but I would do that when I complete this solution myself :D. Keep up the good work :D

    Marked as helpful
  • Kehinde•680
    @jonathan401

    Wonderful solution 🎉🎉. I really love your solutions. I have an observation. In the about page, where a user clicks on the plus icon to reveal the information about a particular team member, I noticed the transition was not that smooth and it took quite a while. That's the only thing I noticed. Other than that, your solution is amazing 🎊🎊

    Marked as helpful
  • Kehinde•680
    @jonathan401

    Beautiful solution as always 💫. I noticed you used the CSS clamp function. How does it really work? I mean I've used it before but really didn't understand how it works. Is there any tutorial you could point me to

  • Kehinde•680
    @jonathan401

    Nice work on this challenge 🎉🎉. Sorry again I had to ask, when I looked at your package.json file, I noticed you used Babel and gulp. Could you point me to any resource that teaches how to use Babel and gulp. Because I want to make my next challenge backwards compatible too (i.e the JavaScript).

  • Kehinde•680
    @jonathan401

    This is a really beautiful. I live your solution 💫. I took a look at your scss and I must confess, I was blown away 🚀. Could you suggest any resource to learn scss. If you could provide me with the one you used to learn scss, I'd be really grateful ☺️

  • Kehinde•680
    @jonathan401

    Hey @echoturnbull 👋🏽. Congratulations on completing this challenge 🎉. You did good 👍🏾. A few things to note: html

    • Your html document shouldn't contain more than one body element. So you should remove the body tag surrounding your h1 element.
    • There is really no need for you to wrap your h1, p tags in extra divs or other wrappers. Since this challenge only contains an image, h1 and p elements. Doing this will make your html a little bit more neat, and you don't have to write a whole lot of CSS. But the method you used is also perfectly fine since you could practice using classes 💪🏾.

    CSS To center the container, you have to give a min-height property to the body element because by default, block level elements have a height of 0 and only take the height of their children. The style definition for the body element becomes:

    min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;

    And any other style you want to give the body.

    • To make your image more responsive, there is no need to set a height and width property to it. This could cause layout issues later on. So the style definition for the image becomes:
    display: block;
width: 100%;
object-fit: cover;

    Should be enough.

    • remove the margin: 0 auto 0 auto; from the main selector. The display: flex you added to the body selector will center the main element horizontally and vertically.

    • Avoid using absolute values like px to for defining size or padding of elements. This could cause issues with accessibility.

    • There is no need to set width to h1 and p tags, the text-align: center; property you added to the body element would make sure that the elements are centered horizontally.

    Sorry that got too long. You did really good 💪🏾. Once again, congrats on completing this challenge 🎉🎉

    Marked as helpful
  • Kehinde•680
    @jonathan401

    Hey there @jccaychop your solution looks great 😇. I didn't look at your code because I've not started this challenge but I have a suggestion, I'm guessing you used an input of type text for the card number input field but since this is field is expected to only receive numbers you could consider changing it's type to number this in itself will provide a form of validation and will reduce the code you need to write to validate that field. As I said I only provided this feedback by just checking out your solution ☺️. Feel free to correct me if I'm wrong 😁.

    Once again congrats on completing this challenge 🎉🎉.

    Marked as helpful
  • Kehinde•680
    @jonathan401

    Hey there @winprn 👋🏽 congrats on completing this challenge 🎉🎉🎉. You did really well. Just a few things from me 😄.

    1. This isn't really a feedback but you should consider checking out the report on your solution. This has help me a lot 💪🏿. For example, you should wrap your whole card in main element.
    2. You could consider changing the .card-title which is currently a p element to an h1 element. This is because it is required that every page contains at least one h1 element for easily navigation of the page by other users who may have some disabilities.
    3. When I checked out your solution on my mobile phone, the card was stretched over the screen. To fix this, instead of adding a definite to the card, you could consider giving a max-width style rule to the card instead of a width to the card. This will make sure that the card easily 'contracts' on mobile screens and then on larger screens you remove this max-width and adding a definite width of 37.5rem (which you defined in your CSS for larger screens). That is all from me 😄. Once again nice work 👏🏾. Happy Coding 🎉
    Marked as helpful
  • Kehinde•680
    @jonathan401

    Congrats on completing this challenge @maria-jose :). You did a really good job :). Just a few suggestions though.

    1. To fix your accessiblity issues you should wrap you whole card component in a main tag.

    2. Also, it is a good practice as well as required by the WCAG guide that every page should contain one h1 element. This provides a good way for users that with disablities like coordinative abilities or users that find it hard to see to easily navigate your site (or your page).

    3. This is a small project so this might much be very important but you should consider adding classes to your html elements. This will make it easier for you to style the elements when you're working on a large project in the future. For example, when you have a lot of p elements in your page, adding a class to each of these p elements could save you a lot because in you might want to style a p element different from another p element. I hope you get that ;). This article by w3schools might provide better understanding on this concept. Feel free to do more research on this :).

    4. I noticed in your css that you were using absolute units to style your css. This is good in some cases but it leads to your site to break and not responsive. You should consider using relative units like % or rem instead ;). (You don't have to do this though, It depends on what you are building). You could check out this article by freecodecamp.

    I have to apologize for making this so long :). Congrats on completing the challenge :). Happy Coding :D.

    Marked as helpful
  • Kehinde•680
    @jonathan401

    Nice work on this challenge 🎉🎉. I love the dark mode feature you added 😇. Could you point me to any resource (preferably an article) that details how to create dark mode in CSS?