## **¿Qué es React?**

Es una librería *open source* de JavaScript para desarrollar interfaces de usuario. Fue lanzada en el año 2013 y desarrollada por Facebook, quienes también la mantienen actualmente junto a una comunidad de desarrolladores independientes y compañías.

Hoy en día muchas empresas de primer nivel utilizan React para el desarrollo de sus aplicaciones, y es que entre ellas podemos encontrar Facebook, Instagram y el cliente web de WhastApp  (todas propiedad de Facebook), y otras como AirBnb, Uber, Netflix, Twitter, Reddit o Paypal.

## **Tienda**

esto es lo que iremos hacer con el código que acá les traigo un inicio de haceos podemos agregar al carito nuestras compraras

![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ffc990ee0-0c88-4ca7-98b3-565fe86f9387%2FCaptura_de_pantalla\_2021-10-29\_170654.png?id=b6f731fa-1745-421f-8a5b-900f8f8ad145\&table=block\&spaceId=13328bea-cc89-4468-bfca-ebe605b88e65\&width=2000\&userId=514977c9-36d0-4e2d-886a-4c4d0a56974e\&cache=v2)

#

\*\*\*\*![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2b5558f4-4afb-47e6-bbc1-54bbd459e628%2FCaptura_de_pantalla\_2021-10-29\_170757.png?id=d54855b9-fcd6-4e26-be7a-fe740b3a8cb0\&table=block\&spaceId=13328bea-cc89-4468-bfca-ebe605b88e65\&width=2000\&userId=514977c9-36d0-4e2d-886a-4c4d0a56974e\&cache=v2)

![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F70c57b72-58cd-47c5-b70c-75808601d16f%2FCaptura_de_pantalla\_2021-10-29\_174012.png?id=38b5e686-27e7-44a9-8113-4c3a8ee353fb\&table=block\&spaceId=13328bea-cc89-4468-bfca-ebe605b88e65\&width=2000\&userId=514977c9-36d0-4e2d-886a-4c4d0a56974e\&cache=v2)

![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fff227f45-5575-445f-b343-1eb3b3ef0315%2FCaptura_de_pantalla\_2021-10-29\_170944.png?id=6e59e59f-90ac-4842-87d8-b161ecc12407\&table=block\&spaceId=13328bea-cc89-4468-bfca-ebe605b88e65\&width=2000\&userId=514977c9-36d0-4e2d-886a-4c4d0a56974e\&cache=v2)

***

# **Código:**

Acá encontraras todo el código para desarrollar este proceso: <https://github.com/danieldiaz13/tienda-daniel>

##

##


Se implementara JavaScript y React para uno tienda de compras en linea

REACT JS

Esta escuela contiene 18 cursos los cuales se vanas en JavaScript 

Diploma de la Escuela de JavaScript


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Laoreet sit amet cursus sit amet dictum sit. Duis ut diam quam nulla porttitor massa id neque. Ut tortor pretium viverra suspendisse potenti nullam. Auctor elit sed vulputate mi sit amet mauris commodo. Dui ut ornare lectus sit amet est placerat. Et malesuada fames ac turpis. Nunc vel risus commodo viverra maecenas accumsan lacus vel. Varius morbi enim nunc faucibus a pellentesque. Erat imperdiet sed euismod nisi porta. Viverra maecenas accumsan lacus vel facilisis volutpat est velit egestas. Dui ut ornare lectus sit amet est placerat in. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Nullam vehicula ipsum a arcu cursus vitae congue mauris.

Aenean sed adipiscing diam donec. Id donec ultrices tincidunt arcu non sodales. Orci ac auctor augue mauris augue neque gravida in. Mattis enim ut tellus elementum sagittis vitae et leo duis. Tortor pretium viverra suspendisse potenti nullam. Malesuada proin libero nunc consequat. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Mauris vitae ultricies leo integer malesuada nunc. Eget magna fermentum iaculis eu. Molestie at elementum eu facilisis. Dui faucibus in ornare quam viverra orci sagittis. Aliquam ultrices sagittis orci a scelerisque purus semper eget.

Tellus mauris a diam maecenas sed enim. Enim facilisis gravida neque convallis a cras. Sollicitudin nibh sit amet commodo nulla facilisi. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Semper viverra nam libero justo laoreet sit. Vestibulum sed arcu non odio euismod lacinia at quis risus. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque convallis. Aliquam sem et tortor consequat id porta nibh venenatis cras. Et leo duis ut diam quam nulla porttitor massa id. Sagittis vitae et leo duis ut diam quam. Vitae aliquet nec ullamcorper sit amet. Egestas egestas fringilla phasellus faucibus. Elit pellentesque habitant morbi tristique senectus et netus et. Sagittis purus sit amet volutpat consequat mauris nunc. Commodo odio aenean sed adipiscing. Aliquet eget sit amet tellus cras adipiscing. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Justo eget magna fermentum iaculis eu non.

