Skip to content

Conversation

@amandafdantas
Copy link

index.html Outdated
<nav class="menu">

<ul>
<img src="images/logo.png" width="20%" height="20%" alt="">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Dentro de <ul> não pode ter conteúdo fora de um <li>

Suggested change
<img src="images/logo.png" width="20%" height="20%" alt="">
<li><img src="images/logo.png" width="20%" height="20%" alt=""></li>

index.html Outdated

<img src="images/Service1.png" alt="">
<h3>Websites</h3>
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Os elementos <h1> -<h6> devem ser utilizados para títulos, portanto não é boa prática utilizá-los para textos de parágrafo. 🌶

Suggested change
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis ...

index.html Outdated
soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</h5>
<img src="images/Service3.png" alt="">
<h3>Temas WordPress</h3>
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis

index.html Outdated
soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</h5>
<img src="images/Service2.png" alt="">
<h3>Templates</h3>
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis

index.html Outdated
<!-- Serviços -->
<div class="">
<h2>Serviços</h2>
<h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5>
<p>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5>

index.html Outdated
<!-- Meus Trabalhos -->
<div class="">
<h2>Meus trabalhos</h2>
<h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5>
<p>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5>

index.html Outdated
<button type="button" name="btnTemplate">Template</button>
<button type="button" name="btnTema">Tema</button>
<br>
<img src="images/Portfolio01.png" alt="">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<img src="images/Portfolio01.png" alt="">
<figure>
<img src="images/Portfolio01.png" alt="">

index.html Outdated
<button type="button" name="btnTema">Tema</button>
<br>
<img src="images/Portfolio01.png" alt="">
<h5>Thumbnail label</h5>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<h5>Thumbnail label</h5>
<figcaption>
Thumbnail label

index.html Outdated
<br>
<img src="images/Portfolio01.png" alt="">
<h5>Thumbnail label</h5>
<p>Thumbnail caption</p>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<p>Thumbnail caption</p>
<p>Thumbnail caption</p>
</figcaption>
</figure>

index.html Outdated
<img src="images/Portfolio01.png" alt="">
<h5>Thumbnail label</h5>
<p>Thumbnail caption</p>
<img src="images/Portfolio02.png" alt="">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dei uma sugestão acima de como ficaria mais semântico se você usar <figure> e <figcaption> neste caso.
Link de referência: https://www.w3schools.com/tags/tag_figcaption.asp

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Essas eu não conhecia. Obrigada pelas dicas e orientações. @happymoon

index.html Outdated
<!-- Quem Sou Eu -->
<div class="">
<h2>Quem sou eu</h2>
<h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5>
<p>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</p>

index.html Outdated
<img src="images/photo.png" alt="">
<br>
<caption>Joana D'arc</caption>
<br>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Vi que utilizou muitas quebras de linha no seu código, no desafio 2 que tal testar gerar esses espaçamentos entre os elementos utilizando apenas CSS e remover esses <br> extra? 🔥

index.html Outdated
<br>
<p>ícones </p>
<h2>Sobre Mim</h2>
<h5>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<h5>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet

index.html Outdated
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</h5>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</h5>
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

index.html Outdated
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</h5>
<h2>Habilidades</h2>
<li>Java Script</li>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Faltou abrir a lista com <ul> ou <ol>

Suggested change
<li>Java Script</li>
<ul>
<li>Java Script</li>

index.html Outdated
<li>Java Script</li>
<li>Html & CSS</li>
<li>jQuery</li>
<li>Wordpress</li>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Fechamento de <ul> necessário aqui.

Suggested change
<li>Wordpress</li>
<li>Wordpress</li>
</ul>

index.html Outdated
<div class="">
<h2>Contato</h2>
<h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5>
<h4>[email protected]</h4>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⭐️ Reforçando: as tags de título devem ser utilizadas para atribuir relevância aos títulos principais da sua página, isso implica que o conteúdo deve ser literalmente um título de algum conteúdo.

index.html Outdated
<h4>[email protected]</h4>
<h4>+55 21 987654-321</h4>
<h3>Mídias</h3>
ícones das midias

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙈 podia ter referenciado as imagens aqui 😃

index.html Outdated
<div class="">
<h2>Contato</h2>
<h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5>
<h4>[email protected]</h4>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Você pode facilitar a vida do teu usuário colocando seu email clicável.

Suggested change

index.html Outdated
<h2>Contato</h2>
<h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5>
<h4>[email protected]</h4>
<h4>+55 21 987654-321</h4>
Copy link

@happymoon happymoon Dec 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mesma coisa do email também vale para telefones.
Referência: https://www.w3schools.com/tags/tag_a.asp

Suggested change
<h4>+55 21 987654-321</h4>
<a href="tel:+5521987654321">+55 21 987654-321</a>

index.html Outdated

<!-- Footer -->

<div class="">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👉 O HTML 5 tem essas tags novas bem legais pra delimitar essas áreas específicas de conteúdo como <header> e <footer>. Que tal usar aqui?

Suggested change
<div class="">
<footer>

index.html Outdated
<div class="">
<h5>Women + Tech = strong </h5>

</div>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
</div>
</footer>

index.html Outdated
<!-- Footer -->

<div class="">
<h5>Women + Tech = strong </h5>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lembre-se do que falei acima sobre as tags de título. ☝️

Copy link
Contributor

@tarcilas tarcilas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bom trabalho! Parabéns e continue evoluindo.


<head>
<meta charset="utf-8">
<title>Front-End Study 2</title>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Colocar o favicon (icon.ico).

index.html Outdated

<ul>
<img src="images/logo.png" width="20%" height="20%" alt="">
<li><a class="" href="#">HOME</a></li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Colocar o link para as respectivas seções

index.html Outdated
</nav>

<!-- Slides -->
<div class="">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

É mais semântico usar a tag section ao invés de div, aqui e nas demais seções do site

<div class="">
<h2>Meus trabalhos</h2>
<h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5>
<button type="button" name="btnTudo">Tudo</button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Assim como você fez no menu principal, aqui você também poderia usar a tag nav e uma lista.


<!-- Quem Sou Eu -->
<div class="">
<h2>Quem sou eu</h2>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seria legal já customizar os textos, foto, contatos e redes sociais com suas informações, afinal esse será seu portfólio.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants