# Front-end training manual Welcome to the ViiVue Front-end team 🎉 This training manual was created to help new members and those needing to review their knowledge about the Front-end team’s processes. ## Table of content 1. [Setup workspace](#Setup-workspace) 2. [Reading time](#Reading-time) 3. [Let's dive right in](#Let’s-dive-right-in) --- ## Setup workspace ### Communicate Create accounts on these platforms with **your ViiVue email address**. - [ ] [Slack](https://slack.com/) - [ ] [Skype](https://www.skype.com/) - [ ] [Trello](https://trello.com/) - [ ] [TMetric](https://tmetric.com/) ### IDE At ViiVue, it is required to use [PhpStorm](https://www.jetbrains.com/phpstorm/) as the primary working IDE. All members must have the same code style and formatting. - [ ] Create a trial account with your email or if you have a student email, you can [apply for a free account](https://www.jetbrains.com/community/education/#students) - [ ] [Download PhpStorm](https://www.jetbrains.com/phpstorm/download) - [ ] Import PhpStorm setting (ask your team lead) Please take some time to get used to the IDE. ### Design tools - [ ] Figma - [ ] Adobe XD - [ ] Adobe Photoshop - [ ] Adobe Illustrator ### Bookmarks We have a small site where you can find a lot of useful links, you might want to spend some time checking them out one by one. 👉 https://bookmrks.netlify.app ### Note app You will need to take notes pretty often, so you should have an app to manage all of your notes in one place. We recommend using apps that support the Markdown format. We have tried a few and [Obsidian](https://obsidian.md/) is our last choice, till now. --- ## Reading time To have well prepared for the incoming tasks, please spend your time reading everything in these sources of knowledge carefully. ### CSS knowledge > ViiVue stands for pixel-perfect. In [W3schools/CSS](https://www.w3schools.com/css) - [ ] CSS Tutorial - [ ] CSS Advanced - [ ] CSS Responsive ### Style guide - [ ] HTML/CSS Style Guide - [ ] [Conventional commits](https://www.conventionalcommits.org/) Once you think you're ready, let's go to the next step. --- ## Let's dive right in <img src="https://media.giphy.com/media/fTne319LfO6Noh80qD/giphy.gif" width="150" style="margin-bottom:15px"> Now, you will be asked to build some layouts that we have prepared, please get in touch with your team lead for details.