¿Qué es el Frontend?

Comparto mis notas de la clase de Frontend

Perfiles de un Web Developer

1. Front-end: Es alguien que se dedica al desarrollo en el lado del cliente, estas pueden ser las interacción que tienes en una página web, las animaciones y los estilos son cosas que suceden en el cliente.
   Los Front-end utilizan las tecnologías de HTML, CSS y JS, que son estándares que entiende el navegador.
   También utilizan Frameworks de CSS, lo cual nos puede facilitar fragmentos de CSS ya construidos para que podamos agregarlos a nuestros sitios web! Es una ayuda para acortar tiempos de desarrollo!
   Y espera! También tenemos los Frameworks y librerías de JS, los cuales nos permitirán construir productos que puedan escalar más rápido y que tengan una interacción mayor.
   Y por si fuera poco. Tenemos los Preprocesadores de CSS, podríamos decir que es CSS con super poderes!
   Para terminar tenemos compiladores / empaquetadores de JS como Babel y Webpack

Diego es tan buen profe<3 Amo todos sus cursos!

Front-end / Back-end / Full Stack

¿Qué es un framework?
Un framework es un conjunto de archivos y pautas que definen la estructura y metodología, sobre cómo hacer el desarrollo de un proyecto software. Se podría decir que es una guía o esquema que nos ayuda a programar de forma sencilla y rápida.

Su objetivo es el desarrollo ágil de aplicaciones mediante la aportación de librerías y/o funcionalidades ya desarrolladas. Principalmente, nos permite centrarnos en el problema, en vez de preocuparnos por implementar funcionalidades que son de uso común en muchas aplicaciones. Generalmente los frameworks están basados en un lenguaje de programación, aunque no siempre es así.

¿Qué es una librería?
Una librería es uno o varios archivos escritos en un lenguaje de programación determinado, que proporcionan diversas funcionalidades. A diferencia de un framework, una librería no aporta la estructura sobre cómo realizar el desarrollo, sino que proporciona funcionalidades comunes, que ya han sido resueltas previamente por otros programadores y evitan la duplicidad de código. Además reducen el tiempo de desarrollo y aumentan la calidad del mismo.

Estas son las herramientas que suelo utilizar

Resumen de la Clase

con mucho amor para ti

**Estas son las herramientas que utilizo yo **

Mis anotaciones:

No se nada de programación, pero me intriga mucho todo lo que se puede hacer con estos lenguajes de programación

Hi Guys, this is my contribution,enjoy it…!

Maneja las cosas del lado del cliente. Todo lo que se ve
HyperText Markup Language (HTML) Cascading Style Sheet (CSS) y JavaScript (JS)
FrameWork: un framework es código que alguien más ya escribió y nos ahorra el trabajo
Preprocesador: Un programa que nos permite escribir con sintaxis más simple
Frameworks CSS: Foundation, Bootstrap Materialize
Preprocesador CSS: less stylus y sass
FrameWorks JS: React, Angular y Vue
Compilador: permite compilar a un JS más antiguo
Empaquetado, nos permite juntar mas tecnologías

Le dejo un sitio desde dónde pueden descargar íconos https://www.flaticon.com además les permite personalizar con el color que se necesite, es súper útil para mantener uniformidad visual.
Aquí otro sitio https://cocomaterial.com que permite descargar ilustraciones, súper útiles para darles vida a los sitios web.

Me encantan sus clases profesor!
Explica muy bien 😄
Estoy muy feliz de estar tomando este curso recien salio el dia de hoy.
Vamos por mas!

Perfiles de un Web Developer:
• Front-end: es el desarrollador que va a manejar las cosas del lado del cliente (al navegador). Las tecnologías que trabaja el frontend es HTML, CSS, JS. Los frontend también trabajan Frameworks de CSS que va a brindar ciertos como fragmentos de CSS ya construidos para que puedan agregarlos a los proyectos y puedan trabajar ciertas cosas mas rápido. También existen Frameworks y librerías de JS, al momento que un front ya entiende bien JS puede escoger que framewok o librería va a utilizar para poder construir productos que puedan escalar más rápido y que puedan tener una interacción muchísimo mayor. Y por último, manejan Preprocesadores de CSS, que es una forma diferente de hacer css, tiene unas reglas distintas, algunos desarrolladores dicen que es manejar CSS con superpoderes. También existen Compilador / Empaquetado de JS, que quiere decir esto, existe BABEL (nos permite utilizar lo ultimo que tiene JS, estas nuevas versiones de JS que se llama emascript 10, 9, 8) y WEBPACK (ayuda a generar empaquetados de ciertas tecnologías y trabajar un solo empaquetado que es el que vamos a subir a produccion) .

