Me he "parado" profesionalmente en CSS/HTML

Vergara92

A ver si alguien me puede ayudar, o le ha sucedido algo parecido en su vida y me da un consejo:

Todo lo que he aprendido respecto a CSS y HTML lo he aprendido trabajando, es decir no he hecho cursos o certificados o cosas parecidas, y ha llegado un punto en el que veo que me he estancado respecto a la maquetación, no se si por no ser lo suficiente ordenado, no saber "ver" bien las cosas o que, pero creo que soy una persona que maqueta bastante lento. Mi problema es el siguiente, he intentado hacer algunos de los típicos tutoriales de CSS, pero los básicos que veo creo que tengo un nivel alto para ellos.

Soy una persona que ha estudiado un ciclo medio de técnico y superior de administración de sistemas, y que por casualidades del destino ha acabado como Diseñador de FrontEnd, por lo que mis estudios respecto a esto han sido escasos.

A ver si alguien pudiese aconsejarme o guiarme con mis dudas, muchas gracias a cualquiera que haya dedicado unos minutos a leerme y un coridal saludo. :muac:

K0N1G

Y tus dudas son...?

Aprende cosas nuevas, Javascript, JQuery, Angular...renovarse o morir

2 respuestas
Vergara92

Con JQuery si estoy, mi pregunta es en como puedo mejorar en CSS y HTML, como ser mas profesional es lo que digo creo que me he estancado con estos idiomas y estoy en un punto en el que creo que tengo un conocimiento intermedio/alto. Pero no sé como seguir mejorando o mejorar mi código

2 respuestas
jackvendetta

#3 Una vez que tengas los conocimientos, y más con el CSS, entra en juego tu imaginación. Y eso no se aprende, se desarrolla.

1 respuesta
Vergara92

#4 A que te refieres con mi imaginación, al usarlo en mi trabajo, yo no tengo que hacer el diseño gráfico de la web, a mi me llega este y yo digamos que tengo que hacer en formato web (Por decirlo de alguna manera) lo que me llega de los clientes

Troyer

He trabajado bastante en Front-end y puedo asegurar que todo se agiliza mucho más si ya lo tienes planificado o bien pensado en vez de ir programando "sobre la marcha".

Yo suelo empezar mirando el diseño que me facilitan, dibujo en un papel la estructura general, los contenedores y el esqueleto de la página web, además de ojear todas las vistas del diseño para intentar mantener la misma estructura base en el resto de vistas.

Una vez hecho el planning y los dibujos, empiezo a hacer los contenedores generales, dándoles un color plano (típico bg-color) y viendo como reaccionan entre si.

Te recomiendo que te mires Boostrap, que es un muy útil por su sistema de grids, que hace que sea mucho más fácil es diseño responsive, y una vez que tengas un nivel avanzado pases a Foundation, que te permite mucha más personalización del diseño y puedes hacer muchas cosas más al milímetro.

Si quieres más detalles no dudes en preguntar.

1 1 respuesta
Vergara92

#6 Para ir mirando bootstrap como lo ves mejor, la api y a testear, o conocer de alguna guía o cursillos que molen?

1 respuesta
Troyer

#7 Como más se aprende es realizando un template de 0, te recomiendo que primero veas un poco como funciona el framework, entiendas su sistema de grids y después te propongas hacer un template de cero. Esto se aprende con la práctica, generalmente teniendo mil problemas y buscando una solución, tu experiencia hace que sea todo más ágil, así que lo que te digo, mírate como funciona, coge un diseño y hazlo de cero con Boostrap.

1 respuesta
Merkury

#1 Post-CSS o CSS te ayudaran a maquetar BASTANTE mas rapido.

Como tecnologias frontend Bootstrap/Modernizr

2 respuestas
Vergara92

#8 #9 Pues voy a darle caña a bootstrap, a ver que puede salir de esto.... jajaja.

¿Que es exactamente lo de post-css? He googleado un poco y he visto algo asi como transformar el css con javascript

1 respuesta
Merkury

#10 Basicamente es un pseudo lenguaje que se transforma en CSS, echale un ojo porque si le pillas el tino tu velocidad maquetando aunebtara bastante.

Vergara92

Pues muchas gracias a todos, de verdad. Ya tengo cosas con las que ponerme!

CoDe_WaR

