@rajankumar4723
I was born and raised in the small town of Priboj, Serbia, where I completed high school. I then moved to Belgrade to pursue my dreams, where I fell in love with web design, particularly frontend development. While still in college, I have had to work to support myself, but I never stopped fighting
I’m currently learning...HTML, CSS, SASS, JS
Latest solutions
Time tracking app
PSubmitted 27 days agoCould you tell me why my section overflows when I shrink the browser window?
Newsletter sign up validation
PSubmitted about 1 month agoWith JavaScript itself, if there's anything I can improve, feel free to leave a comment below!
Responsive article preview component
PSubmitted about 1 month agoGeneral layout in HTML and JS Also, if you have any other suggestions, please feel free to comment. I will be happy to listen to and apply every advice
Responsive Meet Landing Page
PSubmitted about 2 months agoWhat is the best practice for things like circles at the beginning of a section and before the footer?
Latest comments
- P@MihailoSparic01
For this type of layout, it's better to use grid instead of flex.
I understand you may not have access to the Figma files, so I won't be commenting on the exact styles.
Simply use grid, and instead of adjusting margins for every screen size, start with the gap on the grid and then tweak it in your media queries.
Great job, keep coding!
- @The5thleweP@MihailoSparic01
Nice work
Don't use body element as a container Make a div with the class container and then add styles to it
Using a universal selector should have margin 0, padding 0 not margin 0 auto, because 0 auto centers the item and you are centering every item with 0 auto
You are mixing px and rem, don't use pixels use only rems Here is excellent tutorial on CSS units https://youtu.be/N5wpD9Ov_To?si=IdtuEJj3QplpaSNe
Just change those few things and you will have 99% match with the design
Keep coding brother 😎
- P@GentleHorseWhat are you most proud of, and what would you do differently next time?
Through setting up hosting with using Vite and implementing the subtle animation with CSS for the share toast pop up, I learned a lot even though I used these technologies several time before.
What challenges did you encounter, and how did you overcome them?Tweaking the svg image reactive to user interaction is little a bit tricky but eventually I found a solution and managed to it.
P@MihailoSparic01Excellent work,
I suggest you start using relative units in CSS instead of pixels
Marked as helpful - P@QS3HWhat specific areas of your project would you like help with?
would love any feedback on how I can improve my HTML and CSS code further or simplify it.
P@MihailoSparic01Great work, Ahmed!
I have a few suggestions:
In your media queries, try using em units instead of pixels (not rems, not px, but ems). It’s a more flexible approach.
For images, use max-width: 100%; instead of width: 100%;. This helps maintain their aspect ratio while ensuring they don’t exceed the container width.
When starting a component in one layout style, like using flex for an image gallery, it’s best to finish it that way as well. Mixing flex on desktop and grid in media queries isn’t considered good practice.
Start considering adding media queries for larger screens. I can’t see the background image as I should at the beginning. Here's an example of how it looks on ultrawide monitor: https://imgur.com/a/8EK4H2X
The following code will fix that:
@media screen and (min-width: 120em) { .yourClass { background-repeat: no-repeat, no-repeat; background-position-x: 20%, 80%; background-position-y: 50%, 50%; } } It will look something like this:
https://imgur.com/a/tgvErJZ
The footer is responsive on tablets, but not on mobile. There seems to be a small bug somewhere—check that out. It shouldn’t be too difficult for you to find and fix.
Everything else looks excellent overall. Keep up the great work! 😎
Marked as helpful - P@TurtlewordsWhat are you most proud of, and what would you do differently next time?
I enjoyed learning more about grid-template-areas. Next time I will take more time to learn how to size my grid areas.
What challenges did you encounter, and how did you overcome them?The changing layouts of the grid did not always end up with the expected dimensions. I did not completely overcome this challenge, and I look forward to improving in this regard.
What specific areas of your project would you like help with?Responsiveness, size of grid items, spacing. Thank you.
P@MihailoSparic01Great job! Just remove the background grid from the entire page, and everything else looks perfect. 👍
- @MatheusTeixeira1P@MihailoSparic01
Great work Matheus,
Just add max-width: 100% to the image for better responsive And consider using other CSS units instead of pixels it will make the job a lot easier:
Here is a good tutorial on CSS units: https://www.youtube.com/watch?v=N5wpD9Ov_To
Keep up the good work 🙌
Marked as helpful
