Al no seguir preguntando a las personas en los sitios de control de calidad cómo hacerlo, ¡lo descubrirás tú mismo!

Es bueno consultar a las personas, simplemente puede publicar una pregunta en un sitio y esperar a que otros respondan con una respuesta, tal vez obtenga la respuesta pero perdió su tiempo esperándola, ¿no? Y un mes para aprender los tres es muy poco tiempo, tienes que hacer toda la investigación y estudiar por tu cuenta, hay miles de buenos documentos y artículos disponibles para aprender sobre los tres.

Pero antes de eso tenemos que saber cuánto entiendes acerca de estos tres y cómo funcionan juntos, si no sabes un poco, diría que un mes es mucho menos para poder aprender lo básico, los primeros 15 días. Entraremos en cómo funcionan estos tres juntos.

• ¿Cuál es el formato para hacer una página web en HTML a través de Notepad ++?
• ¿Por qué las imágenes jpeg con pérdida son las predeterminadas para las imágenes descargadas en línea?
• Internet Explorer: ¿Ditch IE7 junto con IE6? ... ¿Deberíamos hacer de IE8 la nueva línea de base para la compatibilidad con versiones anteriores?
• ¿Es realmente una codificación más eficiente en tiempo y costo en tecnologías web de código abierto?
• Cómo ejecutar un script PHP a una hora específica del día

De todos modos, aquí hay un breve desglose de lo que puede hacer para al menos aprender los conceptos básicos de estas tres tecnologías y cómo se pueden usar juntas

Día 1

• Comience con HTML
• Aprenda a crear un archivo HTML (.html, .htm) y ábralo en un navegador. Puede hacerlo en cualquier editor de texto plano como el Bloc de notas en Windows. O un editor de código más especializado como Sublime Text.
• En el documento HTML, edite el archivo en blanco y coloque esto:

Hola mundo

Esta es tu primera página HTML

• Estudie la estructura básica del marcado, es como un árbol, la sangría no es importante en absoluto, pero se hace en la práctica para que el marcado sea fácil de leer y comprender qué hay dentro de qué.
• Haga algunos cambios aquí y allá y siga abriendo la página cada vez que guarde los cambios en un navegador, use Google Chrome.
• La mejor parte de aprender a desarrollar sitios web en estos días es la disponibilidad de tantas herramientas, use las Herramientas de desarrollador de Chrome para jugar con el documento HTML sin salir del navegador. Presione F12 o Ctrl + Shift + J -> Ir a la pestaña Elementos , allí podrá ver todo el código que se está representando dentro del navegador. ¡Haga doble clic en un código / texto e intente editarlo! No te preocupes, los cambios no se guardan.
• Hoy haga su propia investigación sobre cómo usar las herramientas de desarrollador de manera eficiente y qué es DOM

Día 2 a 6

• Hiciste un gran trabajo al crear una página HTML ayer, pero hay más que eso para aprender, aprenderemos sobre los elementos que se incluyen en un marcado HTML para representar una página web.
• Comencemos con algo interactivo, ¿qué pasa con una imagen? Las imágenes se agregan a las páginas web más generalmente usando la etiqueta
• ¿Recuerdas el código del último día? Abra ese archivo y entre el

• Pegue el siguiente código , ahora debe verse así

• Ahora guarde el archivo y ábralo en un navegador. ¡Oye! La imagen no apareció, ¿verdad? Es porque no hay imagen que el navegador pueda obtener en la dirección que proporcionamos images / flower.jpg <- esta parte denota que hay una carpeta llamada images en la misma ubicación que el archivo .HTML, y dentro de la carpeta de imágenes allí es un archivo .jpg llamado flower.jpg .
• Entonces, ¿qué puedes hacer? Copie cualquier imagen, se recomienda una imagen de flor, cree una nueva carpeta llamada imágenes y pegue la imagen dentro de la carpeta y cámbiele el nombre a flower.jpg (tal vez no necesite ingresar la extensión .jpg).
• Genial, ahora actualice la página en el navegador, su imagen debe estar visible ahora. Lo que tenemos en el src de la etiqueta img se llama una ruta relativa, hay otro tipo de ruta llamada ruta absoluta que aprenderá pronto a medida que avanza.
• En general, no recomiendo W3Schools, pero es bueno para principiantes completos, por lo que el Tutorial HTML aquí está. Los capítulos son pequeños y es posible que cada uno no tarde más de 30 minutos en comprenderlos brevemente.
• Mantenga una referencia de las etiquetas HTML que se pueden usar. Referencia HTML. Siempre puede hacer una búsqueda en Google si no está seguro de cómo se usa un determinado elemento / etiqueta HTML.
• El quinto día, puede probar un IDE en línea que le permite codificar una página web en tiempo real en su navegador: JS Bin: este es un gran lugar para comenzar a jugar con lo que haya aprendido. No te sientas mal si aún no has entendido algo, siempre puedes buscarlo en Google y aprender al respecto.

Día 7 a 8

