With CSS Grid I started using grid-template-columns, but then switched to using grid-columns and grid-row. It seemed using grid-template-area would be more work when setting up the media queries. Anyone find grid-template-areas would be better choice?
Any other feedback is appreciated.
👋Hello Frontend Mentors , I am returning to web development after a break of 1 year & I started with SCSS . Please suggest me in which ways I could have done this solution more efficiently & more perfect. I will highly appreciate your feedback 🤞
Yes, I think that works better now where when you slide the slider it has 5 distinct positions.
For myself, this was most difficult challenge I have done so far. The range input is very hard to work with in my opinion. In reality, I don't see it used much on websites, so maybe it is not very popular input to be used in real world.
👋Hello Frontend Mentors , I am returning to web development after a break of 1 year & I started with SCSS . Please suggest me in which ways I could have done this solution more efficiently & more perfect. I will highly appreciate your feedback 🤞
The slider does not seem to be showing the correct prices as specified by the challenge. Maybe this can be some help... I see in your HTML your input element type="range" has the step attribute set to 10. That creates 10 steps along the slider. For mine I had set this range input element set to step="5" to correspond to the 5 different price points that were specified. So my slider was then only returning values of 1, 2, 3, 4, 5 and that made it easier to work with in the JavaScript. I just did something simple then by checking with switch statement those 5 cases to set each of the five prices.
right now I do not know flex: grid, so I did it with flex: basis :)) I will be glad to any feedback, it will be interesting to listen to any point of view. /-------------------------------/ Thanks /--------------------------------/
I just saw one reason you excerpt text is too big on card. You are using h1 tag for these.
First, only use one h1 tag per page. You might instead use h2 for these, or div, or p tag instead.
But aside from that, h1 has its own default size (26px), but they should only be 20px.
You need to at least set your own font size for h1 to override the default, and may want to also use a different tag such as h2, div or p for this text.
right now I do not know flex: grid, so I did it with flex: basis :)) I will be glad to any feedback, it will be interesting to listen to any point of view. /-------------------------------/ Thanks /--------------------------------/
It looks like each testimonial "card" is too large compared to design. I think you want to check the text size of Name and the first sentence/excerpt of text which seem too large.
Also on very wide screens, the testimonials seem to stretch too wide. I had same issue. I corrected it by using a max-width: 1440 on my grid container.
Here's another project I've completed. Could anyone give me some feedback on this project, I have a few issues I would like to address. The color of the footer photo doesn't match the design, which I've noticed when there's an overlay color on a photo, they never really match the design. I was wondering is there a way to fix this? Or do I just go with what Frontend Mentor provides? Also, the footer itself doesn't matches the design fully. Am I being nitpicky or is there a way I can fix this? Any tips would be awesome, thank you!
For the footer, one thing I did to make it more match the design is to set a height for it. I think I used 300px.
Also, for the color of the footer. Using color modes is just one way to get something similar.
Another good technique is where you basically add the photo to the footer first, and then add "another colored layer" over the photo, using pseudo-class ::before on the footer element with the photo background. Then you can adjust the opacity of this layer to get the effect you want. Kind of like something you would do in photoshop instead of using blend modes. Just add a transparency colored layer over the photo.
If you never used pseudo class ::before it is very useful, but it took me awhile to figure it out, but it is working knowing.
I think for the large prices, you need to check font. I think it is correct font family, but the google font import URL does not have any weight parameter. I believe it should be 700 weight. Make sure on google font site you select the correct font with correct weight to use when you generate the import url.
Any feedback is appreciated.
I tried using BEM for the CSS here. Any suggestions for improvement for the BEM?
Also, any suggestions or tips regarding accessibility for the toggle switch?
Thank you for your feedback. I agree with what you said that it would be good to use a semantic element like a button instead of making toggle from a div. And I had tried using a button, but had an issue. When you click on a button element, there is a movement of the element when you click it, and the way I created my toggle using pseudo class to add the circular part of toggle did not move along with rest of button, and it looked strange, so I had to switch back from button to div. I could not figure out how to disable the button's default animated effect when clicked on.
I like how you used grid for the photos, and also the zooming effect on the photos was nice too.
I would love to hear your thoughts, and how could I improve my code !
Thank you! And happy coding :)
Looks excellent. I just saw one issue. For the footer, when the screen width it is over 1400 px, the footer does not expand beyond that. I think on most websites a footer like this would continue to grow wider, and stay full window width at larger screen widths, and would not just end, and remain 1400px wide, with white space on both sides.
One easy way to fix some of the accessibility issues is to just put all the page content (everything inside <body> inside a <main> element.
Specifically seeking feedback on the responsive design. First time using media queries and my query seems a little clunky - Any tips to clean up CSS code between desktop and mobile versions?
On my desktop monitor, about 1920 px wide, the component seems like it gets too wide compared to provided design. I sometimes find I can use the max-width property on the appropriate container, to limit how wide an element can get on bigger screens. max-width will still let it be responsive, but it will reach that limit you set and not get any bigger.
