Estoy muy interesado en aprender el desarrollo web y he aprendido algunos conceptos básicos sobre HTML y CSS hace unos años de W3Schools, pero nunca aprendí cómo desarrollar sitios web que cumplan con los estándares actuales, es decir, sitios de flujo libre sin el uso de tablas para gobernar el diseño del sitio.

¿Cuáles son algunos buenos recursos con los que puedo comenzar?

CSS Zen Garden

Echa un vistazo a CSS Zen Garden y hojea varios resultados. Son muy versátiles y proporcionan mucha diferencia sobre el mismo código fuente. Aprenderá mucho sobre las técnicas modernas de CSS. Incluso si no los disecciona por completo, al menos encontrará mucha inspiración y habilidades de CSS contra HTML accesible normal. Lo mejor de CSS Zen Garden es la semántica contra el estilo. El contenido no es estilos en absoluto. Todo lo que ve estilos está hecho únicamente por CSS, que es la forma correcta de hacerlo, porque los datos pueden ser consumidos por muchos clientes diferentes, y el estilo solo lo pueden hacer aquellos que lo visualizan.

Libros

Cuando se trata de aprender de los libros, este se parece mucho a un buen comienzo CSS: The Missing Manual .

Internet

Leí Smashing Magazine en Internet que ofrece muchos ejemplos y enfoques. Abarca artículos desde el negocio del diseño hasta grandes enfoques en diseño web y similares.

La mejor manera de aprender cómo crear sitios web y aplicaciones es hacerlo , lo que significa que debe crear proyectos y hacerlo todo el tiempo. Este breve video transmite las emociones de un recién llegado y da algunos buenos consejos sobre el tema.

También escribí algunas otras recomendaciones para las personas interesadas en aprender desarrollo web que deberías leer antes de comenzar.

Sin embargo, así como no puede hablar idiomas en los que no conoce ninguna palabra, necesita una buena comprensión de los conceptos básicos antes de poder construir un proyecto útil. Aquí hay algunos recursos para aprender algunos conceptos básicos y sitios que te permiten explorar por ti mismo.

Hay excelentes lugares para aprender los conceptos básicos del desarrollo web de forma gratuita. Comience aquí, pero bájese de ellos para jugar con cosas que no enseñan directamente. Después de pasar por algunos, intente hacer otros sitios / proyectos por su cuenta desde cero. Hacerlo reforzará los conceptos, le enseñará detalles de implementación y probablemente también le enseñará cosas adicionales. Simplemente no puede convertirse en un buen desarrollador o diseñador leyendo solamente, ¡debe crear !

Hice un curso intensivo para diseñadores que están aprendiendo desarrollo web

¡Echale un vistazo! Están diseñados para una audiencia basada en el diseño, pero se aplican a cualquiera que esté aprendiendo. Enseñan los conceptos básicos en las diapositivas / post / video y luego asignan un pequeño proyecto al final de cada uno para enseñar el desarrollo front-end del mundo real.

• Lección 1 - El por qué y qué detrás del desarrollo web
• Lección 2 - Inicio de HTML y CSS
• Lección 3 - Inicio de JavaScript (JS)

Otros buenos sitios web tutoriales

• CodeAcademy - Conocimientos básicos básicos de varios idiomas.
• Serie "Learning the Web" de Mozilla : comienza en el nivel inicial y puede guiarlo hacia temas más complejos. Gran recurso, lo recomiendo encarecidamente.
• Udacity - Clase general de desarrollo web.
• Tuts + - Tutoriales sobre temas más específicos.
• KhanAcademy : no lo he usado personalmente, pero parece estar mejorando cada día.

No use W3Schools , generalmente está desactualizado y es muy propenso a errores. En su lugar, use un sitio web tutorial como los anteriores para aprender y use uno de los sitios de documentación a continuación cuando busque algo específico.

Documentación

Mirar la documentación de propiedades, bibliotecas y demás es vital para convertirse en un buen desarrollador web. Los siguientes son algunos de los mejores documentos que puede usar:

• W3.org : la documentación oficial para casi todo lo implementado por los navegadores web. ¡Aprender a leer estos documentos es muy importante! Esto no está afiliado a W3Schools de ninguna manera.
• Documentos de Mozilla : un recurso de terceros muy confiable de los creadores de Firefox que se mantiene actualizado.
• WHATWG.org - Una especie de competidor de código abierto para W3; algunos navegadores implementan ciertas sugerencias desde aquí sobre W3 a veces.
• DevDocs : no es oficial, pero tiene muchos documentos de idiomas en un sitio. Muy conveniente

Feeds útiles

• WebPlatformDaily : una lista de noticias relacionadas con todo lo que se actualiza diariamente en la web (excepto los fines de semana).
• SitePoint : artículos realmente útiles sobre varias cosas.
• WebDesignerDepot : puede estar en el lado de spam, pero la mayoría de sus artículos reales son buenos.
• Smashing Magazine : temas más avanzados, pero sobre todo todas buenas lecturas.
• A List Apart - Un poco más de conocimiento avanzado en forma de blog.

Editores

Pequeños proyectos / jugando con código

• JSFiddle : realiza pequeños proyectos y realiza un seguimiento de ellos.
• CodePen : mira los garabatos de código de otras personas y envía los tuyos para que otros los vean.

Editores de texto completo

• Texto sublime
• Átomo

Otros sitios web útiles

• Página Mis recursos : una lista de recursos que he estado compilando, desde una introducción hasta un diseño receptivo y un análisis de diferentes formas de animar en un navegador web.
• Manual para desarrolladores front-end : una colección de publicaciones más diversa pero útil que cubre una amplia gama de temas front-end.
• WebFieldManual : una gran colección de recursos útiles.
• StackOverflow : si tiene una pregunta relacionada con la programación específica , StackOverflow no tiene comparación para obtener ayuda.
• LearnLayout : aprenda algunos conceptos básicos sobre cómo hacer diseños en CSS.
• Posicionamiento en diseño web : parte de mi curso intensivo que quizás sea el más útil.
• 30 selectores CSS que debe conocer : conózcalos y ahorre tiempo más adelante. También hay un pequeño juego genial para poner a prueba tus conocimientos sobre el selector CSS.
• Referencia CSS de Codrops : una página de referencia concisa y útil.
• CodeMentor y Thinkful : sitios donde puede pagar para ser asesorado 1 a 1.

Busque los blogs personales de desarrolladores web y diseñadores que le gusten. A menudo tienen un gran, gran contenido.

También he escrito una introducción al diseño de la interfaz de usuario que podría ser muy útil. Enlacé algunos recursos geniales adicionales.

No puedo enfatizar lo suficiente, la mejor manera de aprender es construir cosas que superen tus límites y hacerlo continuamente .

Para obtener una lista aún más grande (y quizás abrumadora) de sitios web útiles relacionados, consulte WebDesignRepo .

Los mejores lugares para aprender sobre diseño web (soluciones de diseño, usabilidad, gráficos y soluciones técnicas) son:

mira todo el sitio web de las personas que escribieron artículos en esos sitios web:

Una lista aparte
24ways.org

O algo más técnico sobre el diseño de listas y flotante http://css.maxdesign.com.au/index.htm

Tienes que saber qué son los estándares web. La fuente oficial es esta: World Wide Web Consortium (w3c) Es un poco difícil aprender de allí porque es muy técnico, pero es bueno verificarlo cuando quieres saber cómo funcionan las cosas en la web y por qué Sobre los estándares. Lo más útil es el Validador de su código HTML.

Una mejor manera es echar un buen vistazo al código fuente de buenos sitios web y, naturalmente, la proporción de cosas alineadas como esas para aprender los trucos: http://www.cssbeauty.com/

Y mira el sitio web de buenos diseñadores web y lo que están haciendo:

Jason Santa María
Dustin Curtis
Joshua Davis
David DeSandro
http://www.thinkingforaliving.org/
etc ...

y mis marcadores Delicious (hay una variedad de cosas, tienes que buscarlas y leer lo que no necesitas) http://www.delicious.com/Littlemad/webdesign

Antes de comenzar a aprender todos esos marcos ...

Quiero volver a dirigir su atención hacia el diseño de parte del diseño de la tela.

Por supuesto, puede crear fácilmente un sitio web con Bootstrap o algún otro marco. Pero eso no es diseñar. Un marco puede ser una base, pero si no da su propio giro, básicamente obtendrá un sitio web que es como todos los demás sitios web .

Es por eso que le aconsejo que aprenda los conceptos básicos del diseño y trate de aplicarlos por su cuenta.

¿Cómo haces sitios web (hermosos) por tu cuenta?

Ahora que es una pregunta que vale la pena un libro, pero aquí hay algunos consejos:

1. Lea sobre los principios básicos del diseño . Este manual de 7 pasos en diseño web debería ayudarlo a comenzar. Además, esta serie de artículos sobre la revista Smashing .
2. Observa los diseños de otras personas. ¿Qué principios básicos usaron y cómo? Pero no solo observe, tenga en cuenta sus observaciones .
3. Diseñe con el objetivo comercial en mente . Existe un diseño web para ayudar a una empresa a alcanzar su objetivo y para ayudar al usuario a alcanzar su propio objetivo. Cuando los 2 objetivos convergen, todos están felices. Entonces, ese objetivo debe ser su punto de partida, siempre. Debe basar cada decisión de diseño que tome en este objetivo: opciones de fuente, opciones de color, diseño, etc.
4. Asegúrese de que haya armonía en todo su diseño. En general, esto significa armonía entre el mensaje que desea enviar, los colores, las fuentes, el estado de ánimo del sitio web y la marca. Comience a integrar la armonía en sus diseños utilizando una escala modular para guiar sus decisiones de dimensionamiento. Esta miniserie explica más sobre la armonía y el uso de una escala modular.
5. Lea esta sorprendente introducción a la tipografía : la tipografía práctica de Butterick o, al menos, este resumen.

Intenta diseñar desde cero

Ahora, cuando haya terminado de leer todas estas cosas y sepa HTML y CSS, podrá hacer su propio diseño muy simple.

Intente diseñar una sola página con solo texto, en blanco y negro .

¿Por qué solo enviar mensajes de texto? Porque el texto es, con mucho, el medio más utilizado para transmitir un mensaje en la web. Por lo tanto, es fundamental para usted, como diseñador web, poder hacer que el texto se vea bien y sea un placer leerlo.

¿Por qué blanco y negro? Porque elegir colores es otra bestia. Tomar pequeños pasos te hará sentir feliz con el progreso que estás haciendo y te ayudará a aprender más rápido.

Aplique los principios básicos de diseño que aprendió + use las observaciones de los diseños de otras personas + piense en el objetivo de esa página + dimensione el texto usando una escala modular.

La mejor manera de aprender es hacer cosas, así que hazte un sitio web.

Lea los estándares , alistapart , tutsplus .

Si necesita un libro, mire el SitePoint 's - Utopía HTML: Diseñando sin tablas usando CSS .

Algunas reflexiones sobre csszengarden y W3Schools .

Honestamente, comenzaría aprendiendo cómo desarrollar sitios de WordPress. Sí, puedo codificar un sitio usando HTML, CSS, PHP, ... pero puedo armar un sitio de WordPress más rápido y luego personalizarlo según sea necesario.

Si está buscando comenzar simplemente aprendiendo los estándares de hoy, le recomendaría http://nettuts.com/ . También sería beneficioso obtener la membresía premium y acceder a algunos excelentes tutoriales. Si pasar de PSD a HTML es algo que le interesa, lo cubren.

Nettuts es parte de Envato. Envato tiene varios sitios de tutoriales que cubren el desarrollo web, wordpress, vectores, edición de fotos y videos y mucho más. Es un excelente lugar para comenzar.

Solo mis 2 centavos.

Para principiantes de Photoshop en diseño web, recomiendo este sitio http://psdvibe.com/

Hay muchos sitios web con toneladas de tutoriales. Sin embargo, la mejor plataforma para aprender diseño web es http://teamtreehouse.com/ . ¡Espero eso ayude! Nik