Que te puede dar más valor (y rapidez):

  • Para ganar modularidad y velocidad, escribe los CSS en LESS o SASS. (investiga sobre ellos)
  • Esto va casi ligado: Intenta maquetar/estilizar de manera "modular". Puedes buscar este libro por la red: https://smacss.com/
  • Échale un ojo a la maquetación con Flex (los frameworks de grids en flex todavia las veo un poco verdes ya que no aprovechan la potencia que ofrece Flex en grids verticales. Es como si la gente solo las viera como los nuevos floats y no, es mucho más.)
  • Los frameworks de CSS tipo Bootstrap pueden servirte para observar como estructuran sus componentes. También es interesante bajarte la versión en LESS/SASS para ver como trabajan y aprender de ello.
  • investiga sobre maquetaciones optimas (performance). Que atributos de CSS són menos pesados para el navegador, etc. (vamos, que no inundes el html con floats i overflows absurdos)
  • Investiga sobre grunt, gruntfile, como se configura, añadir una libreria tipo "autoprefixer", etc. (puedes utilizar Koala u otros programas para compilar less y tal, pero mejor que aprendas a configurar un gruntfile)
  • No le des la espalda a trabajar con jQuery, angular con ngAnimate, etc. Saber Javascript y dominar algun framework basado en el seria muy positivo

(el tema del "autoprefixer" es la polla, busca info sobre ello)

Suerte!

2
speciaL

#1 Como te dice #9 postCSS agiliza mucho, al principio cuesta montar todo pero una vez montado vuelas. Un poco de SPAM sobre postCSS. En lugar de bootstrap te diría que tiraras por bascss o Tachyons

Vergara92

Joder muchisimas gracias por tantisima información le voy a echar un vistazo a todo!

1 respuesta
eXtreM3

#15 has caído en gracia y todos te queremos ayudar. Normalmente un hilo así se convierte en una lluvia de mierda desde #2 xD

1 2 respuestas
Merkury

#16 Es el calor que no hay ni ganas de trollear...

1 respuesta
1 comentario moderado
Vergara92

#16 #17 Jajajaja, pues me alegro de haber pillado una época "buena" para escribir esto

#18 Que es, algo así como una guía sobre los lenguajes orientados a diseño?

1 respuesta
HeXaN

#19 Nada, es un "meme" recurrente de este subforo, no te sirve para lo que buscas.

2 respuestas
Merkury

Piso ban a la moderacion para #20 por mancillar el nombre de nuestro sagrado libro!

DarkSoldier

#20 tio.... OOCSS (y no es broma xD)

12 días después
liebgott

Aprende Javascript YA

J

Pues como ya te han mencionado muchos compañeros yo te aconsejaría bootstrap y también si acaso wordpress, este último es un cms muy sencillo pero también muy utilizado, yo lo llevo manejando desde hace muy poco tiempo y lo estoy flipando con los plugins que tiene, puedes hacer de todo, de forma muy sencilla y casi automática.

2 respuestas
Merkury

#24 Y si no tienes ni idea de programacion, puedes hacer buenas mierdas, como se ven a todas horas.

2 respuestas
Vergara92

#24 #25 Si wordpress si que lo toco mucho y "controlo" de el.

Muchas gracias por todos los comentarios que estoy recibiendo, no me esperaba tanto apoyo en este hilo, de momento voy aprendiendo con bootstrap, y dado que en mi trabajo tengo que hacer muchas landings page para ciertas marcas en la que se repite mas o menos una structura, estoy pendando en la idea de hacer mi propio "framework" o hacerme una plantilla base para ir usandola.

Por cierto algo que no uso y supongo que se recomienda es el uso de snippets ¿Sabéis algo sobre ellos?

eXtreM3

#25 lo que los plugins te dan, los plugins te quitan.

15 días después
Kr4n3oK

#1 Yo me pondría con Javascript si o si ipsofacto, y no me vale un ya se javascript, puesto que javascript es un lenguaje que pienso se tarda bastante tiempo en dominar de forma correcta por la naturaleza que tiene.

Para aprender bien JS deberías leer libros de Stoyan Stefanov Javascript Patterns y también debería leer a Addy Osmani, son verdaderos cracks. En estos libros te enseñan ya no solo a programar, si no a programar bien utilizando buenas prácticas, creando código mas o menos optimizado, etc.

También podrías empezar a leer sobre automatizadores de tareas como gulp, grunt, etc. También tienes cositas para CSS como LESS, SASS que cada día parece que se está utilizando mas. Enterate bien de patrones actuales para la capa cliente, como MVC, que es, como funciona, para que sirve, etc.
Aprender, como te han dicho, frameworks de javascript (punto importante puesto que cada día se le está delegando mas importancia al FRONT y mas lógica de negocio), Angular, Backbone, etc, etc.

También puedes aprender a usar librerías como jquery, underscore, etc.

1 respuesta
Merkury

#28 "Codigo optimizado" - "Javascript"

Pick one...

2 2 respuestas
Kr4n3oK

#29 Eing?