Mi quis hendrerit dolor magna. Vel facilisis volutpat est velit egestas dui id ornare arcu. Sed sed risus pretium quam vulputate. Quam viverra orci sagittis eu volutpat odio facilisis mauris. Enim eu turpis egestas pretium. Lorem ipsum dolor sit amet consectetur adipiscing elit duis. Turpis egestas pretium aenean pharetra magna ac. Enim diam vulputate ut pharetra sit amet aliquam id. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Amet nulla facilisi morbi tempus. Aliquet bibendum enim facilisis gravida neque convallis. Nulla pharetra diam sit amet. Vitae nunc sed velit dignissim sodales ut.


A interesting tale about function of design 

Próximamente


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum nisi quis eleifend quam adipiscing vitae proin. Fermentum dui faucibus in ornare quam viverra orci sagittis. Nunc mattis enim ut tellus elementum sagittis. Sed nisi lacus sed viverra tellus. Lectus arcu bibendum at varius vel. Lacus laoreet non curabitur gravida arcu. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Eget dolor morbi non arcu. Volutpat est velit egestas dui id ornare arcu. Orci porta non pulvinar neque laoreet suspendisse interdum. Odio euismod lacinia at quis risus. Iaculis nunc sed augue lacus viverra. Suspendisse in est ante in nibh mauris cursus. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. Non odio euismod lacinia at quis risus sed vulputate. Semper viverra nam libero justo. Amet cursus sit amet dictum sit.

Diam sit amet nisl suscipit adipiscing bibendum est ultricies integer. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Mauris augue neque gravida in fermentum et. Tincidunt lobortis feugiat vivamus at augue. Iaculis urna id volutpat lacus laoreet. Risus feugiat in ante metus dictum at tempor commodo. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. Enim eu turpis egestas pretium aenean pharetra magna. Urna cursus eget nunc scelerisque viverra mauris in aliquam. Vulputate dignissim suspendisse in est ante in nibh mauris cursus. A cras semper auctor neque vitae. Rhoncus dolor purus non enim praesent elementum facilisis. Nam aliquam sem et tortor consequat id porta nibh venenatis. Sollicitudin ac orci phasellus egestas tellus. Et magnis dis parturient montes nascetur ridiculus.

Tincidunt lobortis feugiat vivamus at augue eget arcu. Est lorem ipsum dolor sit amet consectetur adipiscing elit. Non nisi est sit amet facilisis magna etiam tempor. Et egestas quis ipsum suspendisse. Turpis egestas pretium aenean pharetra magna. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Diam in arcu cursus euismod quis viverra nibh cras. Ornare lectus sit amet est placerat in egestas erat imperdiet. Adipiscing enim eu turpis egestas pretium. Sit amet est placerat in egestas. Euismod lacinia at quis risus sed vulputate odio. Quis commodo odio aenean sed adipiscing diam. Fermentum et sollicitudin ac orci phasellus. Eget aliquet nibh praesent tristique magna. Quisque sagittis purus sit amet volutpat consequat. Diam quis enim lobortis scelerisque fermentum dui. Leo urna molestie at elementum eu facilisis sed. Eget nulla facilisi etiam dignissim. Volutpat odio facilisis mauris sit amet.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra nam libero justo laoreet sit. Tincidunt id aliquet risus feugiat in ante. Non diam phasellus vestibulum lorem sed. Morbi quis commodo odio aenean. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Vel eros donec ac odio tempor orci dapibus ultrices. Facilisi morbi tempus iaculis urna id volutpat. Luctus accumsan tortor posuere ac. Sagittis orci a scelerisque purus semper eget. Ultricies mi quis hendrerit dolor magna eget est lorem ipsum. Dolor purus non enim praesent. Lorem sed risus ultricies tristique nulla aliquet enim tortor. Aliquam vestibulum morbi blandit cursus risus.

Scelerisque fermentum dui faucibus in ornare quam viverra orci. Libero justo laoreet sit amet cursus. Gravida rutrum quisque non tellus orci. Ut sem nulla pharetra diam sit amet nisl suscipit. Lorem ipsum dolor sit amet consectetur adipiscing elit. Urna porttitor rhoncus dolor purus. Quisque non tellus orci ac auctor augue mauris augue. Consectetur adipiscing elit duis tristique sollicitudin. Vitae semper quis lectus nulla at volutpat. Elementum pulvinar etiam non quam lacus suspendisse faucibus. Porta nibh venenatis cras sed felis eget velit. Ullamcorper malesuada proin libero nunc consequat interdum. Enim sed faucibus turpis in eu mi bibendum neque egestas. Facilisi morbi tempus iaculis urna. Rhoncus est pellentesque elit ullamcorper dignissim. Aenean et tortor at risus viverra adipiscing at in. Cursus euismod quis viverra nibh cras pulvinar mattis nunc sed. Sit amet aliquam id diam. Ut tristique et egestas quis ipsum suspendisse. Congue quisque egestas diam in arcu cursus.

Mattis enim ut tellus elementum sagittis. At volutpat diam ut venenatis tellus in metus vulputate eu. Habitant morbi tristique senectus et. Id aliquet lectus proin nibh nisl condimentum id venenatis. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Lectus vestibulum mattis ullamcorper velit sed. Semper viverra nam libero justo. Purus sit amet luctus venenatis. Massa id neque aliquam vestibulum morbi blandit cursus risus at. Feugiat nibh sed pulvinar proin gravida.


Apparently, green is my favorite color.

DANIEL FELIPE DIAZ RODRIGUEZ

Blog


Vis accumsan feugiat adipiscing nisl amet adipiscing accumsan blandit accumsan sapien blandit ac amet faucibus aliquet placerat commodo. Interdum ante aliquet commodo accumsan vis phasellus adipiscing. Ornare a in lacinia. Vestibulum accumsan ac metus massa tempor. Accumsan in lacinia ornare massa amet. Ac interdum ac non praesent. Cubilia lacinia interdum massa faucibus blandit nullam. Accumsan phasellus nunc integer. Accumsan euismod nunc adipiscing lacinia erat ut sit. Arcu amet. Id massa aliquet arcu accumsan lorem amet accumsan.

![Modern white table](/images/10.jpg)

Amet nibh adipiscing adipiscing. Commodo ante vis placerat interdum massa massa primis. Tempus condimentum tempus non ac varius cubilia adipiscing placerat lorem turpis at. Aliquet lorem porttitor interdum. Amet lacus. Aliquam lobortis faucibus blandit ac phasellus. In amet magna non interdum volutpat porttitor metus a ante ac neque. Nisi turpis. Commodo col. Interdum adipiscing mollis ut aliquam id ante adipiscing commodo integer arcu amet Ac interdum ac non praesent. Cubilia lacinia interdum massa faucibus blandit nullam. Accumsan phasellus nunc integer. Accumsan euismod nunc adipiscing lacinia erat ut sit. Arcu amet. Id massa aliquet arcu accumsan lorem amet accumsan commodo odio cubilia ac eu interdum placerat placerat arcu commodo lobortis adipiscing semper ornare pellentesque.

Amet nibh adipiscing adipiscing. Commodo ante vis placerat interdum massa massa primis. Tempus condimentum tempus non ac varius cubilia adipiscing placerat lorem turpis at. Aliquet lorem porttitor interdum. Amet lacus. Aliquam lobortis faucibus blandit ac phasellus. In amet magna non interdum volutpat porttitor metus a ante ac neque. Nisi turpis. Commodo col. Interdum adipiscing mollis ut aliquam id ante adipiscing commodo integer arcu amet blandit adipiscing arcu ante.


Interior design is “the art or process of designing the interior, often including the exterior, of a room or building”.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra nam libero justo laoreet sit. Tincidunt id aliquet risus feugiat in ante. Non diam phasellus vestibulum lorem sed. Morbi quis commodo odio aenean. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Vel eros donec ac odio tempor orci dapibus ultrices. Facilisi morbi tempus iaculis urna id volutpat. Luctus accumsan tortor posuere ac. Sagittis orci a scelerisque purus semper eget. Ultricies mi quis hendrerit dolor magna eget est lorem ipsum. Dolor purus non enim praesent. Lorem sed risus ultricies tristique nulla aliquet enim tortor. Aliquam vestibulum morbi blandit cursus risus.

Scelerisque fermentum dui faucibus in ornare quam viverra orci. Libero justo laoreet sit amet cursus. Gravida rutrum quisque non tellus orci. Ut sem nulla pharetra diam sit amet nisl suscipit. Lorem ipsum dolor sit amet consectetur adipiscing elit. Urna porttitor rhoncus dolor purus. Quisque non tellus orci ac auctor augue mauris augue. Consectetur adipiscing elit duis tristique sollicitudin. Vitae semper quis lectus nulla at volutpat. Elementum pulvinar etiam non quam lacus suspendisse faucibus. Porta nibh venenatis cras sed felis eget velit. Ullamcorper malesuada proin libero nunc consequat interdum. Enim sed faucibus turpis in eu mi bibendum neque egestas. Facilisi morbi tempus iaculis urna. Rhoncus est pellentesque elit ullamcorper dignissim. Aenean et tortor at risus viverra adipiscing at in. Cursus euismod quis viverra nibh cras pulvinar mattis nunc sed. Sit amet aliquam id diam. Ut tristique et egestas quis ipsum suspendisse. Congue quisque egestas diam in arcu cursus.

Mattis enim ut tellus elementum sagittis. At volutpat diam ut venenatis tellus in metus vulputate eu. Habitant morbi tristique senectus et. Id aliquet lectus proin nibh nisl condimentum id venenatis. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Lectus vestibulum mattis ullamcorper velit sed. Semper viverra nam libero justo. Purus sit amet luctus venenatis. Massa id neque aliquam vestibulum morbi blandit cursus risus at. Feugiat nibh sed pulvinar proin gravida.

