P
@tacesept
Latest solutions
REST Countries API with color theme switcher
#next#typescript#tailwind-cssSubmitted about 2 months agoI'd be happy to receive feedback.
Latest comments
- @Zainabeyy
Hey, I really like the hover animation on the country card. I’m going to implement it on my website.
- P@DHBLeeWhat are you most proud of, and what would you do differently next time?
Proud that I was able to finish this website
What challenges did you encounter, and how did you overcome them?The masonry layout. I tried using tailwindcss for it, but it ended up in using CSS still. I had to check the code of other masonry layout for me to work as it is really hard.
What specific areas of your project would you like help with?Any feedback is appreciated, thanks!
@ZainabeyyGreat work. I am also starting to think about making this website by myself.
- @divine011What are you most proud of, and what would you do differently next time?
I’m really happy with how I matched the design using just HTML and CSS. Getting the layout right and making it look good on different screen sizes felt like a win. I also managed to add the Google Fonts and keep the images optimized so the page loads quickly.
Next time, I’d focus more on making the project easier for everyone to use by improving accessibility. I’d also try using CSS Grid instead of Flexbox to see if it makes the code cleaner. And I’d like to set up automatic deployment so I don’t have to do it manually every time.
What challenges did you encounter, and how did you overcome them?One challenge was figuring out how to get the Google Fonts to load properly. At first, the font didn’t show up on my live site because I hadn’t imported it correctly in my CSS. I fixed this by double-checking the import link and making sure it was at the very top of my stylesheet.
Another challenge was making sure the QR code image stayed sharp and centered on different screen sizes. I had to tweak my CSS a few times using Flexbox and margins until it looked right on both mobile and desktop.
What specific areas of your project would you like help with?I’d appreciate feedback on how I structured my CSS. I want to ensure my layout is clean and efficient.
Also, if there are ways to improve my HTML for better accessibility, I’d love some advice on that.
Finally, any tips on optimizing image loading or enhancing page performance would be greatly appreciated.
@ZainabeyyGood work
- @matheuswemersonWhat are you most proud of, and what would you do differently next time?
I'm pride of the way I structured my HTML, but next time I'll try a different way to style it.
What challenges did you encounter, and how did you overcome them?The entire challenge was difficult for me as I am just starting in the frontend area. It was particularly challenging to begin the project and find a clear direction, since I had never done anything like this before. To overcome these obstacles, I conducted a lot of research and explored other people's solutions, which helped me get started and guided me through the process.
What specific areas of your project would you like help with?I would really appreciate feedback on the way I styled the project. I found it very challenging, and unfortunately, I had to rely on AI quite a bit (I'm sorry!). However, I did my best to adjust things and improve them, so at least 70% of the work was mine, haha! If you have any positive feedback or suggestions that could help me create more websites and layouts using Flexbox, as well as effectively styling elements like
main,header,nav, andfooter, I would greatly appreciate it.@ZainabeyyHey, you did a really good job!
First, you don’t need to wrap
img,h1,h2,ul, orptags in additionaldivelements — you can apply styling directly to them. Also, you don’t need to assign separate class names to each list item unless it’s necessary. - @Dadir-DevWhat are you most proud of, and what would you do differently next time?
I am proud that I learned how to use Github and version control system.
What challenges did you encounter, and how did you overcome them?Learning Github in order to submit this challenge has been more challenging than the challenge itself.
What specific areas of your project would you like help with?Feel free to give to your feedback.
@ZainabeyyVery good! Your styling is really nice. You can also use
remfor the font size. - @Gian012zWhat are you most proud of, and what would you do differently next time?
I'm proud of how accurate it looks and how little time it took me to make it.
What challenges did you encounter, and how did you overcome them?Not many, but I think that at first I had a hard time with the colors and their combinations.
What specific areas of your project would you like help with?I'd like to know what I can improve regarding the code structure, what classes I can avoid or remove, what I missed adding, etc.
@ZainabeyyHey, your code is well written.
For font size, it's best practice to use
reminstead ofpx. Also, if you set the max-width to 100vw instead of 100%, and the min-height to 100vh, and apply theflex,items-center, andjustify-centerclasses, it will center the card both vertically and horizontally.It's also better to provide
alttext for images rather than leaving it empty.
