Imprimir Página - ayuda por favor maquetacion

Título: ayuda por favor maquetacion
Publicado por: Zeta1337 en 28 Febrero 2017, 07:35 am

hola gente. bueno veran. estoy en el camino de aprender html5 y css. me gustaria saber que errores tiene esta web, errores, recomendaciones, tips. todo es bien venido. lo importante es que estoy dispuesto a aprender de los errores. buen sin mas. aqui dejo los codigos y una imagen de la web (todo esta en un servidor local, por eso paso captura y no un link)

html

Código:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>


<header>

<div id="logo"> 
<img src="imagen.PNG">
</div>

<nav>
	<ul>
		<li><a href="#">Inicio   </a></li>
		<li><a href="#">Servicios</a></li>
		<li><a href="#">Contacto </a></li>
	</ul>
</nav>

</header>

<section>
	<article>
	<hgroup> <h1>Tu Negocio o Tu Proyeto</h1> </hgroup> 
    <img src="foto.jpg">

	</article>

<aside>
	 <h2>Quienes Somos</h2>
	
      <p>
	 	Lorem ipsum dolor sit amet, consetetur sadipscing 
        elitr, sed diam nonumy eirmod tempor invidunt ut 
        labore et dolore magna aliquyam erat, sed diam.
	 </p>

</aside>

</section>



</body>
</html>

CSS

Código:

*{
	padding: 0;
	margin: 0;
}
#contenedor {
	
}
header {
background-color: #222222;
width: 100%;
height:200px;
margin-bottom: 100px;
}
header #logo {
	height:200px;
	width:200px;
	float: left;
	background-color:#222222;
	margin-left: 100px;
}
header #logo img {
	margin: 40px;
}
header nav {
margin: 0 auto;
/*width: 400px;*/
width:50%;
height: 200px;


}
header nav ul {
	margin-left: 30%;
	
}
header nav li{
	display: inline-block;
	margin-top:40px;
    margin-left: 20px;
}
header nav li a {
	color: #FFFFFF;
	text-align: center;
	text-decoration: none;
	padding: 20px;
	font-family: 'Source Sans Pro', sans-serif;

}
header nav li a:hover {
	padding-bottom:20px;
	color:#FFCC00;
}
section {
	width: 90%;
	height: 600px;
	/*background-color: red;*/
	margin: 0 auto;
}
section article {
	width: 50%;
	height: 400px;
	/*background-color: green;*/
	float: left;
	clear: left;
}
section article h1{
	font-size: 36px;
	font-family: 'Source Sans Pro', sans-serif;
	text-align: center;
	 color:#222222;
	
    
}
section article img {
	display: block;
	margin: 0 auto;
	margin-top:10px;
	
}
section aside{

	width: 50%;
	height: 400px;
	
	margin: 0 auto;
	margin-left: 50%;
}
section aside h2{
	text-align: center;
	font-family: 'Source Sans Pro', sans-serif;
	float: left;
	color:#222222;
   margin-top: 70px;
   display: block;
   margin-left: 30%;
   
}
section aside p {
	width: 400px;
	margin-left: 30%;
  margin-top: 20px;
  float: left;
font-family: 'Source Sans Pro', sans-serif;
}

foto de la web.
(https://k61.kn3.net/B/9/5/2/7/6/0B7.png)

Título: Re: ayuda por favor maquetacion
Publicado por: Razzari en 1 Marzo 2017, 21:15 pm

Hola amigo !
Me gustan los colores y estilos que usaste, tienes futuro en el front end !!
El desarrollo web no es lo mismo que hace 5-6 años, hoy en día la gente entra a las web desde su celular en la mayoría de los casos, esos no ha hecho que tengamos que estar cada vez mas pendientes de diseños responsive (adaptables a todos los dispositivos).
Si estas inciandote en el mundo del desarollo web te recomiendo que antes de meterte a aprender mucho css aprendas bien html, no es lo mismo esto

Código:

..
<body>

<h1>Bienvenido a mi pagina</h1>
<p>Espero que te guste</p>
</body>
..

que esto

Código:

..
<body>

<header>
         <h1>Bienvenido a mi pagina</h1>
</header>
<section>
            <p>Espero que te guste</p>
</section>
</body>
..

ver se ve igual, pero ya veraz que a medida que aprendas mas y hagas proyectos mas grandes te sera todo mas facil si saber maquetar bien un sitio. pero veo que en tu html ya tienes buenas practicas, felicitaciones, vas por buen camino

En cuanto a css, aprende los suficiente para saberlo digamos a un %60 .. jajaj
te recomiendo mucho usar librerias de clases, la mas popular "Bootstrap"
Busca en internet sobre bootstrap y mira tutoriales, hoy en dia nadie hace un sitio sin usar alguna libreria, te ahorraran horas de trabajo valiosas

por ejemplo para separar en dos un contenido [como en el caso de la foto y el texto que pususte en tu sitio hubiese bastado solo esto]

Código:

<div>
     <div class="col-md-6"> tu foto</div>
      <div class="col-md-6"> tu texto</div>
</div>

y listo, tu div ya queda separado en dos totalmente.
Entiendes a lo que me refiero, ganas mucho tiempo.

Espero mi consejo te sea util, saludos
animate a aprender todos los dias algo, cualquier cosa pregunta !!!

PD: Soy fanatico de usar fuentes en mis proyectos, la mayoria de las veces las saco de aqui: https://fonts.google.com/ (https://fonts.google.com/) , miralas hay algunas geniales !!!

Título: Re: ayuda por favor maquetacion
Publicado por: Zeta1337 en 1 Marzo 2017, 22:55 pm

hola Razzari, gracias por tu respuesta. la verdad que se nota que estas metido en el tema xD. seguire tu consejo con lo de html y css. eh escuchado hablar de "Bootstrap". y la verdad que me llamo bastante la atencion. aunque primero me intereso saber las bases por eso es que "intente" maquetar el sitio que se puede ver en este post. la verdad agradezco tu respuesta y me gustaria estar en contacto contigo. saludos!

Título: Re: ayuda por favor maquetacion
Publicado por: Razzari en 2 Marzo 2017, 04:14 am

lo que necesites pregunta amigo ! que mientras pueda ayudar lo voy a hacer ! ;-)

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Zeta1337 en 28 Febrero 2017, 07:35 am