Editing Figma Tutorials

Figma is an online platform allowing designers to create digital prototypes for apps and websites.
Hereby a short introduction to the workspace and links to relevant tutorials. If you have more good tutorials to contribute to this page and help other students, please share it with us!<br><br>

TIP! Figma doesn't work well on Safari, please use Chrome or Firefox.<br>

== Introduction to the Workspace ==
'''Creating a Frame.''' choose your own phone size for the prototype. <br>
Each frame wil be one visualisation state of your app. For another state, you will design another frame.<br>
You will be able to check your prototype on your phone with the Figma mobile app.<br>

[[File:FigmaFrame.png|800x431px|thumb]]


== CSS Flexbox ==
* http://flexboxfroggy.com/

== CSS Grid ==
* [https://cssgrid.io/ CSS Grid course by Wes Bos] is full-on in depth course on CSS Grid
* [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout MDN Web Docs] has a good introduction to CSS Grid
* [https://cssgridgarden.com/ CSS Grid Garden] is a fun CSS grid game
* [https://css-tricks.com/snippets/css/complete-guide-grid/ CSS Tricks] has a good reference article on CSS Grid

== The Internet ==
* https://www.vox.com/a/internet-maps
* https://www.khanacademy.org/computing/computers-and-internet/xcae6f4a7ff015e7d:the-internet/xcae6f4a7ff015e7d:web-protocols/a/domain-name-system-dns
* https://www.submarinecablemap.com
* https://www.youtube.com/watch?t=360s&utm_source=pocket_mylist&v=1UStbvRnwmQ
* https://www.youtube.com/watch?v=TNQsmPf24go