Arquivo index.html usando apenas html by amandafdantas · Pull Request #6 · WoMakersCode/front-end-study-group-rj

amandafdantas · 2018-12-13T00:32:31Z

happymoon · 2018-12-16T18:19:38Z

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


⚠️ 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>

happymoon · 2018-12-16T18:21:54Z

+
+		<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


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 ...

happymoon · 2018-12-16T18:22:30Z

+			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


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

happymoon · 2018-12-16T18:22:37Z

+			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


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

happymoon · 2018-12-16T18:22:52Z

+	<!-- 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>


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>

happymoon · 2018-12-16T18:23:06Z

+	<!-- 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>


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>

happymoon · 2018-12-16T18:24:04Z

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


Suggested change

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

<figure>

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

happymoon · 2018-12-16T18:24:26Z

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


Suggested change

<h5>Thumbnail label</h5>

<figcaption>

Thumbnail label

happymoon · 2018-12-16T18:24:48Z

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


Suggested change

<p>Thumbnail caption</p>

<p>Thumbnail caption</p>

</figcaption>

</figure>

happymoon · 2018-12-16T18:26:11Z

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


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

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

happymoon · 2018-12-16T18:26:26Z

+	<!-- 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>


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>

happymoon · 2018-12-16T18:27:42Z

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


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? 🔥

happymoon · 2018-12-16T18:28:00Z

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


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

happymoon · 2018-12-16T18:28:10Z

+			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>


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>

happymoon · 2018-12-16T18:29:18Z

+			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>


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

Suggested change

<li>Java Script</li>

<ul>

<li>Java Script</li>

happymoon · 2018-12-16T18:29:45Z

+		<li>Java Script</li>
+		<li>Html & CSS</li>
+		<li>jQuery</li>
+		<li>Wordpress</li>


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

Suggested change

<li>Wordpress</li>

<li>Wordpress</li>

</ul>

happymoon · 2018-12-16T18:33:52Z

+	<div class="">
+		<h2>Contato</h2>
+		<h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5>
+		<h4>meuemail@mail.com</h4>


⭐️ 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.

happymoon · 2018-12-16T18:36:14Z

+		<h4>meuemail@mail.com</h4>
+		<h4>+55 21 987654-321</h4>
+		<h3>Mídias</h3>
+		ícones das midias


🙈 podia ter referenciado as imagens aqui 😃

happymoon · 2018-12-16T18:36:51Z

+	<div class="">
+		<h2>Contato</h2>
+		<h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5>
+		<h4>meuemail@mail.com</h4>


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

Suggested change

<h4>meuemail@mail.com</h4>

<a href="mailto:meuemail@mail.com">meuemail@mail.com</a>

happymoon · 2018-12-16T18:37:19Z

+		<h2>Contato</h2>
+		<h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5>
+		<h4>meuemail@mail.com</h4>
+		<h4>+55 21 987654-321</h4>


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>

happymoon · 2018-12-16T18:38:52Z

+
+	<!-- Footer -->
+
+	<div class="">


👉 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>

happymoon · 2018-12-16T18:39:16Z

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


Suggested change

</div>

</footer>

happymoon · 2018-12-16T18:39:46Z

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


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

tarcilas

Bom trabalho! Parabéns e continue evoluindo.

tarcilas · 2018-12-17T20:49:07Z

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


Colocar o favicon (icon.ico).

tarcilas · 2018-12-17T20:50:48Z

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


Colocar o link para as respectivas seções

tarcilas · 2018-12-17T20:52:14Z

+	</nav>
+
+	<!-- Slides -->
+	<div class="">


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

tarcilas · 2018-12-17T20:54:06Z

+	<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>


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

tarcilas · 2018-12-17T20:56:58Z

+
+	<!-- Quem Sou Eu -->
+	<div class="">
+		<h2>Quem sou eu</h2>


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

Arquivo index.html usando apenas html

bd4495b

happymoon reviewed Dec 16, 2018

View reviewed changes

Comment thread index.html Outdated

<div class="">

<h5>Women + Tech = strong </h5>

</div>

happymoon Dec 16, 2018

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change

</div>

</footer>

happymoon reviewed Dec 16, 2018

View reviewed changes

tarcilas reviewed Dec 17, 2018

View reviewed changes

amandafdantas added 2 commits January 5, 2019 21:33

alterações no index.html

9237e8a

Enviando o desafio 2 com o arquivo css

b706bbb

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

	<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 ...

	<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>

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

	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>

	<h4>meuemail@mail.com</h4>
	<a href="mailto:meuemail@mail.com">meuemail@mail.com</a>

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

Uh oh!

Conversation

amandafdantas commented Dec 13, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

happymoon Dec 16, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tarcilas left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

happymoon Dec 16, 2018 •

edited

Loading