Yo argumentaría bastante en contra de todas estas respuestas, recomendando que comience a hacer tutoriales. Sure Code Academy puede ayudarte a aprender a crear sitios web, pero puedes aprender más en 3 días construyendo un sitio que en 3 semanas estudiando.

El desarrollo web es un negocio impulsado por la producción. Nadie sugeriría enviar a una persona que quiere ser carpintero a la “academia de martillos”. Quiero decir, más allá de las cosas básicas de seguridad, aprenderás muchas más uñas que estudiar martillos.

El desarrollo web no es cirugía. Las barreras de entrada son extremadamente bajas. Construí mi primera página web en 1993, obtuve un libro de referencia HTML de Barnes and Noble y comencé a escribir HTML unos 20 minutos después. Debido a internet ya no necesitas un libro. Si comienzas con algunos conceptos básicos y sigues ampliando tus conocimientos, retendrás lo que estás aprendiendo mucho mejor que hacer tutoriales.

Es decir, si no tiene ningún concepto sobre sitios web , podría tener sentido leer un tutorial sobre HTML básico, pero después de eso, simplemente podría elegir un pequeño proyecto e intentar construirlo. Encuentre un sitio web (simple) en línea y vea si puede duplicarlo. Obviamente, te encontrarás con cosas que no sabes, pero puedes buscar en Google CUALQUIER COSA sobre el desarrollo web y alguien ya respondió esa pregunta. Su navegador también le mostrará exactamente lo que está sucediendo en el código en cualquier sitio. Al principio puede parecer complejo, pero rápidamente aprenderá que no es tan complejo y que la estructura es bastante fácil de entender. HTML trata sobre que le dicen a los navegadores cómo manejar lo que les está enviando.

Este es el marco básico del sitio web.

En términos simples, la cabeza es básicamente instrucciones para el navegador y el cuerpo es el contenido que se mostrará. La mayoría de las etiquetas requieren el formato pero hay excepciones. Si copia ese código y lo guarda como un archivo html en su computadora, puede comenzar a agregarlo para experimentar.

Las etiquetas principales con las que querrá experimentar de inmediato serían estas:

–

