Skip to content

Desafio #1: HTML #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NayaraCN wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Desafio #1: HTML #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added images/icon-facebook.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/icon-instagram.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/icon-linkedin.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
186 changes: 186 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
<!doctype html>
<!-- Todas as imagens devem ser reduzidas para o tamanho apropriado para agilizar o processamento, que implica em tirar todos os width das imagens. Flata slideshow -->
<html lang="br">

<head>
<title>Portifólio - MySite</title>
<meta charset="utf-8">
<meta name="author" content="Nayara">
<meta name="generator" content="Brackets">
<meta name="keywords" content="HTML5, WoMakersCodeRJ,Front End, Desafio#2">
<meta name="description" content="Desenvolvedora Front-end">
<meta name="application-name" content="Desenvolvimento Profissional">

<style>
#email {
background-color:transparent;
width: 300px;
text-align: center;
border: 1px solid yellow;
padding: 0px;
margin: 0px;
}
</style>
</head>

<body><!--aparece na pagina-->

<main>

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

O <main> deve ser utilizado para colocar literalmente o conteúdo principal, não devendo ele conter <header>, <footer> ou nenhum outro conteúdo que se repete ao longo do site. Referência: https://www.w3schools.com/tags/tag_main.asp

@happymoon 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
<main>
<header>
</header>
<main>
</main>
<footer>
</footer>


<header>
<nav><!--<div id="navegacao"> local onde é feito a navegação principal do site-->
<img src="./images/logo.png" alt="logo" width="100"/>
<ul>
<li><a href="home.html">HOME</a></li>
<li><a href="servico.html">SERVIÇOS</a></li>
<li><a href="portfolio.html">PORTFÓLIO</a></li>
<li><a href="sobre.html">SOBRE MIM</a></li>
<li><a href="contato.html">CONTATO</a></li>
</ul>
</nav><!--</div>-->
</header>
<div id="home">

@happymoon happymoon Dec 16, 2018 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Nesse caso aqui você pode usar apenas o <section>, já que o <div id="home"> está sem nenhum valor semântico e apenas exercendo a função que o <section> já está executando.

Obs: isso vale para todos os outros blocos onde você usou a mesma estrutura. O <section> serve exatamente para delimitar essas áreas de conteúdo e ele pode ser estilizado via CSS da mesma forma que o <div>, então você não precisa de ambos.

@NayaraCN NayaraCN Feb 12, 2019 •
edited
Loading

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Esse <id = "home"> apareceu por conta do css que ia colocar, mas realmente não consegui me desfazer dele. Ele é usado na hora que mesclo as fotos da section home.
Obs.: eu tenho dúvida sobre o que fiz ainda, tem a ver com a semântica, mas deu certo depois de quebrar um pouco a cabeça.

<section class="home">
<h2>BEM VIND@ </h2>
<h3>Nayara bem vindaaaaaaaa.</h3>
<p>Este site é uma grande conquista, blablablablá</p>
<img src="images/slider01.png" alt="borboleta" width="300" height="300"/>

</section>
</div>

<div id="wrap">
<section class="servicos">
<h2>Serviços</h2>
<p>Hoje me desafio a aprender e desenvolver habilidades para ser destaque no mercado. </p>
<hr>

<figure>

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

Nayara, cada imagem com sua legenda própria deverá ficar agrupada dentro de um elemento <figure> separadamente. É possível sim agrupar várias imagens dentro do figure, mas somente quando elas compartilharem da mesma legenda. Link de referência.

@happymoon 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
<figure>
<figure>
<img src="images/Service1.png" alt="WebSite" width="50" height="50"/>
<figcaption>
<h4>WebSites</h4>
<p>Blablablá</p>
</figcaption>
</figure>
<figure>
<img src="images/Service2.png" alt="Templates" width="50" height="50"/>
<figcaption>
<h4>Templates</h4>
<p>balabalabalabalabala</p>
</figcaption>
</figure>
<figure>
<img src="images/Service3.png" alt="Temas Wordpress" width="50" height="50"/>
<figcaption>
<h4>Temas Wordpress</h4>
<p>vamos estudar </p>
</figcaption>
</figure>

<img src="images/Service1.png" alt="WebSite" width="50" height="50"/>
<figcaption>
<h4>WebSites</h4>
<p>Blablablá</p>
</figcaption>

<img src="images/Service2.png" alt="Templates" width="50" height="50"/>
<figcaption>
<h4>Templates</h4>
<p>balabalabalabalabala</p>
</figcaption>

<img src="images/Service3.png" alt="Temas Wordpress" width="50" height="50"/>
<figcaption>
<h4>Temas Wordpress</h4>
<p>vamos estudar </p>
</figcaption>

</figure>

