Giter Club home page Giter Club logo

silviaespanagil / vacaciones-cody Goto Github PK

View Code? Open in Web Editor NEW

This project forked from codigofacilito/vacaciones-cody

0.0 0.0 0.0 2.96 MB

Cody's website: this is my take of #VeranoFrontEnd held by the academy Codigo Facilito. A website that shows Cody's coding vacations

Home Page: https://silviaespanagil.github.io/vacaciones-cody/

HTML 3.80% JavaScript 60.39% SCSS 35.81%
react javascript library react-libraries sass front-end challenge veranofrontend website women-in-tech womenwhocode junior codenoobs

vacaciones-cody's Introduction

Cody's coding vacations 🐊

A react development

Β‘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 🐊.

image

Initial Requirements πŸ“‹

  • 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

My own requirements 🌟

  • 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

Built with πŸ”¨

  • Visual Code Studio: as code editor
  • SASS
  • React
  • Node

Development ⌨️

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

imageimage

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. Component go top gif

For my styles I installed SASS and using BEM tried to make it look cute, fresh and Cody like.

Want to clone my repository? πŸ‘πŸ‘

Go for it! And if you make something pretty, please show me

Do you have any idea? ✏️

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.

License

MIT

Codefactor

CodeFactor

vacaciones-cody's People

Contributors

silviaespanagil avatar urielhdz avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.