Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es Full Stack?

5

Páginas Estáticas vs. Dinámicas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatomía de una página web

7

Index y su estructura básica: head

8

Index y su estructura básica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatomía de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de imágenes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

¿Qué es CSS?

22

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatomía de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

Más sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desafío: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas prácticas y ejemplos de responsive

50

Imágenes responsive

Quiz: Responsive Design

Accesibilidad

51

Semántica

52

Textos

53

Labels, alt y title

Próximos pasos

54

Próximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

¿Qué es el Frontend?

2/55
Recursos

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ódigo que entienda el navegador (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.

Herramientas que maneja un frontend

Debido a que un frontend es el desarrollador (que puede ser o no Full Stack) que va a manejar las cosas del lado del cliente, las tecnologías con las que va a trabajar son:

Frameworks de CSS para frontend:

Los frameworks de JavaScript para frontend:

Preprocesadores de CSS:

Compiladores / empaquetadores de JS:

Aporte creado por: Christian Tambo, Manuel Duarte.

Aportes 266

Preguntas 26

Ordenar por:

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

o inicia sesión.

Además de los estándares, frameworks, preprocesadores y librerías que maneja un Frontend Developer, me gustaría compartir estas herramientas que nos permiten un mejor desarrollo.
Herramientas

  1. Mediaqueri: Algunas ideas sobre como deberíamos implementar el diseño responsive en nuestro sitio.
  2. Coolors: Paletas de colores.
  3. Unsplash: Imagenes gratis (Da los créditos a los fotógrafos 😉).
  4. FontPair: Ver cuales fuentes puedes combinar. Y obviamente Google Fonts para obtener esas fuentes.
  5. Icons8: Iconos, vectores, música y algunos recursos más…

Documentaciones

  1. CSS
  2. HTML
  3. Browserdiet: Optimizar sitios web (Perder peso en la web 😛). Recuerda que Platzi tiene también un curso de Web Performance
  4. WCAG: Guía para mejorar la accesibilidad de nuestro sitio. Recuerda que Platzi tiene el curso de accesibilidad web.

Practica jugando

  1. Grid Layout
  2. Flexbox

Indispensables

  1. Platzi: Para nunca pares de aprender 😉


Comparto mis notas de la clase de Frontend

El Frontend es el desarrollador que va a manejar las cosas del lado del cliente.

Más info click -> aquí

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

La ruta del front-end
Más info aquí

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

con mucho amor para ti

Resumen de la Clase

**Estas son las herramientas que utilizo yo **

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

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

Mis anotaciones:

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!

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

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.

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:

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.





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

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) .

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

<h3>Front</h3>

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.

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

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

Frontend Developer 2021

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.

Les comparto mis apuntes de la 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}

Frontend Developer:

3 estándares que contiene un navegador: HTML, CSS, JS.

Framework CSS: Fragmentos CSS ya previamente construido para recortar tiempos de creación de un producto. Bootstrap, Tailwind

Framework y librerias JS: Cuando un front ya entiende JS, puede escoger que libreria va a utilizar para aumentar la escalabilidad y mejor interacción con usuario. 1 o 2 librerías. React, Vue

Preprocesadores CSS: CSS con superpoderes. SASS

Compilador/Empaquetador JS: Utiliza lo último de JS ECMA Script 10, 9, 8 en tu proyecto y compilarlo en un JavaScript que tu navegador puede comprender. Babel, webpack.

El frontend es un perfil de desarrollador web que se encarga de crear el componente visual de la página web, el contenido que el usuario ve e interactúa, las tecnologías básicas que utiliza son HTML, CSS y JAVASCRIPT

El Frontend se refiere a la parte de un sitio web o aplicación que se muestra a los usuarios y con la que interactúan. En otras palabras, es la interfaz de usuario visible que los usuarios utilizan para acceder y utilizar la aplicación.


El Frontend

  • Se compone de varios elementos, incluyendo la estructura HTML, los estilos CSS y la funcionalidad JavaScript. El HTML se utiliza para definir la estructura básica del sitio web o la aplicación, mientras que los estilos CSS se utilizan para diseñar la apariencia visual y el diseño. El JavaScript se utiliza para agregar interactividad y funcionalidad a la interfaz de usuario, permitiendo que los usuarios interactúen con el sitio web o la aplicación.


El desarrollo

  • Frontend implica la creación y diseño de páginas web y aplicaciones móviles, la implementación de una experiencia de usuario intuitiva, la optimización de la velocidad y la capacidad de respuesta del sitio, la adaptabilidad a diferentes dispositivos y la accesibilidad para usuarios con discapacidades . Los desarrolladores de Frontend trabajan con herramientas y frameworks como React, Angular, Vue.js, Bootstrap, entre otros, para crear interfaces de usuario eficaces y atractivas.

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.

.

💚💚💚💚💚

hola

Frontend: Parte visual del sitio, parece sencillo pero solo integrando el conocimiento de JS es que podemos lograr el dinamismo que se exige y vemos en internet hoy en dia

RESUMEN PARA COMPARTIR NIVEL BASICO

HTML CSS


PERFIL DE FRONT-END

Tecnologías que se necesitan

Dos estándares que se necesitan en un desarrollo web

1- Frente = cliente, es lo que se mira en un navegador web, los estándares que entiende son html, css y javascript

1.1- FRAMEWORK = Un framework es un entorno o marco de trabajo, un conjunto de prácticas, conceptos y criterios a seguir estandarizados. Siguiendo unas reglas, el framework nos obliga a utilizar buenas prácticas para nuestro código. Por otro lado, los frameworks también nos proporcionan una serie de herramientas ya desarrolladas.

2- Frameworks de CSS = elementos ya construídos; un framework CSS es un conjunto de herramientas, hojas de estilos y buenas prácticas que permiten al diseñador web olvidarse de las tareas repetitivas para centrarse en los elementos únicos de cada diseño en los que puede aportar valor.

3- Frameworks de javascript = Una biblioteca de JavaScript es una biblioteca de código pre-escrito en JavaScript que permite un desarrollo más fácil de aplicaciones basadas en JavaScript, especialmente AJAX y otras tecnologías centradas en la web. Cada framework destacado de JavaScript tiene un enfoque diferente para actualizar el DOM, manejar los eventos del navegador, y brindarte una experiencia de desarrollo satisfactoria. En este artículo, exploraremos las características principales de “los cuatro grandes” frameworks, observando cómo estos tienden a operar desde un nivel alto, al igual que las diferencias entre ellos.

4- Preprocesadores de CSS = Un preprocesador de CSS es una herramienta que nos permite escribir pseudo-código CSS que luego será convertido a CSS real.

5- Compiladores o empaquetadores de Javascript = son servicios que reúnen lo necesario de un web site construido por el desarrollador, en formatos manejables

El frontend suele estar escrito en lenguajes de programación como HTML, CSS y JavaScript, y utiliza frameworks y bibliotecas para ayudar a crear la interfaz de usuario. El backend es el complemento de frontend y se refiere a la parte de la aplicación que se ejecuta en el servidor y se encarga de las funciones de negocio, como acceder a bases de datos y lógica de negocio.