Les comparto mis apuntes de la clase! 😃

te comparto este roadmap para que complementes cno la gran variedad de cursos que existen en PLATZI, a mi me ayuda mucho ver el camino hacia donde quiero llegar!
.
.

Hay un desarrollador y profesor de universidad español que ha creado estas páginas para explicar conceptos fundamentales:

• https://lenguajehtml.com/

• https://lenguajecss.com/

• https://lenguajejs.com/

Un recurso especialmente interesante son sus Cheatsheets: https://manz.dev/cheatsheets/

Eligiendo la opción “0Euros Snif, Snif” son gratuitas, pero tienen tanto trabajo encima y son tan útiles, que creo que es interesante elegir una pequeña contribución

Dejo mis apuntes, espero les sirva 😃

Frontend

Tres estándares obligatorios para hacer desarrrollo web / Lenguajes que se usan para escribir codigo de desarrollo web:

1. Html
2. Css
3. Javascript

Frameworks:
Son plataformas para desarrollar aplicaciones de software que proporciona una base sobre la cual los desarrolladores de software pueden crear programas para una plataforma específica.

Preprocesadores en css:
Un preprocesador CSS es un programa que te permite generar CSS a partir de la syntax única del preprocesador.

Desarrollador Front-End

• Sus funciones se relacionan directamente con la interacción entre el cliente (navegador) y el producto.
  |
  Framework
• Conjunto de estándares para la guía de proyectos, facilitando su desarrollo o implementación.
  |
  Tecnologías
• HTML: HyperText Mark Language (Lenguaje de marcado de hipertexto). Estructura el contenido de la página web (títulos, párrafos, textos)
• CSS: Cascading Style Sheets (Hojas de estilo en cascada). Configura el diseño de la estructura del documento (animaciones, colores, distribución del texto). Frameworks: Boostrap.
• JavaScript: Lenguaje de programación que configura la interacción del cliente con el producto. Frameworks: Reatc, Angular.

Frontend Developer 2021

Mi resumen de esta clase 💚

2. ¿Qué es el Frontend?

El Front-End desarrolla para el lado del cliente (Navegador: Lo que el usuario puede ver).

Un Front-End Developer se encarga de desarrollar la interfaz de usuario de las aplicaciones web.
Trabaja con tecnologías como HTML, CSS y JavaScript para crear experiencias interactivas, funcionales y estéticas para los usuarios.

Que tecnologias Maneja un Front-End developer?

Las siguientes tecnologias son estandares que el navegador entiende por ende como Front End no podemos implementar otros leguajes que no esten estandarizados.

• HTML
• CSS
• JS

Frameworks de CSS

Entre los mas conocidos son:

• Bootstrap
• Materialize
• Foundation

Frameworks de JS

• React
• Angular
• Vue.js

Preprocesadores de CSS

• SAS
• LES
• Stylus

Compilador/Empaquetadores JS

• Web-Pack
• Babel

No te frutes no tienes que aprenderte de memoria las tecnologias del Frontend. Con que entiendes que hacen y tener en cuentas las tecnologias que utlizan es suficiente-

Lo que entendi.
Cuando hablamos de Frontend hablamos de la parte visual, la parte que se ve y se puede interactuar. Todo esa parte se le conoce como cliente que sera usado por los usuarios.
Entonces un desarrollador frontend es el encargado de desarrollar la interaccion y la parte visual. XD obiamente es obio.
Herramientas que usa un frontend:

• Html, Css y Js
• Frameworks para Css
• Frameworks para Js
• Preprocesadores de Css
• Compiladores empaquetadores

No es necesario por ahora que te sepas el nombre y para que sirve de cada herramienta mientras te conviertas en un desarrollador web iras aprendiendo. Solo tenlo en cuenta

Desarrollador Frontend (Front-End Developer)
El título más genérico y amplio de todos, abarca desde a el desarrollador con conocimientos y buen manejo de los distintos lenguajes frontend, hasta los que tienen una tecnicatura. Ambos deben ser capaces de implementar estas tecnologías en la plataforma web.

