Si estás empezando desde cero, tienes un gran trabajo para ti. La buena noticia es que hay muchos recursos de codificación baratos ~ gratuitos. Codecademy (CC) ha recorrido un largo camino desde lo que era hace 3 años. Recomiendo encarecidamente pagar por la suscripción profesional para sacar el máximo provecho de ellos. Pero si esa no es una opción, sus caminos libres funcionan muy bien, especialmente al principio. Aquí hay un breve resumen de cómo puede comenzar:
- Conozca cómo funciona Internet y cómo los sitios web encajan en el panorama general.
Si estás empezando de la nada, este es un buen comienzo. Los videos de Travis Neilson sobre Dev Tips le brindarán una visión general concisa y divertida de la imagen general. Ir a través de la lista de reproducción.
- Aprende a codificar HTML / CSS ( Codecademy ) ~ 7 horas.
H TML y CSS son los dos idiomas que necesita para crear sitios web estáticos (sitios web que solo muestran información, como una página sobre mí ). No son difíciles de aprender pero requieren una práctica constante para retener todo y aprender las mejores prácticas. Este curso de codecademy le dará una gran introducción a estas dos tecnologías. - Toma el curso “ Haz un sitio web ” de CC ~ 4 horas
Esto lo llevará a través de varios aspectos de la codificación de sitios web en HTML y CSS. Solo a partir de eso, habrás trabajado en estos varios proyectos (y algunos más):
- ¿Cuál es la mejor manera de estudiar la anatomía humana?
- ¿Es la Universidad de Chandigarh lo suficientemente buena como para realizar un MBA?
- Cómo obtener una A en mi clase de geografía humana AP y un 5 en la prueba AP
- Soy un estudiante internacional graduado de informática. Quiero conseguir un trabajo en Selangor. ¿Qué puedo hacer para eso?
- ¿Hay algo que pueda hacer para darme una ventaja en la solicitud de universidades prestigiosas?
Si desea un tutorial en vídeo de cursos particulares de codecademia, puede encontrar algunos aquí Coding Tutorials 360
Código de sitios web por ti mismo.
El siguiente paso es crear sus propios sitios web con lo que ha aprendido. Intente crear su propia página de portafolio que muestre imágenes suyas y algo sobre usted, lo que hace, sus pasatiempos, etc. No importa si se ve terrible, puede volver a ella y mejorarla según su nivel de habilidades. arriba.
A continuación, codificarás sitios web junto con Mackenzie Child de Youtube. Sus videos lo guiarán a través del diseño de un sitio web en photoshop, y luego la codificación de ese diseño en HTML y CSS (usa Sass). Pero primero te recomiendo que hagas dos cosas. Aprende la línea de comandos y sube de nivel tu CSS con Sass.
VUELVA A LA CODECADEMIA y aprenda la línea de comando .
Parte muy importante de su progreso si desea trabajar en el campo. Para ser un desarrollador pro-web en estos días, tienes que trabajar con herramientas de línea de comandos. Si también desea un tutorial en video, consulte el tutorial de línea de comandos de Scott Tolinski:
Practique en su escritorio creando, moviendo, copiando y eliminando archivos y directorios desde la línea de comandos. A partir de ahora, en cualquier proyecto de sitio web, comience a hacerlo desde la línea de comandos para practicar.
Aprender Preprocesadores. Sube de nivel tu CSS con Sass.
Ya no escriben CSS como antes. Ahora tienen cosas llamadas preprocesadores que le permiten usar variables y funciones en su CSS. Luego, este código se compila en CSS normal que su navegador podrá leer.
- Tome el curso de Codecademy Sass (Video tutorial aquí ).
- Ir a través de la lista de reproducción de Scott Tolinski Youtube
Ahora debería tener una visión general sólida de los conceptos básicos de Sass. Inicie un proyecto desde la línea de comandos y pruebe a codificar un sitio web básico en Sass. Intente compilar su Sass a CSS a través de la terminal (búsquelo en Google).
Ahora puede volver a los sitios web de codificación siguiendo los videos de Mackenzie Child. Comenzará cada proyecto desde la línea de comandos y seguirá el uso de Sass de Mackenzie.
Cómo diseñar una página de destino de agencia
Cómo codificar una página de destino de agencia
Cómo diseñar un sitio de trailer de película
Cómo codificar un sitio de trailer de película
Cómo codificar un sitio de película II (Haciéndolo receptivo)
Continuar a lo largo de esa lista de reproducción. Luego regresa al primero y haz que responda a ti mismo.
El siguiente código para replicar el sitio web de Triplagent con esta lista de reproducción en Youtube: cómo hacer un sitio web plano y moderno como Triplagent
Ahora, si yo fuera usted, me detendría después de esta serie y trabajaría en su sitio de cartera un poco más. Tal vez codifique algunos otros diseños web también. Asegúrese de que todos sean receptivos (que funcionen en teléfonos móviles) Intente diseñarlos en Photoshop o croquis primero, y luego codifíquelos. Haga todo esto utilizando la línea de comandos y Sass.
Ahora para el grande. Travis Neilsen tiene una serie de videos sobre cómo hacer un sitio web completo de principio a fin. Desde la fase de descubrimiento, pasando por el cableado hasta el diseño y desarrollo. Esto te enseñará mucho y terminarás con un resultado final muy bueno.
En este punto, debe tener una buena colección de sitios en los que haya trabajado y que se haya creado desde cero utilizando una gran cantidad de HTML y CSS, todos reunidos en un sitio de cartera. ¡Tendrás una mejor colección de proyectos en tu haber que la mayoría de los novatos!
El punto de todo esto es aprender los conceptos y PRACTICAR! Construye tantos sitios web como puedas. La historia de Jennifer DeWalt se volvió viral hace un tiempo porque aprendió a codificar construyendo 180 sitios web en 180 días.
Hay mucho que aprender. Todas las piezas en movimiento y cómo se unen para generar un sitio web, olvidarse de ellas es fácil, es por eso que tienes que seguir construyendo cosas constantemente.
Planeé terminar este post en el acto pero tengo que correr. Mañana volveré y agregaré recursos adicionales para continuar tu aprendizaje construyendo sitios web con una apariencia más profesional, con todas las funciones y aprendiendo git, github, obteniendo tus proyectos en páginas de github practicando con Bootstrap, y luego finalmente pasando a Javascript / Jquery. ¡Buena suerte!
