P
@ArafatMridul
P
bouabdelli maroua amira
@amiramiiAll comments
- P@amiramii
very nice and clean work,also love the animation,keep it up!
- @xscapefrommeWhat are you most proud of, and what would you do differently next time?
Proud that I could get the overall layout. Still something I need to get better as I didn't get the mobile responsiveness.
What challenges did you encounter, and how did you overcome them?Grid layout as coming into this didn't know nothing about grid layout and so that learning curve happened during this project. Asking AI while coding it and asking questions helped me get the overall layout. Still don't think its perfect and so many improvements can happen on it.
What specific areas of your project would you like help with?- Grid Layout
- Responsiveness for mobile and overall just need help with that concept with the grid layout.
- How to keep text inside of the cards. -Proper Scaling -Proper Centering -Being more clean in my coding
P@amiramiiHey, u did an amazing job, Here's how u can improve ure code and make it more responsive:
- To add responsiveness use media queries with many breakpoints ,to learn more about media queris check this site media-queries
- for managing grid responsivness better use grid-template-areas and in each breakpoint change the area of each item ,u can learn more about grid-template-areas in this website (web.dev)[https://web.dev/learn/css/grid?continue=https%3A%2F%2Fweb.dev%2Flearn%2Fcss&hl=fr#grid_template_areas] --- Hope u find that helpful! Keep up:)))
- P@barriedirkWhat are you most proud of, and what would you do differently next time?
This challenge was a great opportunity to apply several Angular concepts in a real-world UI context.
I implemented features like:
- Pagination
- Debounced filters
- API data fetching from REST Countries
- Query parameter syncing
- View transitions (limited to Chromium-based browsers)
- Theme switching (dark/light)
I’m proud of how I combined these pieces into a functional, responsive UI.
If I were to do it again, I’d focus more on project structure — experimenting with shared services, interceptors, state management (signals or store).
What challenges did you encounter, and how did you overcome them?I didn’t run into any major problems while working on the challenge, but it gave me a good opportunity to sharpen my Angular workflow. I paid extra attention to UI details and spent some time thinking about how I could improve the overall structure for future projects.
What specific areas of your project would you like help with?I'm open to any feedback, especially around how I could improve the project structure, code organization, or performance. Even small suggestions are appreciated!
REST Countries API with color theme switcher (with Angular 20)
#angular#tailwind-css#typescript#sass/scssP@amiramiiVery impressive work,keep it up:))
- @IfeoluwayemisiP@amiramii
Hey there,good work,u did an amazing work! Here ara some improvements u can make:
- First u should always reset the default css behaviour with this code
*{box-sizing:border-box;margin: 0;padding: 0;}This makes ure css more predictible ,u can learn more why it's better to use border-box rather then the default content-box in this website web.dev put this on top of ure css not in .card - for images always set width:100% and even if u wanna use 90% avoid specifying also the height for the aspect ratio
- to center the content inside the card display it as flex and justify-content:center and align-items:center
- ig the reason why the card isn't centered inside the body is that ure using content-box , if u changed it and still didn't get centerd try to use width:100vw in the body even tho it's not recommended because most of the time a horizontal overflow happen, but play with it and try and learn why not
Hope u find that helpful,Keep up:)))
Marked as helpful - First u should always reset the default css behaviour with this code
- @Mohammed-NedjimaP@amiramii
Hey there ,ure code is well strutured and clean.good job!
- P@Y39WebDeveloperP@amiramii
Hey there.u did a wonderful job!
- for the dialog to allow scrolling u can add in ure
.modal-container{overflow:auto;padding:2rem;}
Hope u find that helpful!
keep up :))
- for the dialog to allow scrolling u can add in ure
- @vivekcoreWhat are you most proud of, and what would you do differently next time?
I am proud of clean design and next time I will more focus on responsiveness and some animations
What challenges did you encounter, and how did you overcome them?I encounter with font it was not configured correctly by my system
What specific areas of your project would you like help with?I would like to help with approach of making that design
P@amiramiiHey, Nice work right there.Here are some tips to improve ure code:
- for the font,instead of using the tailwind.config.js file,in the style.css file add:
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap'); @theme{--default-font-family:'Hanken Grotesk';}and u can use @theme for colors and other custom styles too - Try to break ure code to different components, for example a hero,summary components. Also add a container component and like this u can center it inside the page
- The skill of using many components is very important for debugging and modifying..
- You can also use the data.json file and add a function to render the items and avoid hard coding them
- For more tips, i suggest u check the react official page tutorial it's very helpful https://react.dev/learn/describing-the-ui
Hope you find that helpful,Keep up :)))
- for the font,instead of using the tailwind.config.js file,in the style.css file add:
- @juliengDevWhat are you most proud of, and what would you do differently next time?
just for fun
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?feel free to commment
P@amiramiiGood work, just ure code isn't fully responsive ig the problem is the height ,u shouldn't specify the height,only specify the width and let height be auto keep up:))
- P@amigos81P@amiramii
Great work
- @DANY-DURANDP@amiramii
Hey,good work overall,ure code look clean and well structured.Here are some improvements u can make :
FOR HTML&CSS
- here
grid-template-columns: 1fr 1fr 1fr 1fr;u can directly use the repeat functiongrid-template-columns:repeat(4,1fr); - u need to specify the width of ure conatiner so that 1fr is a fraction of ure container width and not the body width. I saw then u used width:11rem for cards which will overwrite the 1fr
- the card:hover isn't working because transition:opacity 0.3s ease should be placed in .card .component instead of .card .component:hover
- for image only adgust the width and let the height auto for the aspect ratio
- for responsiveness try to use grid and grid-template-areas for this challenge and add more breakpoints
FOR JS
- using document.etc takes a long time cause it's technically seraching in the dom so avoid this
const daily = document.getElementById('daily'); const weekly = document.querySelector('.weekly'); const monthly = document.querySelector('.monthly');and instead use querySelectAll and the use a for or forEach to loop through the resulted array - Using then is a bit outdated ,try to use async and await from now on it's so much simpler and easier cause it's sugar syntax
- avoid redundent code , try to use more functions with parameters for reusable code
Hope u find that helpful! Keep Up:))
Marked as helpful - here
- @utkarsh619vermaP@amiramii
Hey,great job overall! here's some improvements u can make:
for HTML&CSS:
<p><img src="./newsletter-sign-up-with-success-message-main/assets/images/icon-list.svg" alt=""> Product discovery and building what matters </p>here instead of adding img to each element u can simply doli{list-style-image:url('')}- try to avoid using px units with margin,padding,font-size,width..etc.Instead use units like rem,em,ch and percentage.this is very important for reponsiveness
for JS:
- instead of resizing image with js in newsletter.js ,it's way simpler to use the picture tag in HTML for responsive images ,I'll leave this link so that u can learn more about it https://web.dev/learn/design/picture-element?hl=fr
- using the GET method in form for email isn't ideal for security of the user,instead use POST
Hope u find that helpful! keep up:))
Marked as helpful - P@RicardoGeadaWhat are you most proud of, and what would you do differently next time?
I'm proud of the clean structure and semantic HTML I used. Next time, I'd focus more on accessibility in interactive elements like the share toast.
What challenges did you encounter, and how did you overcome them?Accessibility was challenging—especially understanding ARIA roles, focus management, and screen reader behavior. I tried to follow best practices and test with keyboard navigation.
What specific areas of your project would you like help with?I'd appreciate feedback on how to make my code more accessible.
P@amiramiiHey,great job! your code is well structured and clean and I've seen u used SCSS which is good,here are some improvements u can make:
button {background-color: transparent;cursor: pointer;border:transparenthere u can directly use all:unset directly- instead of repeating font-family ,declare it on body{} or use a css variable for it
- try to always add width:100% for images to prevent overflow
- instead of using media queries for spacing and margins try to directly use percentage unit instead of rem
Hope u find that!helpful,keep up:))
Marked as helpful - P@KrisvHeijWhat are you most proud of, and what would you do differently next time?
I think I'm most proud of the usage of flex and grid in different sections of the project. This way the page is really responsive.
What challenges did you encounter, and how did you overcome them?I didn't encounter real challenges. With the use of flex and grid I had to research some things on MDN Docs.
What specific areas of your project would you like help with?I'm open to all feedback and criticism. I really appreciate any tips and tricks on how I can improve my code.
P@amiramiiHey there! excellent work, there's just one thing i noticed which is the image is cropped and not centered
- to fix that issue simply add background-position:center in footer
- also can you please review my solution since i'm impressed by ure work
keep up:))
Marked as helpful - @gok786P@amiramii
Hey there! your code look clean and well structured already,here's some improvements u can do to make ure code more responsive and accessible:
- Avoid using fixed grid column size,I mean instead of using 30.5 rem replace it with 1fr or more.use percententage or fr unit for more responsiveness
- always centralize ure container in the ceneter of the body using : margin,flex with justify-content:center and align-items:center and place-content,place-items properties
- Add more breakpoints so that the switch between them be smoother
- Try to use grid-template-areas intead of span, it's really faciliates controling the grid more -- Hope You find that helpful,keep up:))
- @IamLordEmmzyP@amiramii
Hey there! u're code looks good overall,here's some improvements u can make for more responsive and accessible code:
- Avoid using px unit and try using more percentage ,rem,ch for paragraphs and em
- u're code isn't fully responsive,there's problem in the width of grid items isn't changing which is causing overflow,to avoid that use minmax in grid-template-columns instead of a fixed width
- avoid using unmeaningful names for classes like a,b,little..etc .instead try to choose a word that discribes the content of the tag because it helps screen readers which increases accessibility
- u can add a class to img tag without wrapping it between div
- try using more simantic tags instead of div -- Hope u find that helpful.keep up:))
Marked as helpful - P@NarelaCamaraWhat are you most proud of, and what would you do differently next time?
I proud about I was work with tailwind, In the next time, I work to read more about documentation.
What challenges did you encounter, and how did you overcome them?THe most dificul challenge was the how change properties to Tailwind.
What specific areas of your project would you like help with?I would like some recommendations on how to work with best practices in Tailwind.
P@amiramiiHey there ,ure code looks so good already! and it's so good that u started working with tailwind css,it's a crucial tool that saves u a lot of coding time! anyways,here are some advices and improvements u can add to make ure code even better and ore accessible:
- For Tailwind CSS ,it's really easy if u already know css, all u have to do is go to Taildwind CSS: https://tailwindcss.com/docs/installation/using-vite ,press ctrl k and search for the equivilent of css properties in tailwind css
- You can also personalize ure own tailwind css classes by using extend in ure tailwind.config.js file to better control ure styling
-- Hope u find that helpful ! Keep up:))
Marked as helpful - @Charlesson-MPWhat are you most proud of, and what would you do differently next time?
I am very pleased with the way I managed to do this project. Integrating AI into the code editor was a great help when I was stuck. I intend to change the way I use media queries, as I was using them incorrectly and therefore was not getting the results I wanted.
What challenges did you encounter, and how did you overcome them?My first challenge in this project came when I had finished styling the page for mobile devices and started implementing it for desktop. The layout changed and didn't look the way I expected, so after many attempts I refactored the code and got the result I wanted. Another challenge was with the use of media query. After implementing the desktop screen, the result I got for mobile screens was no longer working. So with the help of AI I was observing and modifying the code until it worked correctly again.
What specific areas of your project would you like help with?Definitely in the use of media query and in building more responsive layouts.
P@amiramiiHey, good job! your code is already very clean and proffessional,here are some improvements u can make:
- font-display: swap; to @font-face for better font loading performance.
- Avoid Redundancy in Media Queries.Only override what's necessary on mobile ,don’t repeat default styles like font-family and color.
Hope u find this helpful! Keep Up :))
Marked as helpful - @barcag07P@amiramii
Hey,Nice work overall! here are some improvements u can add to make ure work more accessible and closer to the design:
- try to add responsiveness,it's a very important practice irl using media queries https://www.w3schools.com/css/css3_mediaqueries.asp
- I advise u to add hover and focus properties https://web.dev/learn/css/focus
- also try to personalise this code so that it actually links to ure personal accounts using a href tag and don't forget using target tag aswell
Hope you find that helpful!
Marked as helpful
