Skip to content
Submitted almost 3 years ago

flexbox, versionamento com git e VScode

Lucas Nascimento•50
@lucsn
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Estou satisfeito como o resultado, concluir ele em 3 horas mais 1 hora para responsividade não sei se foi um tempo bom

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Hello @Lucsn ,

    I have some suggestions regarding your solution:

    • You can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech). Then use <h2> instaed of <h1>.
    .sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important; 
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;            
}

    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in this challenge, all the images are all decorative.

    • swap the buttons for anchor tags. Clicking those "learn more" buttons would trigger navigation not do an action so button elements would not be right. And for future, it is essential if you include a button in a form element without specifying it's just a regular button, it defaults to a submit button., though, so it's a good idea to make a habit of specifying the type.

    • I wouldn't use <section> for each card. Read more about usage notes

    CSS

    • To center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body>(no need for position absolute) like this:
    
body{
display:flex;
align-items: center;
justify-content: center;
width: 100%; 
min-height: 100vh;

    • border-radius and overflow hidden to the container that wraps the three cards.

    • I recommend to use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

    • width: 50rem an explicit width is not a good way . Remove the width from the main component and change it to max width instead. That will let it shrink a little when it needs to.

    • height: 25rem; It's rarely ever a good practice to set heights on elements . Let the content inside the card element dictate the height of it.

    Overall , your solution is good . Hopefully this feedback helps

    Marked as helpful
    1
    Lucas Nascimento•50
    @lucsnPosted over 2 years ago

    HI! @PhoenixDev22

    Thanks for your feedback, these tips/details make all the difference. Thanks for your teachings.

    • I used the translator as an answer, if you have any errors, disregard
    1

Please log in to post a comment

Log in with GitHub

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