Hello World! I am on the path of programming life and decided to start my journey with front end, I love to write code and I am very excited to know these programming skills and I want to share my knowledge with everyone. Please feel free to view my challenges and your comments are welcome.
I’m currently learning...I'm learning Frontend programming skills like HTML, CSS, Javascript and advancing to some librarys and frameworks like React.JS, Node.JS, VUE, Angular and i want going on till fullstack and more who knows haha!
Latest solutions
four-card-feature responsive, CSS Flexbox and Grid, Semantic
#bem#accessibilitySubmitted about 2 years ago
Latest comments
- @michel-moreiraSubmitted about 2 years ago@michel-moreiraPosted about 2 years ago
Corrections
It was just the path of the images that didn't match, already fixed!
0 - @nicoamsSubmitted about 2 years ago@michel-moreiraPosted about 2 years ago
Hello Nicholas!
Great job on complete this challenge!
I have some suggestions tha might be helpful!
-
In the img tag, you must put an alternate text, the attribute "alt". The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). Source.
-
You must put a h1 tag on the pag cause the page should contain a level-one heading, you could replace the p tag and just maintain the class the same, so your code remains unchanged.
-
All your principal code should be wrapped by
main
tag landmark, between the tags main and div attribution you've putted asection
tag to treat the second element. Would be better if you use 2 sections inside the main instead on main and a section out of the main. One section to the first element and other section to the second one. Themain
tag is more like a container and not an element itself. -
Inside the tag
section
you could use ah1
heading level rather thanp
. And the div 'amount-left' you could useh2
as well. -
Your div attribution could be replaced by the
footer
tag to be more semantic.
I hope you find it helpful!
Happy Coding!
0 -
- @nahal04Submitted about 2 years ago@michel-moreiraPosted about 2 years ago
Hello Nahal Rahman!
Great job on complete this challenge!
I have some suggestions that might be helpful!
-
You must put a h1 tag on the page cause it should contain a level-one heading, you could replace the p tag referent to the name and maintain the class the same.
-
All you code should be wrapped by
<main></main>
tag landmark; -
To treat a background-image, you could do this in the CSS stylesheet and remove it from the HTML document. With background-image you can manipulate in CSS. An article about it.
-
You've putted the tag
span
, i recommend that you replace it for the tagp
, although it refers to paragraph, it refers either to text; span is a generic tag that has no meaning at all, should be used in few occasions. -
In the class stats you could use a <ul> <li><p> </p></li> </ul> tag with 3 li rather than divs and spans. I hope you find it helpful!
Happy Coding!
0 -
- @swagthehoomanSubmitted about 2 years ago@michel-moreiraPosted about 2 years ago
Hello Swagnik Das!
Great job on complete this challenge!
I have some suggestions tha might be helpful!
-
In the img tag, you must put an alternate text, the attribute "alt". The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). Source
-
You must put a h1 tag on the pag cause the page should contain a level-one heading, you could replace the
p
tag referent to the name and maintain the class the same. -
All you code should be wrapped by tag landmark, before the tag
main
and between the tagsmain
andfooter
you've putted aimg
to treat a background-image, you could do this in the CSS stylesheet and remove from the HTML document. With background-image you can manipulate in CSS. An article about it. -
In the class stats you could use a tag
<ul> <li><p> </p></li> </ul>
with 3 li rather than divs.
I hope you find it helpful!
Happy Coding!
0 -
- @Ambrosio99Submitted about 2 years ago@michel-moreiraPosted about 2 years ago
Olá Lucas! Primeiro quero te parabenizar por concluir esse desafio!
Eu tenho algumas dicas que podem te ser úteis.
A tag img que você colocou dentro de um link possui um atributo que é o "alt", nele você diz algo sobre a imagem algo como: "Equilibrium NFT" (com espaços e sem hífen mesmo); ele é responsável por especificar um texto alternativo para a imagem. Ela pode não carregar, o usuário pode ter problemas com a rede, o usuário pode ter alguma incapacidade visual e ele usa o leitor de tela, enfim serve para fins de acessibilidade. Você pode ver mais sobre isso aqui.
"O texto alt deve sempre descrever os conteúdos de uma imagem com o maior número de detalhes possível. O quanto mais específico você puder ser ao descrever uma imagem, melhor, pois isso ajudará a classificá-la na pesquisa do Google Imagens e contextualizará sua relação com o conteúdo da sua página" Citação desse site
Você precisa usar a tag h1, ao inés da tag h2, pois a página se segue uma hierarquia, dessa forma sempre se deve começar o h1; você pode inclusive, só substituir o h2 pelo h1 no html sem alterar a class, então não haverá mudanças, uma vez que seu estilo foi aplicado na classe.
Notei que você não fez a parte de interação com a imagem, se você por acaso teve dificuldade e precisa de uma ideia de como fazer (o que eu tive rsrs), eu terminei esse desafio também e se quiser dar uma olhada em como resolvi fique à vontade, aqui está o meu repositório.
Espero que essa dicas sejam úteis para você.
Happy coding!
0 - @Leandrinho-AlvarengaSubmitted about 2 years ago@michel-moreiraPosted about 2 years ago
Olá Leandro! Parabéns por concluir esse desafio!
Eu tenho algumas dicas que podem te ser úteis.
Ao invés de usar a tag header, vou deveria usar a tag main, ela é responsável pela parte principal de uma página. Se você olhar no contexto, um qr_code geralmente faz parte de uma seção na parte principal de uma página. Você pode aprender mais sobre semântica aqui.
Você precisa usar a tag h1, pois a página precisa ter um nível de título, como pois se segue uma hierarquia, esse nível começa com o h1.
Esse card tem uma largura relativamente pequena, por isso você não precisa de um arquivo responsivo você pode definir uma largura (tipo
width: 34px
) e trabalhar com o margin após ter centralizado na tela.Vi que você aplicou a propriedade justify-content em alguns pontos, mas ele só é ativado após você declarar o display: flex, senão não surtirá efeito.
Uma vez que no arquivo reset.css você "zerou" margin, padding e estabeleceu o box-sizing no border-box, na folha estilo.css você não precisa repetí-los.
Espero que essa dicas sejam úteis para você.
Happy coding!
Marked as helpful1