This is a solution to the 3-column preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Solution URL: Github Website
- Laid down semantic HTML and arranged the DOM according to order of elements in mobile-first development
- Pulled in colors, fonts, and all major CSS properties
- Used Flexbox in order to create layout of elements
- Adapted for Desktop layout
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
This is my first truly independent project utilizing Flexbox, and I was definitely confused while trying to implement "mobile-first" at first. I started with a columns layout, but desktop > mobile was a more useful way to see what Flexbox needed to do: 'row wrap'!
I used Codepen and CSS Tricks to help me understand more about buttons because I have never used active states before.
At some point I was baffled to realize that the cards themselves had rounded corners. I always assumed shapes like this were set on a graphic but of course not! Messing with border-radius is fun but I don't understand the ratios well yet.
I'm proud that I recognized the desktop cards are overlapping and adjusted the margins to make them negative to achieve that effect.
**I got feedback and looked at the JPEG design which (vs the Figma comp) clearly shows that the center card has no rounded corners and only the outer corners do. Feedback also pointed out to me that my body element was not aligned in the center for the desired clear effect. :) The margins are NOT overlapped.
- CSS -Tricks This helped me to understand how to use active states and the difference between semantic buttons and a hrefs styled to look like buttons.
- Codepen - I am still not clicking with how the radius work so had to find a codepen to get me within the ball park of the rounded corner look I am going for.
- Github - @tauri-st
- Frontend Mentor - @tauri-st
- LinkedIn - @tauri-stclaire