Cómo mejorar mis habilidades CSS

Answer 1

Esto depende de donde estés actualmente. Como no lo sé, voy a construir una jerarquía de consejos basados ​​en unos niveles de habilidad que he percibido a lo largo de los años:

CSS básico:

• Aprenda sobre los pseudo-selectores básicos (: after,: hover, etc.).
• Aprenda sobre el índice z
• Asegúrese de conocer el Modelo de caja por dentro y por fuera, y aprenda sobre los márgenes plegables.
• Aprenda cuándo usar Float y cuándo NO usar Float.
• Añadir a favoritos W3Schools and MDN.

CSS avanzado:

• Conozca las nuevas unidades relacionales (unidades de vista).
• Obtenga información sobre pseudo-selectores avanzados (: nth-child, etc.).
• Aprende sobre el uso de guías de estilo (BEM, OOCSS y mi favorito SMACSS).
• Aprenda sobre los preprocesadores de CSS. La mayoría de los desarrolladores usan SASS, aunque también puedes explorar LESS y Stylus.
• Explore otras características de CSS3 como gradientes, transiciones, filtros, etc.
• Aprenda sobre Flexbox. Este conocimiento es imprescindible, en mi opinión.
• Aprenda sobre consultas de medios. El W3C continúa trabajando en esta especificación, así que asegúrese de mantenerse al día con los cambios.
• Obtenga información sobre herramientas adicionales, como stylestats, que pueden ayudarlo a administrar su CSS a medida que su repo escala.

CSS de vanguardia:

• Marque el World Wide Web Consortium (W3C) y aprenda sobre las fases de la maduración de las especificaciones.
• Aprende sobre “CSS4”
• Conozca las nuevas características experimentales (en este momento, un par de buenas serían las variables nativas y mostrarían: cuadrícula;).
• Participar y dar comentarios técnicos sobre recomendaciones y borradores del W3C.

Por último, lee los consejos que otros te han dado aquí. Hay toneladas de cosas geniales que puedes hacer con CSS ahora. Y, como Joel ya ha señalado amablemente: la práctica hace la perfección . Juega en CodePen y mira lo que puedes hacer. Hay TANTOS recursos disponibles que una mente curiosa siempre encontrará maneras de mejorar en este dominio.

Answer 2

Oye, puedes aprender más y más de los tutoriales de New Boston en YouTube y en muchos otros sitios.

Hay muchas otras herramientas gratuitas y de pago que puedes usar. Aquí hay una lista:

Pautas de formato

• Recursos listados en orden alfabético .
• No repita los recursos que ya están listados en algún lugar de la Wiki.
• No liste artículos, solo sitios web directos.
• Titule los enlaces que agregue apropiadamente.
• [Insertar enlace con el nombre del recurso como título] – [Lo que se ofrece] (Precio, si corresponde)

Cursos Gratis Online

• Libros para principiantes enfocados en la escuela de lanzamiento
• Construye tu primera aplicación de Laravel
• Bento
• Code4Startup
• CodeAvengers
• Codecademia
• CodeCombat
• Centro de Aprendizaje Codementor
• Coder Camps Free HTML / CSS
• Código de la escuela (gratis – $ 25 / mes)
• Free Code Camp
• HowToCode.io (TBA)
• iLoveCoding
• Programas de alfabetización
• Odin Project Ruby / Rails
• Quackit
• Estudiar esta noche
• Pensativo
• Tuts +
• Udemy (Gratis – $ 199)
• Código Viking School Prep – RoR (no hay matrícula hasta la colocación laboral).
• La gran herramienta para Full Stack Developer

Cursos de pago en línea para aprender