Front-End Engineer
Este puesto está dirigido a el desarrollador que proviene de un ámbito relacionado a la ingeniería o Ciencias de la Computación, y utiliza estos conocimientos y habilidades para trabajar en tecnologías frontend. Este puesto generalmente requiere una Tecnicatura en Ciencias de la Computación y años de experiencia en desarrollo de software.

La palabra “engineer” (ingeniero en inglés) nos indica que están buscando un desarrollador que debe tener conocimientos avanzados de programación, desarrollo de software y desarrollo de aplicaciones web. Deberá contar con años de experiencia en el desarrollo de aplicaciones web.

Maquetador
Este puesto busca un Desarrollador Frontend que su principal característica sea ser bueno en HTML Y CSS. No tiene importancia tu nivel en Javascript o en el desarrollo de aplicaciones.

Diseñador Front-End
Obviamente que esta es una persona capaz de diseñar y de desarrollar. Un diseñador que posee habilidades de frontend (HTML/CSS/JS) pero también habilidades de diseño profesional (por ejemplo diseño de interacción).

Desarrollador de Interfaces Web (o Desarrollador de UIs)
Cuando aparece la palabra “Interface” o “UI” en el título, nos indica que el desarrollador debe poseer habilidades en el campo de la “interacción del diseño” y “experiencia de usuario”, además de ser un desarrollador frontend.

Información resumida de esta clase
#EstudiantesDePlatzi

• Vamos a mirar los fundamentos de un web developer, los perfiles que existen y las tecnologías que usan

• El Frontend es el desarrollador que manejara las cosas con las personas que naveguen, es decir, el navegador

• El Frontend entiende estos 3 estándares: HTML, CSS, Javascript

• Existen Frameworks de CSS que nos ayudan con el tiempo, son fragmentos de código

• También existen Frameworks y librerías de Javascript

• Existen Preprocesadores de CSS

• Existen compiladores de Javascript

• Como buena practica todos los desarrolladores deben trabajar las últimas versiones de Javascript

Hola amiges, aca les compartó un GIST con Recursos para el desarrollo web, espero que les sirva. Trato de ir actualizandolo cada cierto tiempo
Resource Web

Les comparto mis apuntes en un screenshot

Estandares

• HTML
• CSS
• JavaScript

Frameworks de CSS

• Bootstrap
• Foundation
• Otros

Frameworks y librerias de JS
-VueJs
-React
-Angular
-Otros

Preprocesadores de CSS
-Less
-Stylus
-Sass

Empaquetador de JS
-Babel
-Webpack

Frontend:
Maneja la Cosas del Lado del cliente (Navegador)
Tecnologías que debe dominar: HTML CCS Js
Frameworks de CSS: Ejemplo Bootstrap
Frameworks y librerías de JS
Preprocesadores de CSS: Ejemplo Less Stylus Sass
Compilador / Empaquetador de JS: Ejemplo Babel, webpack

¿Qué es Frontend?

Frontend es la parte de un programa o dispositivo a la que un usuario puede acceder directamente. Son todas las tecnologías de diseño y desarrollo web que corren en el navegador y que se encargan de la interactividad con los usuarios.
.

Un programador Frontend debe saber de códigos [HTML, CSS y JavaScript](HTML, CSS y JavaScript) para poder usar algunos frameworks o librerías que expanden sus capacidades para crear cualquier tipo de interfaces de usuarios. React, Redux, Angular, Bootstrap, Foundation, LESS, Sass, Stylus y PostCSS son algunos de ellos.

https://roadmap.sh/frontend

Por eso me gusta el frontend 😅

Un Framework de CSS es un conjunto predefinido de estilos CSS y componentes HTML que se pueden utilizar para desarrollar sitios web de manera más rápida y eficiente.

En lugar de tener que escribir todo el código CSS y HTML desde cero, los desarrolladores pueden utilizar los estilos y componentes ya definidos en el Framework. Esto puede ahorrar tiempo y hacer que el desarrollo sea más consistente, ya que los estilos y componentes están diseñados para trabajar juntos de manera coherente.

Un Framework de CSS típicamente incluye una serie de archivos CSS predefinidos que se pueden utilizar para dar formato a elementos como botones, menús, formularios y tablas, así como una serie de componentes HTML predefinidos que se pueden utilizar para construir rápidamente el esqueleto de una página web.

