Capstone-1

Yaz Fortozo page event!

• Description the project. This Capstone show my experience as a software developer displaying an event page.

Live Demo Deployment

Click here to see the my Capstone!

Objectives

• Use SASS 100%
• Use semantic HTML tags.
• Apply best practices in HTML code.
• Use CSS selectors correctly.
• Use CSS box model.
• Use Flexbox to place elements in the page.
• Demonstrate ability to create UIs adaptable to different screen sizes using media queries.
• Use GitHub Pages to deploy web pages.
• Apply JavaScript best practices and language style guides in code.
• Use JavaScript to manipulate DOM elements.
• Use JavaScript events.
• Use objects to store and access data.
• Communicate technical concepts to other technical people.

Built With

• HTML
• CSS
• SASS
• JavaScript

Features

Developed entirely using SASS using the 7:1 structure you can see my files here SASS

• I create my own grid system very similar to Bootstrap (I am not using Bootstrap), that allows me to understand all the ways in which the libraries works inside libraries grid-system

Please i would really appreciate if you whatch all my video, just put it in 2x speed if it seems too long

• This project gave me the opportunity to learn a lot of SASS functions, maps, mixins, partials so i took advantaje of them!

Dear reviewer take a time to see the subtle animation in the patterns into the welcome section of the home and about page there are 5 patterns each one change to color one each time Here is my partial and my documentation to sincronyze the animations

The project has 5 different break points

Both sections program and Constumers are filled with JavaScript

Show more and hide buttons working

To achieve this I create the object CardsManager yo can find it in my JavaScript folder or directly here

In movile it displays only 3 cards and when you click the button it shows 3 cards at the time

Whilst in desktop it displays 6 cards with step of 6 at the time

once you reach the end of the 20 cards you will see a hide button

Moreover the javaScrip part as a listner when the window change from dektop triggers a reload of the cards and show the correct step with out necessity of reload it.

Acknowledgments included into the footer

Setup

If you installed git you can clone the code to your machine, or download a ZIP of all the files directly.

Download the ZIP from this location, or run the following git command to clone the files to your machine:

git clone https://github.com/LuisDavidRodriguez/capstone-1.git

• Once the files are on your machine, open the Portfolio folder in Visual Studio Code

• With the files open in Visual Studio Code, press the Go Live button at the bottom of the window to launch the files with Live Server.

Authors

👤 Luis David Rodriguez Valades

• GitHub: @githubhandle
• LinkedIn: profile
• Youtube: chanel

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Special Acknowledgments

To my mentor Vitor Guedes Madeira for share with me those subtle but important clues and ideas whose energy leads me to surpass my capabilities, the title looks really amazing with that fire effect behind it and thank you for review my responsiveness, now i'm also keeping an eye on the height!.

To my mentor friend's Karla Delgado who even without know me to much share her page which draws me through the hazy moments, and that beautiful effect when the menu appear sliding from right to left made me apply it into this project.

To my friend Erik Stoupignan for always be there helping me!.

To Yasmin Fortozo Monroy for allows me to use their logo, brand, name, and business idea. For helped me to create that wonderful patterns used in the welcome section and more over for edit and change all the 20 text of the clients with a unic name professions and description.

Original design idea by Cindy Shin in Behance.