¿Cuál es la mejor manera de convertirse en un experto en CSS y desarrollo front-end?

Estoy de acuerdo con la mayoría de las respuestas aquí. Sin embargo, encuentro un pequeño defecto con la redacción de su pregunta; No distingo entre desarrollo CSS y desarrollo front-end. El desarrollo front end en su esencia incluirá el desarrollo CSS. Incluso iría más allá y diría que si quieres ser competente (o un “experto”) en el desarrollo front-end, entonces debes ser competente en HTML, CSS y JavaScript.
Ahora, cuando se trata de convertirse en un experto en cualquier campo, estoy de acuerdo con Malcolm Gladwell (autor) de sus Outliers: The Story of Success: Malcolm Gladwell: 9780316017930: Amazon.com: Libro de libros que tomará alrededor de 10,000 horas convertirse en un experto en ese campo. 10,000 horas se traduce en 7-10 años de trabajo constante en dicho campo. Dicho esto, estos son algunos de los regímenes que sigo:

• Codifique en proyectos, trabajos y áreas que desafíen mi conocimiento actual y me permitan expandir mi conocimiento
• Sigue a los líderes en el campo. Gente como Paul Irish, Rebecca Murphey, Chris Coyier, Alex Sexton, etc.
• Suscríbase a boletines semanales como JavaScript Weekly, HTML Weekly, CSS Weekly
• Actívese en su comunidad tecnológica local. Al estar activo, lo que quiero decir es no solo asistir a reuniones locales sino también estar presentes en ellas. La mejor manera de aprender un tema es explicárselo a los demás. Este es un enfoque que se puede adoptar en su lugar de trabajo también con presentaciones semanales o mensuales.

Buena suerte

Primero, lea sobre la idea básica detrás de CSS: clases DOM, id’s, selectores y prioridades de reglas. No pierdas demasiado tiempo, no tiene mucha profundidad y puedes salirte con la tuya con lo básico.

Entonces necesita aprender sobre todas las propiedades de CSS. Utilice una extensión de desarrollador web como Firebug para Firefox ( http://getfirebug.com/ ) o las Herramientas de desarrollador integradas para Chrome / Safari. Puede hacer clic con el botón derecho -> Inspeccionar cualquier elemento DOM visible y ver todas las reglas CSS efectivas. Incluso puedes modificarlos y ver qué sucede.

La mayoría de las reglas CSS son bastante sencillas (color, familia de fuentes, etc.), pero hay algunas más difíciles de comprender, especialmente las de diseño. (flotante, claro, posición, etc.) Google para “plantillas de diseño CSS” y obtendrá toneladas de diseños limpios comunes para analizar. (es decir, diseño de 3 columnas con encabezado y pie de página)

Secundo el primer consejo de Ryan. Al final del día, debe codificar tantos sitios web como sea posible. Así es como realmente aprendes a hacerlo.