Bonus 1 | Inspect Design Next to your Code with VS Code Integration

We’re inviting you to code a simple website based on a provided Sketch design along with me. If you want, you can use any design file made in Sketch, Adobe XD, Figma, Illustrator, or Photoshop to code along. Start by downloading project resources: (https://bit.ly/2R4jItt) What will you get to start? - Sketch design of a simple website. Pre-coded HTML document with the website structure. - Special promo-code: I-CODE-WITH-AVOCODE to get a 10% discount on all Avocode subscription plans. (https://bit.ly/2RSaDpm) - Know-how and tips to speed up your coding skills up to 2x. - An excuse for your mum when she asks what did you do on your computer last night. You will learn: - how to use Avocode inspecting tools - How to export images and text just by double-clicking - How to copy CSS code from layers - How to measure distances precisely, even when the design is imprecise - How to use Flexbox, BEM methodology, and REM units and much more to speed up your coding skills up to two times. What do you need to finish this class successfully? - Basic knowledge of HTML & CSS. - Text editor such as Atom, Visual Studio Code (https://code.visualstudio.com/), or Sublime. - Browser (at best use Chrome). - Avocode account (https://avocode.com/) - 56 minutes of your precious time to finish the course + 8 minutes to look at bonus classes. If you have any questions, don't hesitate to ask in the comments. Helpful links - Project resources: (https://bit.ly/2R4jItt) - Create your Avocode Account (https://avocode.com/signup?utm_source=youtube) - Download Avocode Desktop App () - Avocode Integrations with VS Code and Atom editor (https://avocode.com/integrations?utm_source=youtube) - Avocode Help Center (Learn things about Avocode beyond this course.): (https://help.avocode.com) - Download Chrome Browser (Avocode works best in Chrome.): (https://www.google.com/chrome/) - Download Visual Studio Code Editor (It's free.): (https://code.visualstudio.com/download) - What is Flexbox Layout? (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - Explanation of the BEM methodology for naming CSS classes (http://getbem.com/introduction/)

Видео Bonus 1 | Inspect Design Next to your Code with VS Code Integration автора Фигма Дизайн и искусственный интеллект