Algunos ejemplos de Frameworks de CSS populares incluyen Bootstrap, Foundation y Materialize.

Herramientas que maneja un frontend
Debido a que un frontend es el desarrollador que va a manejar las cosas del lado del cliente, las tecnologías con las que va a trabajar son:

HTML: https://devdocs.io/html/
CSS: https://devdocs.io/css/
JavaScript: https://devdocs.io/javascript/
Frameworks de CSS para frontend:
Bootstrap: https://getbootstrap.com/
Foundation CSS: https://get.foundation/
Materialize CSS: https://materializecss.com/
Los frameworks de JavaScript para frontend:

React JS: https://es.reactjs.org/
Angular JS: https://angular.io/
Vue JS: https://vuejs.org/
Preprocesadores de CSS:
Stylus: https://stylus-lang.com/
SASS: https://sass-lang.com/
Compiladores / empaquetadores de JS:
BABEL: https://babeljs.io/
Webpack: https://webpack.js.org/

Front end y back end
Front end y back end son términos que se refieren a la separación de intereses entre una capa de presentación y una capa de acceso a datos, respectivamente. Según el contexto, para referirse a front end se usan otros términos como frontal o interfaz de usuario, mientras que a back end se le llama servidor, motor o modo administrador.

¿Qué es un procesador css?
Es una herramienta que nos permite escribir pseudo-código CSS que luego será convertido a CSS real. Ese pseudo-código se conforma de variables, condiciones, bucles o funciones. Podríamos decir que tenemos un lenguaje de programación que genera CSS.

Frontend es la parte de un programa o dispositivo a la que un usuario puede acceder directamente. Son todas las tecnologías de diseño y desarrollo web que corren en el navegador y que se encargan de la interactividad con los usuarios.

Excelentes aportes !! Genial la clase.

FRAMEWORKS DE CSS PARA FRONT END

1. boostrap.
2. fundation CSS.
3. materialize CSS.
   PREPROCESADORES DE CSS
4. Stylus,
5. SASS.
   FRAMEWORKS DE JAVASCRIPT
6. react JS.
7. angular JS.
8. Vue. JS
   COMPILADORES / EMPAQUETADORES DE JS:
9. BABEL.
10. WebPack.

primera clase de #PlatziDay

Front-end

El desarrollo web Front-end consiste en la conversión de datos en una interfaz gráfica para que el usuario pueda ver e interactuar con la información de forma digital usando HTML, CSS y JavaScript.

• Hyper Text Markup Language (HTML) HTML, siglas en inglés de Hyper Text Markup Language (lenguaje de marcas de hipertexto), es la columna vertebral de cualquier proceso de desarrollo web, sin el cual las páginas web no existirían. Hipertexto significa que el texto tiene enlaces, denominados hipervínculos, incrustados en el mismo. Cuando el usuario hace clic en una palabra o una frase que tiene un hipervínculo, se realiza una llamada a otra página web. El lenguaje de marcas indica que el texto puede convertirse en imágenes, tablas, enlaces, y otras representaciones. El código HTML es el que provee un marco general de cuál será el aspecto del sitio. HTML fue desarrollado por Tim Berners-Lee. La última versión de HTML se llama HTML5 y se publicó en 28 de octubre de 2014, por recomendación de W3C. Esta versión contiene nuevas y eficientes maneras de manejar elementos como archivos de vídeo y audio.
• Cascading Style Sheets (CSS) Las hojas de estilo en cascada, en inglés Cascading Style Sheets, controlan la apariencia visual del sitio web y permiten darle un aspecto único. Esto se consigue con hojas de estilo que se sobreponen sobre otras reglas de estilo y se lanzan basándose en el tipo de entrada, como el tamaño y la resolución de la pantalla del dispositivo.
• JavaScript JavaScript es un lenguaje de programación imperativa basado en eventos (a diferencia del modelo de programación declarativa de HTML) que se utiliza para transformar una página HTML estática en una interfaz dinámica.

Comparto mis notas para esta clase.

Que interesante todo lo que podemos aprender desde el Fronted!

Sobre Python solo diré:

(Entiendo que es un curso de hace 2 años 😅)

Un desarrollador frontend debe dominar tres estándares.

• HTML (Hypertext Markup Languaje)

• CSS (Cascade Styles Sheet)

• Javascript

