Al crear una página web, ¿primero vas con contenido HTML y luego haces el estilo CSS?

Construir una página web no es difícil de hacer, pero no significa que pueda ser bastante confuso. Incluso antes de hacer HTML o CSS, debe tener una arquitectura de información lógica. Luego sumérjase en el producto mínimo viable (MVP) y comience a construir allí. En este punto, sabría exactamente lo que quiere, por lo que en realidad escribiría HTML y CSS juntos.

Escribí un artículo que describe exactamente cómo construir un sitio web: https://www.linkedin.com/pulse/d …

¡Echale un vistazo! Me encantaría dar me gusta / comentar / compartir el artículo si lo encuentra útil 🙂

Para eso se crearon y evolucionaron HTML y CSS.

HTML garantiza que su contenido sea “leído” por cualquier tipo de navegador, lector de pantalla, rastreador de motores de búsqueda, dado que lo ha estructurado deliberadamente, estos “lectores” lo leerán de una manera óptima, una forma que es comprensible usuario en el otro extremo.

Cuando esté listo para trabajar en esa maqueta de diseño visual, trabaje con CSS para lograr una apariencia o diseño visual similar.

Incluso podría diseñar el tipo y el volumen de la voz en la que los lectores de pantalla leerán su contenido utilizando CSS.

HTML es para la estructura de su contenido y CSS es para la presentación de su contenido marcado.

Manténgalos separados o, en otras palabras, HTML primero y CSS segundo, de lo contrario tendrá un sitio web brillante en el exterior pero está podrido hasta el núcleo en el interior.

Hasta cierto punto, sí. Pero en realidad, es más como si los escribieras simultáneamente. Aunque html y css son definitivamente dos entidades separadas, css realmente no hace nada sin html. Debido a esto, ayuda pensar en ellos como una unidad.

Definitivamente, primero puede escribir todo su html, pero lo más probable es que al menos desee aplicar las reglas CSS que controlan las dimensiones y el posicionamiento de los elementos html en la página. Estas serían principalmente propiedades css como ancho, alto, posición y flotante. Personalmente, también me gusta usar muchos colores de fondo diferentes al construir el diseño inicial. Tener los diferentes colores ayuda a ver dónde está todo. Luego, una vez que tenga el diseño, puede regresar y agregar todos los estilos específicos como sombras paralelas, radio de borde, colores, fuentes, relleno, márgenes, etc.

Siempre ve por el contenido primero.

Agregue contenido ficticio a su HTML para que pueda ver lo que está diseñando. Si optas por CSS, estarás diseñando a ciegas.

¡Feliz diseño!

Hago mucho trabajo que es html y css solo porque eso es lo que mi organización quiere. Construyo sitios de cursos. Aquí hay una aproximación de mi flujo de trabajo en un proyecto.

1. Al comienzo de un proyecto, a menudo me siento (virtualmente) con una PYME y un administrador para el programa que necesita cursos creados para tener una idea de los tipos de contenido, cómo podría organizarse. También planificamos cómo se me entregará el contenido a mí u otro diseñador. Y ese es el final del papel del contenido en mi proceso de diseño.
2. Construyo (en html) algunos wireframes que creo que serán buenos para el diseño y la entrega del contenido. (El contenido real no es parte de esto; estoy hablando de cajas delimitadas en rojo y lorem ipsum). Dado que generalmente hago diseños receptivos, lo que configuro será receptivo.
3. Construyo una hoja de estilo básica que define la apariencia de los elementos en la estructura metálica. Si corresponde, es posible que tenga algunas combinaciones de tramas básicas y hojas de estilo básicas para mostrar al grupo que necesita realizar el proyecto.
4. Una vez que se eligen los estilos básicos y los diseños de muestra, se invierte tiempo en desarrollarlos, ajustarlos, volver a verificar la accesibilidad básica y pulirlos a un estado “final” flexible.
5. En ese momento tengo una “plantilla”. Como creo sitios de cursos, la plantilla tendrá varias páginas con todos los diseños básicos que un curso pueda necesitar. Por lo general, hay una hoja de estilo para todos los medios de “pantalla” y, a veces, una especial para imprimir. La plantilla no tiene contenido real y puede reutilizarse para múltiples sitios de cursos que un programa pueda necesitar.
6. AHORA el contenido vuelve a la imagen. Para cada página de contenido, se copia una página de plantilla adecuada para la estructura alámbrica. La forma del html ya está ahí; solo necesita recibir el “html interno” – el contenido de la página.

Eso es para páginas que son parte de un proyecto. Pero incluso si necesito una página independiente que no sea parte del proyecto, mantengo plantillas de página minimalistas que puedo copiar y usar.

