¿Qué es el Frontend?

Mejor explicación sobre el frontend no se puede tener! Todo super claro!

¿Qué es el Frontend?

¿Qué abarca el Frontend?

Toda la parte visible por el usuario está abarcada por el Frontend. Podemos iniciar desde simples Mockups hasta con prototipos en Figma.

Acá incluso pueden intervenir personas expertas en UX/UI para ayudarnos a diseñar mejor la interfaz.

Aprende a gatear

Lo más básico que debes dominar en el Frontend son nuestros 3 lenguajes estrella:

• HTML → dar estructura al sitio web y a la información
• CSS → dar estilo al sitio web y a la información
• JavaScript → Lenguaje de programación para hacer interacciones con el usuario a través del sitio web

¿Qué es HTML?

Es el lenguaje con el cual le dices a tu computadora que ponga algo en tu navegador y este va y lo pone.

• ¿Qué necesito saber de HTML? → HTML es la parte más sencilla, puedes aprender su sintaxis y las diversas etiquetas que lo conforman. Gracias a HTML puedes definir la estructura de cualquier página web.

  • Accesibilidad → Pero no solo basta con aprenderse las etiquetas de HTML y ya. También necesitamos aprender sobre accesibilidad, ya que una página web debe ser usada por cualquier usuario. Algunos de ellos con discapacidad visual o auditiva que se apoyan de herramientas como lectores.
  • HTML semántico → También debemos aprender a cómo escribir HTML semántico, es decir, HTML que tenga sentido. Aprender a usar las etiquetas correctas en el lugar correcto, es fundamental. Esto lo considera el navegador para posicionar tu página.

• ¿Qué necesito saber de CSS? → CSS por su parte es un pequeño mundo, ya que acá hay muchas cosas que puedes aprender antes de dominarlo, pero antes…

  ¡No le temas a CSS!

  Muchas personas suelen tenerle miedo porque es fácil romper un sitio web con CSS, pero cuando lo dominas es como tener las gemas del infinito en tus manos

  • Selectores → Lo más importante es aprender a cómo seleccionar elementos de tu HTML desde CSS. Tenemos varios tipos de selectores, ¡y podemos combinarlos!
  • Flexbox → También es importante aprender sobre ciertas técnicas de alineación con CSS, y una de las más comunes es Flexbox.
  • CSS Grid → Otro de los mejores métodos de alineaciones que tenemos es CSS Grid, el cual nos permite crear diseños inimaginables.
  • Animaciones → Y una de las mejores cosas que tiene CSS es la posibilidad de crear transiciones y animaciones, esto le da un plus a nuestra página y la hace más dinámica para el usuario.
  • Responsive → Por supuesto, tu página también debe adaptarse a cualquier tamaño de pantalla, es por ellos que el responsive design es muy importante, sobre todo trabajar con Mobile First.

¿Y qué hay de JavaScript?

JavaScript, por su parte, es un universo gigante, hay demasiadas cosas que puedes aprender de este lenguaje, y tantos sabores de los cuales elegir…

Justo ando haciendo también el curso de CSS Grid :3 ya hice el de animaciones y transiciones, me gustaría ser una master de CSS, he visto que se hacen unas cosas tan tan barbara!!!

“Lo que sabemos es una gota de agua; lo que ignoramos es el océano” -Isaac Newton-
Ingresé a Platzi porque vi que tenían cursos sobre finanzas, análisis fundamental y técnico, y, también por la academia de inglés.
Cuando empecé, tomé los cursos de finanzas personales y el curso introducción al trading, luego descubrí la escuela de habilidades blandas en dónde podía aprender a organizarme y adquirir técnicas de estudio que me ayuden a tener un aprendizaje efectivo, y así empecé a avanzar. A medida que avanzaba con el curso de trading, descubrí que en el mercado bursátil se podía implementar el análisis de datos, vi un artículo que decía que en Israel habían creado un algoritmo que predecía la tendencia del S&P 500 con un 70% de acierto, me asombró, y empecé a explorar más sobre Data Science. A medida que leía más, encontré que para el análisis de datos también era fundamental tener conocimientos sobre programación, así que me puse a explorar de programación, y ahora, me encuentro que el mundo de la programación es muy amplio. Asusta un poco, pero…Debo confesar que también me emociona, no lo sé, solo me imagino el poder de todo ese conocimiento combinado.
En conclusión, nunca pares de aprender, porque el mundo es gigante y hay demasiado por aprender.

Vengo del mundo del diseño con toda la motivación para aprender programación, estos son mis primeros pasos en este camino y vamos con toda.

Tips:
• Figma te sirve para los bosquejos de la página
• Tener en cuenta la accesibilidad
• Escribir HTML Semántico, orden.
• Aprende Flexbox, es importante y útil
• CSS Grid también es importante para la distribución
• Animaciones
• Ten en cuenta el responsive para adaptar a cada pantalla
JS es enorme así que vamos con calma

¿Qué es el FrontEnd?

• 👀 Abarca casi toda la parte visible por el usuario
• 🖐️ También abarca la parte de interacción.
• 📏 Acá incluso pueden intervenir personas expertas en UX-UI
• 🕒 Los 3 lenguajes estrella del FrontEnd: HTML, CSS y JS
• 🏠 HTML define la estructura de la página, se recomienda aprender sus etiquetas (html semántico) y accesibilidad.
• 🎨 CSS da estilos y lo hace seleccionando con selectores. Utiliza Flexbox y Grid. Tener en cuenta el diseño responsive.
• 🌃 JS es un universo gigante.
   

📌 El FrontEnd es casi toda la parte visible por el usuario, posee 3 lenguajes estrella: HTML, CSS y JS

Desarrollo Web:
|- HTML
|- CSS
|- Flexbox
|- CSSGrid
|- Animaciones
|- Responsive Design
|- Mobile First
|- JS

Buenisimo lo de accesibilidad. Pensaba que la descripción que se pone en el “alt” era solo por si la imagen no cargaba. No habia caido en cuenta que sirve para las personas con alguna discapacidad

Si vienes del mundo del diseño amarás CSS.

Que buenos ejemplos toma para dar mayor claridad a los conceptos iniciales.

Excelente introduccion, html5 semantico para la buena ubicacion de nuestro sitio web en navegadores como google crome, CSS, reglas, tecnicas de alineacion y funcionamiento de elementos dinamicos. (selectores-flexbox-Grid-Animaciones-Responsive adaptardo nuestra pagina a todos los tamañas de pantalla)

clean code for the search motor.

Muy buena explicación sobre frontend!

Tomando el curso y es ¡Excelente! profe Carlos

Vengo de las clases de Dieguito Granda!, estás son mis primeras clases con el profe RetaxMaster y es todo un Maxter explicando más fácil no se le podría encontrar en otro lado.

Quien es Team Frontend?

No habia visto a nadie explicar el fronted de foma tan clara y sencilla como este maestro 🧐

Excelente!, me ayudo a recordar cosas importantes que hay que tener en cuenta del curso de Fronend Developer =D

Responsive

Me encanto esta clase!

El mejor ejemplo, la serpiente XD

Muy buena explicación da mucha motivación aprender con este profesor 😃

Creo que este curso me va a gustar mucho

Que crack este profe! Excelente curso!

El Html semántico : es que tenga sentido nuestra pagina web.

brutaaaal, estoy re animado con este curso, ya quiero ver mi pagina web!

HTML Semántico - Que tenga sentido y orden.

El frontend o «desarrollo del lado del cliente» se refiere a la práctica de producir HTML, CSS y JavaScript. Estos tres elementos se encargan de dar forma a la parte frontal de un sitio web o aplicación. Esto incluye los fondos, colores, texto, animaciones o efectos.

Precisamente de ahí proviene el nombre de «desarrollo del lado del cliente», pues con el frontend se puede construir por completo lo que los usuarios perciben al explorar un sitio y con el que pueden interactuar.

HTML: Definir la estructura de nuestra web.

Explicación Genial!!!

Frontend. ¿Qué cosa abarca el Frontend dentro del desarrollo Web? abarca casi que toda la parte visual y toda la parte que interactúa con el usuario.

En el Frontend tenemos que dominar los tres lenguajes estrellas que es HTLM, CSS, y JavaScript.

Literalmente HTLM es el lenguaje con el que vas a decirle a tu computadora que ponga cosas dentro de tu navegador

Accesibilidad. en el mundo hay personas diversas, y hay personas que pueden tener ciertas discapacidades visuales y auditivas.
HTML semántico seguir la sintaxis, seguir la estructura base de lo que es un árbol de HTML.

CSS por su parte es un pequeño mundo, selectores CSS va a tu HTML agarra un elemento a través de un selector. puedes seleccionar lo que tu quieras dentro de tu HTML

Flexbox. es una herramienta que nos va a permitir que nada se nos rompa dentro de los procesos CSS. Nos va a permitir hacer esta distribución de elementos de una forma muy fácil

aprender CSS Grid. Realmente es como decirle yo quiero poner la imagen aquí al lado.

animaciones un circulito que se mueva girando a lo largo de la pantalla.

El responsive no es más que adaptar tu sitio Web a diferentes tamaños de pantalla.