Entre sus herramientas de trabajo podemos encontrar librerías de Javascript como:

• React.js
• Vue.js
• Angular

Estas son librerías para reutilizar código y acelerar los resultados del trabajo…

También existen frameworks de CSS… entre ellos:

• Bootstrap
• Foundation CSS
• Materialize CSS

También existen los preprocesadores de CSS que son normas para crear CSS.

Existen también los compiladores de Javascript que nos permiten utilizar las últimas versiones de Javascript para nuestro proyecto y compilarlas para que las entienda el navegador.

Entre ellos:

• Babel
• Webpack

RESUMEN CLASE 2:
FRONTEND

Frontend es la parte de un programa o dispositivo a la que un usuario puede acceder directamente.

Son todas las tecnologías de diseño y desarrollo web que corren en el navegador y que se encargan de la interactividad con los usuarios.

I.- ESTANDARES:

• HTML

• CSS

• JavaScript

II.- FRAMEWORKS DE CSS:

• Bootstrap

• Materialize

• Foundation

III.- FRAMEWORKS Y LIBRERIAS DE JS

• React.js

• Vue.js

• Angular.js

IV.- PREPROCESADORES DE CSS

• Less

• Stylus

• Sass

V.- COMPILADOR / EMPAQUETADOR DE JS

• BABEL

• Webpack

Qué es el frontend

Es el desarrollador quien maneja las cosas de lado del cliente (el navegador = el cliente). Las animaciones, el estilo, etc.

Las herramientas que debe manejar un frontend:

• HTML
• CSS
• JS

💡 Estas son las tres tecnologías que entiende un navegador.

Los frontend también trabajan con Frameworks de CSS, el cual son fragmentos de CSS para trabajar. Útiles para agilizar la construcción del código y no partir desde 0. Además de frameworks de CSS, también manejan frameworks de JS.

Existen también los Preprocesadores de CSS y Compilador / Empaquetados de JS.

Estoy empezando mi vida de desarrollador web, hace un par de semanas estaba muy perdido con respecto que era el front-end y el Back-end. Conforme he ido investigando al pasar las semanas he ido descubriendo que es cada uno. Con este video he podido terminar de entender que herramientas necesito aprender para ser un desarrollador Frontend. Muchas gracias.

Vaya que me está gustando mucho este curso y apenas comienza! veo los aportes de la comunidad y son increíbles!

¿Qué tecnología utiliza un desarrollador Frontend?

• Estándares que entiende un navegador o cliente
  • HTML
  • CSS
  • JavaScript
• Frameworks de CSS. Es decir, elementos de CSS previamente construidos y listos para implementar sobre cualquier proyecto.
  • Bootstrap
  • Materialize CSS
  • Fundation
• Frameworks y librerias de JS. Permiten crear productos más fáciles de escalar con interacciones de nivel avanzado
  • React
  • Angular
  • View
• Preprocesadores de CSS. Tales permiten trabajar con CSS con mayor fluidez
  • less
  • stylus
  • Sass
• Compilador o Empaquetador de JS. Permiten utilizar características avanzadas de JS de estándares como ES6, ES7, ES8, etc.
  • BABEL
  • webpack

Con este Curso empiezo mi ruta.

Importante lo que menciona el profesor. no necesitas manejar todas estas tecnologías para aplicar a puestos de trabajo.

Es el desarrollador que va manejar las cosas del lado del cliente (navegadores = cliente)

El frontend es la parte del desarrollo web que se dedica a la parte frontal de un sitio web, en pocas palabras del diseño de un sitio web, desde la estructura del sitio hasta los estilos como colores, fondos, tamaños hasta llegar a las animaciones y efectos.

¿Que es el Front End y que hace?

Es el desarrollador que va a manejar las cosas en el lado de cliente, en los navegadores. Las tecnologías fundamentales con la que trabaja son HTML, CSS y JavaScript.

Existen Frameworrks de CSS y de JavaScript, y preprocesadores de CSS y por ultimo los compiladores como Babel y empaquetadores como Webpack.

Para los que no sepan el nombre de los otros Framework (como yo) son:

• Bootstrap
• Materialize
• Zurb Foundation

Lo busqué en Google como: framework css

Por si quieren saber más del tema u otros Framework.

2.-¿Qué es el Frontend?

Es el desarrollador que maneja las cosas en el lado del CLIENTE (navegadores=cliente).

