Latest solutions
Submitted
PDestiny Adebayo• 20@Dy-Prof
- Please check for any way I could Improve my code.
- Best practices for JS is also welcome.
- Any form of criticism is welcome.
Submitted
Davi Soares• 90@DaviSoares-1
🚀 Never Stop Learning!!
👨💻 Hey everyone, this is my solution for the Social Proof Section challenge. Any feedback or suggestions are welcome!!
Submitted
Any feedback is kindly welcome 🙂.
Submitted
Hello there, lovely folks!
This is my first experience working with JavaScript and, in particular, event listeners. I would sincerely appreciate any guidance or suggestions you could provide based on your experiences.
In addition, I'm trying to adhere to the BEM naming convention for classes. If you have any insights or constructive feedback about this aspect of my work, it would be most welcome.
Thank you in advance for your time and your valuable input.
Submitted
What did you find difficult while building the project? : overflowing issue when position set with negative values.
Submitted
ABOI SAMSON ABOI• 20@aboisam
Tools
VSCode
Git
Prettier
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
My process
- structure the html layout
- add classes
- css
Areas of the code i was not sure of
@media screen and (max-width: 425px) {
.container{
min-width: 87%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
i will need more explaination on media query
Submitted
CSS- Flexbox
- HTML
- CSS
Jaykler• 30@Jaykler
What did you find difficult while building the project? Using @media for some reason was kind of tideus.
Which areas of your code are you unsure of? I feel like my code could've been better if i would've used CSS Grid instead of flexbox.
Do you have any questions about best practices? Im open to feedback when it comes to best practices.
Submitted
matryosha• 30@matryosha
- Fundamentals are important. Again. When I needed to wrap
img
indiv
I could see that for some reason thediv
was taking more vertical space than the image inside of it and that's totally unlogical and bs but trying to find some info why is that I founded logical explanation: because ofdisplay: inline
property. More about it here. - Used Sass primarily for nesting and more clean variables usage(no
var()
). Don't know why nesting took so long to implement in main specs but it is coming. - Neat trick to use even though it's a little bit clunky:
@media (hover: hover) and (pointer: fine) { .image:hover { opacity: 1; } }
So the hover will work only on devices with pointer and not in phones.
- Fundamentals are important. Again. When I needed to wrap
Submitted
Andrea Iriarte• 70@andrea-iriarte
I had controlling the top and bottom margins on the mobile view, since there was overflow. Does anyone have a solution for this?
Thanks!
Submitted
AnakonStar• 40@AnakonStar
I just want to know your thoughts on whether it's semantic enough or if there are any issues that can be resolved. let me know I'll be very grateful!
Submitted
Ross Porter• 10@porter-s-ross
I don't think that my project really transfers very well to mobile. I wanted to make this component as simple as possible, so without getting into things like media queries, are there some ways that would help to create responsive designs?
Submitted
Oluwafemi Kolade• 50@Kolade1024
Did my best on this one. I'll welcome any tips for improvement. Thanks
Submitted
Perfume Responsivo
- HTML
- CSS
why i need the change in the code to make he better?
Submitted
dereck445• 80@dereck445
My first time ever using react or sass. Turned into a bit of a mess towards the end. Ill redo this challenge in the future.
Submitted
Karam El-loh• 300@KaramEl-loh
Took my own approach when it comes to the side images, since the design will not look nice on very large screens (>1440px) if these images are positioned this way.
In addition, did not add the background for the "State of the Art" section on desktop
Submitted
interactive rating component
- HTML
- CSS
- JS
JiYoon• 10@JIY00N2
I'd appreciate it if you could tell me what's wrong with my code or what I can easily implement.
Submitted
Pkofi astr0• 10@Kofiastro
I had difficulties maintaining the same dimension on mobile and Desktop since i was using flexbox.
Join our Discord community
Join other Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord