He terminado HTML, CSS y JavaScript. Ahora quiero hacer que mi sitio web responda. Entonces, ¿qué debo aprender y dónde?

Omita esto si sabe cómo diseñar wireframes y maquetas en photoshop.

Le sugiero que aprenda el diseño UX / UI usando Photoshop antes de sumergirse en el diseño web receptivo, ya que le ayudará a comprender los conceptos de receptivo de manera eficiente. Por ejemplo: en el tutorial de Lynda (que se enumera a continuación), aprenderá sobre las cuadrículas que a su vez lo ayudarán a comprender los marcos como bootstrap.
Enlazar:
Acerca de Photoshop y UX del curso Herramientas de diseño UX: Photoshop

Diseño de respuesta

Hay dos formas de crear un sitio web receptivo:

Codificando desde cero: ¡Sí! tienes que codificar tus propias hojas de estilo, usar consultas de medios y algunos Javascript. Debe cuidar los gráficos, ya que son el corazón de un hermoso sitio web y pueden variar desde pantallas retina 2X hasta resoluciones móviles de 320px .
tutoriales pagados:
lynda.com Entrenamiento | Fundamentos de diseño receptivo;
Diseño de un sitio de portafolio receptivo – Curso Tuts +;
HTML5 + CSS3 Responsive Web Design Course en línea;
Diseño web receptivo en la primera fila de la Asamblea General;
Diseño web receptivo móvil primero
Tutoriales gratuitos:
Cómo hacer un sitio web receptivo con HTML5 y CSS3
Cómo construir un sitio web receptivo de principio a fin

Los siguientes son cortesía de Shoaib Bhimani.
Lista de reproducción de diseño web receptiva
Diseño web adaptable

Mediante el uso de marcos:
definición:
Un marco es un conjunto estandarizado de conceptos, prácticas y criterios para tratar un tipo común de problema, que puede usarse como referencia para ayudarnos a abordar y resolver nuevos problemas de naturaleza similar.
En breve,
descargará un archivo de 2-10kb que ya contiene clases CSS y solo tiene que implementarlo de acuerdo con sus necesidades. Uno de estos marcos populares es bootstrap. Bootstrap es muy popular, pero no lo recomiendo solo para diseñar un sitio web receptivo. A continuación se incluye la lista de cuadrículas que se pueden usar en un diseño receptivo.
lista de marcos:
Un marco CSS para la creación rápida de prototipos interactivos
Toast • La grilla CSS sin sentido
Un sistema de cuadrícula CSS sensible que ayuda a los navegadores de escritorio y móviles a jugar bien juntos.
Sistema de rejilla 960
Aún así, si desea obtener una implementación completa del marco con características como estilo, tipografía, etc., consulte la siguiente lista:
Bootstrap.com
El marco front-end receptivo más avanzado de ZURB
http://www.yaml.de/
para una bella tipografía
Kube Web Framework
y si te gusta SASS,
http://groundwork.sidereel.com/

Gracias. Feliz codificación 🙂