Estándares que tiene que dominar:

• HTML.
• CSS.
• JS.

Los frontends también trabajan con “Frameworks de CSS” que les dan ciertos fragmentos de CSS ya construidos para agilizar el proceso.

Asimismo, también existen frameworks y librerías de JavaScript que ayudan a construir productos que puedan escalar más rápido y puedan tener mayor interacción dependiendo de lo que se desee.

Por último manejan preprocesadores de CSS que es una forma diferente de hacer CSS con reglas diferentes, aka CSS chotado. También se tiene que manejar compiladores/empaquetadores de JS que permiten usar las últimas versiones de JS en tu proyecto y compilarlo en JS que el cliente pueda entender.

Les comparto el resumen que realice de la clase

Si les interesa la aplicación, se llama Obsidian.

Aquí mi humilde aporte.

Un Frontend debe manejar HTML, CSS Y JS y adicional, también los Frameworks de CSS, esto sirve para trabajar ciertas cosas con mayor rápides.
También, debe manejar Fremewordks y lebrerías de JS, y Preprocesadores de CSS.

3 estándares web:

1. HTML
2. CSS
3. Java Script

Para los que estamos iniciando, es importante conocer la cara de estas tecnologías y ver cuál en realidad nos gusta más y nos familiarizamos con ella y así saber qué camino coger.

Notas de la clase

Ahora existe brython que permite usar python en el browser. Dejo el link acá.

📑 El Front-end se encarga de manejar el cliente, utilizando los estándares de la Web.

Conceptos Front-End, espero les sirva:
.

Los frameworks o pre procesadores de css, dan cierto código construido.

El Front-end developer es responsable de manejar las cosas en el lado del cliente (navegadores); las interacciones, los estilos y las animaciones que tiene una página web por ejemplo, y para ello deben manejar 3 estándares que entiende el navegador y debe dominar el perfectamente, estos son HTML, CSS y JavaScript.
Adicional a ello, debe manejar Frameworks de CSS (fragmentos de CSS ya construidos para trabajar más rápido) los cuales pueden ser:_ Bootstrap, Materialize, Foundation_, entre otros.
Por su parte, también existen frameworks y librerías de JavaScript, al momento que entiende JS puede escoger qué librería puede utilizar para obtener productos que puedan escalar más rápidos y que puedan tener una interacción mayor, dependiendo del tipo de página web se pueden seleccionar 1 o 2 frameworks, dentro de los más conocidos están_ React, Angular y Vue.js_
Finalmente, manejan preprocesadores de CSS, que es una forma distinta de programar en CSS, dentro de los cuales están Less, Stylus o Sass y también pueden usar compiladores / empaquetadores de JS como Babel y Webpack.

Hola:

Son grandiosas todas las aportaciones de los alumnos, si todos nos juntáramos haríamos cosas geniales.

Saludos 😃

Aporte de clase:
El mundo laboral del desarrollo web se divide en dos:
○ Frontend: Son los encargados de cuidar toda la apariencia de las aplicaciones y sitios web. Su principal objetivo es el de pasar todo el diseño grafico de un sitio web a código. Todo con el fin de dar la mejor experiencia posible al usuario.
Esta rama se rama se subdivide en distintas especializaciones como : Arquitecto Frontend, Desarrollador JavaScript (Frontend), entre otras.
○ Backend: Resguardan los datos y seguridad de aplicaciones junto con sitios web. En resumen, se encargan de almacenar los datos de los server y brindar seguridad.
Se pueden especializar en: SysAdmis, DevOps, Desarrollador JavaScript (Backend), entre otros.

Por último tenemos a los:
○Fullstack: Estos son una mezcla de los dos anteriores, ya que trabaja con ambas tecnologías

Frontend son todas las tecnologías de diseño y desarrollo web que corren en el cliente, en el navegador.
Ya es bien sabido que un Frontend Developer debe entender y dominar HTML, CSS y JavaScript a la perfección. Pero veamos otras tecnologías que debe conocer y que le serán de mucha utilidad a lo largo de su carrera…
Frameworks de CSS: entrega a los desarrolladores ciertos fragmentos de CSS ya construidos para que puedan agregarlo a los proyectos, como Bootstrap, Materialize, Foundation, etc.
Frameworks y Librerías de JS: una vez el Front entiende bien JavaScript, ya puede escoger que Framework o Librería utilizar y así poder contruir productos escalables y con mayor interaccion, como React, Angular, Vue, Svelte.
Preprocesadores CSS: son herramientas que nos permiten escribir pseudo-código que luego será convertido a CSS real, algunos lo llaman “escribir CSS con superpoderes”, como Sass, Less o Stylus.

