DRESS UP VIRTUO

HTML/CSS/Design... workshop based on french startup https://www.govirtuo.com

Table of Contents

• 🐣 Introduction
• 🎯 Objectives
  • 🏃‍♀️ Steps to do
• 👩‍💻 Just tell me what to do
  • Don't forget
• Awesome and useless frameworks
• Source and inspiration
• Licence

🐣 Introduction

Once steps done from virtuo repository, you are able to pay each actors according

• Rental properties (booked days, distance, deductible option...)
• Car properties (price by day, by kilometer)

🎯 Objectives

The workshop goal is to build a clean page that computes the debit and credit price of each rental actors.

🏃‍♀️ Steps to do

• Help users to understand your page event they don’t know anything about your site
• Help users to compute the invoices in a clear and efficient manner.
• Help users to be clear about which action to take in a easy manner.

👩‍💻 Just tell me what to do

1. Fork the project via github

1. Clone your forked repository project https://github.com/YOUR_USERNAME/dress-up-virtuo

❯ cd /path/to/workspace
❯ git clone [email protected]:YOUR_USERNAME/dress-up-virtuo.git

1. Open the entry point /public/index.html in your browser

# macos cli
❯ open public/index.html
# linux cli
❯ xdg-open public/index.html
# or by double-clicking in your browser files

1. Update the public/index.html by adding html and css styles

2. commit your different modifications:

❯ cd /path/to/workspace/dress-up-virtuo
❯ git add -A && git commit -m "feat(compute): display the call to action button"

(why following a commit message convention?

1. Don't forget to push before the end of the workshop

❯ git push origin master

Note: if you catch an error about authentication, add your ssh to your github profile.

1. If you need some helps on git commands, read git - the simple guide

Don't forget

1. Focus only on web design, you don't need to modify the codebase
2. You don't need to update the public/virtuo.js file
3. If you change the public/index.html selectors, you should probably update public/virtuo.js and public/index.js files

Awesome and useless frameworks

• Bootstrap 4 - Bootstrap version 4, the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
• Materialize - Materialize is a modern responsive CSS framework based on Material Design by Google.
• Bulma - Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.
• ...

Source and inspiration

• Virtuo

Licence

Uncopyrighted