All comments

• 

  MhBbid• 60

  @MhBbid

  Submitted 10 months ago

  Some of the code is a bit messy, but I'm proud of this nonetheless. Would love to hear suggestions about best practices, bug fixes and the likes, but any feedback is appreciated.

  

  Animated Well Polished Rest API Countries Viewer

  1

  50

  

  Muhammad Amoo• 220

  @DruxAMB

  Posted 10 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
• 

  D4rkpage• 210

  @D4rkpage

  Submitted 10 months ago

  

  List of Countries fetched from API

  1

  30

  

  Muhammad Amoo• 220

  @DruxAMB

  Posted 10 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
• 

  Wagner Morais• 230

  @wagnnermorais

  Submitted 10 months ago

  would love some feedback

  

  React REST Countries API

  1

  71

  

  Muhammad Amoo• 220

  @DruxAMB

  Posted 10 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

  This comment has received 1 replyShow
• 

  ecaleb97• 230

  @ecaleb97

  Submitted 10 months ago

  

  REST Countries API using React

  1

  10

  

  Muhammad Amoo• 220

  @DruxAMB

  Posted 10 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

  This comment has received 1 replyShow
• 

  Alfredo Fernandez• 350

  @addier94

  Submitted 10 months ago

  

  Countries

  1

  10

  

  Muhammad Amoo• 220

  @DruxAMB

  Posted 10 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
• 

  Julius Blezinger• 180

  @JBlezi

  Submitted 10 months ago

  Very fun project, surprisingly easy to work with react router and the rest countries api once setup correctly. Darkmode via Tailwind is also very intuitive. I had a lot of fun doing this project :)

  Feedback is Welcome!

  

  Rest Countries API with Dark Mode & React Router

  1

  40

  

  Muhammad Amoo• 220

  @DruxAMB

  Posted 10 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

  This comment has received 1 replyShow
• 

  P

  Shane Chaffe• 900

  @Chaffexd

  Submitted 10 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

  40

  

  Muhammad Amoo• 220

  @DruxAMB

  Posted 10 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

  @CodePapa360

  Submitted 10 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

  50

  

  Muhammad Amoo• 220

  @DruxAMB

  Posted 10 months ago

  Great Job man

  1

  This comment has received 2 repliesShow
• 

  Roraima Lugo González• 510

  @roraima1986

  Submitted 10 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

  50

  

  Muhammad Amoo• 220

  @DruxAMB

  Posted 10 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

  This comment has received 1 replyShow
• 

  snhase• 200

  @snhase

  Submitted 10 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

  60

  

  Muhammad Amoo• 220

  @DruxAMB

  Posted 10 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

  This comment has received 2 repliesShow
• 

  Kendrick• 50

  @KendrickAng

  Submitted 10 months ago

  

  Order Summary Component with CSS Grid

  1

  60

  

  Muhammad Amoo• 220

  @DruxAMB

  Posted 10 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
• 

  Nazar Holubovskyy• 190

  @HA3IK

  Submitted 10 months ago

  Details at "View code" link.

  Welcome to discuss 🤓💡

  

  fep: responsive, semantic, css grid, sass, custom props

  1

  60

  

  Muhammad Amoo• 220

  @DruxAMB

  Posted 10 months ago

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

  0