Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

snowstormdelivery

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!

Compartilhar este post


Link para o post
Compartilhar em outros 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!

Compartilhar este post


Link para o post
Compartilhar em outros 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/

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Descomplica Consultoria
      Oi Pessoal, preciso de ajuda com um portfolio academico
    • Por 4Unknow
      Bom dia comunidade Imasters.

      Venho aqui tratar de um problema dúvida que estou tendo com um layout que estou tentando usar o formulário php dele.
      Quando clico em enviar ele me enviar para um arquivo .php  (assets/vendor/simple-forms/sendmail.php)

      Ele não envia o e-mail, acredito que deveria aparecer uma mensagem que o contato foi enviado corretamente.
      Vou deixar os arquivos aqui em anexo quem puder me ajudar nessa, ficaria muito grato.
       
      Link Website (wetransfer.com)
    • Por Dcdbbvb
      Faça um código que deverá ter uma matriz de qualquer tamanho(Você define o tamanho) no qual o usuário irá digitar os números que serão armazenados na matriz. Construa uma função que deverá somar todos os números digitados. No final o programa mostrará a matriz e o valor total da somatória.
       
      por favorrrr alguém me ajuda
    • Por lotthaus
      Alguém poderia fazer essa atividade para eu ajudar um amigo ?

    • Por Geralt96
      Bom dia. Alguém pode me dá uma ajuda pra desenvolver essa questão, por gentileza?

      Aqui está ela: https://projecteuler.net/problem=6

      A soma dos quadrados dos primeiros dez números naturais é: 1² + 2² + ... 10² = 385...
      O quadrado da soma dos dez primeiros números naturais é: (1+2+ ... 10)² = 55² = 3025...
      Portanto, a diferença entre a soma dos quadrados dos primeiros dez números naturais e o quadrado da soma é: 3025 - 385 = 2640.
      Encontre a diferença entre a soma dos quadrados dos primeiros cem números naturais e o quadrado da soma.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.