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
General 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
What is the best practice for things like circles at the beginning of a section and before the footer?
I would like help with general layout What would be best to use, grid, flex, absolute positioning Also best way to set certain width of text elements i used max width with CH unit is there better way ?
I would like help with last list, i tried some table stuff but i couldn't manage it I would like to hear advices what is best practice for that kind of layout
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.
Excellent work,
I suggest you start using relative units in CSS instead of pixels
would love any feedback on how I can improve my HTML and CSS code further or simplify it.
Great 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! 😎
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.
Great job! Just remove the background grid from the entire page, and everything else looks perfect. 👍
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 🙌
Great work Mustafizali,
I have a few suggestions to help you with layouts in general
Never give heights to components; let the content itself determine its height (margins will also add to it if you follow design guides correctly)
Avoid using HTML styling tags like <br> <hr> <I> <b> <strike> etc.. Always do it with CSS. In this particular example, you could wrap 166 in a span and then give it text-decoration: line-through;
Avoid using pixels because they are static units that can not scale themselves; instead, use percentages, rem-s, em-s, etc..
Here is a good tutorial on units in CSS: https://www.youtube.com/watch?v=N5wpD9Ov_To
I hope that you find some of these advices helpful
Keep up the good work and keep coding 😎
I noticed that you are using image paths correctly, but you're using the .png or .jpg format instead of the .webp format, which is provided in the starter folders by Frontend Mentor for better performance.
To improve this, simply add .webp at the end of each image path, or let your code editor autocomplete the path if it offers that option.
Also, make sure to keep your CSS in a separate file rather than writing inline CSS