### **QUE ES VISUAL STUDIO CODE:**

CODE es un editor de código desarrollado por Microsoft para Windows, Linux, y macOS contiene un listado de códigos inteligentes. Se puede personalizar al gusto con gran variedad de tipografía, colores, ETC…

Se pueden trabajar distintos tipos de lenguaje con solo descargar aquel que deseas utilizar, este un editor facilita el trabajo en CSS y HTML ya que se puede ver inmediatamente los resultados en el navegador.

### **Instalación de Visual Studio Code:**

En este enlace <https://code.visualstudio.com/>  podrás descargar Visual Studio Code dependiendo del sistema operativo
que uses ya sea Windows, Linux, y macOS; podrás ver el link de descarga.

### **Extensiones:**

En esta parte puedes descargar las extensiones que mejor se adapten
a tus gustos respecto a tipo de letras, colores y los lenguajes que necesites:

Buscas el lenguaje que quieras descargar en este caso buscamos Python y presionamos en Installing   

![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff4eee7d6-fa0d-407b-905e-273b16854aa2%2FIMG\_20210513\_214741.png?table=block\&id=ac08ed7d-f993-42f5-bd17-4f2393173847\&spaceId=13328bea-cc89-4468-bfca-ebe605b88e65\&width=1860\&userId=514977c9-36d0-4e2d-886a-4c4d0a56974e\&cache=v2)


Visual Studio Code


Interdum posuere lorem ipsum dolor sit amet consectetur. Odio morbi quis commodo odio aenean sed adipiscing diam donec. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Vitae aliquet nec ullamcorper sit. Gravida arcu ac tortor dignissim convallis aenean. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Est ultricies integer quis auctor. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Vel risus commodo viverra maecenas accumsan lacus. Donec adipiscing tristique risus nec feugiat in fermentum. Habitasse platea dictumst quisque sagittis purus sit. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Id leo in vitae turpis massa sed. Auctor elit sed vulputate mi sit. Gravida arcu ac tortor dignissim convallis aenean et.

## Types Of Work

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida in fermentum et. Eget mi proin sed libero enim sed faucibus turpis in. Semper auctor neque vitae tempus. Nibh nisl condimentum id venenatis a condimentum vitae sapien. Et malesuada fames ac turpis egestas sed tempus urna. Tristique magna sit amet purus gravida. Lobortis elementum nibh tellus molestie. Natoque penatibus et magnis dis parturient montes nascetur. Lacus sed viverra tellus in hac habitasse platea. Duis ultricies lacus sed turpis tincidunt id aliquet risus. Vitae congue eu consequat ac felis donec et. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Lobortis mattis aliquam faucibus purus in massa tempor nec feugiat. In nibh mauris cursus mattis molestie. Proin libero nunc consequat interdum varius sit amet. Molestie at elementum eu facilisis sed odio morbi quis commodo.

Vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Ac tincidunt vitae semper quis lectus nulla at volutpat diam. Eget arcu dictum varius duis at consectetur lorem. Nec ullamcorper sit amet risus nullam eget felis. Laoreet non curabitur gravida arcu ac tortor. Cursus metus aliquam eleifend mi in. Faucibus vitae aliquet nec ullamcorper sit amet. Consectetur a erat nam at lectus urna. Porttitor eget dolor morbi non arcu risus quis varius quam. Condimentum mattis pellentesque id nibh tortor id aliquet. Augue neque gravida in fermentum..


### **SynthWave '84:**

Esta extensión permite colocar el color de las letras en tonos neón.

El color de letra esta inspirado en la música y las bandas modernas de Synthwave como FM-84, Timecop 1983 y The Midnight.