• BaseRails ($ 25 / mes)
• Bloque – iOS, Web Dev, Diseño ($ 5,000)
• Carrerafoundry
• Coder Camps – Full Stack JavaScript, .Full Stack .NET ($ 9,900)
• CodeHS ($ 1,000 +)
• CodeQuad – RoR ($ 994)
• Coding Campus – Python, Django, Angular ($ 9,700) / Node.js, Angular ($ 3,900)
• Codificación de pila Dojo- LAMP, pila MEAN, Ruby on Rails ($ 7,500)
• De la idea al lanzamiento – Laravel PHP Web Dev ($ 95)
• De HTML 5 CSS 3 a AngularJS a Ruby a Python a Cloud & Beyond: paquete completo de desarrollo web 2016 (92 horas de capacitación): 25 $
• Circuito de diseño web de la Asamblea General – HTML / CSS / Diseño visual con un mentor ($ 1600)
• Beta remota Hack Reactor ($ 17,780)
• Aprendible ($ 17 / mes)
• Escuela de lanzamiento – El camino lento hacia la maestría ($ 199 / mes)
• Lynda.com ($ 25 – $ 37)
• Un mes: HTML, Ruby on Rails, iOS ($ 49)
• http://onlinedevschool.com – Aprenda HTML / CSS / Javascript / SQL / Ruby y conviértase en un desarrollador web en tan solo 12 semanas. ($ 3-4k dependiendo del curso)
• Skillcrush Career Blueprints
• Stuk ($ 299)
• Casa del árbol del equipo ($ 25 – $ 49)
• theFirehoseProject – Web Dev, RoR, Mobile First Design ($ 4,500)
• Thinkful – Web Dev, RoR, Python, iOS ($ 300-500)
• Udacity ($ 200 / mes)
• Código de Viking School – Ruby / Rails + JS / Angular (18% del 1er año cuando se coloca)
• Web Tech Learning
• WizIQ ($ 10 – $ 1000)

Aulas de programación remotas

• rmotr.com – Aulas reales, maestros reales, compañeros de clase reales, pero remotos ($ 150 por curso, becas gratuitas disponibles)
• http://onlinedevschool.com – Aprenda HTML / CSS / Javascript / SQL / Ruby y conviértase en un desarrollador web en tan solo 12 semanas.

Encontrar mentores de desarrollo web

• Ayuda 1: 1 HTML / CSS de expertos comprobados
• http: //rubymentor.io&nbsp ; – Obtener mentores de rubí y rieles y coffeescript.

Encontrando Codificación Bootcamps

• Bootcamp.me
• Bootcamper.io
• Bootcamps.in
• Informe del curso
• Hack App
• Centro de Kapor
• techendo.comTechendo
• TheFirehoseProject Definitive Guide
• Pensativo
• Conmutador

Dominé mis conocimientos de CSS y aprendí algunos otros y ahora tengo dos sitios:

https://www.themefisher.com/ y http://furioustheme.com/

Hacer caer por 🙂

Gracias.

Answer 3

Investiga patrones de diseño / tendencias, aprende los más populares.

Diseño perfecto responsive

Trabaje en el concepto de crear componentes web o sitios web construidos con ‘‘ intercambiables que puedan intercambiarse y verse bien en cualquier tamaño de pantalla

Trabaje en tipografía, espaciado, altura de línea, familias de fuentes, encabezado hermoso y párrafo. De nuevo, depende del tamaño de la pantalla

Echa un vistazo a CSS-Tricks

Echa un vistazo a Scotch Web Development

Checkout Devtips canal de YouTube

Escucha el podcast de shoptalkshow.com

Echa un vistazo a los populares css frameworks bootstrap / foundation / bourbon / skeleton, etc. pero no te apoyes demasiado en ellos.

Mire diferentes paletas de colores que “funcionan” (juegue con coolors.co)

Investigue a fondo la mejor y mejor manera de mostrar imágenes de ancho de pantalla completa (aprenda las subcategorías de la propiedad ‘fondo’).

Aprende efectos / pirateos como la transición de la transformación del zoom al pasar el ratón, comprende dónde / cómo se pueden usar los: antes y después de los pseudo selectores con gran efecto

Aprenda a mostrar imágenes, carruseles, cajas de luz, controles deslizantes, efectos de atenuación, galerías, nuevamente, todos con capacidad de respuesta.

Domina el mejor uso de flexbox La última hoja de trucos de Flexbox

Aprende la forma moderna / de diseño de materiales de agregar sombras para hacer “divs planos * pop *”

