ASCII text, with very long lines (337)
title: How to Make Scratch Mockups
date: 2021 Apr 22
updated: 2024 Jan 3
---
The first step to making a mockup is to open the DevTools. This can be done with the keyboard shortcuts ctrl + shift + i or F12.
This DevTools menu allows you to do many cool things, such as create new elements, and modify existing ones. In all browsers(that I know of) you can use a little selector at the top-left of the DevTools panel to enable a mode that if you click on an area of the screen, it brings you to the element in question within the DevTools panel.
There's not much else advice I can give you. Just look around the Scratch site to get inspiration, and then either create or edit an element on a page you like to fit your needs.
1
---
2
title: How to Make Scratch Mockups
3
date: 2021 Apr 22
4
updated: 2024 Jan 3
5
---
6
The first step to making a mockup is to open the <abbr title="Developer Tools">[DevTools](https://developer.chrome.com/docs/devtools/)</abbr>. This can be done with the keyboard shortcuts `ctrl` + `shift` + `i` or `F12`.
7
This DevTools menu allows you to do many cool things, such as create new elements, and modify existing ones. In all browsers(that I know of) you can use a little selector at the top-left of the DevTools panel to enable a mode that if you click on an area of the screen, it brings you to the element in question within the DevTools panel.
9
There's not much else advice I can give you. Just look around the Scratch site to get inspiration, and then either create or edit an element on a page you like to fit your needs.