Skip to content
OverviewSolutions
9
Comments
17
Muhammad Amoo
@DruxAMB

All comments

  • Muhammad Amoo•220
    @DruxAMBPosted 12 months ago

    Your project is amazing man but one of the purpose of using frontend mentor is to build a project that look like that of frontend mentor design.

    Hope this was helpful?

    Happy Coding: DruxAMB

    0
  • Muhammad Amoo•220
    @DruxAMBPosted 12 months ago

    You did great man, but you need to give your card-image a default height so as the images hight to match and prevent overflow.

    Hope this was helpful?

    Happy Coding: DruxAMB

    0
  • Muhammad Amoo•220
    @DruxAMBPosted 12 months ago

    Well done man, you did really great on the challenge. You need to change the styling of the card items so that it will display 4 countries on each column as shown in the default design. Here is a reference from my project. <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"> {filterApi.map((mapping) =>{ const {numericCode, flags, name, population, region, capital} = mapping; return ( <div key={numericCode} className="card overflow-hidden w-64 rounded-lg shadow-lg hover:shadow-xl mb-10 cursor-pointer m-auto"> <img src={flags.png} className="w-64 h-36" alt="DruxAMB png" /> <div className="p-3 mt-2 mb-5"> <div className="font-black text-md my-2 text-start">{name.common}</div> <div className="flex text-sm font-semibold">Population: <p className="font-extralight ml-1">{population }</p></div> <div className="flex text-sm font-semibold">Region: <p className="font-extralight ml-1">{region}</p></div> <div className="flex text-sm font-semibold">Capital: <p className="font-extralight ml-1">{capital}</p></div> </div> </div>

    Using something like this will help you <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">

    Hope this was helpful*?

    Happy Coding!!: DruxAMB

    Marked as helpful
    0
  • Muhammad Amoo•220
    @DruxAMBPosted 12 months ago

    Well done man, you did really well on the project. You need to change the styling of the card items so that it will display 4 countries on each column as shown in the default design. Here is a reference from my project. <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"> {filterApi.map((mapping) =>{ const {numericCode, flags, name, population, region, capital} = mapping; return ( <div key={numericCode} className="card overflow-hidden w-64 rounded-lg shadow-lg hover:shadow-xl mb-10 cursor-pointer m-auto"> <img src={flags.png} className="w-64 h-36" alt="DruxAMB png" /> <div className="p-3 mt-2 mb-5"> <div className="font-black text-md my-2 text-start">{name.common}</div> <div className="flex text-sm font-semibold">Population: <p className="font-extralight ml-1">{population }</p></div> <div className="flex text-sm font-semibold">Region: <p className="font-extralight ml-1">{region}</p></div> <div className="flex text-sm font-semibold">Capital: <p className="font-extralight ml-1">{capital}</p></div> </div> </div>

    Using something like this will help you <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">

    Hope this was helpful*?

    Happy Coding!!: DruxAMB

    0
  • Muhammad Amoo•220
    @DruxAMBPosted 12 months ago

    Well done dev, you did really great on this project. You need to change the styling of the card items so that it will display 4 countries on each column as shown in the default design. Here is a reference from my project. <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"> {filterApi.map((mapping) =>{ const {numericCode, flags, name, population, region, capital} = mapping; return ( <div key={numericCode} className="card overflow-hidden w-64 rounded-lg shadow-lg hover:shadow-xl mb-10 cursor-pointer m-auto"> <img src={flags.png} className="w-64 h-36" alt="DruxAMB png" /> <div className="p-3 mt-2 mb-5"> <div className="font-black text-md my-2 text-start">{name.common}</div> <div className="flex text-sm font-semibold">Population: <p className="font-extralight ml-1">{population }</p></div> <div className="flex text-sm font-semibold">Region: <p className="font-extralight ml-1">{region}</p></div> <div className="flex text-sm font-semibold">Capital: <p className="font-extralight ml-1">{capital}</p></div> </div> </div>

    Using something like this will help you <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">

    Hope this was helpful*?

    Happy Coding!!: DruxAMB

    0
  • Muhammad Amoo•220
    @DruxAMBPosted 12 months ago

    Well done man, you did really great on this project. You need to change the styling of the card items so that it will display 4 countries on each column as shown in the default design. Here is a reference from my project. <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2"> {filterApi.map((mapping) =>{ const {numericCode, flags, name, population, region, capital} = mapping; return ( <div key={numericCode} className="card overflow-hidden w-64 rounded-lg shadow-lg hover:shadow-xl mb-10 cursor-pointer m-auto"> <img src={flags.png} className="w-64 h-36" alt="DruxAMB png" /> <div className="p-3 mt-2 mb-5"> <div className="font-black text-md my-2 text-start">{name.common}</div> <div className="flex text-sm font-semibold">Population: <p className="font-extralight ml-1">{population }</p></div> <div className="flex text-sm font-semibold">Region: <p className="font-extralight ml-1">{region}</p></div> <div className="flex text-sm font-semibold">Capital: <p className="font-extralight ml-1">{capital}</p></div> </div> </div>

    Using something like this will help you <div className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">

    Hope this was helpful*?

    Happy Coding!!: DruxAMB

    0
  • Shane Chaffe•900
    @ChaffexdSubmitted 12 months ago

    Conquered my first challenge using TypeScript, Tailwind CSS, and React. Embraced TypeScript's clarity, streamlined with Tailwind's utility classes, and leveraged React's power for a dynamic and scalable project.

    Feedback welcome!

    Frontend Quiz

    1
    Muhammad Amoo•220
    @DruxAMBPosted 12 months ago

    You did great man but you didn't add light and dark theme feature to your project. Please let me know if you I should on you on that or we could collaborate together on this project.

    I'm awaiting your feedback.

    0
  • Alamin•2,000
    @CodeWithAlaminSubmitted 12 months ago

    Initially, I used Tailwind CSS for styling, but faced challenges with dynamic backgrounds. So, I switched to styled-components, and now, dynamic background images based on routes are a breeze!😊

    Check it out, and I welcome any feedback. 🚀✨

    Tech Stack🏗️

    • React
    • React router
    • Styled components
    • Vite

    Space Tourism website w/ ReactJs 🚀

    1
    Muhammad Amoo•220
    @DruxAMBPosted 12 months ago

    Great Job man

    1
  • Roraima Lugo González•510
    @roraima1986Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    sin comentarios

    What challenges did you encounter, and how did you overcome them?

    sin comentarios

    What specific areas of your project would you like help with?

    sin comentarios

    Article preview component using Angular

    2
    Muhammad Amoo•220
    @DruxAMBPosted 12 months ago

    Hi Rorsima, Congratulations you finished the challenge!!! Just one recommendation that might help you with your projects.

    You can use a utility class to center you content in the middle and prevent that stretch all away the viewport width. In your css file

    .container { widht: 90%; // in small screens it will take the 90% of the viewport width max-width: 1100px; // in big screens won't grow more than 1100px viewport width margin-inline: auto; //margin left and right will center you content } In you html

       <main class="main-section">
      content
  </main>
</div>```

Hope this help you!

***DruxAMB***
    Marked as helpful
    0
  • snhase•200
    @snhaseSubmitted 12 months ago

    Hello community members,

    I just finished my first challenge - multi-step form. Please help review, any feedback is greatly appreciated ! :)

    I had some difficulty making the site responsive. I started with desktop design and then added the mobile design using media queries but had to do a lot of changes to the css file to make both work well. Looked up some best practices, and the mobile first approach is recommended, so I will focus on it for future development.

    Question for community, what is is best way to decide on breakpoints for different screens? For this project I chose only two mobile and desktop but feel like this project needs a tablet screen breakpoint as well. Any suggestions/or recommended best practices for choosing breakpoints?

    Thanks, snhase

    Multi-step form using React

    1
    Muhammad Amoo•220
    @DruxAMBPosted 12 months ago

    It will be preferable and much more easier if you use CSS frame works for your project e.g Bootstrapcss, Tailwindcss or Material UI.

    Bootstrap 5 official website

    Tailwindcss official website

    Just read their documentations and you're all good to go.

    You won't have problem with breakpoints using this frameworks.

    I hope this was helpful ?

    DruxAMB

    Marked as helpful
    0
  • Muhammad Amoo•220
    @DruxAMBPosted 12 months ago

    You did excellently well but try increasing the size (Height & Width) of your solution so as to match that of the design.

    0
  • Muhammad Amoo•220
    @DruxAMBPosted 12 months ago

    Nice using Sass for this project, looking forward to start implementing Sass in my projects.

    0