Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lupemorales/my-challenges

Recopilatorio con pequeñas Katas y challenges
https://github.com/lupemorales/my-challenges

dom-manipulation html-css-javascript responsive-design

Last synced: about 4 hours ago
JSON representation

Recopilatorio con pequeñas Katas y challenges

Awesome Lists containing this project

README 

        
# my-challenges



![Logo](./images/challenges.jpg)



## Welcome! 👋



En este repositorio estarán recopilados los challenges y katas que voy haciendo para poner en practica mis skills en frontend.



## Indice

- [Proyectos](#proyectos)

  - [Words Counter](#words-counter) Manipulación del DOM

  - [Tip calculator app](#tip-calculator-app) Manipulación del DOM

  - [Age calculator app](#age-calculator-app) Fechas y validación de formularios

  - [Random-color generator](#random-color-generator) Manipulación del DOM

  - [404 not found](#404-not-found) Maquetación web

  - [My gallery](#my-gallery) Maquetación web.GridLayout

  - [QRCode Generator](#generador-qr-js) Uso de librerías externas.

- [Recursos](#recursos)

- [Contacto](#contacto)



## Proyectos



### Words-counter

Crea una pequeña aplicación para contar en tiempo real las palabras que vas escribiendo.

Práctica DOM.



[Demo](https://lupemorales.github.io/word-counter/)   |  

[Code](https://github.com/lupeMorales/word-counter)



### Tip calculator app 

Mi solución para el challenge de [Frontend Mentor](https://www.frontendmentor.io/).

Crea una aplicación para calcular el importe de la propina y el coste de la cuenta por persona.

Práctica DOM.



[Demo](lupemorales.github.io/tip-calculator-app/)   |  

[Code](https://github.com/lupeMorales/tip-calculator-app)



### Age calculator app 

Mi solución para el challenge de [Frontend Mentor](https://www.frontendmentor.io/).

Crea una aplicación para calcular tu edad exacta en años, meses y días. Un buen ejercicio para practicar fechas y validadión de formularios.



[Demo](https://lupemorales.github.io/age-calculator-app/)   |  

[Code](https://github.com/lupeMorales/age-calculator-app)



### Random-color  generator

Pulsa el botón y genera de forma automática y aleatoria un color.

Práctica DOM.Math()



[Demo](https://github.com/lupeMorales/random-color-generator)   |  

[Code](https://github.com/lupeMorales/random-color-generator)



### 404 not found

Mi solución para el challenge de [DevChallenges](https://devchallenges.io/).

Pon en practicas tus skills en CSS maquetando esta página 404.

Diseño responsivo



[Demo](https://lupemorales.github.io/404-not-found/)   |  

[Code](https://github.com/lupeMorales/404-not-found)



### My gallery

Mi solución para el challenge de [DevChallenges](https://devchallenges.io/).

Crea una página estática poniendo en practicas tus habilidades con grid layout.

Diseño responsivo



[Demo](https://lupemorales.github.io/my-gallery/)  |   

[Code](https://github.com/lupeMorales/my-gallery)



### QRCode Generator

Proyecto sencillo para desarrolladores que empiezan. Crea un generador de códigos QR ayudándote de una librería externa.

Puedes usar QRCodeJS



[Demo](https://lupemorales.github.io/generador-qr-js/)  |   

[Code](https://github.com/lupeMorales/generador-qr-js)



## Recursos



- [Frontend Mentor](https://www.frontendmentor.io/). Frontend Mentor me ayuda a mejor como desarrolladora practicando con proyectos reales.

- [DevChallenges](https://devchallenges.io/) - Esta web es sensacional. Ofrece distintas rutas de aprendizaje (responsive desig, frontend, full stack) para practicar nuestras habilidades como desarrollador.

- [Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/)



## Contacto



- Website - Visita mi[portfolio web](https://lupemorales.github.io/portfolio/)

- Linkedin - [@LupeMorales](https://www.linkedin.com/in/lupe-morales/)



**Let´s have fun coding!** 🚀