![](https://pbs.twimg.com/media/EmI_bKOVoAAqvIU.png)

![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa97b2d2e-e8d3-4366-a625-f481499e6b81%2FCaptura_de_pantalla\_2021-06-28\_200236.png?table=block\&id=183e3aae-e93c-44de-85f8-431088b8e666\&spaceId=13328bea-cc89-4468-bfca-ebe605b88e65\&width=2730\&userId=514977c9-36d0-4e2d-886a-4c4d0a56974e\&cache=v2)


Al descargarlo lo aplicamos dándole click en la parte de “**Set color Theme”** de allí se desplegará el nombre de la extensión y se dará click allí. Por último para configurar seleccionamos con **ctrl+ctrl+P** o en la parte de ajustes donde dice command palette, esto desplegara una ventana desde la parte de arriba y allí escribiremos **">Synthwave '84:Enable Neon Dreams"** esto hará que en la parte da abajo nos pida un permiso para resetear, lo aceptamos y allí podremos ver como las letras cambian de colores con tonos aburridos a colores vivos con tono neón.

### **indent-rainbow:**

Esta es una extensión muy útil, porque nos facilita tener el código de una manera más ordenada y nos permite observar si hace falta algún espacio en la página o si tenemos algún espacio que sobra.

![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F5308d892-a4bc-47d8-aeaf-32a56d73c719%2FCaptura_de_pantalla\_2021-06-29\_104952.png?table=block\&id=5c6c5106-62e6-4b2a-91e7-16540e52979d\&spaceId=13328bea-cc89-4468-bfca-ebe605b88e65\&width=2050\&userId=514977c9-36d0-4e2d-886a-4c4d0a56974e\&cache=v2)


Como podemos observar en esta imagen resalta los espacios para ayudarnos a detallar mejor los espacios en el código.

![](https://zacharytodd.com/images/posts/20200719/vscode-indentation-indent-rainbow.png)

###

# **Auto Close Tag:**

### Esta extensión nos sirve para ahorrar tiempo en escribir, ya que a la hora de escribir los códigos letra por letra nos resta tiempo, por ejemplo, a la hora de escribir: **\<html>** tendríamos que escribir todo letra por letra, con esta extensión el código se va a completar **automáticamente** sin necesidad de escribirlo reiteradas veces.

![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6911ed95-73b2-43c3-b586-da3cb3e5587c%2FCaptura_de_pantalla\_2021-06-29\_112821.png?table=block\&id=5e865b9d-75c8-4322-975f-3f3c7004d88c\&spaceId=13328bea-cc89-4468-bfca-ebe605b88e65\&width=2030\&userId=514977c9-36d0-4e2d-886a-4c4d0a56974e\&cache=v2)

### **Peacock**

Esta extensión sirve para darle un color a tu espacio de trabajo.  Después de haberlo instalado deberás hacer lo siguiente:

*   Presione F1 para abrir la paleta de comandos. 



*   Selecciona la parte donde dice Peacock: change to a favorite color



*   Selecciona el color que más te gusta y allí tendrás un hermoso cambio de color para trabajar.

![](https://www.peacockcode.dev/assets/peacock-windows.png)

***



Esto ha sido todo por ahora, próximamente estarán las otras extensiones. Si conoces algunas que debería estar aquí por su gran funcionalidad dímelo a través de:

Correo: <danieldiaz13200@gmail.com>

LinkedIn: [linkedin.com/in/daniel-felipe-diaz-rodriguez](https://www.linkedin.com/in/daniel-felipe-diaz-rodriguez)

####

Las 10 Extensiones que debes tener en Visual Studio Code

# ¿Quién soy?

Soy un joven colombiano que busca salir adelante. Para ello me encuentro estudiando la carrera de electrónica en la Universidad del Valle. Si bien, mi carrera no tiene que ver mucho con la programación descubrí que este mundo es maravilloso, y decidí estudiarlo por medio de la plataforma Platzi.

# Enfocado en

Circuitos electrónicos y lenguajes de programación.

# Trayectoria

Llevo 2 años en la universidad del valle en la carrera de electrónica y en Platzi he realizado diversos cursos y retos los cuales puedes observar en mi perfil de LinkedIn [www.linkedin.com/in/daniel-felipe-diaz-rodriguez](http://www.linkedin.com/in/daniel-felipe-diaz-rodriguez)

Para indicar que te gustó mi contenido, darme alguna sugerencia de contenido que quisieras ver, hablar de programación o algún error que encuentres házmelo saber por alguno de los siguientes medios

#### Correo: programadordanieldiaz@gmail.com

#### Twitter: https://twitter.com/danieldiaz5174

#### LinkedIn: www.linkedin.com/in/daniel-felipe-diaz-rodriguez


Daniel Felipe Diaz Rodriguez

# Hola&#xA; aca de tejo mi nuevo sitio https://danieldiazweb.com/, este en poco tiempo sera eliminado soy Daniel Felipe Diaz Rodriguez y soy programador

### Aca de tejo mi nuevo sitio https://danieldiazweb.com/, este en poco tiempo sera eliminado Soy un estudiante de electrónica que ha realizado enfoques hacia la programación, logrando combinar estos dos maravillosos mundos de la tecnología para potenciar mis habilidades.

####


Puedes contactarme para saber que código programa te
gustaría obtener.

MIS PROYETOS

Si quieres que algo este aquí conecta conmigo y házmelo saber

Lo último del Blog

Home

Acá encontraras los proyectos
que he hecho con diferentes lenguajes de programación encontraras el código y
una breve explicación si tienes alguna duda o algún aporte me puedes contactar

Estos son Algunos de mis Proyectos

#### Estos son los primeros pasos en HTML y CSS para solventar las bases de este proyecto en el cual se busca mostrar una interfaz de búsqueda y una interfaz de inicio de sesión.

#### Durante la muestra de mi proyecto se puede ver las siguientes características:

#### En la interfaz de búsqueda se puede ver como ésta resalta para mostrar su importancia y al estar allí la forma del cursor cambia. También podrás ver los detalles del buscador.

#### Se puede apreciar los iconos que usualmente se usan para agregar o reproducir videos.

#### En la parte superior derecha se encontrará un perfil en el cual al pasar el cursor abrirá la opción de registrarse e iniciar sesión.

#### Al entrar a inicio de sesión se puede apreciar que la página mostrará una mezcla de dos colores para generar impacto visual, también se podrá apreciar un recuadro donde se pondrá la contraseña de ingreso, otro donde se pondrá una foto de perfil y allí mismo habrá un breve espacio para realizar un escrito.

## URL del sitio:

<https://danieldiaz13.github.io/Basico-HTML-CSS/>

## Te recomiendo estos sitios en los cuales encontré:&#xA;los colores, la tipografía de la letra, los iconos e imágenes de forma&#xA;gratuita:

Colores:  <https://coolors.co/cb997e-ddbea9-ffe8d6-b7b7a4-a5a58d-6b705c>

Tipo de letra: <https://fonts.google.com/>

Iconos: <https://iconos8.es/icons/set/user>

Imágenes gratis:  <https://www.pexels.com/es-es/> 

## Código de la interfaz de búsqueda:

Código de HTML: <https://github.com/danieldiaz13/b-sico-de-HTML-y-CSS/blob/master/maquetado.html>

Código de CSS: <https://github.com/danieldiaz13/b-sico-de-HTML-y-CSS/blob/master/maquetao.css>

## Código de la interfaz de inicio:

Código en HTML: <https://github.com/danieldiaz13/b-sico-de-HTML-y-CSS/blob/master/inicio%20de%20secion.html>

Código en CSS: <https://github.com/danieldiaz13/b-sico-de-HTML-y-CSS/blob/master/styles.css>


Interfaz de inicio de búsqueda e inicio de sesión.

Básico de HTML y CSSJ

Este código está enfocado en la funcionalidad de JavaScript implementando un poco de CSS Y HTML para darle una visualización al código.

Podrás encontrar cuatro partes en las cuales cada una tendrá una función diferente:

1\)  Figuras: acá podar apreciar figuras geométricas simples como: el cuadrado, el triángulo, el circulo y el triángulo isósceles.

2\) Descuentos: Acá podrás encontrar la cifra exacta a la hora de realizar el descuento de un producto.

3\)  Promedio: Aquí podrás sacar el resultado de las principales funciones estadísticas, las cuales son: el promedio, la mediana y la moda.

4\)  Ingresos: Aquí podrás llevar un registro de los ingresos que mensuales del año y con esto sacar un total y mediana de ingresos, y el promedio mensual.

## **URL del código:**

<https://danieldiaz13.github.io/JavaScript/index.html>


JavaScript

Implementando JavaScript

En este código se implementa JavaScript, CSS y HTML. Con esto se logra obtener una plataforma para poder reproducir videos. Ésta cuenta con un botón para iniciar y pausar el video y con otro botón el cual permite quitarle el sonido al video (Mute/Inmute).

El video que se usa para mostrar el funcionamiento de la plataforma es de Josed Mauricio Medina Espada quien es entrevistado por Lady Andrea Diaz Reyes para continuar con su proceso de formación en el SEN. El video cuenta respecto a la experiencia en el SENA CSF que tuvo Josed Mauricio Medina Espada.

## Contacto:

Lady Andrea Diaz Reyes

Contacto: ladydiaz479@gmail.com

Josed Mauricio Medina Espada

Contacto: [Linkedin](https://www.linkedin.com/in/josed-mauricio-medina-espada)

## Código

En mi GitHub podrás encontrar el código con el cual fue creado este reproductor de videos, allí podrás encontrar: la estructura que se usó en el archivo de CSS y la forma en que se implementó JavaScript y el HTML.

### Código de la plata forma en GitHub

código: <https://github.com/danieldiaz13/VIDEO/settings/pages>

## Sitio de reproductor de video

Acá en este link del reproductor del video, aquí podrás ver como
quedo en su fase final:

Reproductor de video: <https://danieldiaz13.github.io/VIDEO/>


Plataforma para reproducir videos

VIDEO

Este reto consiste en hacer cierta cantidad de cursos los cuales sirven para esta nueva era que se viera para aprender un poco dé este cambio que meta quiere implementar al mundo entero que es el Meta verso

## **Cursos tomados para aprobar el reto**

#### Curso de Creación de Filtros Faciales para Instagram con Spark AR

#### <https://platzi.com/p/danieldiaz5174/curso/2647-course/diploma/detalle/>

#### Curso de Creación de Filtros 3D para Instagram con Spark AR

#### <https://platzi.com/p/danieldiaz5174/curso/2667-course/diploma/detalle/>

#### Curso Básico de Photoshop

#### <https://platzi.com/p/danieldiaz5174/curso/1230-photoshop-basico/diploma/detalle/>

### **Filtros para diferentes redes sociales**

##### **terror-daniel**

![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F34fcf7e8-fa2f-418e-96c6-933d29c5028b%2FCaptura_de_pantalla_(2167).png?table=block&id=cdd27336-50c5-40cb-8655-099bceba79ab&spaceId=13328bea-cc89-4468-bfca-ebe605b88e65&width=830&userId=514977c9-36d0-4e2d-886a-4c4d0a56974e&cache=v2)

#### <https://www.instagram.com/ar/995167001080959/>

##### **3D_mascar**

![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F91425835-2b79-4faa-af7c-0fb4e9bbf5ef%2F1644262419520.jpg?table=block\&id=fec1251a-643b-4cae-ab9c-911b813e3191\&spaceId=13328bea-cc89-4468-bfca-ebe605b88e65\&width=1440\&userId=514977c9-36d0-4e2d-886a-4c4d0a56974e\&cache=v2)

#### <https://www.instagram.com/ar/475322594179633/>

#### <https://www.facebook.com/fbcameraeffects/tryit/475322594179633/>

##### **terror**

![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F83be3b62-d1e6-4aae-96ef-f2f68abe2616%2FCaptura_de_pantalla_\(2170\).png?table=block\&id=9d88efab-1ffe-4022-9304-d8fbddf24544\&spaceId=13328bea-cc89-4468-bfca-ebe605b88e65\&width=820\&userId=514977c9-36d0-4e2d-886a-4c4d0a56974e\&cache=v2)

#### <https://www.instagram.com/ar/1265886060600005/>

#### <https://www.facebook.com/fbcameraeffects/tryit/1265886060600005/>

##### **deporte**

![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7ee1f94c-58f7-48d4-9292-29d1b8834e9f%2FCaptura_de_pantalla_\(2171\).png?table=block\&id=afb14c30-f4a2-489c-9610-ed2fb46973c2\&spaceId=13328bea-cc89-4468-bfca-ebe605b88e65\&width=810\&userId=514977c9-36d0-4e2d-886a-4c4d0a56974e\&cache=v2)

#### <https://www.instagram.com/ar/644228086858389/>

#### <https://www.facebook.com/fbcameraeffects/tryit/644228086858389/>

##### **ojos**

![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0b9b1a61-4517-4464-b91b-044768a62b32%2FCaptura_de_pantalla_\(2168\).png?table=block\&id=d98937ef-65ad-4480-81cc-23252e827d27\&spaceId=13328bea-cc89-4468-bfca-ebe605b88e65\&width=660\&userId=514977c9-36d0-4e2d-886a-4c4d0a56974e\&cache=v2)

#### <https://www.instagram.com/ar/1076071939848377/>

#### <https://www.facebook.com/fbcameraeffects/tryit/1076071939848377/>


Reto de Platzi con Meta

Filtros para Instagram


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse faucibus interdum posuere lorem ipsum dolor. Malesuada fames ac turpis egestas sed tempus urna et. Non odio euismod lacinia at quis risus. Nisl vel pretium lectus quam id leo in vitae turpis. Dolor sit amet consectetur adipiscing elit ut. Id donec ultrices tincidunt arcu non sodales neque sodales ut. Risus ultricies tristique nulla aliquet enim. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Et leo duis ut diam. Auctor neque vitae tempus quam pellentesque. Scelerisque in dictum non consectetur a erat nam at. Quisque sagittis purus sit amet volutpat consequat. Vulputate enim nulla aliquet porttitor lacus.

>"Design can be art. Design can be aesthetics. Design is so simple, that's why it is so complicated." - Paul Rand,

Nisl purus in mollis nunc sed id semper. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Etiam erat velit scelerisque in dictum non consectetur. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Cursus eget nunc scelerisque viverra mauris in aliquam sem. Aliquam id diam maecenas ultricies mi eget mauris pharetra. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Elit at imperdiet dui accumsan. Senectus et netus et malesuada fames ac turpis. Justo nec ultrices dui sapien eget mi proin sed libero. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Nisl purus in mollis nunc sed id. Elit duis tristique sollicitudin nibh sit. Duis ultricies lacus sed turpis. Porttitor eget dolor morbi non. Scelerisque eu ultrices vitae auctor eu augue ut. At urna condimentum mattis pellentesque id. Massa eget egestas purus viverra accumsan. Fermentum dui faucibus in ornare quam. Pharetra vel turpis nunc eget lorem.

Sodales neque sodales ut etiam sit amet nisl. Sodales ut etiam sit amet nisl purus. Nisi vitae suscipit tellus mauris a diam maecenas sed. Egestas purus viverra accumsan in nisl nisi scelerisque. Gravida cum sociis natoque penatibus et magnis dis parturient. In hac habitasse platea dictumst vestibulum. Cras semper auctor neque vitae tempus quam pellentesque nec nam. Tellus integer feugiat scelerisque varius morbi enim nunc. Ultricies mi eget mauris pharetra et ultrices neque ornare. Vitae suscipit tellus mauris a diam. Commodo viverra maecenas accumsan lacus vel. Libero id faucibus nisl tincidunt eget nullam.

Nibh praesent tristique magna sit amet purus gravida. Aenean pharetra magna ac placerat vestibulum lectus mauris. Nulla aliquet enim tortor at auctor. Lobortis elementum nibh tellus molestie. Vitae proin sagittis nisl rhoncus mattis. Velit scelerisque in dictum non consectetur a erat. Elementum curabitur vitae nunc sed. Nisl nisi scelerisque eu ultrices vitae auctor eu. Proin libero nunc consequat interdum varius sit. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Turpis cursus in hac habitasse. Adipiscing elit pellentesque habitant morbi tristique.


Optional Project Subtitle

Project Title 6


Diam maecenas sed enim ut sem. Nisl purus in mollis nunc sed id semper. Dictum sit amet justo donec enim diam vulputate ut pharetra. Eget velit aliquet sagittis id consectetur purus ut. Auctor neque vitae tempus quam pellentesque nec. Sed enim ut sem viverra aliquet eget. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Enim tortor at auctor urna nunc id cursus. Fermentum et sollicitudin ac orci phasellus. Nunc non blandit massa enim nec dui. Cursus euismod quis viverra nibh cras pulvinar. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Dui vivamus arcu felis bibendum ut.

Sed risus pretium quam vulputate dignissim suspendisse in est. Vitae auctor eu augue ut lectus arcu. Tristique magna sit amet purus. Aliquet enim tortor at auctor urna nunc. Id leo in vitae turpis massa sed elementum tempus. Egestas maecenas pharetra convallis posuere morbi leo urna molestie at. Amet consectetur adipiscing elit duis tristique sollicitudin. Egestas sed sed risus pretium quam vulputate. Nunc eget lorem dolor sed viverra ipsum nunc. Consequat mauris nunc congue nisi vitae suscipit tellus. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Et ultrices neque ornare aenean euismod elementum nisi quis. Varius morbi enim nunc faucibus a pellentesque sit amet. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. In mollis nunc sed id semper risus in hendrerit gravida.

>"Design is not a single object or dimension. Design is messy and complex." - Natasha Jen

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt augue interdum velit euismod in. Justo laoreet sit amet cursus sit amet dictum sit. Viverra aliquet eget sit amet. Scelerisque varius morbi enim nunc faucibus a pellentesque sit. Lectus nulla at volutpat diam ut venenatis tellus. Nunc consequat interdum varius sit. Ultrices neque ornare aenean euismod elementum. Ante metus dictum at tempor commodo. Sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Etiam non quam lacus suspendisse faucibus interdum posuere lorem.

Aliquet nibh praesent tristique magna sit amet purus. Tincidunt nunc pulvinar sapien et ligula ullamcorper. Lacus sed viverra tellus in. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Bibendum neque egestas congue quisque egestas diam in. Iaculis nunc sed augue lacus viverra. Sagittis orci a scelerisque purus. Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Arcu dictum varius duis at. Eleifend mi in nulla posuere sollicitudin aliquam ultrices. Velit scelerisque in dictum non consectetur a erat nam at. Cum sociis natoque penatibus et magnis dis parturient montes nascetur. Adipiscing commodo elit at imperdiet dui. Sed tempus urna et pharetra pharetra. Imperdiet sed euismod nisi porta lorem mollis aliquam ut. Ultricies mi eget mauris pharetra et ultrices neque. Et malesuada fames ac turpis egestas sed tempus urna et. At tempor commodo ullamcorper a.


Project Title 7

**This is a paragraph**. Pellentesque habitant morbi *tristique senectus et netus et malesuada* fames ac turpis egestas. Vestibulum [tortor quam](https://www.google.com), feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit <mark>amet est et sapien ullamcorper</mark> pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

# This is an H1

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, this is marked text ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis.

## This is an H2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

### This is an H3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

#### This is an H4

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis.

## Quoting

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

>Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep. <cite>Scott Adams</cite>

Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

***

## Unordered Lists

+ Donec non tortor in arcu mollis feugiat
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit
+ Donec id eros eget quam aliquam gravida
+ Vivamus convallis urna id felis
+ Nulla porta tempus sapien

## Ordered Lists

1. Donec non tortor in arcu mollis feugiat
2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
3. Donec id eros eget quam aliquam gravida
4. Vivamus convallis urna id felis
5. Nulla porta tempus sapien

## Video Embeds

<iframe width="640" height="360" src="https://www.youtube.com/embed/wEG7x7jRhNQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Code Blocks

Blocks of code are either fenced by lines with three back-ticks, or are indented with four spaces.

```

body {
  color:red;
}
```

## Tables

<table>
    <caption>Table with thead, tfoot, and tbody</caption>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>

The style guide provides you with a blueprint of default post and page styles. The style guide is also a great reference for suggested typographic treatment and styles for your content.

Style Guide


Thank you for contacting us! We will get back in touch with you soon.

**Have a great day!**