4Geeks logo
4Geeks logo

Courses

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Coding Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Full-Stack Software Developer - 16w

Data Science and Machine Learning - 16 wks

Buscar en lecciones


IngresarEmpezar
← Regresar a lecciones

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast
Editar en Github

Antes de comenzar el desarrollo Full Stack

Cosas que debes saber sobre HTML/CSS

Para aprovechar mejor el próximo curso, te alentamos a que termines y repases cualquier contenido del Prework.

El material pendiente asume que tienes un buen nivel de comprensión de los siguientes temas:

Cosas que debes saber sobre HTML/CSS

  • ¿Qué es HTML y para qué sirve?
  • Los tags más esenciales como encabezados (<h1>, <h2>, <h3>...), párrafos (<p>), listas ordenadas/no ordenadas (<ol>, <ul>), etc. Piensa en cómo cada uno de estos tags cambia la apariencia, sensación y el comportamiento de tu sitio web. Por ejemplo, ¿qué parece más grande <h1> o <h2>? ¿Por qué usar <ul> en lugar de <ol>? Etc.
  • Cómo incluir una hoja de estilo CSS separada en el sitio web usando el tag <link>.
  • Cómo anular o mejorar el aspecto y el comportamiento de los tags HTML mediante el uso de selectores y reglas de CSS, por ejemplo:
    • ¿Cómo puedo seleccionar un elemento para actualizar sus estilos? Usando un selector.
    • Lo más sencillo como cambiar el color del texto y manipular las fuentes (tamaño, familia, etc).
    • Cambiar el color o la imagen de fondo del elemento.
  • Comprende completamente el tag <div> que inherentemente se comporta como una "caja" (lo que significa que tiene bordes, ancho y alto) y cómo usar <div> para separar visualmente su contenido.
  • Cómo crear los layouts de sitios web más comunes utilizando la regla CSS display: flex;.
    • ¿Cómo puedes hacer que un <div> esté del lado de otro? Aplicando display: flex; a un padre inmediato común.
    • ¿Cómo se puede hacer un layout de barra lateral?
    • ¿Cómo se puede hacer el clásico layout de "línea de tiempo de Instagram"?

Cosas que debes saber sobre CSS

  • ¿Qué es CSS y para qué sirve? Gracias a CSS, podemos seleccionar elementos específicos en el HTML y darles estilos como colores, tamaños, etc.
  • ¿Por qué se desaconseja el uso del selector #id? Debido a que es demasiado específico, va en contra de la reutilización.
  • ¿Cuándo debo usar el selector #id? Nunca, usaremos #ids solo cuando programemos en JavaScript.
  • ¿Por qué se supone que las hojas de estilo se escriben desde los estilos más genéricos hasta los más específicos? Debido a que escribirás muchas menos líneas de código de esa manera, también evitará muchos errores o conflictos entre sus selectores.

Cosas que debes saber sobre programación

  • ¿Qué es "la consola" o "terminal"? Para un desarrollador web, suele ser el lugar para obtener información sobre su código; le permite "imprimir" y mostrar el contenido de las variables para que pueda depurar su código. Los desarrolladores usan la consola todo el día, todo el tiempo.
  • ¿Cómo puedo imprimir algo en el inspector de desarrolladores (también conocido como la consola)? Al escribir console.log();
  • ¿Cómo puedo imprimir el valor de una variable? console.log(tuVariable);
  • ¿Qué es una variable y cómo almacenar valores en ella? let age = 2;
  • ¿Qué puedo almacenar en una variable? Un valor booleano, cadena, número, array (o lista), null, objeto, undefined y función.
  • ¿Qué es una operación lógica? Es una forma de hacer preguntas con código, y estas operaciones siempre devolverán respuestas booleanas. Por ejemplo, si tienes una variable age y quieres saber si es mayor de 16 años: (age > 16). Esta operación lógica se convertirá en true.
1(age > 16) == true
  • ¿Qué es una condicional? Una condicional utiliza operaciones lógicas para bloquear u omitir líneas de código. if(age>16) console.log("Puedes conducir").
  • ¿Cómo puedo guardar múltiples valores en una variable? Utiliza un array u objeto. Por ejemplo: let ages = [2,23,45,67].
  • ¿Cómo puedo hacer un bucle en un array? La forma más común es usar el bucle for de esta manera: for(let i=0; i<ages.length; i++) console.log("Age: "+i);. Este código imprimirá en el inspector de desarrolladores todas las edades dentro del array ages.

Cosas que debes saber sobre JavaScript

  • JavaScript está "orientado a eventos", lo que significa que tu código se ejecutará en función de algún evento del navegador o del usuario, por ejemplo: cuando el usuario hace clic, cuando se carga el sitio web, cuando el usuario se desplaza, cuando se recarga el sitio web, etc.
  • JavaScript puede crear HTML y CSS de la misma manera que tú: puedes decirle al JS que escriba cualquier HTML que desees. Básicamente, el código puede "escribirse solo" si creas un sitio web lo suficientemente inteligente.
  • El código JavaScript siempre debe ir en archivos JavaScript que terminen en .js. Se desaconsejan otras formas el 99% del tiempo.
  • Puedes importar JS usando el tag <script>.

Bienvenido al desarrollo web

¡Eso es! Estás listo si conoces el 70% de estos puntos. De lo contrario, te alentamos a buscar más información sobre cada uno de estos temas, leer nuestras lecciones, practicar algunos ejercicios nuevamente y, tal vez, incluso pedirle a Google o a uno de nuestros mentores excelentes recursos para aprender más al respecto.