Aprenda sass o stylus o la herramienta de compilación + + de su elección (o simplemente use http://prepros.com si gulp / grunt es demasiado técnico)

Aprenda a estructurar y diseñar su código como lo haría con su sitio. Si su código base es masivo, aprenda a escribir buenos comentarios, archivos, documentación.

Aprender herramientas para la creación rápida de prototipos html / css. También utilizo Jekyll para crear prototipos de un sitio sin preocuparme por el backend.

Por encima de todo, mantenga su CSS limpio, SECO y aprenda un flujo de trabajo de diseño con el que pueda mantenerse productivo.

Dijo, dirigido en gran medida a sí mismo.

Answer 4

Puedes mejorar tus habilidades de CSS en gran medida aprendiendo sobre todos estos puntos:

• Unidades CSS
• Soporte de navegador CSS
• Propiedades CSS más utilizadas
• Fondo CSS
• Bordes CSS
• Formas CSS
• Posicionamiento CSS
• Selectores de CSS
• Tipografía CSS
• Funciones CSS
• Animación CSS

Una vez que tenga una comprensión básica de todos estos puntos. Debes empezar a practicar mucho. Hay muchos lugares donde puedes practicar tus habilidades de CSS y mostrar a las personas lo que puedes hacer, como CodePen.

Buena suerte, y deje un comentario, si tiene alguna pregunta y con gusto le responderé.

Answer 5

Las habilidades de CSS más importantes para dominar en 2016 se centran principalmente en dos cosas que responden al diseño y CSS3 .

¿Por qué estos dos? Expectativas y conversión del usuario.

La conversión es la palabra más importante en la web, ningún sitio web se construye sin un objetivo en mente. Siempre hay una razón para construir el sitio y, a menos que esa sea específicamente para su uso personal, maximizar la conversión es lo más importante que puede hacer para alcanzar su objetivo.

¿Cómo se relacionan las conversiones con CSS? CSS puede mejorar la experiencia del usuario mientras optimiza los tiempos de carga. Casi ninguna otra tecnología puede hacer tanto para mejorar la “adherencia” de un sitio web sin que le cueste el rendimiento. Al alejarse de las imágenes rasterizadas y usar el poder de CSS para poner la carga en el navegador, obtiene sitios de gran apariencia sin cargas caras. No todos los desarrolladores lo hacen bien y, de hecho, una gran mayoría ni siquiera es consciente de cómo su mala optimización perjudica el balance final de sus clientes. Puedes explotar esto al distanciarte de la multitud. Una vez rediseñé un sitio web que vendía dulces / nueces / confecciones para un negocio bastante grande. Cambié su tasa de conversión de menos del 8% a más del 32% y aumenté su venta promedio por pedido en aproximadamente un 50%. Esto fue un aumento del 600% para ellos a partir de una producción relativamente pequeña. Les permitió gastar mucho más en marketing (puede permitirse gastar mucho más dinero en marketing si está convirtiendo más visitas, su costo por cliente se reduce y si su margen neto por cliente también aumenta) Básicamente, he creado un motor para imprimir dinero y el mes después de la actualización se vendieron más de 1M en dulces y nueces en un solo mes.

Expectativa del usuario: es simple, los usuarios desean tiempos de carga cada vez más rápidos. CSS le permite obtener las campanas y los silbidos que desea, pero desviar parte de los gastos generales de los activos a la funcionalidad de los navegadores. Sombras, transiciones, animaciones, sprites, todos hechos posibles en CSS son todos los avances que puede aprovechar para hacer que sus sitios sean más rápidos y al mismo tiempo mantener un alto grado de diseño atractivo.

Answer 6

Jugar, jugar, jugar.

Hablo por mí mismo, pero lo más probable es que haya muchos otros aquí, no fuimos a la escuela para esto. No hay ningún recurso que te enseñe CSS mejor que tu propio cerebro y Google.

Prueba y comprueba. Un montón de CSS es algo similar a lo que podría haber “pensado”.

Cree un sitio web, o trabaje desde una plantilla en WordPress o similar, y comience a hacer los cambios que desee. Cualquier pregunta, escríbalas exactamente en Google, hay cientos, si no miles, que se han atascado en el mismo lugar.

Stackoverflow también será un activo, ya que es un sitio que responde a este tipo de preguntas y, con frecuencia, es la primera respuesta de Google.

Además, la función de elemento de inspección cuando haces clic con el botón derecho en un sitio web te permite ver el CSS, el HTML y las ventajas. Úsalo para aplicar ingeniería inversa al contenido del sitio web que te gusta Haga un OneNote, o algún tipo de almacenamiento para elementos que usará mucho en el futuro.

¡Mejor!

Answer 7

La práctica hace la perfección

Debes dedicar una parte de tu tiempo a buscar más información en CSS y luego dedicar un tiempo a implementar lo que aprendes.

Aprender un idioma como css o cualquier otro viene en dos formas, rápido y lento. Puede aprender rápidamente lo básico, pero el verdadero dominio viene con dedicación y tiempo significativos.

Considere tomar algunos proyectos donde pueda aplicar sus habilidades de diferentes maneras. Desafíate a hacer algo diferente.

Es como hacer ejercicio, necesitas ajustar tus métodos para que tus habilidades crezcan.

Esperemos que esto ayude. Feliz codificacion

Answer 8

Curiosamente, aprender un lenguaje de programación es muy parecido a aprender un lenguaje hablado:

Lee mucho codigo
Intenta dividir las cosas que no entiendes en trozos que tengan más sentido para ti. Si encuentra dos formas alternativas de hacer algo, investigue un poco por qué son diferentes y si existen otras implicaciones.

Practica usandolo
Comience con oraciones cortas; encuentra un panel en un sitio web que te guste, recrearlo. Vea qué cambia cuando modifica un valor o agrega algo.

Aprende lo que no entiendes
¿Ves algo que no puedes creer que funcione? ¡Ver fuente! La belleza de la web es que todo está a la vista. Haga clic con el botón derecho, presione el elemento de inspección y sabrá exactamente qué está funcionando.

Averigua porque
La etimología no siempre es útil para el lenguaje hablado, pero a veces es increíblemente útil saber cómo se forma una palabra para saber qué se puede hacer con ella. En inglés, el resultado es que las palabras se escriben de forma inesperada, pero generalmente tiene una razón. En CSS, hay un montón de peculiaridades, comportamiento específico del navegador o formas inesperadas de hacer las cosas. Saber por qué algo funciona es una excelente manera de saber cómo usarlo la próxima vez.

Separa ‘funciona’ y ‘está bien’
Esto puede ser un poco polémico, pero hay ocasiones en las que todo funciona bien, pero técnicamente es la forma incorrecta de hacer algo. Saber por qué ayudará aquí, pero encontrará algunos de estos blogs de lectura de CSS. Hacer que el navegador haga algo sin especificación es un truco genial, pero tiene un gran potencial para romper en la próxima actualización.

Answer 9

1. Leer. Trucos CSS, revista aplastante, etc.
2. Aprender los marcos de CSS. Bootstrap, Materialize, Foundaction, etc.
3. Diseccionar los marcos CSS y estudiarlos. Aprende cómo usan diferentes clases de CSS para formar un sistema coherente. Incluyendo cómo nombrar tus clases.
4. En el trabajo, construyó su propio marco css, o amplíe el que ya está utilizando.

Answer 10

Hay un proverbio “la práctica hace al hombre perfecto”. Manteniendo la coherencia con su pregunta, me gustaría consultarle sobre algunos asuntos.

Para obtener una habilidad completa en css, debes ser perseverante al principio, luego debes aprender sobre HTML y CSS. CSS Tutorial es una de las mejores fuentes para que aprendas sobre CSS y hay otras fuentes también.

Ahora debe realizar algunos proyectos en CSS para que pueda aplicar su conocimiento de manera práctica. También debe obtener habilidad en marcos de CSS como Bootstrap.

Answer 11

Construye un sitio web desde cero. Rasca eso. Construye muchos sitios web desde cero. Repetición sacará tu CSS ninja. Le mostrará cómo estructurar mejor su CSS, e incluirá en su cabeza los selectores y las reglas más importantes de CSS. Una vez que eso suceda, no tendrás que buscar una respuesta en Google cada dos minutos. Eso es muy importante: no buscar en Google a cada minuto para obtener respuestas de CSS.

Answer 12

No necesita ser mejorado en mi opinión.

Pero para aquellos que odian cosas como cerrar corchetes, hay Stylus
http://learnboost.github.io/stylus/

También hay Sass
http://sass-lang.com/

Answer 13

Ver lista completa en: CSS Style Kit | Herramienta definitiva para el diseñador web