¿Cuáles son algunos recursos excelentes para un diseño avanzado con capacidad de respuesta CSS que no te importa compartir?

Sé que dominar el modelo de caja puede ser frustrante (confía en mí, he estado allí), pero no creo que haya un atajo para ser un buen programador de front-end.

Si bien hay tantos marcos que eliminan el dolor de tareas como la capacidad de respuesta y el diseño, los chicos de front-end realmente buenos (y buscados) siguen siendo los que tienen una comprensión central de las tecnologías principales.

Si mira alrededor de la Web, notará que la mayoría de los sitios web en estos días tienden a verse de la misma manera y los sitios ensamblados con plantillas son fáciles de detectar y molestos de observar. Pero si observa el front-end de algunos de los ‘grandes’ (Facebook, Quora, Reddit, Google, Microsoft, etc.), notará algo similar: singularidad.

Esto se debe a que contratan personal de front-end “realmente bueno” que codifican sus documentos de diseño para darles la apariencia única que necesitan.

Estos son los chicos ‘reales’ de front-end; aquellos que saben usar translate3d (); aquellos que saben diseñar marcos CSS que interactuarán con el DOM desde cero; aquellos que saben cómo manipular el lienzo HTML, detectar dispositivos, etc. Y estos son los muchachos demandados.

Así que te aconsejaré que te tomes tu tiempo. No te apresures ni trates de usar atajos. Dominar verdaderamente HTML solo puede llevar hasta un año. Pero al final valdrá la pena 🙂

Si hablamos de diseño receptivo, consulte los libros de A Book Apart sobre el tema:

Un libro aparte, breves libros para personas que crean sitios web.

También está el diseño web rígido de Andy Clarke:

Edición del quinto aniversario del diseño web hardboiled

Debería probar los cursos de codificación gratuitos de Codecademy, por ejemplo, para preparar su base primero. El posicionamiento y las carrozas son bastante fundamentales.

En una palabra:

El único modelo de caja que usará a diario es box-sizing: border-box;

Lo que hace es el borde y el relleno de los elementos siempre del tamaño que está definido.

flotador izquierdo; flotar derecho;

El flotador se usa cuando necesita apilar elementos horizontalmente. float: left; y float: right; eliminará su elemento del flujo normal, por lo que el siguiente elemento intentará llenar el espacio o superponer elementos anteriores. necesita aplicar clear: both; a los siguientes elementos para devolver el flujo normal a su diseño.

El diseño receptivo es que el diseño se adaptará con el tamaño del navegador.

Aquí ponemos todos los conceptos anteriores juntos:

.desktop-50-percent {
ancho: 50%
flotador izquierdo;
tamaño de la caja: border-box;
borde: 10px sólido # 000;
fondo: rojo;
}
.clearfix {
Limpia los dos;
}
@media (ancho máximo: 767 px) {
.desktop-50-percent {
ancho: 100%
}
}

HTML:

Lo que sucede con el código es que los elementos de tamaño de escritorio (más ancho que 767 px) con la clase ‘escritorio-50 por ciento’ ocuparán el 50% del ancho del navegador.

Pero si el ancho del navegador es menor o igual a 767px (móvil), los elementos con la clase ‘desktop-50-percent’ ocuparán el 100% del ancho del navegador, porque la clase se anula por definición de clase dentro de la consulta de medios ( @media{ //definitions } )

Si observa que hay un relleno de 10px en los elementos ‘desktop-50-percent’, si no aplicamos box-sizing: border-box; el ancho del elemento es el 50% del ancho del navegador + borde de 10 píxeles en el lado izquierdo + borde de 10 píxeles en el lado derecho. El resultado es que esos dos elementos con la clase ‘desktop-50-percent’ no se procesarán correctamente como lo deseamos.

Si desea pasar a un diseño receptivo, es mejor que aprenda el modo de pantalla Flexbox como iniciador. Una guía completa de Flexbox | CSS-Tricks es un buen lugar para comenzar. Flexbox es una especie de implementación CSS3 oficial de los sistemas de cuadrícula de una manera perfectamente receptiva. En algún momento, la escala de los objetos de vista no se cortará y probablemente necesitará la ayuda de consultas de visualización para alterar su diseño de acuerdo con el tamaño de visualización disponible. Luego consultas de medios CSS y uso del espacio disponible | CSS-Tricks es otro buen lugar para estudiar más a fondo.

Creo que eso es todo.