Submitted about 2 years ago

3-column-preview-card-component

ABOI SAMSON ABOI•40

@aboisam

A solution to the 3-column preview card component challenge

Preview Code

Solution retrospective

Tools

VSCode

Git

Prettier

Built with

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

My process

structure the html layout
add classes
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

Code

Please log in to post a comment

Community feedback

_nehal💎•6,710
@NehalSahu8055
Posted about 2 years ago
Also

➨ Use background:transparent; on hovering.
```
.btn:hover{   
background:transparent;
}
```
➨ Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

link.

➨ You can use accessibility features like aria, sr-only, and title which are accessible to screen readers.
_nehal💎•6,710
@NehalSahu8055
Posted about 2 years ago
Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

➨ To properly center the container.
- USING FLEXBOX
```
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
```
- USING GRID
```
body{
min-height: 100vh;
display: grid;
place-items: center;
}
```
➨Use Semantics for the proper design of your code.
```
<body>
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
wrap up `.attribution` inside `footer`
</body>
```
➨ For image like .svg are decorative which screen reader will not render it to be important and skip it, so it make no sense to add alt leave it blank.

I hope you find this helpful.

Happy coding😄

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord