Skip to content
OverviewSolutions
45
Comments
632
Kamasah-Dickson
@Kamasah-Dickson

All comments

  • Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted over 1 year ago

    Hey @sgrazys i checked your solution. it looks great and responsive. but on mobile devices the cards looks a bit small and there is so much white spaces on the left and right. try to increase the max-width of the cards. by the way great job.👏👏

    0
  • Brijeshkumar Patel•200
    @brijeshkumar001Submitted over 1 year ago

    Hi I’m Brijeshkumar and this is my solution for this challenge.

    Any suggestions on how I can improve and reduce unnecessary code are welcome!

    Thank you. 😊

    Stats preview card component

    1
    Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted over 1 year ago

    Hello there, you are really doing a great there but these are a few things that I noticed .

    1. I realized your card is not responsive. use a max-width property instead of just width. the width property on the main behaves like a block element which may cause overflows sometimes.
    2. I noticed you are using floats to layout your card which makes it unresponsive. Avoid using floats. always use responsive layout systems like flexbox and grid.
    3. You missed some of the background properties like the background-position

    I think you did a really great job.🔥 Happy coding🚀

    0
  • Scott Tabor•150
    @scottttaborSubmitted over 1 year ago

    I used Javascript to be able to change the source of the image instead of HTML srcset. I just wanted the practice of using javascript on a project! Id love any feedback on the format of my code, how I wrote my javascript code and included it in my HTML. My only question is that the product card is responsive in all the mobile options except when it goes below a width of 375px there seems to be some white space that shows below the main background. Any tips for why that is happening would be appreciated.

    Product Preview Card - Mobile First, Javascript, and Flexbox

    2
    Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted over 1 year ago

    @scott Tabor you did I really great job. your solution was very responsive as well. But one of the things you forgot to add was the type attribute for your button. some of the importance are.

    1. It helps to define the role and behavior of the button for users and assistive technologies.
    2. Providing a type for your buttons also helps improve the accessibility of your website.
    3. The type also determines if the button is a submit,reset or just a button.

    I hope this was helpful. Happy coding🔥

    Marked as helpful
    1
  • Kamasah-Dickson•5,590
    @Kamasah-DicksonSubmitted almost 2 years ago

    Hello guys am finally here with another solution. This time I tried my hands with React and I think It is a better Framework so am staying with React for a while. I feel a bit intimidated with React but since am a beginner but feel free as always and show your opinion. Happy Coding :)

    Responsive Interactive payment UI made with React and Sass

    1
    Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted almost 2 years ago

    Am finding it hard to fix the accessibility issues with react...should I run npm run dev or what. any idea??

    0
  • LorenaFrias•80
    @LorenaFriasSubmitted about 2 years ago

    This was more challenging than I thought it would be. I don't fully understand grid yet. Working on it. I always end up feeling my code could've been cleaner. Also, first attempt to implement BEM. I haven't grasped it yet. :) Feel free to comment!

    3-column-card BEM

    2
    Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted about 2 years ago

    Your solution looks great and to help you with the accessibility issue 1.There should always be an h1 in your projects. It should be the first head tag you use. And should reduce in descending order. h1....h6

    Happy coding🎉

    1
  • Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted about 2 years ago

    Your solution looks great but i want to help you with some small tips.

    1 . Do not specify any height in the grid items. This sometimes breaks layout and might stress you some other time when things are not working as expected. Instead allow the items to determine their own height. What i mean is that paddings and margins applied to the grid items will automatically determine the heights of the grid items. I hope you get me.

    2 . To help you with the accessibility issues, remove the attribution class and change the div to a footer

    Do not use a section tag if there won't be any direct head tag I mean h1....h6 always use a section tag if there would be a directed head tag in your page otherwise use a div instead.

    Good job there👍🎉 Happy coding

    Marked as helpful
    1
  • darryncodes•6,370
    @darryncodesSubmitted about 2 years ago

    Hi everyone 👋

    A fun project to get back in the saddle after taking the summer out to avoid burnout. I wanted to try Tailwind CSS to see what all the utility-first CSS hype is about. Very intrigued to see how it might scale in a larger React app.

    I added a mobile navigation and some JS client-side form validation.

    Any feedback that could help me to improve would be very welcome!

    Happy coding 🤙

    Fylo dark theme landing page - HTML, Tailwind CSS & JavaScript

    1
    Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted about 2 years ago

    hi there🖐 your solution looks very great and responsive but one thing is that the background-color of the feature section is not set. it should be different from the actual body background-color which I know you noticed too. But also one thing again is that the svg is just above the feature section...kinda before. it just blends with the background-color of the feature section. besides, Great job there👍

    Happy coding🔥🔥

    1
  • Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted about 2 years ago

    But next time your close button should be in the same div of the nav-links

    E.g

    `` 1. <button>btn</button>

    1. <li> links</li>
    2. <li> links</li>
    3. <li> links</li> ``

    This prevent the close button from scrolling outside of view.

    besides you did really great👍

    0
  • Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted about 2 years ago

    Hi there👍 you did great on your solution but i suggest.

    1. You use a max-width on the parent container of about 700px...you decide. The widths are spanning the whole screen that is why you need a max-width.

    2. Use margin-inline:auto or margin:0 auto to center it in case you use the max-width.

    3. To help with the accessibility issue, the should be a level one heading which is an h1 in your solution.

    4. Also there should be a semantic tag in your solution such a main, aside and section. In your case I suggest you use the main to wrap your solution or change the div of the parent element into main

    Good job and happy coding👍

    1
  • Leticia Fernandes•50
    @lichtleSubmitted about 2 years ago

    This is my second attempt on this challenge. This time I used the grid display (instead of flexbox) and improved the responsive aspect. If you want to check my previous solution, it's on my GitHub portfolio. Thanks!

    Responsive Product preview card component

    1
    Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted about 2 years ago

    Hi there👍..You really did a very great job. And I like the fact that you came up with the solution in your own style with the colors and everything.....also the fact that you were able to decide on the best layout tool for this solution which is grid. It takes people a lot of time to know or notice the best layout tool for their solution. Since this is your second attempt I know for sure, you now have an idea about the best layout tool to use at the appropriate place.

    Happy coding 👍

    1
  • Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted about 2 years ago

    Hi there👍...I think you really did a great Job there..keep it up.. 👍

    1. On the navigation on mobile, the height is not covering the entire vertical screen on mobile when opened. always use 100vh which is 100% a devices viewport height instead of just using height:100%.

    Besides you did a very great job.👍 Happy Coding👍

    0
  • faizan alam•30
    @faizan619Submitted about 2 years ago

    do say me how is my design I have not worked for responsive now..will try to implement next time.

    news channel website

    1
    Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted about 2 years ago

    Hi there👍 you really did great. keep it up but these are some tips you can use next time.

    1. Don't use units such as px and percentages for parent containers but instead I recommend rem units for font sizes and widths and em units for paddings. I don't recommend px units because they cause a lot of problems when people zoom in their browsers and there are a lot of reasons. You can learn more about units at YouTube. Check Kevin Powell and coder coder

    2. Also I would really recommend that you take your time and learn flexbox and grid into more details don't rush take your time and believe in the process.

    Besides you really did a very great job👍 Happy coding👍

    Marked as helpful
    2