Inicia tu camino como frontend developer

1/24
Recursos
Transcripción

Te damos la bienvenida al Curso de Frontend Developer. Estos son los temas que aprenderás:

  • Introducción al desarrollo frontend
  • Maquetación con HTML
  • Maquetación con CSS
  • Diseño responsivo *(Responsive Design)
  • Arquitecturas en CSS

Profesora: Estefany Aguilar, desarrolladora Frontend en La Haus.

Adicionalmente, la profesora ha preparado un Manual de Frontend para que puedas imprimirlo y usarlo durante el curso.

Qué herramientas conocerás

Algunas herramientas que vas a usar dentro del curso son:

  • Visual Studio Code es el editor de código que se recomienda utilizar para tus proyectos y ofrece varias características para mejorar tu experiencia en el desarrollo.

  • Una alternativa a Visual Studio Code es Codi.link, un editor de código para escribir HTML, CSS y JavaScript, para visualizar el resultado a tiempo real.

Contribución del curso creada por: Andrés Guano (Platzi Contributor).

Aportes 250

Preguntas 22

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

¡Más cursitos con Teff! 🥳 Me encanta que en cada curso nuevo siempre nos trae sorpresitas. ¿Ya vieron el manual? ¡Está increíble! Este curso es de los más básicos que les ayudará a entender mucho el desarrollo web.
.
¡Ánimos para quienes recién están empezando! Es un camino largo, pero muy divertido 🤠. Les apuesto a que aprenderán mucho de aquí y se enamorarán del desarrollo web, créanme que es increíble cuando logran hacer su primera página web 🥰.
.
Me gustaría dejarles estos consejos, sobre todo para quienes recién están iniciando 👇.
.

  1. No te apresures a terminar el curso: Este curso va a estar aquí siempre que lo necesites. ¡No lleves prisa! Recuerda ir despacito y si no entendiste algo repite y pregunta hasta que lo entiendas 💚.
  2. Practica, ¡mucho!: No esperes aprender solo viendo el curso. Sí, la profesora hará cosas muy geniales, pero recuerda que tú también debes llevarlo a la práctica. Haz los ejercicios, abre tu editor de código y empieza a escribir, eso entrenará tu memoria muscular y cuando te toque hacerlo por tu cuenta ¡ya sabrás como hacerlo! 😄.
  3. ¡Curiosea!: ¡Sí! Una de las mejores cosas que puedes hacer es curiosear. No te limites a quedarte con solo lo que la profesora hizo, ¡agrega cosas! Pregúntate qué pasaría si quitas esto o añades esto otro, ¡no tengas miedo! (no te preocupes, tu computadora no va a estallar). Curioseando empezarás a experimentar y a desarrollar tu lógica, y empezarás a entender cómo funciona todo esto >:3.
  4. Busca los aportes de un tal RetaxMaster: Seguro te compartirá curiosidades y/o te explicará algunos conceptos para que termines de entenderlos mucho mejor 👀.

.
Mi recomendación es que cada vez que termines una clase vayas a tu editor de código y empieces a practicar hasta que lo domines >:3. Así que ¡ánimos! Espero que al final de este curso acabes aprendiendo mucho y decidas aprender desarrollo web a profundidad 💚.

Muchísimas gracias por el manual !!! tus cursos son los mejores!

Orden de paginas del manual, espero les ayude. Saludos

Quiero mejorar mi situación económica!! Aquí voy 🙆🏻‍♀️❤️✨ Día 1

el Primero en ver el Curso. Vamonos!

Que emoción! Estuve esperando este curso con ansias. 😄

Que emoción. En definitiva aprenderé mucho

Hola, hice este mapa mental a lo largo del curso y me fue muy útil ya que cuando empiezas un viaje es importante tener un mapa para ubicarse ✌🏽😎🤙🏽

😄 Gracias por el manual. era justo lo que esta necesitando ojala todos los cursos de front, le adjuntaran un manual

Hola comunidad! Comparto tips para **imprimir el manual de Frontend y no morir en el intento** Ingresar a la carpeta compartida por la profe Estefany de "Manual de Frontend" 1. Abrir la carpeta "Manual en PDF para imprimir" 2. Descargar el archivo en formato PDF y abrirlo 3. En **Mac** *Command+P* en **Win** *Ctrl+P* 4. Antes de imprimir deben configurar la selección de páginas como **"solo impares"** (en **Mac** se configura en "Administración del papel>Hojas a imprimir" - en **Win** en "Configuración>Imprimir todas las páginas>Imprimir solo páginas pares/impares" 5. La impresora imprimirá 9 hojas, en las cuales la parte inferior del documento debería haber quedado **a la derecha** 6. **Este punto es muy importante**. Deben tomar todas las hojas y colocarlas de manera que su cara en blanco quede mirando hacia ustedes y la parte inferior del documento debe quedar **a la izquierda**, como si rotaran el papel 180 grados sobre el eje Y 7. Antes de continuar imprimiendo deben configurar la selección de páginas como **"solo pares"** al igual que se explica en el **punto 5** 8. Deben asegurarse de que la continuidad de las páginas es la correcta, les recomiendo revisar el PDF y recuerden seguir el orden del archivo, es decir, cada hoja debe tener impar y par, página 1 queda con pagina 2 en la misma hoja, página 3 con 4 y así sucesivamente 9. Cuando finalicen ya solo deberán doblar las hojas como un cuaderno **<u>\*Recuerden que el éxito del cuadernillo está en el punto 6</u>**

Estoy muy emocionado. Llevaba toda la tarde esperando hasta que salió.
El curso anterior de 2019 con Platzi Video me encantó, aprendí mucho y con Teff mejor aún que es exclente profe, así que feliz de volver a tomar las bases y reforzar.
Seguimos aprendiendo.

Este curso estara genial, (Y mas si lo hace Teff), yo tome el curso de Frontend Devloper anterior (2018) y aprendi mucho pero voy a seguir aprendiendo🥳🔥

Nunca pares de Aprender

Dato curioso: justo hoy escuché un podcast donde entrevistaban a Rodrigo Sánchez Ríos de La Haus 😮

Me encantó el manual, estoy emocionado por este curso.

¡¡ RECOMENDACION !! Antes de ver este curso, vean el curso de preworks… van a perder tiempo

Estefany, nah senciallemente una tesa, explica super bien se le nota su carismo y ganas de ensenar, ni hablar del web site tan malditamente increible que tiene la haus…

Este curso me parece tan bueno que la verdad es de los pocos que lo repito por gusto y por que quiero afianzar los conocimientos de frontend para madurarlos, así que estoy listo de nuevo 😃

Tomé el curso del 2019 y se me hizo muy bueno aunque en ese entonces estaba iniciando. Ahora tengo más conocimiento de HTML y CSS gracias a los cursos de la ruta de desarrollo web pero cuando vi que sacaron un curso renovado de frontend developer me emocioné y la verdad es que me servirá mucho para reforzar conocimientos y será mucho mejor que la primera vez que lo tomé. Y lo mejor es que sacaron un curso práctico de este curso! Se rifaron ahora si 😄

Algo que siempre admiro de Teff es que se esmera en brindar recursos muy útiles en cada curso. 😎
¡Eso siempre se agradece!

Primer paso hast Full-Stack

Saludos 👋, vengo de terminar el curso, fue muy interesante y les quería compartir un consejo para que se animen a utilizar su propia paleta de colores.
.
En el proyecto del curso hay varios logos e iconos que están en formato .svg. Para cambiarlos de color según los colores que están utilizando deben buscar el atributo “fill”:

<svg>
<path d="Demás contenido del svg" fill="#e0e8f0"/>
</svg>

Remplazan el color por defecto por el color que ustedes quieran, como por ejemplo yo le puse el color “#e0e8f0” en este caso:

fill="#e0e8f0"

Estos son los colores que utilicé:

:root {
        --background-color: #121b2e;
        --text-color: #e0e8f0;
        --accent-color: #448aff;
        --secondary-color: #607d8b;
        --highlight-color: #ff9800;
        --sm: 14px;
        --md: 16px;
        --lg: 18px;
      }

Y este es el resultado de la aplicación con mi paleta de colores:
.











.
Espero te haya sido de ayuda 😄. Si quieres ver mi repositorio de github, es el siguiente:

https://github.com/HaroldZS/frontend-develop-practice

¡Estoy muy emocionado por tomar y, al fin, empezar mi carrera en el desarrollo web! Como proyecto personal al terminar este duo de cursos de Frontend Developer , tanto el este como el práctico, desarrollaré mi propio blog para mi marca personal.

.

Así que, let’s go!

Ya terminé el curso, muy bueno. Paso nuevamente por acá para compartir mis apuntes. Puede que alguien le sirva.

Clon de Netflix, adaptado para varios tipos de dispositivos:

https://github.com/valerianomacuri/netflix

Por lejos lo más difícil que tuve que hacer en platzi fue imprimir el manual

entre derechamente para contar cuantas referencias a shrek existen aca!! vamos con todo profeeeee!!

Que genial tener el manual para recordad conceptos clave en el momento de realizar una web y aplicar el css correctamente

Vamos por todo. Estoy seguro que todos vamos a aprender un montón!

Hace un par de Meses Aprobé la Versión 2018, Usare este como repaso y veré que nuevas cosas se han agregado y que más puedo aprender! Sobre todo porque Teff es excelente explicando 😄

El manual esta increíble!

Estoy intentando descargar el manual, pero ya no funciona el enlace, espero pronta respuesta, gracias.
Aquí empezamos el gran viaje
UFF el recurso del manual me parece algo que le da un valor añadido increíble 💚
Me encanta el recurso del manual! Gracias!!
<h1>empezemos</h1> 

Es el manual mas cute que vi en mi vida, aunque fue un parto imprimirlo, pero lo valio. La unica critica que tengo es que las paginas no tienen numeracion

el manual esta de lo más lindo :3

Aqui vamos nuevamente, a poder sacar este curso adelante 😃

Estoy muy contento de iniciar este curso, es fundamental y importante 😉

Gracias por compartir el manual, una ayuda extra para afianzar conomientos 😃

Es la primera vez que tomo un curso donde se diseña un manual. Definitivamente encantado con la presentación.

gracias por el manual. esta muy preciso con cosas que no recordaba, ya que estaba solo dedicado al backend.

Waooo que increible, un manual hecho por el mismo docente a su propio estilo, muy emocionado de empezar este nuevo curso.

No es por nada, pero una de las cosas que mas me gusta de la Profe Estefany es que siempre trae sorpresitas para hacer didáctica la clase. 😅 Que bonito como le pone mucho empeño a lo que hace.

Me encanta su forma de enseñar

Volviendo a Platzi, luego de encontrar mi primer empleo 🥳

Gracias por el Manual, yo soy de las que escribe mucho y me ahorras tiempo 😃

Con muchas ganas de comenzar este curso.

Justo hace unos meses hice el de Frontend y ahora lo renuevan… jajaja cuando toca toca

¡Qué bien!, había visto que los descargables que Estefany los hizo con mucho amor. Estoy contento de tener este trabajo muy lindo.

Tengo varios días esperando este curso, me llamaba mucho la atencion.

un gusto poder comenzar este curso

Es la primera vez que tomo un curso recién lanzado. Espero aportar mucho.

super , vamos a repasar

Wow que forma tan particular de enseñar a rpogramar.

Me encantó muchísimo el manual, ¡que idea tan creativa!
¡Apuesto a que este curso va a estar buenísimo!
Nos vemos en la recta final 😉

Eres mi profe favorita!! Explicas muy bien, gracias por estos cursos. Siempre hay algo nuevo que aprender.

Que bien, esta esperando este curso.

ya había hecho este curso antes y ahora otra vez siempre se puede aprender algo nuevo

Esta profesora me encanta, se le nota mucho la pasion por enseñar y la creatividad al hacerlo.

Wow el manual esta muy bonito y la presentación ni se diga, estoy emocionado por empezar este curso! 🥳

Hola @Estefany un gusto conocerte. Aquí comienzo este curso. I´m excited! ya te sigo en twitter también.

Vamos a aprender JUNTOS!!!

ya no funciona el enlace donde se encuentra el manual de Frontend para imprimirlo :(
Cuando intento acceder el manual, me arroja error de pagina 404, alguien que me lo pueda compartir para poder imprimirlo.
el enlace del manual no funciona. :c
el link del manual está caído
Ya no está el manual en la liga :( snif
El enlace del manual ya no funciona :(
Mi guia!!!
Emocionada por empezar :)
que linda es esta chica 🥰
Por acá arrancando el curso dentro de la Ruta Javascript Fullstack, si alguien va por este camino, de repente podemos compartir nuestro aprendizaje y de pronto ayudarnos para llegar a la meta.
gracias

¡HOLA! Teff el manual esta súper lindo y funcional, te lo agradezco. Saludos desde México =D

Emocionado por empezar este curso.
Puedes saltar este curso e ir directo a: <https://platzi.com/cursos/html-css/>

aqui vamos , con muchas expectativas

se ve bien chevere
Excelente!
30 de octubre, 2023 iniciando en este maravilloso mundo, espero ver dentro de años este comentario, y ver el camino recorrido. Muy buenos aportes en los comentarios. muchas gracias!!!!!!

Porque la primera vez que tome este curso no descargue el manual o le di una leída, porque esta excelente.

Wow 🤩Pero qué es esto tan espectacular !!! 💛La mejor profe de platzi 🙌🏼Gracias !!!

Donde esta el manual? no puedo verlo ☹ no me sale nada en la seccion de recursos
Donde esta el manual, no puedo verlo ☹ no me sale nada en la seccion de recursos
donde descargo el manual?

Cuando impriman el manual usen el borde largo 😄

Que bendición

gracias profe

Me encanta la energía y organización de Estefy! Mil gracias

That sound great…

Wooow emprendemos vuelo…

A iniciar es

un inicio claramente emocionante, va a estar bueno.

Este fue el primero curso que tome en un Platzi Day, me gusto tanto que hice un esfuerzo para pagar la anualidad.

Si estan recien empezando les recomiendo que tomen primero la trilogia de cursos de pensamiento logico, despues vayan a el Curso de Prework ( Curso de Configuración de Entorno de Desarrollo en Windows/Linux o Mac ) ahí te enseñan a configurar y ocupar un poco la terminal, me gusto lo del uso de la terminal que despues de eso decidi irme al Curso de Introducción a la Terminal y Línea de Comandos me termine picando todavia mas con el uso de la terminal que despues de ahí me salte al Curso Profesional de Git y GitHub hay cursos que no tienen un orden como tal, pero es una sugerencia que les puedo recomendar…

Al fin regreso para retomar este curso pero ahora con mas calma y practicando todo lo que se ve en clase!!