Front-end: 
	○ Es el desarrollador que va a manejar las cosas del lado del cliente. Animaciones estilos
	○ Tecnologías que se manejan en la carrera (HTML, CSS, JS, básico) 
	○ Adicional frameworks de CSS (Bootstrap por ejemplo), que tienen ciertos fragmentos de CSS ya construidos para agregarlos al proyecto y optimizar tiempo.
	○ Frameworks y librerías de JS.
	○ Preprocesadores de CSS (less, stylus, Sass) tecnologías para trabajar de forma diferente (CSS con superpoderes)
	○ Compilador / Empaquetador de Js (Babel para utilizar lo último de JS, luego compilarlo en una versión de JS que el navegador puede entender, WEBPACK permite generar empaquetados de ciertas tecnologías en nuestro proyecto y trabajar un solo empaquetado que será el que se sube a producción)

Yo tome el curso de js básico que usted imparte y me parecio muy bueno, ahora pretenso reforzar mis conocimiento con este.

Usted explica muy bien y me hubiese gustado haberlo conocido antes.

Saludos

Son aportes muy prácticos para ayudar a dominar los temas de los diferentes lenguajes de programación.

Consulta: Estuve escribiendo codigo de css en Visual Studio Code pero cuando voy al navegador no me funciona lo que he codificado, alguien sabe si tengo que descargar algo aparte o un paquete en el mismo Visual Studio? Ayuda por favor soy principiante!

Aclaracion: Estaba haciendo el curso gratis de programacion basica en la parte que Freddy explica a la perfeccion css y copie tal cual su codigo asi que por ese lado no me equivoque, creo que me faltaria un programa de css o algo asi no?

Frameworks de CSS

Bootstarp
Materialize
Foundation

Los front-end tambien trabajan con algo que se llama frameworks ya que estos traen ciertos fragmentos de css ya construidos y nos ahorra tiempo en construccion de nuestro producto.

Frameworks y librerias de JS

Al momento de que un front-end maneje perfectamente javascript puede escojer un framework o libreria para contruir productos que puedan escalar mas rapido y poder tener una interaccion mucho mayor depende de producto o pagina que queramos construir.

React
Angular
Vue

Preprocesadores de CSS

Es una forma diferente de hacer css tiene reglas distintas, hay desarrolladores que dicen que es manejar css con poderes, aunque css evoluciona y trae ciertas cracteristicas al estandar sin tener que utilizar preprocesadores, algunas vacantes requieren saber de estos para trabajar de manera diferente con css.

Sass

Stylus

{less}

¿Qué es el frontend?

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.

Para qué sirve el frontend

El frontend sirve para realizar la interfaz de un sitio web, desde su estructura hasta los estilos, como pueden ser la definición de los colores, texturas, tipografías, secciones, entre otros. Su uso es determinante para que el usuario tenga una buena experiencia dentro del sitio o aplicación.

Elementos del frontend

1. Estructuras de navegación. Este elemento se refiere al orden en que se organizan las diferentes páginas de un sitio web y a los componentes que se vinculan entre sí para realizar diferentes funciones dentro del sitio.
2. Layout. También nombrado como diseño de página, se refiere a todos los componentes de la página web, por ejemplo: ubicación del menú, botones, footer; todo lo necesario para que un sitio sea útil y fácil de navegar.
3. Contenido web. Todo aquello que brinde información relevante o interesante para los usuarios. Es importante destacar que el contenido no tiene que ser necesariamente texto, puede incluir sonido o materiales interactivos.
4. Imágenes. Todos los recursos visuales ayudan a aumentar el interés de los usuarios. Esto también puede incluir videos, animaciones, mapas, gráficas, infografías, GIFs, ilustraciones, diagramas, etc.
5. Logotipo. Para que un sitio web tenga mayor identidad es vital que contenga el logotipo que represente a la marca o empresa.
6. Diseño gráfico. Este elemento engloba todo lo relacionado con cómo se ve el sitio web y su apariencia: colores, formas, tipografías, tamaños, etc.

