This is a solution to the Social proof section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
social-proof-section-master\Screenshot Social Proof Section.png
During the project I learnt: (1). How to add multiple background images and how to position them
body {
background: url(images/bg-pattern-top-desktop.svg) no-repeat top left, url(images/bg-pattern-bottom-desktop.svg)
no-repeat bottom right;
}
(2). I ended up using display flex for max-width 800px for the header, .star-rating and reviews.
@media (max-width: 800px) {
header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.star-rating {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.reviews {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
(1). I need to have a better understanding of the width & max-width CSS properties. Though these are simple basic CSS properties, making alterations in the widths in the project was affecting the overall look and responsiveness of the page. I need to know what will happen to the design if the width property is altered.
(2). I was having a difficult time trying to align the H1, as can be seen with the placement of the word ‘products’ for screen sizes below 800px. There is a difference in the position of the word ‘products’ in my final design compared to the problem design.
(3). For the background image, I had tried using the CSS property ‘background-image’ , but because of the two different images required for the background, the final design didn’t have the images. I learnt that using the ‘background’ property was the best in making the final design to have both the top and bottom background images.
body {
background: url(images/bg-pattern-top-desktop.svg) no-repeat top left, url(images/bg-pattern-bottom-desktop.svg)
no-repeat bottom right;
}
(4). The column gap is too big but it pushes the ratings so that they align vertically with the 3rd review(Alice)
header {
column-gap: 350px;
}
(5). I also need to learn more about media queries and responsive web-design
(6). I am proud that I was able to solve most part of the project on my own, considering this is the second problem from frontendmentor that I am attempting. The project helped me practice CSS grid and CSS positioning.
I’d like to thank AuddityCodes (https://www.youtube.com/watch?v=fcVglSYTymM). Through the youtube channel I gained some insight and was able to solve the background image issue I was having. I’d also like to than SuperSimple Dev (https://www.youtube.com/watch?v=G3e-cpL7ofc&t=1s), where I learnt CSS positioning, and Traversy Media (https://www.youtube.com/watch?v=0xMQfnTU6oo), where I learnt CSS grid.