Skip to content
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

Desafio1-WomakersCode-Grupo5 #10

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

Desafio1-WomakersCode-Grupo5 #10

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
197 changes: 197 additions & 0 deletions desafio1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
<!DOCTYPE html>
<html>
<!----------------------------------MENU TOPO--------------------------------------------->
<head>
<meta charset="utf-8">
<header>
Copy link
Contributor

Choose a reason for hiding this comment

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

@tamiresguesdri, use a tag <header> dentro da tag <body>. O <head> usamos para definir as meta tags e importação de arquivos CSS, incluir o título da nossa página.

Suggested change
<header>
<body>
<header>
<figure>
<img src="" alt="ImagemBorboletaWomakersCode"/>
</figure>
<nav class="menu-topo">
<ul>
<li> Home </li>
<li> Serviços </li>
<li> Portfólio </li>
<li> Sobre mim </li>
<li> Contato </li>
</ul>
</nav>
</header>
</body>

<figure>
<img src="" alt="ImagemBorboletaWomakersCode"/>
</figure>
<nav class="menu-topo">
<ul>
<li> Home </li>
<li> Serviços </li>
<li> Portfólio </li>
<li> Sobre mim </li>
<li> Contato </li>
</ul>
</nav>
</header>
<!-----------------------------------FIM MENU TOPO-------------------------------------------------->
</head>

<body>
<title>Bem Vind@</title>
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<title>Bem Vind@</title>
<h1>Bem Vind@</h1>

A tag <title> a gente usa apenas no <head> para representar o título da nossa página (que aparece bem lá no topo do nosso browser) :) Aqui te dou a sugestão em usar a tag <h1> para definição de título.

<h2>Curabitur Iaculis</h2>
<h3>texto 3 linhas</h3>
<!-------------------------------------MENU PRINCIPAL----------------------------------------->
<br>
Copy link
Contributor

@alinebezzoco alinebezzoco Dec 19, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

Suggested change
<br>
<br> <!-- Evite o uso de <br /> -->

Evite ao máximo o uso da tag <br /> para quebra de linha ou aumento de espaço entre os elementos. Caso o seu objetivo seja quebra de texto use a tag <p> que é específica para parágrafos. Se deseja obter um espaçamento entre uma seção ou outra use a propriedade CSS margin.

<nav class="menu-principal">
<h1> <a href="#">Serviços</a></h1>
<table>
<tr>
<figure>
<img src="" alt="websites">
</figure>
<h2><a href="#">Websites</a></h2>
<h3>texto</h3>
</tr>
<tr>
<figure>
<img src="" alt="templates">
</figure>
<h2><a href="#">Templates</a></h2>
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<h2><a href="#">Templates</a></h2>
<a href="#">Templates</a>

Não é necessário incluir uma tag de hipertexto e link juntos. Neste caso você pode manter a tag <a> depois manipular via CSS o tamanho dela ( usando a propriedade font-size).

<h3>texto</h3>
</tr>
<tr>
<figure>
<img src="" alt="temas-wordpress">
</figure>
<h2><a href="#">Temas WordPress</a></h2>
<h3>texto</h3>
</tr>
</table>
</nav>

<br>
<!--------------------------------------INÍCIO MENU MEUS TRABALHOS---------------------------------->
<nav class="meus-trabalhos">
<h1>Meus Trabalhos</h1>
<ul id="menu-meus-trabalhos">
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<ul id="menu-meus-trabalhos">
<ul class="menu-meus-trabalhos">

Dica: em vez de usar id's, use classes. Id é recomendável usar para 1x para referenciar algum bloco de elemento, por exemplo. Classes você pode repetí-las em diversos momentos.

ID - Uma única por página. Identificador: #
CLASS - Múltiplas por elemento/página. Identificador: .