• ¿Has aprendido los conceptos básicos de HTML Tutorial? En caso afirmativo, creo que estás preparado para el desafío de probar lo que has aprendido hasta ahora.
• Vaya a crear una nueva carpeta en su computadora para un nuevo proyecto sobre la creación de un formulario, se le ha asignado una tarea para crear un formulario básico en HTML para solicitar a los visitantes su nombre, edad, sexo, dirección e incluir un botón de envío. No se supone que este formulario funcione en este momento, solo se está procesando.
• ¿No estás seguro de qué hacer? Aquí tienes: formularios HTML
• Cree el formulario en 2 días, eso debería ser suficiente tiempo.

Día 9 a 15

• Puede notar que la página HTML que crea no tiene colores o fuentes elegantes como otros sitios web, este es el momento en que comenzamos con CSS.
• CSS es simple, comienza a aprenderlo aquí: Tutorial CSS
• Pronto se dará cuenta de lo cerca que se utilizan HTML y CSS para establecer estilos para los elementos HTML aburridos.
• Cuando comience lo primero, establecerá el margen, el relleno, el ancho, la altura, etc. de los elementos. Pruebe todo esto en la primera página HTML que creó.
• Establezca el ancho del elemento `body` en esa página HTML. ¿Cómo lo hacemos?

cuerpo {
ancho: 720px;
}

• Genial, el ancho de toda la página no es más de 720px,
• Siga con el tutorial CSS de W3Schools y aprenda a configurar el color de fondo, el tipo de fuente, el tamaño de fuente, el color del texto, etc.
• Debe aprender correctamente cómo usar CSS dentro de un archivo HTML, o por separado en un archivo .CSS. Suponga que si desea que el código CSS resida en un archivo separado, puede crear un archivo style.css (el nombre puede ser el que desee) y colocarlo junto al archivo .html.
• Pero, ¿cómo sabría el .HTML que hay un style.css del que debe tomar prestados estilos CSS? Lo definimos en el del archivo HTML, de esta manera usando la etiqueta :

… otro marcado …

• Hay diferentes formas de agregar estilos en un archivo HTML, aprenderá sobre él y el mejor caso de uso a medida que avanza.

Día 16 a 18

• ¿Recuerdas el formulario que creaste? Ábralo en un navegador, ¿no se ve aburrido?
• Usaremos CSS para darle un nuevo aspecto. De lo que ha aprendido hasta ahora, configure los colores, los tamaños de fuente y el ancho de los elementos del formulario y asígnele el aspecto que desee.
• La referencia CSS debe ser suficiente al menos por ahora para darle a su formulario un aspecto mínimo. Utilice los selectores de clase e ID de HTML en CSS para diseñar elementos de manera uniforme y única.

Día 18 a 28

• JavaScript comenzó como un lenguaje de secuencias de comandos del lado del cliente y ahora se ha convertido en un lenguaje de programación de pila completa que también se puede utilizar en el servidor. Para comenzar a aprenderlo, primero debes aprender los conceptos básicos del lenguaje de programación. El conocimiento mínimo de cualquier lenguaje de programación es suficiente, usted aprende más a medida que avanza: Conceptos básicos de programación de computadoras (no tiene que leer todo esto, solo aprenda qué son variables, bucles, control de flujo
• JavaScript es el lenguaje de facto de la web. Para manipular el HTML de forma interactiva en una página web, utilizamos JavaScript.

  En la web, usará JavaScript principalmente para la manipulación DOM. Lo dejaré en ti ahora, comienza con el tutorial de JavaScript de CodeAcademy: CodeAcademy JavaScript

• No se distraiga con las bibliotecas de manipulación DOM como jQuery al menos por ahora. Primero debe profundizar en JavaScript y orientar su mente hacia la programación. De esta manera, puede pensar en soluciones más lógicas para problemas difíciles.
• Luego, aprenda cómo acceder al DOM usando JavaScript, es decir, acceder / manipular el marcado HTML también llamado Modelo de Objeto del Documento, es decir, DOM.

  CodeAcademy tiene un tutorial dedicado para la manipulación DOM: manipulación DOM | Crea un sitio web interactivo (el tutorial usa jQuery y por ahora vamos con él)

Día 29 al 31

• Volvamos a nuestro desafío de formulario HTML.
• Supongamos que alguien está llenando el formulario, pero se olvidan de ingresar su nombre en el campo de nombre, ¿no sería prudente decirles que olvidaron algo? ¿Cómo lo hacemos?
• Acaba de aprender jQuery, y ahora debe ser capaz de detectar el estado de un determinado elemento. así, cuando el usuario hace clic en el botón de envío, verificará si se han ingresado todos los campos del formulario, de lo contrario, detendrá el envío del formulario y le pedirá al usuario que verifique todos los campos.
• Estás solo ahora.

Despues de un mes. CodeAcademy y W3Schools fueron buenos para empezar, pero no son suficientes para aprender los temas avanzados que vienen con cualquier idioma. En mi sugerencia, una vez que haya completado su capacitación de HTML / CSS / JS de 1 mes, diríjase a la Red de desarrolladores de Mozilla y aprenda sobre temas avanzados, aprenda a usar la manipulación DOM en Vanilla JS (Consejo: verifique qué significa Vanilla JS).

Tecnología web para desarrolladores

Luego puede crear aplicaciones web más interactivas. Para obtener motivación, consulte algunas de las increíbles cosas creadas por desarrolladores web de todo el mundo en CodePen: CodePen

¡Gracias!