Ejemplos de aplicación del frontend

Como ya lo mencioné, el frontend son todos los elementos y componentes visibles para los usuarios, y utilizan lenguajes de diseño como CSS, HTML y JavaScript. Algunos ejemplos de frontend son los siguientes:

1. Optimización de motores de búsqueda (SEO).
2. Accesibilidad (reconocimiento de voz, conversión de texto a voz).
3. Funcionalidad en todos los navegadores y tamaños de pantalla (computadoras de escritorio, teléfonos móviles y tablets).
4. Velocidad (cuanto más rápido cargue el sitio, mejor).
5. Rendimiento del sitio web por medio de la limpieza del código.

Responsive Web Design (Diseño Web Responsivo) se refiere a la técnica de diseño y desarrollo web que permite que un sitio web se adapte y se vea bien en diferentes dispositivos y tamaños de pantalla, como teléfonos móviles, tabletas y computadoras de escritorio. Para lograr esto, hay varias librerías y frameworks disponibles que simplifican el proceso de diseño web responsivo al proporcionar estructuras y componentes predefinidos. Aquí hay algunas librerías y frameworks populares para Responsive Web Design:

Bootstrap: Bootstrap es uno de los frameworks más populares para el desarrollo web responsivo. Proporciona una variedad de componentes y estilos predefinidos que facilitan la creación de sitios web responsivos y atractivos.

Sitio web: Bootstrap

Foundation: Foundation es otro framework popular que ofrece una base sólida para el diseño web responsivo. Proporciona una amplia gama de herramientas y componentes para ayudar en el desarrollo de sitios web adaptativos.

Sitio web: Foundation

Semantic UI: Semantic UI es un framework de desarrollo frontend que utiliza un enfoque semántico para organizar el código HTML. Es altamente personalizable y está diseñado para ser responsive por defecto.

Sitio web: Semantic UI

Materialize CSS: Materialize CSS es un framework basado en los principios de Material Design de Google. Ofrece componentes y estilos predefinidos que siguen las directrices de diseño de Material Design, lo que facilita la creación de sitios web responsivos y visualmente atractivos.

Sitio web: Materialize CSS

Bulma: Bulma es un framework CSS moderno basado en flexbox. Es fácil de usar y altamente personalizable, lo que lo convierte en una opción popular para el diseño web responsivo.

Sitio web: Bulma

UIKit: UIKit es un framework frontend liviano y modular que proporciona una amplia gama de componentes y estilos responsivos para el diseño web.

Sitio web: UIKit

El frontend se refiere a la parte de un sistema informático o de una aplicación web que los usuarios pueden ver y con la que interactúan directamente. Es la interfaz de usuario, la capa visible y accesible para los usuarios finales. En el contexto del desarrollo web, el frontend está relacionado con todo lo que los usuarios experimentan visualmente en un sitio web, incluyendo diseño, interactividad y cómo se presenta la información.

Las tecnologías y herramientas comunes utilizadas en el desarrollo del frontend web incluyen:

HTML (Hypertext Markup Language): Es el lenguaje de marcado estándar utilizado para crear páginas web. Define la estructura y el contenido del sitio web utilizando una variedad de elementos y etiquetas.

CSS (Cascading Style Sheets): Es un lenguaje de estilo utilizado para describir la presentación visual de un documento HTML. Permite controlar el diseño, los colores, las fuentes y otros aspectos visuales de un sitio web.

JavaScript: Es un lenguaje de programación del lado del cliente que se utiliza para agregar interactividad y dinamismo a las páginas web. Permite crear efectos, validar formularios, manipular datos en el navegador del usuario y mucho más.

Frameworks y bibliotecas de JavaScript: Herramientas como React.js, Angular, Vue.js y jQuery simplifican el desarrollo frontend al proporcionar estructuras predefinidas y funciones reutilizables para crear interfaces de usuario más complejas y dinámicas.

Responsive Web Design: Técnicas y tecnologías que permiten que un sitio web se adapte y se vea bien en diferentes dispositivos y tamaños de pantalla, como teléfonos móviles, tabletas y computadoras de escritorio.

Control de Versiones: Herramientas como Git permiten a los desarrolladores trabajar juntos y realizar un seguimiento de las versiones del código fuente del frontend para asegurar la coherencia y la colaboración.

Frontend.
Las bases del inicio.