¿Cuál es la mejor manera de aprender cómo estructurar un sitio web?

Google busca “plantillas de diseño web” o “ideas de diseño web” o algo similar. Intente encontrar una plantilla que se vea bien y fácil de hacer (No intente hacer plantillas con formas como imágenes hexagonales o divisiones de corte inclinado, a menos que sea un experto). Descargar esa imagen

Para Photoshop

Abre un nuevo archivo en photoshop. El tamaño del documento debe ser un 50% más alto que ancho (como 500 px de ancho y 1024 px de alto). Generalmente un documento consta del siguiente orden

  1. Encabezado superior (opcional)
  2. Encabezado (requerido)
  3. Navegación (requerida)
  4. Contenido principal (obligatorio)
  5. Barra lateral (parte opcional del contenido principal)
  6. Arriba del pie de página (opcional)
  7. Pie de página (obligatorio)
  8. Enlaces a redes sociales (Facebook, Twitter, etc.) [En encabezado o pie de página, opcional]

Cree su archivo en el siguiente orden según su deseo

Cree una imagen del archivo de Photoshop y vea cómo se ve

Para HTML / CSS

  1. Vea la imagen de la plantilla que acaba de crear o la imagen que descargó
  2. Abra su editor (Notepad ++, Dreamweaver, etc.)
  3. Cree un diseño de esa plantilla usando tablas
  4. Nombra tus secciones apropiadamente
  5. Comience a reemplazar las secciones de la tabla con divs y clases CSS creadas de acuerdo con las secciones.
  6. Agregue los colores deseados, tamaño de fuente, altura de línea, etc. según su deseo.
  7. NO ACOMPAÑE EL PROCESO. Tu velocidad se desarrollará a medida que practiques más y más
  8. Mira tus resultados.

Todo lo mejor

Google para algunos de los atributos comunes de Css como posición, visualización, margen, arriba, abajo, izquierda, derecha, relleno, alineación de texto, flotante, claro y sus posibles valores, w3school presentará una explicación muy fácil para estos atributos. Estos son los atributos principales que le permiten posicionar las cosas exactamente de la manera que desee.