</section>

<section class="portfolio">
<h2>Portfólio</h2>
<p>Hoje me desafio a aprender e desenvolver habilidades para ser destaque no mercado. </p>

<hr>
<nav><!--<div id="navegacao"> local onde é feito a navegação, "submenu" -->
<ul>
<li><a href="tudo.html">Tudo</a></li>
<li><a href="website.html">WebSite</a></li>
<li><a href="template.png">Templates</a></li>
<li><a href="tema.html">Tema</a></li>
</ul>
</nav>
<!-- por enquanto as imagens são referências para elas mesmas -->

<figure>
<a href="images/Portfolio01.png"><img src="images/Portfolio01.png" width="100"/></a>

<figcaption>
<h4>Thumbnail label</h4>
<p>Teste programador </p>
</figcaption>

<figcaption>

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

Como expliquei mais acima, não se deve colocar mais de uma legenda dentro de um elemento <figure> e sim separar cada grupo de foto + legenda dentro de um <figure> individual.

<h4>Thumbnail label</h4>
<p>Teste programador </p>
</figcaption>

<a href="images/Portfolio02.png"><img src="images/Portfolio02.png" width="100"/></a>

<figcaption>
<h4>Thumbnail label</h4>
<p>Teste programador </p>
</figcaption>

<a href="images/Portfolio03.png"><img src="images/Portfolio03.png" width="100"/></a>

<figcaption>
<h4>Thumbnail label</h4>

@happymoon happymoon Dec 16, 2018 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Semanticamente não faz muito sentido utilizar um elemento de título dentro de uma legenda de imagem. As legendas são itens secundários e complementares às imagens.

Obs: isso vale para todas as outras <figcaption> com a mesma estrutura.

<p>Teste programador </p>
</figcaption>

</figure>
</section>

<section class="sobremim">
<h2>Quem eu sou</h2>
<p>Hoje me desafio a aprender e desenvolver habilidades para ser destaque no mercado. </p>
<hr>

<figure>
<img src="images/photo.png" width="50"/>
<figcaption>Joana D'arc</figcaption>
</figure>

<figure>

@happymoon happymoon Dec 16, 2018 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Não considero necessário usar o <figure> para imagens que não são fotografias e que não terão legendas. Fica a seu critério, porém eu não usaria. 💃

@NayaraCN NayaraCN Feb 12, 2019

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Neste ponto, pensei que ficaria a fotografia da "Dona do site", pois é uma apresentação na section ''sobremim''.

<a href="home.html"><img src="images/icon-facebook.png" alt="facebook" width="50"/></a>

<a href="home.html"><img src="images/icon-instagram.png" alt="instragram" width="50"/></a>

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

*instagram tá escrito errado no alt 🙈


<a href="home.html"><img src="images/icon-linkedin.png" alt="linkedin" width="50"/></a>

</figure>

<h3>Sobre mim</h3>
<p>Hoje me desafio a aprender e desenvolver habilidades para ser destaque no mercado. </p>

<h3>Habilidades</h3>
<!-- a barra de progresso será mostrada no css e/ou javascript -->

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

Dá pra fazer também usando o elemento <progress>, dá uma conferida: https://www.w3schools.com/tags/tag_progress.asp


<div class="progresso">Java Script</div>
<div class="progresso">
HTML e CSS</div>
<div class="progresso">
jQuery</div>
<div class="progresso">Wordpress</div>

</section>

<section class="contato">
<h2>Contato</h2>
<p>Hoje me desafio a aprender e desenvolver habilidades para ser destaque no mercado. </p>
<hr>
<div id="email">nayaracn@outlook.com</div>

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

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

Suggested change
<div id="email">nayaracn@outlook.com</div>
<a href="mailto:nayaracn@outlook.com">nayaracn@outlook.com</a>

<p>+55 22 999587526</p>

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

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

Suggested change
<p>+55 22 999587526</p>
<a href="tel:+5522999587526">+55 22 999587526</a>

<p>Mídias</p>
<hr>

@happymoon happymoon Dec 16, 2018 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Semanticamente o <hr> tem a função de separar áreas que abordam conteúdos com temas diferentes e não deveria ser usado apenas por questões visuais. Referência: https://www.w3schools.com/tags/tag_hr.asp

<!-- buscar por imagens -->
<a href="home.html"><img src="images/icon-facebook.png" alt="facebook" width="50"/></a>

<a href="home.html"><img src="images/icon-instagram.png" alt="instragram" width="50"/></a>

<a href="home.html"><img src="images/icon-linkedin.png" alt="linkedin" width="50"/></a>
</section>
</div>

<footer>
<p>Women + Tech = &lt; /strong &gt;</p>
</footer>


</main>

</body>
</html>