Sí, esta es la ruta correcta porque puede aprender la importancia de un marcado correcto en lugar de poner infinitas líneas de estilo para representar un marcado incorrecto en uno bueno. Además, escribir CSS primero podría conducir a un diseño inesperado porque no puede verificarlo si no está seguro del 100% de lo que está haciendo.

Hay un par de escenarios posibles:

1. Usted tiene poco o ningún control sobre el HTML con el que está trabajando, en cuyo caso hace lo que puede con el HTML y luego agrega estilo.
2. Usted tiene control total sobre HTML y CSS, en cuyo caso siempre agregue el HTML primero y hágalo lo más mínimo posible mientras representa la verdadera naturaleza del contenido que se presenta.
   Por ejemplo, no agregue divisores de contenedor solo porque cree que podría necesitarlo más adelante. Primero escriba solo la estructura en HTML y agregue contenido real o contenido ficticio. Asegúrese de agregar clases adecuadas al contenido, pero si encuentra que una clase se usa decenas de veces, considere si hay una mejor manera de seleccionar esos elementos.
   Por ejemplo, no agregue la clase de “menú-lista-elemento” a cada elemento dentro de una clase ul de “menú”. Luego diseñe eso todo lo que pueda sin agregar ningún contenido adicional. Si cree que necesita clases adicionales o un cambio de estructura para diseñar la forma que desea, hágalo ahora.

En general, escribirá el contenido de una manera que sea fácil de diseñar. Esto es bueno, pero asegúrese de que su HTML realmente refleje el contenido, no la apariencia.

Comienzo con el HTML pero voy de un lado a otro, así tendré mi archivo HTML y mi archivo style.css abiertos al mismo tiempo.

En el archivo HTML comenzaré a trabajar de arriba hacia abajo para completar la estructura general de la página. Luego ajustaré cada sección, nuevamente trabajando de arriba hacia abajo. Por lo tanto, podría centrarme en el área del encabezado del HTML y luego editar la hoja de estilo para esa sección.

Luego trabajaría en la siguiente parte del HTML y continuaría trabajando de un lado a otro. También cargaré periódicamente los archivos para ver cómo se ven en el servidor.

Personalmente, primero trato de ir con la lógica de negocios

Luego trato de configurar las clases HTML en torno a mis ideas de “cómo” el CSS hará que se vea

Entonces prepárate para refactorizar, 50 veces

Primero debe comenzar con HTML para configurar la estructura. Si aún no tiene contenido, puede usar marcadores de posición de texto e imagen ficticios.

Sí, estás en lo correcto ! Primero debe colocar las etiquetas html según el diseño junto con el estilo de nivel superior que lo ayudará a crear el diseño. Una vez hecho, concéntrate en la parte detallada.

Feliz codificación 🙂

Después de abrir una plantilla básica (etiquetas HTML, etiquetas corporales, etc.), pongo suficiente contenido en la página para ver cómo interactuarán los estilos y el contenido. Normalmente empiezo con todos mis

No tengo mucha experiencia pero trabajo con las secciones de la página. Quiero decir, creo el HTML y CSS para la sección de encabezado con la barra de navegación y luego creo el HTML y CSS para cualquier otra sección del cuerpo como … Idk … La sección “sobre nosotros” o la sección “contacto” o cualquier otra.

Esto me ha funcionado hasta ahora. Quizás pueda mejorarlo en el futuro mientras gane más experiencia jaja.

Sí, lo hago de esta manera!

Solo porque es más fácil cuando configuras en tu HTML toda la identificación y clase. El puede establecer los parámetros en su CSS 😉

¡Así que es realmente más fácil cuando lo haces de esta manera!

no hay “entonces”, en el campo no hay tiempo para hacerlo. La mayoría de los diseñadores de UI diseñaron su contenido cuando se construyó utilizando un marco CSS. como Boostrap, material angularJs, Materialize

si quieres ser un buen diseñador de interfaz de usuario, haz las dos cosas a la vez

Primero debe tener el contenido configurado en HTML para poder diseñarlo con CSS. Personalmente, creo que es mejor configurar todo el contenido de la página y luego comenzar a diseñar.

Si, casi siempre. Su CSS no hará nada sin HTML para modificar. Necesita HTML y luego CSS para darle estilo al HTML.

HTML primero, por supuesto

Honestamente, no escribo todo el html y luego lo doy estilo, escribo, por ejemplo, la sección principal de lo que lo doy con css y luego escribo la siguiente sección html de lo que lo doy con css