, , y más las tres etiquetas que le di encima. Puede crear un sitio web completamente funcional con solo estas etiquetas. Busque esas etiquetas en cualquier referencia html y estará listo para funcionar. Después de pasar unas horas jugando, puede comenzar a agregar identificadores a sus etiquetas y una hoja de estilo en su cabeza para que pueda controlar cómo se muestran las etiquetas en el navegador usando CSS. </p> <p> Las propiedades importantes de CSS para aprender serían cosas como fuente, ancho, izquierda, derecha, altura, margen, relleno, borde, fondo, posición, absoluto y relativo. </p> <p> Comience despacio, aprenda una o dos cosas a la vez y después de que haya creado un sitio web feo, entonces tal vez tome un tutorial, las cosas que leerá tendrán mucho más sentido una vez que haya construido algo. </p> <p> <b>He creado millones de dólares en sitios web sin hacer un tutorial</b> . Cuando llego a un problema que no puedo resolver o quiero resolver de manera más elegante, busco en Google cómo lo hacen otras personas, decido lo que creo que es mejor y lo agrego a mi caja de herramientas. Después de construir algo cuando ve algo interesante en la web, puede examinar el código fuente y ver cómo se hace. Hasta que estás construyendo algo, solo estás viviendo en el mundo de la teoría, pero como dije al principio, la web se trata de producción. </p> <p> <b>La parte frontal del desarrollo web (lo que la gente ve) es definitivamente un conjunto de habilidades que puedes aprender a medida que avanzas</b> y al construir en lugar de leer retendrás MUCHO más y tus habilidades crecerán más rápido. Confía en mí cuando llegues a un punto y te preguntes cómo la gente borrará su HTML de todo el formato de un restablecimiento CSS tendrá mucho más sentido que si te lo dijera en clase. Definitivamente va a pasar mucho tiempo “leyendo”, pero leer en tiempo real para completar una tarea que realmente está tratando de “hacer” permanecerá con usted para siempre. </p>  <div id="ezoic-pub-ad-placeholder-103"> </div>  <div id="tags" class="mb-2"> </div> </article> </div> <div class="my-3 px-3 pb-2 bg-light rounded shadow-sm relate"><p class="py-2 mb-0">Related Content</p><p class="p-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/11114/tengo-una-idea-genuina-para-un-sitio-web-pero-no-se-como-disenar-uno-como-puedo-dar-vida-a-mi-sitio-web.html" rel="bookmark" class="nav-link p-0">Tengo una idea genuina para un sitio web, pero no sé cómo diseñar uno. ¿Cómo puedo dar vida a mi sitio web?</a></p><p class="p-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/22262/soy-un-disenador-que-debo-hacer-para-que-los-clientes-me-descubran.html" rel="bookmark" class="nav-link p-0">Soy un diseñador. ¿Qué debo hacer para que los clientes me descubran?</a></p><p class="p-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/12911/quiero-ser-un-desarrollador-web-full-stack-me-ayudaria-hacer-un-curso-de-nanogrado-de-desarrollador-web-udacity-full-stack.html" rel="bookmark" class="nav-link p-0">Quiero ser un desarrollador web Full Stack. ¿Me ayudaría hacer un curso de nanogrado de desarrollador web Udacity Full Stack?</a></p><p class="p-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/21201/si-compro-un-tema-de-licencia-regular-de-themeforest-puedo-usarlo-para-crear-un-sitio-web-donde-los-usuarios-puedan-comprar-un-servicio.html" rel="bookmark" class="nav-link p-0">Si compro un tema de licencia regular de Themeforest, ¿puedo usarlo para crear un sitio web donde los usuarios puedan comprar un servicio?</a></p><p class="p-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/9051/quiero-hacer-un-sitio-web-como-mysmartichelin-compareraja-in-pricedekho-com-etc-no-se-como-crearlo-alguien-puede-aconsejarme.html" rel="bookmark" class="nav-link p-0">Quiero hacer un sitio web como mysmartichelin, compareraja.in, pricedekho.com, etc. No se como crearlo. ¿Alguien puede aconsejarme?</a></p></div> <div class="row mx-0"> <div class="col-md-6 text-left bg-white shadow-sm py-2"><a href="https://develop.gobetech.com/10653/como-mover-cada-elemento-individualmente-unos-pocos-pixeles-usando-css.html" rel="prev">Cómo mover cada elemento individualmente unos pocos píxeles usando CSS</a></div> <div class="col-md-6 text-right bg-white shadow-sm py-2"><a href="https://develop.gobetech.com/10655/como-funciona-la-aplicacion-helpchat.html" rel="next">¿Cómo funciona la aplicación Helpchat?</a></div> </div> <div class="card my-3 border-0 shadow-sm"> <div class="card-body"> <p> ¿Para un chico sin tecnología? Hmm … </p> <p> 1. En primer lugar, sepa que cuando se trata de aplicaciones web, puede ser <b>diseñador</b> web o <b>desarrollador</b> web <br /> 2. Una vez que haya identificado lo que quiere, puede comenzar a sentirse un poco más tranquilo y elegir estos. </p> <p> <b>Diseñador web:</b> </p> <ol> <li> Aprende HTML y aprende a fondo. Querrá saber qué hacen cada etiqueta, sus atributos. Querrá saber cuáles son las nuevas características en cada versión de HTML. Querrá saber cómo interactúa cada elemento con la página. </li> <li> Aprende CSS. En esto trabajará como diseñador web. Nuevamente, aprenda todo lo que puede hacer con CSS y sepa qué ofrece cada nueva versión. </li> <li> Aprende JavaScript. Si bien esto no es MUY esencial para usted, creo que debe tener una comprensión sólida de ello. Puede ayudarlo a dar a sus diseños web algunos diseños dinámicos o animaciones interesantes. </li> <li> Aprenda jQuery / AJAX. Ver razón 3 </li> </ol> <p> <b>Desarrollador web:</b> </p> <ol> <li> Aprende HTML. Concéntrese en cuáles son las características. Concéntrese en cuáles son las diferentes funciones disponibles. Siento que deberías enfocarte adicionalmente en algunas etiquetas particulares (Formularios, Tablas, div, etc.) </li> <li> Aprende los conceptos básicos de CSS. Solo debes saberlo, te ayudará saberlo. </li> <li> Aprenda JavaScript / AJAX / jQuery. Esto lo ayudará a mejorar su página web y hacerla más interactiva y dinámica. Deberías saber esto con fluidez </li> <li> Aprenda el lenguaje de secuencias de comandos del lado del servidor. Hay muchos y esto es lo más importante para el desarrollador web. Esto lo ayudará a interactuar con la base de datos / implementar algoritmos complejos / hacer cálculos difíciles, etc. </li> <li> Aprende SQL. </li> </ol> <p> Para un chico sin tecnología. Sin embargo, los últimos serán comprensibles, pero debería poder obtenerlos. La mayoría de estos (JavaScript, PHP, ASP) son lenguaje C-Style. Quizás te interese saber lo que eso significa. </p> <p> Buena suerte </p> </div> <div class="card-footer text-right py-1"> <small class="text-muted">Vidit Goyal</small> </div> </div> </li> <div class="card my-3 border-0 shadow-sm"> <div class="card-body"> <p> Deberías comenzar con HTML y CSS. Codecademy es un excelente lugar para comenzar, pero realmente comprenderá las cosas cuando cree y diseñe sus propias páginas web. </p> <p> Después de eso, debes aprender JavaScript y un lenguaje del lado del servidor. Recomiendo Python, pero Ruby y PHP son buenos reemplazos para él. Para JavaScript, realmente debería centrarse en la manipulación DOM. Además, aprenda JQuery y otro marco frontend como ReactJS. </p> <p> En algún momento quieres aprender SQL. Aprenda sobre ERD (diagramas de relación de entidad), tipos de datos, relaciones de tabla. </p> <p> Después de eso, será bueno comenzar a usar un marco web. Django, rails o laravel son buenos entrantes dependiendo del idioma con el que comiences. </p> <p> Hay una serie en línea para CS 75, el curso de desarrollo web de Harvard. Lo cual es muy informativo y bueno para ver. </p> <p> Recuerda ser paciente y date tiempo. No entenderá todo de inmediato, pero con tiempo y práctica lo hará. </p> <p> Buena suerte. </p> </div> <div class="card-footer text-right py-1"> <small class="text-muted">Naisharg Dalal</small> </div> </div> </li> <div class="card my-3 border-0 shadow-sm"> <div class="card-body"> <p> Puede comenzar con <a href="https://codecademy.com/" rel="nofollow">http://codecademy.com</a> ya que las instrucciones allí son lo suficientemente claras como para seguirlas, incluso para una persona no experta en tecnología. Comience con HTML y CSS para crear un buen sitio web estático. Después de eso, busque Javascript para hacerlo dinámico. Después de comprender los fundamentos de la programación, podrá utilizar la codificación del lado del servidor como Python y Ruby on Rails. </p> </div> <div class="card-footer text-right py-1"> <small class="text-muted">Naisharg Dalal</small> </div> </div> </li> <div class="card my-3 border-0 shadow-sm"> <div class="card-body"> <p> Empecé con Codecademy.com. Es posiblemente el sitio más amigable para principiantes con diferencia. Aprendí HTML y CSS aquí, aprendiendo JavaScript ahora. Además de eso, también aprendí algo de Java (no JavaScript), al leer “Java: For Dummies” y la documentación en Oracle.com. </p> <p> Una vez que tenga las habilidades fundamentales, le sugiero que se meta en un pequeño proyecto en GitHub.com. La práctica es la única forma de experiencia. </p> <p> Me llevó aproximadamente un mes aprender HTML y CSS, así que creo que cualquiera puede hacerlo. Y recuerda, la <b>dedicación</b> es la clave. </p> <p> ¡Espero que esto ayude! 🙂 </p> </div> <div class="card-footer text-right py-1"> <small class="text-muted">Naisharg Dalal</small> </div> </div> </li> <div class="card my-3 border-0 shadow-sm"> <div class="card-body"> <p> Puede comenzar estudiando conocimientos básicos sobre desarrollo web. <br /> Puede aprender HTML primero, luego Java, PHP y otro lenguaje para mejorar sus habilidades. <br /> Además, debe aprender otro lenguaje útil y popular como Ruby, Python, C, C ++, C #, CSS … <br /> Espero eso ayude. </p> </div> <div class="card-footer text-right py-1"> <small class="text-muted">Naisharg Dalal</small> </div> </div> </li> <div class="card my-3 border-0 shadow-sm"> <div class="card-body"> <p> Si está interesado en aprender Desarrollo web, comience con los Tutoriales web en línea de W3Schools <br /> Proporciona buen contenido y en un lenguaje muy simple. </p> <p> Empecé a aprender de allí yo mismo. </p> <p> Saludos <br /> Vidit Goyal <br /> <a href="http://www.goyalsoftwares.com/" rel="nofollow">http://www.goyalsoftwares.com</a> </p> </div> <div class="card-footer text-right py-1"> <small class="text-muted">Naisharg Dalal</small> </div> </div> </li> <div class="card my-3 border-0 shadow-sm"> <div class="card-body"> <p> Entonces, si desea comenzar con el desarrollo web, puede comenzar con muchos sitios en línea. </p> <p> <a href="https://www.w3schools.com/" rel="nofollow">http://www.w3schools.com</a> <br /> <a href="https://www.tutorialspoint.com/" rel="nofollow">http://www.tutorialspoint.com/</a> <br /> y hay muchos sitios de video tutoriales en línea como <br /> Udaycity | Udaycity <br /> Video tutoriales y capacitación en línea <br /> <a href="https://www.udemy.com/" rel="nofollow">https://www.udemy.com/</a> </p> </div> <div class="card-footer text-right py-1"> <small class="text-muted">Naisharg Dalal</small> </div> </div> </li> <div class="card my-3 border-0 shadow-sm"> <div class="card-body"> <p> Provenía de la aviación y aprendí lenguajes de scripting como Python, C # y Java a través de cursos en línea y capacitación en el aula antes de pasar a especializarme en Information Systems Management, con un gran interés en el desarrollo web. </p> <p> Si desea comenzar a aprender desarrollo web, consulte mi plan de aprendizaje: tengo un plan de aprendizaje para el desarrollo web. ¿Me gustaría recibir comentarios sobre dónde se puede mejorar? y la respuesta de Darryl Snow en particular. Consulte el wiki de respuestas y mi blog (enlace mencionado en wiki) para obtener actualizaciones semanales con detalles y recursos. </p> </div> <div class="card-footer text-right py-1"> <small class="text-muted">Naisharg Dalal</small> </div> </div> </li> <div class="my-3 px-3 pb-2 bg-light rounded shadow-sm relate"> <p class="py-2 mb-0">More Interesting</p><p class="py-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/23068/quiero-usar-adobe-caslon-pro-para-un-proyecto-web-receptivo-usare-adobe-typekit-cuales-son-las-ventajas-y-desventajas-de-usar-esta-fuente-para-diseno-web.html" rel="bookmark" class="nav-link p-0">Quiero usar Adobe Caslon Pro para un proyecto web receptivo. Usaré adobe typekit. ¿Cuáles son las ventajas y desventajas de usar esta fuente para diseño web?</a></p><p class="py-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/23168/tengo-un-concepto-sobre-html-y-css-quiero-practicar-mas-y-mas-como-lo-hago.html" rel="bookmark" class="nav-link p-0">Tengo un concepto sobre HTML y CSS. Quiero practicar más y más. ¿Cómo lo hago?</a></p><p class="py-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/9053/descargue-una-plantilla-html5-gratuita-plantilla-espacial-cuando-cambio-algo-en-la-hoja-de-estilo-css-no-pasa-nada-por-que-esta-pasando-esto.html" rel="bookmark" class="nav-link p-0">Descargué una plantilla HTML5 gratuita (plantilla-espacial) cuando cambio algo en la hoja de estilo Css no pasa nada. ¿Por qué está pasando esto?</a></p><p class="py-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/15687/quiero-disenar-un-sitio-web-para-mi-inicio-y-necesito-referencias-para-cualquier-kit-o-plataforma-de-desarrollo-web.html" rel="bookmark" class="nav-link p-0">¿Quiero diseñar un sitio web para mi inicio y necesito referencias para cualquier kit o plataforma de desarrollo web?</a></p><p class="py-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/10103/quiero-ganar-dinero-trabajando-independientemente-tendre-mas-exito-aprendiendo-primero-desarrollo-web-o-desarrollo-ios.html" rel="bookmark" class="nav-link p-0">Quiero ganar dinero trabajando independientemente. ¿Tendré más éxito aprendiendo primero desarrollo web o desarrollo iOS?</a></p><p class="py-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/20976/tengo-mi-primer-cliente-que-quiere-que-cree-un-sitio-web-cuanto-deberia-cobrarle-por-este-sencillo-sitio-web.html" rel="bookmark" class="nav-link p-0">Tengo mi primer cliente que quiere que cree un sitio web. ¿Cuánto debería cobrarle por este sencillo sitio web?</a></p><p class="py-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/23071/me-resulta-dificil-obtener-un-tema-plantilla-de-wordpress-de-respuesta-rapida-para-un-sitio-de-ofertas-diarias.html" rel="bookmark" class="nav-link p-0">¿Me resulta difícil obtener un tema / plantilla de WordPress de respuesta rápida para un sitio de ofertas diarias?</a></p><p class="py-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/7412/estoy-desarrollando-una-pagina-web-que-depende-solo-del-front-end-es-posible-crear-una-base-de-datos-o-algo-similar-que-se-ejecute-en-el-front-end.html" rel="bookmark" class="nav-link p-0">Estoy desarrollando una página web que depende solo del front-end, ¿es posible crear una base de datos o algo similar que se ejecute en el front-end?</a></p><p class="py-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/9576/tengo-16-anos-y-no-quiero-aprender-desarrollo-web-donde-puedo-comenzar.html" rel="bookmark" class="nav-link p-0">Tengo 16 años y no quiero aprender desarrollo web, ¿dónde puedo comenzar?</a></p><p class="py-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/11984/quiero-hacer-diseno-web-tengo-conocimiento-de-html-css-y-javascript-deberia-aprender-j2ee-o-algo-mas.html" rel="bookmark" class="nav-link p-0">Quiero hacer diseño web. Tengo conocimiento de HTML, CSS y JavaScript. ¿Debería aprender J2EE o algo más?</a></p><p class="py-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/13455/necesito-crear-un-sitio-web-de-mas-de-50-paginas-entonces-cuanto-costaria-desarrollarlo-desde-cero.html" rel="bookmark" class="nav-link p-0">Necesito crear un sitio web de más de 50 páginas, entonces, ¿cuánto costaría desarrollarlo desde cero?</a></p><p class="py-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/5623/acabo-de-comenzar-una-pasantia-en-un-estudio-de-diseno-grafico-y-descubri-que-usan-mucho-imagestock-es-solo-aqui-o-lo-usan-en-todas-partes.html" rel="bookmark" class="nav-link p-0">Acabo de comenzar una pasantía en un estudio de diseño gráfico y descubrí que usan mucho Imagestock, ¿es solo aquí o lo usan en todas partes?</a></p><p class="py-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/12780/soy-relativamente-nuevo-en-el-desarrollo-de-sitios-web-uso-texto-sublime-en-una-macbook-pro-para-escribir-mis-codigos-hay-alguna-herramienta-que-deba-recomendar.html" rel="bookmark" class="nav-link p-0">Soy relativamente nuevo en el desarrollo de sitios web. Uso texto sublime en una MacBook Pro para escribir mis códigos. ¿Hay alguna herramienta que deba recomendar?</a></p><p class="py-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/13229/estoy-en-una-gran-desventaja-al-comenzar-una-carrera-de-diseno-web-despues-de-no-haber-trabajado-durante-tres-anos-despues-de-dejar-mi-universidad.html" rel="bookmark" class="nav-link p-0">¿Estoy en una gran desventaja al comenzar una carrera de diseño web después de no haber trabajado durante tres años después de dejar mi universidad?</a></p><p class="py-2 mb-0 border-top border-gray"> <a href="https://develop.gobetech.com/8630/se-poco-html-y-css-quiero-ejecutar-un-blog-asi-que-acabo-de-descargar-la-plantilla-de-wordpress-de-forma-gratuita-pero-no-tengo-idea-de-como-usarla-como-empezar.html" rel="bookmark" class="nav-link p-0">Sé poco HTML y CSS. Quiero ejecutar un blog, así que acabo de descargar la plantilla de WordPress de forma gratuita, pero no tengo idea de cómo usarla. ¿Cómo empezar?</a></p></div> </div> <div class="col-md-4 pb-3"> <script defer id="videoo-library" data-id="5ba22265f85834ee391ffe79d79e59dc0242952d274698af48dcfac8033a071c" src="https://static.videoo.tv/5ba22265f85834ee391ffe79d79e59dc0242952d274698af48dcfac8033a071c.js"></script> </div> </div> </main> <footer class="footer mt-auto py-3"> <div class="container"> <ul class="list-inline text-center relate small"> <li class="list-inline-item">Copyright © <a href="https://www.gobetech.com">GobeTech</a> - All Rights Reserved.</li> <li class="list-inline-item"><a href="/topics">Topics</a></li> <li class="list-inline-item"><a href="https://www.gobetech.com/about-us">About</a></li> <li class="list-inline-item"><a href="https://www.gobetech.com/privacy">Privacy Policy</a></li> </ul> </div> </footer> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>  <script type="text/javascript"> var sc_project=12206843; var sc_invisible=1; var sc_security="8da0d1af"; </script> <script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async></script> <noscript><div class="statcounter"><a title="Web Analytics" href="https://statcounter.com/" target="_blank"><img class="statcounter" src="https://c.statcounter.com/12206843/0/8da0d1af/1/" alt="Web Analytics"></a></div></noscript>  </body> </html>

Vengo de un entorno no tecnológico y estoy interesado en aprender el desarrollo web. ¿Alguien puede guiarme por dónde empezar?

–