Latest solutions

Practice using display grid commands.

thoughts?

• Please check for any way I could Improve my code.
• Best practices for JS is also welcome.
• Any form of criticism is welcome.

🚀 Never Stop Learning!!

👨‍💻 Hey everyone, this is my solution for the Social Proof Section challenge. Any feedback or suggestions are welcome!!

Any feedback is kindly welcome 🙂.

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.

What did you find difficult while building the project? : overflowing issue when position set with negative values.

Tools

VSCode

Git

Prettier

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

My process

1. structure the html layout
2. add classes
3. 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

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.

• Fundamentals are important. Again. When I needed to wrap img in div I could see that for some reason the div 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 of display: 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.

I had controlling the top and bottom margins on the mobile view, since there was overflow. Does anyone have a solution for this?

Thanks!

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!

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?

Did my best on this one. I'll welcome any tips for improvement. Thanks

Having trouble with the desktop bg image.

why i need the change in the code to make he better?

i have finished this challenge using Reactjs and tailwind

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.

What did you find difficult while building the project? Which areas of your code are you unsure of?

• I find the back ground image a little hard, and I'm not even sure if I coded it correctly. I would love to hear some feedback and how to improve.

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

I'd appreciate it if you could tell me what's wrong with my code or what I can easily implement.

I had difficulties maintaining the same dimension on mobile and Desktop since i was using flexbox.

How should I improve the project?