<li><a href="#"> Tudo</a></li>
<li><a href="#"> Website</a></li>
<li><a href="#"> Template</a></li>
<li><a href="#"> Tema</a></li>
</ul>
</nav>
<br>
<h1>Quem sou eu</h1>
<img src="" alt="foto-tamires"/>
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<img src="" alt="foto-tamires"/>
<figure><img src="" alt="foto-tamires"/></figure>
<figcaption>Tamires Rodrigues</figcaption>

Se aqui você pretende usar o <figcaption> a sua imagem precisa usar o <figure> para manter a semântica.

<figcaption>Tamires Rodrigues</figcaption>

<ul>
<li>
<a href="#">
<figure>
Facebook
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
Twitter
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
Linkedin
</figure>
</a>
</li>
</ul>
<br>
<title>Sobre mim</title>
<p>
Texto sobre mim
</p>

<!-----------------------------FIM MENU MEUS TRABALHOS---------------------------------->


<!--------------------------------INÍCIO HABILIDADES-------------------------------------->
<section class="habilidades"></section>
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<section class="habilidades"></section>
<section class="habilidades">
<h4>Habilidades</h4>
<ul>
<li>Javascript</li>
<li>HTML e CSS</li>
<li>CSS</li>
<li>WordPress</li>
</ul>
</section>

Coloque o conteúdo que você desenvolveu dentro da section Habilidades. A tag <title> não usamos para definir título de algum texto em html, apenas dentro da tag <head> como título da nossa página (que aparece lá em cima do nosso browser). Se você quer usar alguma tag que permita configurar título na sua página você pode usar o h1, h2, h3, h4, h5. Como no layout o título aparece em um tamanho menor usei o <h4> como exemplo.

Em vez de você usar o <p> para definir uma lista use as tags <ul> e <li> específicas para criação de listas.

<title>Habilidades</title>
<p>
JavaScript
</p>
<p>
HTML & Css
</p>
<p>
JQuery
</p>
<p>
WordPress
</p>
</section>
<!-------------------------------------FIM HABILIDADES------------------------------------------->


<!-------------------------------------INÍCIO CONTATOS-------------------------------------->
<section class="contatos">
<title>Habilidades</title>
<p>texto</p>
<p>[email protected]</p>
<p>+55 (21) 99832-3173</p>
</section>
<!-------------------------------------FIM CONTATOS------------------------------------------->

<!--------------------------------INÍCIO MÍDIAS-------------------------------------->

<title>Mídidas</title>
<ul>
<li>
<a href="#">
<figure>
Facebook
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
Twitter
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
Linkedin
</figure>
</a>
</li>
</ul>
<br>

<li>
<a href="#">
<figure>
Pinterest
</figure>
</a>
</li>
</ul>

<br>
<li>
<a href="#">
<figure>
Copy link
Contributor

@alinebezzoco alinebezzoco Dec 19, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

Suggested change
<figure>
<img src="facebook.png" alt="Facebook" title="Facebook" />

A tag <figure> a gente usa para fazer marcação nas imagens. Então ele especifica que quando você usa o <figure> está informando que dentro dela terá uma imagem. E a tag <figcaption> serve para indicar uma legenda para ela.

Nesse caso de listar os ícones das redes sociais não há necessidade de usar a tag <figure>. A gente usa mais para destacar fotos e inserir legendas.

Referência: https://www.w3schools.com/tags/tag_figure.asp

Tá tudo bem, Tamires :) O importante é tentar, sempre! Parabéns pelo seu esforço e dedicação!

Não sei o que isso significa me ajuda
</figure>
</a>
</li>
</ul>
<br>

<li>
<a href="#">
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<a href="#">
<a href="#">
<img src="google.png" alt="Google +" title="Google +" />
</a>

<figure>
Google+
</figure>
</a>
</li>
</ul>

<!---------------------------FIM MÍDIAS---------------------------->

<!-----------------INÍCIO RODAPÉ-------------------->
<footer>
<p>Women + Tech = </ strong></p>
</footer>

</body>
</html>