Jump to content
JLammer

Exercício HTML, onde errei e como melhorar?

Recommended Posts

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
For Better Health & Flexibility">

	<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;
}
/*SITE BODY*/
body{background-color: #077054;}

a{
	text-decoration:none;
	margin: 0;
	padding: 0;
}

li{list-style-type: none;}

h1, h2{
	margin: 0;
	padding: 0;
}
/*INTERFACE SECTION*/
section#interface{/*Define largura e centraliza a interface (header, content e footer)*/
	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;
}
.intro hgroup{/*Define largura e flutuação à esquerda, para o grupo de títulos*/
	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!

Share this post


Link to post
Share on other sites

Joao,

O ideal é que você comece criando seus próprios projetos com seus próprios códigos. Isso vai te ajudar a:

  1. ​Reconhecer todas as sintaxes e para que servem;
  2. Utilizar CSS e nomear apropriadamente cada um dos elementos no HTML;
  3. Aprender a utilizar os seletores, pseudo-elementos e pseudo-classes no CSS;
  4. Aprender a construir um HTML / CSS semântico, de fácil entendimento e com comentários para auxílio;
  5. E também você aprende a pesquisar quando surge uma dúvida.

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:

  • Você aprende a identificar possíveis erros e como não comete-los;
  • Você aprende a decifrar um código que não é seu e a entende-lo;
  • Você aprende a solucionar erros dos quais nunca tinha visto.

Contras:

  • Você vai perder muito tempo tentando entender o código;
  • Você vai perder muito tempo tentando entender como o CSS está estruturado e como as classes estão nomeadas.
  • Muitas vezes você não vai conseguir resolver alguns problemas, já que eles vão sair fora do que você está habituado a trabalhar ou até mesmo até onde vai seu conhecimento.

 

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

  • +1 2

Share this post


Link to post
Share on other sites

 

 

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:

 

 

  • Você vai perder muito tempo tentando entender como o CSS está estruturado e como as classes estão nomeadas.

 

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:

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!

http://tableless.com.br/html-encode-utf-8/

  • +1 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By mtwzim
      Olá pessoal, recentemente eu venho desenvolvendo um app para pagamentos/cartões pré-pago, e estou procurando alguma empresa/api que forneça um serviço apara emissão de cartões pré-pagos (e que seja possível customizar os cartões: por a minha própria logo, etc), alguém pode me informar alguma empresa que faz isso aqui no brasil? Já encontrei soluções como stripe mas eles não oferecem esse serviço para o brasil?
    • By Rzorr
      Bom dia,
              eu tenho um  site de imóveis, sou corretor, ele está com alguns problemas na URL, comprei esse script e venho fazendo algumas alterações nele, sei o básico, cadastrar, deletar, buscar, update, mas o que acontece esse site foi construido com MVC e confesso parei de estudar PHP faz muito tempo, e não entendo nada de MVC, abaixo o código da busca e como forma o link é montado.
          No site o link fica assim: /imoveis/lista/referencia/referencia/categoria/comprar/tipo/tipo/cidade/Camboriú/bairro/bairro#busca nesse exemplo fiz uma busca pela cidade!
         Se clico no menu em vendas o link fica assim: /imoveis/lista/referencia/referencia/categoria/comprar/tipo/tipo/cidade/cidade/bairro/bairro#busca
      pessoal obrigado pela disposição em ajudar, eu to tentando resolver faz dias, mas não consigo entender a a forma como é construido.
       
      <?php class busca extends controller { public function init(){ } public function inicial(){ $referencia = $this->post('referencia'); $categoria = $this->post('categoria'); $tipo = $this->post('tipo'); $cidade = $this->post('cidade'); $bairro = $this->post('bairro'); if($referencia){ $cidade = "cidade"; $bairro = "bairro"; $tipo = "tipo"; $categoria = "categoria"; } else { $referencia = 'referencia'; if(!$categoria){ $categoria = "categoria"; } if(!$tipo){ $tipo = "tipo"; } if(!$cidade){ $cidade = "cidade"; } if(!$bairro){ $bairro = "bairro"; } } $endereco = DOMINIO."imoveis/lista/referencia/$referencia/categoria/$categoria/tipo/$tipo/cidade/$cidade/bairro/$bairro#busca"; $this->irpara("$endereco"); }  
    • By silver sanths
      #include <stdio.h> int main() { float valor_produto = 0, valor_pagamento = 0; int troco = 0; troco = valor_pagamento - valor_produto; scanf("%f", &valor_produto); scanf("%f", &valor_pagamento); if (valor_produto < valor_pagamento) { printf("100: %d", troco / 100); printf("\n50: %d", troco % 100 / 50); printf("\n2: %d", troco % 50 / 20); printf("\n10: %d", troco % 20 / 10); printf("\n5: %d", troco % 10 / 5); printf("\n2: %d", troco % 5 / 2); printf("\n1: %d", troco % 2 / 1); } return 1;
    • By lupe
      Olá, estou quebrando a cabeça para criar um script para gerar uma imagem com o horario atual "horas & minutos" porem o resultado tem que ser em imagem para ser processada no programa ao qual vou utilizada. 

      é uma imagem que a cada minuto se atualiza com as informações. 

      segue exemplo do que estou planejando: https://painel.leveljogos.com/beta/banner/tumb.php?height=266&clima=0


      att; Lupe
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.