Using Mobile first, Flexbox and Media Queries - 3-Column Card Componen
Design comparison
Solution retrospective
¿Algún error, mala práctica u otra manera en que se pueda hacer de manera más práctica y eficiente este mismo trabajo? un saludo ,y estaré agradecido de todo aporte!
En un desafío anterior ( https://www.frontendmentor.io/solutions/using-flexbox-and-media-queries-nft-preview-card-component-8I0ZcW0Dc ) Me aparece el siguiente problema en la secciones de Reports > Accesibility
Page should contain a level-one heading Context:
<html lang="en"> # Para corregirlo he agregado una etiqueta h1, la cual he ocultado con display:none. Pero aún sigue reportándolo.Community feedback
- @bramuccciPosted almost 3 years ago
Hola Santiago! Ese error en tu desafío anterior de debe a que no usaste ningún
h1
en tu html. Como es una tarjeta aislada creo que la decisión de unh2
es correcta. Solo recuerda que cuando hagas una página web entera tenés que incluir un y solo unh1
. Sobre este desafío, tengo varias sugerencias:- Tu breakpoint es de 1100 px. Es innecesariamente grande y deja a las pantallas de 1024px y 768px (laptop y tablet) de lado. Te recomiendo usar 600px y leer este artículo
- En el body pusiste
font-weight: 400px;
- Tu card está envuelta solamente por el body. Una tarjeta es un único elemento. Deberías usar un elemento (article, por ejemplo) para toda la tarjeta y usar divs para dividirla. Mi estructura sería article>div*3>h3+p+button
- Usar flexbox en el body te va a dar problemas en cuanto quieras agregar otros elementos
Espero que estos tips te ayuden :) Keep coding!
1@santiagocarranz-aPosted almost 3 years ago@bramuccci encantando de toda la información que recibí ,muchas gracias Candela. Lo iré corrigiendo!
1 - @NaveenGumastePosted almost 3 years ago
Hay ! Good Job Santiago Carranza
These below mentioned tricks will help you remove any Accessibility Issues
-> Add Main tag after body like it should be your container
-> For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc
-> But use header tag only once in main heading element.
-> Always use h1 first and then h2, h3 and so on
Keep up the good work!
1@santiagocarranz-aPosted almost 3 years ago@Crazimonk muchisimas gracias Naveen
1
Please log in to post a comment
Log in with GitHubJoin 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