📗 Table of Contents

• 📗 Table of Contents
• 📖 microverse_mobile_portfolio
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
  • 💻 Getting Started
    • Prerequisites
    • Setup
    • Install
    • Usage
    • Run tests
    • Deployment
  • 👥 Authors
  • 🔭 Future Features
  • 🤝 Contributing
  • ⭐️ Show your support
  • 🙏 Acknowledgments
  • 📝 License

📖 microverse_mobile_portfolio

microverse_mobile_portfolio it is a project to create our portfolio in Mobile version and Desktop Version and understand the usage of Figma.
This project is about how to add Client side validation to a form section.

🛠 Built With

Tech Stack

Client

• HTML
• CSS
• JavaScript
• FIGMA

Server

• FORMSPREE

Key Features

• Set up files and dependencies to configure Linters 📍
• Read about how to use Figma to navigate well and take out the element's measurements 📍.
• Create a featured branch to store all the changes before doing the merge to main branch 📍
• Create a .gitignore file to store hidden files 📍
• Read about the usage of CSS Grids and FlexBox to deliver a responsive design. 📍
• Read about the usage of Buttons and how to make it interactive. 📍
• Get an account in Formspree.io to use it. 📍
• Understand how to make a design Responsive for Desktop devices.
• Understand the usage of JavaScript: Events, DOM manipulation, syntax, and Objects to store data📍
• Understand how to add Client side validation: regex, built-in input elements📍

(back to top)

🚀 Live Demo

This is the live demo to microverse_mobile_portfolio:

• Live Demo Link

(back to top)

💻 Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

📍 In order to run this project you need:

1. Verify if you have node.js installed in your system

 node -v

If you have installed it, it will output the version of node.

2. If you do not have it installed, go to the page : https://nodejs.org/en and download it.

3. Upload this file: linters.yml to use ESLint JavaScript analytic tool.

4. Copy .eslintrc.json to the root directory of your project.

Setup

Clone this repository to your desired folder:

  cd my-folder
  git clone git@github.com:myaccount/IvonneBenitesRodriguez/microverse_mobile_portfolio

Create a featured branch besides main branch :

   git checkout -b nameofyournewbranch

Install

Install this project with:

a) Enter to your repo's folder:

  cd microverse_mobile_portfolio

b) For Webhint tool, install this command :

     npm install --save-dev hint@7.

c) For StyleLint tool, install this command:

   npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x

d) For ESLint tool, install this command:

  npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x

Usage

To run this project, execute the following command:

a) For Webhint tool:

  npx hint .

b) For StyleLint tool:

    npx stylelint "**/*.{css,scss}"

c) For ESLint tool:

    npx eslint .

Run tests

To run tests, run the following command:

   npx hint .
   npx stylelint "**/*.{css,scss}"
   npx eslint .

Deployment

You can deploy this project using:

• Github pages
• Netlify

(back to top)

👥 Authors

👩🏽‍💻🌸 Author

• GitHub: @IvonneBenitesRodriguez
• Twitter: @IvonneBenitesR
• LinkedIn: LinkedIn

👩🏽‍💻🌸 Daniel Villalba Lynch

• GitHub: @gdvl777
• X.com: @gdvl777_

(back to top)

🔭 Future Features

• - I will add a preserve data functionality in the browser.
• - I will add styles in case I add another element.
• - I will add new images.

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project, and consider this information useful to you, you can give me a ⭐️ so I can be highly motivated by your support.

(back to top)

🙏 Acknowledgments

I would like to thank Microverse for giving me the opportunity to make real my dreams.

(back to top)

📝 License

This project is MIT licensed.

(back to top)