Aprende de los expertos. Aquí están algunos de mis favoritos:
- Chris Coyier (@chriscoyier) – Uno de los grandes maestros de CSS. Él es el hombre detrás de http://css-tricks.com/, así como el screencast asociado. Es uno de los autores de http://codepen.io/, (inspirado en jsfiddle), una herramienta invaluable para descubrir y crear fragmentos de código front-end. Él también es gracioso.
- Ethan Marcotte (@beep) – Autor de Responsive Web Design (http://www.abookapart.com/produc…), una de las siete excelentes ofertas de A Book Apart. Él está a la vanguardia de la tendencia reciente hacia sitios web de diseño receptivo para dispositivos móviles.
- Nicolas Gallagher (@necolas) – Autor del invaluable normalize.css, y colaborador del proyecto HTML5 Boilerplate. Su github (https://github.com/necolas) habla por sí mismo.
Utilice todas las excelentes herramientas a su disposición.
- Como se mencionó anteriormente, codepen.io es genial. Hay una gran cantidad de productos similares para fragmentos de front-end, incluidos jsfiddle.net, tinkerbin.com, y una oferta más reciente de Mozilla llamada Thimble (https://thimble.webmaker.org/en-US/).
- Algunas de las otras respuestas ya han hablado sobre esto: el WebKit Web Inspector es su mejor aliado (seguido de cerca por Firebug para Firefox, si le gusta ese tipo de cosas). Le permitirá alternar las reglas CSS, activar los estados activos / activados y ayudarlo a visualizar lo que sucede en la página y por qué.
- http://www.css3files.com/ es otro gran recurso. Es un desglose extremadamente completo y elegante de muchas de las reglas CSS3 más nuevas (así como algunas más antiguas), completo con una lista de soporte de navegador actual para cada uno.
Algunas otras cosas a tener en cuenta:
- ¿Cuál es la mejor forma / lenguaje para hacer un front-end dinámico?
- ¿Cuáles son los mejores centros de capacitación en informática en Delhi NCR para diseño / desarrollo web?
- ¿Vale la pena Auth0?
- ¿Dónde puedo encontrar estadísticas sobre los tamaños de visualización del navegador, las características y los datos relacionados con la segmentación geográfica?
- ¿Cuál es la forma más rápida de aprender Angular JS?
- Aprenda sobre el diseño basado en cuadrícula. Esto será extremadamente útil cuando trabaje con un diseñador gráfico sólido, y aún más útil cuando no lo esté. Aquí hay un gran lugar para comenzar: http://twitter.github.com/bootst…
- Si bien el Inspector web es su mejor aliado, Internet Explorer es y seguirá siendo su mayor enemigo . Lo importante aquí es asegurarse de que conoce las diferencias en la compatibilidad del navegador. Pruebe su diseño con múltiples navegadores y con múltiples dispositivos si está trabajando con dispositivos móviles.
- Engañar. Use una herramienta como http://prefixr.com/ para ayudar con los prefijos de proveedores para que su diseño sea más consistente entre los navegadores.
- Mejor aún, use un precompilador CSS como LESS o SASS para hacer su trabajo por usted. Créame, como desarrollador centrado en el backend, permanecerá despierto por la noche pensando en todas las veces que dejó caer la D de su principio de diseño DRY mientras luchaba con CSS. Cuanto más grande es el proyecto, peor se ponen las cosas. Con un precompilador, puede usar esas cosas familiares y maravillosas que siempre ha dado por sentado: variables, funciones, etc. (Una nota más sobre esto: si está pensando en el rendimiento de su sitio, le recomiendo usar el comando proceso de construcción de línea empaquetado con estas herramientas, en lugar del analizador / compilador dinámico JS. Esto será mucho más fácil para el cliente).
