¡Hola mundo!
I have been looking for projects because practice makes the master and Código Facilito just made a Challenge called #VeranoFrontEnd or Summer Front End where we were suposed to help Cody to code his website.
For the Challenge I had to fork Cody's website and make changes to it 🐊.
- Original code must be forked
- All changes and ideas are welcomed
- Javascript and CSS frameworks are welcome
- Creativity is up to the developer
- Semantic use of HTML tags
- Not to repeat unnecesary code
- Use a package I never used before
- Use React as JS Framework
- Use SASS as CSS Framework
- Try a modern and minimalistic style that fits Cody
- Clean console
- Visual Code Studio: as code editor
- SASS
- React
- Node
I started with a little hand drawing ✍️ of what I thought could be a good layout this allowed me to be faster as I already had an idea of what I wanted to do and also made it easier for me to prioritize the information.
Then I went in for all. As I worked with React I split the code in Components and ended up with 8 of them plus my App.js. I also added a data folder to save all my JSON files 📂. JSON files are one of my favorite things in this project as they allowed me to write less code as I can map them and render them easily but they also guarantee a 🚧 low maintenance code. 🚧
In my own requirements I decided I wanted to used a NPM package that I never used before- As the original website has some images of Cody's vacations I went on the search of an Image Gallery🖼️ and used this React Image Gallery It was pretty simple to use, it is responsive and I think the final result was great.
I also used this 🍔Burger Menu that I found when I was doing my portfolio and I love it because is pretty easy to customize and looks really cute. However this Menu doesn't have a funcionality that I think is really important and that is that, when the user choose a nav item it doesn't close, so I added a little function to do that.
There's a component that I personally love 💘 and that is the "Top.js". This component -that I think I'm gonna upload to NPM - is a "Scroll top" button that allows the user to...scroll up 🔝. It works really well, is visible only when the user start scrolling an disappears on top.
For my styles I installed SASS and using BEM tried to make it look cute, fresh and Cody like.
Go for it! And if you make something pretty, please show me
I'm an student and as I stated before am learning a whole lot of Front End Developing, so, if you have any idea that I could develope please tell me so and I will try to.
MIT