Jump to content
Joao_Lucaas

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 xenonPT
      ola gostava de saber se alguem sabe um video sem ser foto do pinterest que me ajudasse a melhor o meu esboço do corpo humano tanto masculino com feminino  com por exemplo formas geométricas 
      se tiverem outras dicas podem dar
    • By andre2654
      Boa tarde, eu preciso de ajuda de vocês, estou com um problema que é o seguinte, eu preciso que quando a pessoa clicar na lixeira, exclua essa linha do banco de dados, mas como posso fazer? perdoem a minha inexperiência, mas já busquei bastante a respeito e nada.
    • By xPeedroo
      Tenho uma tabela assim 
      Usuario(id,login,senha,email,adm)
       
      E fiz um if em php assim 
      $adm = $_GET['adm'];
      If ($adm == 1){ 
      <input type="submit"> botão </input>

       
       
      No caso eu queria pegar um valor direto da tabela, qual função ou comando eu uso?
       
       
      Gostaria de saber qual é o erro que está ocorrendo, e como eu poderia resolver. Postem o código pf. Obrigado 
    • By Ewfc2005
      Eu gostaria de saber como faço para criar uma area de serviço igual ao dessa página https://ciesalon.com/services
      deixando ela responsiva
       
    • By Rafael Arcanjo
      Bem galera... estou fazendo um jogo que no html eu peço o nome e 6 números... criei 2 vetores, um armazena o nome e o outro os 6 numeros... o problema é que o usuario pode adicionar mais de uma pessoa com 6 numeros... um vetor para armazenar mais de um nome não tem problema, o problema é o vetor que armazena os numeros, se eu adicionar duas pessoas, vai ficar 12 numeros num vetor, eles tem que ficar separado pq depois vou sortear um numero e o primeiro jogador que conseguir os 6 numeros ganha então eu tenho que saber quais os numeros cada jogador tem
×

Important Information

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