Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, comunidade iMaster!
Estou aprendendo HTML e CSS, mas não tenho professores. Estudo em casa! Devido à isto, não conheço ninguém para trocar idéias sobre tópicos, por isso eu conto com vocês, para me falarem onde estou errando, qual técnica usar, entre outras críticas.
Além do já citado, vocês poderiam me falar se é correto exercitar-se reconstruindo templates free, com minha própria lógica, contanto que seja semântica o suficiente?
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Belle & Carrie Rehabilitation YOGA</title>
<meta name="description" content="YOGA <meta name="author" content="João Lucas">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Interface -->
<section id="interface">
<!-- Header do site -->
<header id="principal">
<hgroup>
<h1><a href="#">Belle & Carrie</a></h1>
<h2><a href="#">REHABILITATION YOGA</a></h2>
</hgroup>
<nav>
<ul id="menu">
<li>
<a href="#" id="home">HOME</a>
</li>
<li>
<a href="#" id="about">ABOUT</a>
</li>
<li>
<a href="#" id="classes">CLASSES</a>
<!-- Sub-menu -->
<ul>
<li>
<a href="#">INSTRUCTORS<a>
</li>
</ul>
</li>
<li>
<a href="#" id="contact">CONTACT</a>
</li>
<li>
<a href="#" id="blog">BLOG</a>
</li>
<ul>
</nav>
</header>
<!-- Seção de conteúdos -->
<Section id="Content">
<!-- Seção de conteúdos para introdução ao site -->
<section class="intro">
<hgroup>
<h1>YOGA</h1>
<h2>For Better Health & Flexibility</h2>
</hgroup>
<img id="lady" src="images/lady-in-yoga.jpg" alt="lady doing yoga">
</section>
</section>
<!-- Rodapé -->
<footer>
<!-- Container genérico, para juntar endereço e copyright -->
<div id="address-copy">
<address>123 St. City Location, Country | 987654321</address>
<p>© 2023 by Belle & Carrie Rehabilitation Yoga. All rights reserved.</p>
</div>
<!-- Lista de redes sociais -->
<ul>
<li>
<a href="#" id="facebook">.</a>
</li>
<li>
<a href="#" id="twitter">.</a>
</li>
<li>
<a href="#" id="googleplus">.</a>
</li>
<li>
<a href="#" id="pinterest">.</a>
</li>
</ul>
</footer>
</section>
</body>
</html>/FONTS/
@font-face{
font-family: 'NixieOne';
src: url('../fonts/nixieone-regular-webfont.eot');
src: url('../fonts/nixieone-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/nixieone-regular-webfont.svg') format('svg'),
url('../fonts/nixieone-regular-webfont.ttf') format('truetype'),
url('../fonts/nixieone-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}@font-face{
font-family: 'Lato';
src: url('../fonts/lato-regular-webfont.eot');
src: url('../fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/lato-regular-webfont.ttf') format('truetype'),
url('../fonts/lato-regular-webfont.svg') format('svg'),
url('../fonts/lato-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}a{
text-decoration:none;
margin: 0;
padding: 0;
}li{list-style-type: none;}
h1, h2{
margin: 0;
padding: 0;
} width: 960px;
margin: auto;
}/HEADER/
#principal{/Centraliza textos e tira margens/
text-align: center;
margin: 0;
}#principal hgroup{/Centraliza todos os títulos, em relação a seus próprios containers (horizon x verti)/
padding: 25px 45px 30px 45px;
}
#principal hgroup h1 a{/*Define estilos para os títulos, removendo os estilos padrões da tag <a>*/
font-family: 'Lato';
font-size: 50px;
line-height: 50px;
color: #99fa99;
}#principal hgroup h2 a{/Mesma regras, que o seletor anterior/
font-family: 'NixieOne';
font-size: 26px;
line-height: 50px;
color: #b6d8cf;
}#principal nav ul li{/Dispõe listas em linhas, com largura definida/
background-color: #077054;
display: inline-block;
width: 153px;
margin: 0;
}#principal nav ul li{/Posiciona as listas do menu/
position: relative;
}#principal nav ul li ul li{/Esconde todos sub-menus e formata estilos/
display: none;
left: 0;
list-style: none;
margin: 0;
padding: 11px 0 5px 0;
position: absolute;
top: 30px;
}
#principal nav ul li:hover ul li{/*Mostra o sub-menu, quando passa o mouse sobre as <li> que possuem outras listas*/
display: block;
}#principal ul a{/Formata estilo de todos os links, ou seja, todos os itens do menu/
margin: 0;
padding: 0;
font-family: 'Lato', serif;
font-size: 18px;
line-height: 30px;
color: #b6d8cf;
}#principal ul a#home{/Atribui cor diferente ao ítem de menu, atual (Se tivesse "a#classes" este ítem teria cor diferente)/
color: #99fa99;
}/CONTENT INTRO/
Section.intro{/Define o espaço para uma introdução, sobre o site/
background-color: white;
padding:120px 80px 65px 65px;
} width: 510px;
float: left;
}.intro hgroup h1{/Formata estilos, impõe background e alinhamento de texto, no centro/
background: url(../images/bg-separator.png) no-repeat center bottom;
color: #21a51e;
font-family: 'NixieOne';
font-size: 100px;
font-weight: normal;
line-height: 100px;
margin: 0;
padding: 0 0 55px;
text-align: center;
}.intro hgroup h2{/Mesmas regras do seletor anterior, porém, aplicadas ao título de segunda hierarquia/
color: #21a51e;
font-family: 'NixieOne';
font-size: 90px;
line-height: 100px;
padding: 43px 0 0;
text-align: center;
margin: 0;
}/Footer/
footer{/Define moldura externa e interna/
margin: 0;
padding: 30px 0 60px 0;
}footer address{/Formata estilos do texto de endereço e modura externa/
font-style: normal;
font-family: 'Lato';
font-size: 26px;
line-height: 14px;
color: #99fa99;
margin: 0;
}footer p{/Formata estilo do texto de copyright e modura externa/
font-family: 'Lato';
font-size: 12px;
line-height: 30px;
color: #b6d8cf;
margin: 0;
}footer div#address-copy{/Dispõe a divisória em flutuação à esquerda, em bloco/
display: block;
float: left;
margin: 0;
}footer a#facebook{/Formata tamanho, background e moldura externa de uma das redes sociais/
background: url(../images/icon-facebook.png) no-repeat;
display: block;
width: 16px;
height: 30px;
margin: 0 20px 0 0;
float: left;
}footer a#twitter{/Formata tamanho, background e moldura externa de uma das redes sociais/
background: url(../images/icon-twitter.png) no-repeat;
display: block;
width: 37px;
height: 30px;
margin: 0 20px 0 0;
float: left;
}footer a#googleplus{/Formata tamanho, background e moldura externa de uma das redes sociais/
background: url(../images/icon-googleplus.png) no-repeat;
display: block;
width: 32px;
height: 32px;
margin: 0 20px 0 0;
float: left;
}footer a#pinterest{/Formata tamanho, background e moldura externa de uma das redes sociais/
background: url(../images/icon-pinterest.png) no-repeat;
display: block;
width: 30px;
height: 30px;
margin: 0;
float: left;
}footer ul{/Faz lista de redes sociais flutuarem à esquerda, com margem externa neutra/
float: right;
margin: 0;
}footer li{/Dispõe a lista de redes sociais, em linha/
display: inline;
margin: 0;
}Espero respostas. Valeu!
>
Além do já citado, vocês poderiam me falar se é correto exercitar-se reconstruindo templates free, com minha própria lógica, contanto que seja semântica o suficiente?
Cara na minha opinião não tem essa de 'é correto'.
Você vai adquirir experiencia, enquanto estuda/faz algo relacionado a área (ponto)
Já trabalhei ao lado de uns feras no Front/End ou 'criação de site', estruturação de Layout a partir de um PSD.
Rola sempre uma paixão, e o caminho é esse... Estudar, estudar e estudar.
Nosso colega @L. Henrique citou alguns contras que na minha visão acabam sendo 'Pros'.
Até por que se algo te incomoda você pode pesquisar uma maneira de melhorar aquilo
Ex:
>
http://tableless.com.br/estruturando-o-codigo-css/
http://tableless.com.br/principios-para-escrever-css-de-forma-consistente/
Sobre recriar templates acho bacana sim a ideia
E criar coisas novas são bacana também.
Por exemplo um site sobre você.
Que tal fazer um layout assim?
Sei que você está começando, tudo é muito novo/diferente mas é legal criar uma conta no github.
E inclusive da pra você hospedar o seu site lá de forma gratuita.
Tem um tutorial bacana aqui:
http://tableless.com.br/criando-paginas-web-para-seus-repositorios-com-o-github-pages/
dica:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i2.wp.com/tableless.com.br/wp-content/uploads/2013/07/its-free.png&key=a6d7a3056849f2cb0ecbbf6710767a164c333749bac1e7f1ccf747b3ba08d4da" alt="its-free.png" />
@code
>
"qual técnica usar, entre outras críticas."
Senti falta de um meta importante... (para evitar aqueles acentos no estilo: *� **ão )*
<meta charset="UTF-8">
Ele basicamente fala, Olha browser... essa página aqui é UTF-8 TIO!
Obrigado pela participação!
Joao,
O ideal é que você comece criando seus próprios projetos com seus próprios códigos. Isso vai te ajudar a:
Uma coisa muito comum é ver novos programadores na área que dizem que a tag Anchor (<a>) se chama "Link" (por falta de conhecimento). As pessoas compreendem? Sim. É certo? Não.
Agora quando você quer editar um código alheio (template - ou manutenção mesmo) terá seus prós e contras.
Prós:
Contras:
É interessante você pegar um projeto pronto para fuçar, sem pretensões de deixar pronto, de colocar no ar ou sei la o que queira fazer. Emule um server local (XAMPP, MAMP, WAMP) e fique editando todos os arquivos desse template pra entender como cada coisa funciona.
Lembrando que um template é diferente do outro, então o que você aprendeu com um, talvez uns 30% você use pro outro.
Grande abraço!