All solutions

Hello! 👋

This is my solution to the Social Proof Section Challenge.

First, reviewing the code of my solution to other challenges. What I saw was my naming convention was too long or too hard to read. So I changed my approach in using the naming convention but descriptive enough to know what part of section is being manipulated.

For the layout, I used the Grid Layout, this is also used to center the component and it also sticks the footer to the bottom.

body {
display: grid;
grid-template-rows: 1fr 50px;
justify-content: center;
align-items: center;
min-height: 100vh;
}

To achieve the responsiveness of the font to the different screen I change my approach in font-sizes, applying the 'Fluid Typography' . CSS-Tricks and Trent Walton is what helped me apply the Fluid Typography technique.

To achieve the responsiveness of the font to the different screen I used the "Fluid Column Snippet' of the CSS-Tricks - Grid Layout with a bit of modification to the width of column.

grid-template-columns: repeat(auto-fit, minmax(371px, 1fr));

If you have any tips that can improve the solution I'll be happy to hear any advice! 😁

Hello everyone! 👋

This is my solution to Profile Card Component.

I used Flexbox to center the Profile Card Component. To center the profile picture, I used the position: absolute with position:relative of the parent div to overlay the profile pic to the 2 divs.

To minimize the manipulation of the 'statistic' section, I used the Grid layout.

This is where I was stuck, the background of the body. At first, I have no idea how to insert multiple svg inside the CSS and also manipulate them to set the svgs on the exact location, based on the given screen sizes. Thanks to CSS-Tricks I got the idea on doing both.

This is what I want to ask, how am I gonna approach in making the svg responsive based on the screen size? Once you inspect my solution, the sizes of the svg will only change once it gets to a certain width based on the media screen. But I want to automatically change its size relative to the screen size.

Any suggestions to make this solution better is welcome! 😁

Hello everyone 😁!

This is my solution to the 3-Column Card Preview Component.

What I used to center the component is the Flexbox. I approached this challenged using the Mobile-first workflow. I noticed in mobile screen that the layout of the component doesn't need to be changed, that's why I didn't use Flexbox or Grid as it will become redundant to its appearance.

I used the Grid layout in the desktop screen to control the width of the div at the same time since it was easy to adjust the size and margin of the contents (images, paragraph, etc), at least in my perspective.

If you have different approach to the challenged or if you have any feedback, feel free to comment it 👌👌!

Hello everyone 👋!

This is my solution to the NFT Card Preview Component Challenge.

What made me stuck in this challenge is how to manipulate the images using the overlay technique and hover pseudo-class. I used the absolute positioning to make the second image center relative to the first image.

If you know another approach to this problem or if you see that my approach is not the best, feel free to comment it 😁!

Hello everyone! 😁

This is my solution to the challenge. I used both Flexbox and Grid here, I used Flexbox in mobile screen types and Grid for desktop screen types. I also used Mobile First approach.

If you see any problem that can be fixed, feel free to comment it out. 😁

Hello guys!

This is my solution to the challenge. I used FlexBox here to center the component. I also applied what they call BEM naming convention technique, but I'm unsure if what I'm doing is correct. I also used custom property naming for re-usability of the style.

What I can't seem to break here is to stay the footer on the bottom while maintaining the component to the center. I used the margin: auto to the footer, 'attribution' specifically', but the component itself can't stay in one place. Should I change the approach here?

Any feedback is welcome! 😁