Latest solutions
social links profile using flexbox
#accessibility#animationSubmitted 3 months agoI would like to read your feedback!
HTML, CSS.
Submitted 3 months agoAre there any improvements I can make in my code?
How can I make my code more efficient or cleaner?
Latest comments
- @Vlad-Bern@Basmala-sabra
Hello, Vlad-Bern. I have looked through your project and it’s awesome — great work! 👏 I just have a couple of tips you might find useful for future projects:– - Try to follow the correct heading structure; for example: h1 > h2 > h3.. and so on. – Try to use rem or %- Units instead of px; to have a good responsive for the project. And that’s it!
Keep building — your code is making something meaningful.
Basmala
Marked as helpful - @Der12kl@Basmala-sabra
Hey Der12kl👋, Your code looks good, but here is my feedback; maybe if you want to improve your solution for this project:
- Rename your CSS file to style.css because it is the main and the only styling file.
2- Your social links profile is far from the project of the Frontend mentor, but it’s fine if you want to update it later.
- You should use semantic HTML for best practice. And i liked the code that support font in different engines. keep going your great work! 🙌
- @Roshan-MeruguWhat are you most proud of, and what would you do differently next time?
I’m most proud of how I structured the layout using Bootstrap Grid and Flexbox for responsiveness. The design adapts well across different screen sizes, maintaining a clean and modern look.
Next time, I would optimize my CSS further by reducing redundant styles and making better use of reusable utility classes. I’d also experiment with animations to enhance user experience.
What challenges did you encounter, and how did you overcome them?One challenge I faced was ensuring proper spacing and alignment between sections on different screen sizes. Initially, some elements were misaligned in smaller viewports. I resolved this by fine-tuning Bootstrap’s grid system, adjusting column sizes, and using media queries for additional tweaks.
Another challenge was making the navigation bar fully responsive. Using Bootstrap’s navbar utilities and some custom CSS, I ensured smooth transitions between desktop and mobile layouts.
What specific areas of your project would you like help with?I’d love feedback on:
-
Optimizing my CSS to reduce redundancy while keeping styles maintainable.
-
Best practices for structuring a responsive navbar that scales well.
-
Accessibility improvements—are there any areas where I could enhance usability for screen readers?
@Basmala-sabraHi Roshan 👋, I appreciate you having done this awesome project👏, but there are some suggestions for your code:
- Name your CSS file to style.css because it is the whole and main file to your project. 2- Follow the correct arrangement for headings from h1 to h6, and it’s not a best practice to use headings for data like buttons and dates.
- Use the shorthand for the border to be: border: width style color
- Remove the first shadow property because you have written it twice, so the second property will override the first property.
"Keep pushing forward, one line of code at a time! 🚀🔥"
Marked as helpful -
- @Dev-PedroB@Basmala-sabra
Yes, my project has semantic HTML.
Yes, it has a little bit of accessibility, and I will learn more and apply more accessibility rules in the next projects.
Yes, the layout looks good on a range of screen sizes.
Yes, the code well structured, readable, and reusable.
No, my project matches to the design.