Guilherme Rizzo is the self-taught founder of CSS Scan which lets you easily inspect the CSS of a webpage and click and copy it for your own project. It's a lot quicker than using Dev Tools and you can use it in other browsers besides Chrome. I use it a lot so it's great to be able to ask Guilherme some questions about how he learned to code, making CSS Scan and his experience leaving Brazil with just a Mac mini to travel the world.
I’m Guilherme Rizzo and I'm 21 years old (it’s my birthday today!!). I’m from Brazil but now I’ve been traveling around the world for over a year. I have made a browser extension called CSS Scan and with it you can check or copy the CSS code of any element you see on the internet, by just moving your mouse over it. So far I’ve made over $70.000 in revenue with it and that’s my full-time job, along with CSS Scan Pro - its premium version).
I was always interested in what border-radius and box-shadow some elements had. So, inspired by WhatFont? I created this extension that wherever you hover your mouse over, you instantly get the CSS of the element and you can copy all of it with a single click.
So you don’t have to dig into multiple panels in the dev tools. Do you like this button? Just click and copy. Or, study how its made, and learn CSS on the way. It’s a great learning tool for beginners and a real time-saver for advanced users.
Coding CSS Scan was fun! I recorded all the development of the first version. It took me 50 hours, but I speed it up to 2 minutes so you can check it here:
If you don’t have a CS degree, how did you learn coding? Did you do any particular courses or bootcamps?
I learned programming by creating 2d games. When I was 9 years old, my friend gave me a DVD with a software called RPG Maker XP. It was a very cool tool to easily create 2d games (mostly RPGs). So I started developing those games. My first game was hugely criticized because it looked remarkably weird but I kept going and got better at that.
After one or two years, I needed to create a website for my game so that’s when I first heard about HTML and CSS. While I was creating my games just for fun and for my friends, I realized I could build things that could help my city, my country or even the whole world.
So I began to make friends on the internet and started to make websites/apps with them, and learning programming on the internet along the way. We tried a lot of things and most of them failed. We created more than 6 websites together - that was when I learned how to code.
In 2017 I joined a national competition for high school students in Brazil from Google, called “Maratona de Aplicativos”, where we had to develop an educational app. Me and my friends developed an app that helped parents that have autistic children to organize a routine with in-app interactive exercises for their children - it's name is Teacch.me, it was later discontinued but still exists on the Android's Play Store. After a lot of work, we happily won the competition, and by winning it, we got free tuition at a Brazilian university called FIAP, a notebook, printer, tablet, etc…
So inspired by the TV Show "Silicon Valley" we all moved to Sao Paulo to start a fashion company and some of us also enrolled in university. I was one of them. We met a lot of people in that city and learned a lot together. It's a game-changer experience to live in the same house, with friends that share your interests. I have great memories about that, and it turned out better than I thought. I started university by studying Information Systems but decided to change to Marketing 1 year later but I ended up dropping out of that 10 months later too. So, I learned coding by doing projects and businesses.
Remember that you can do anything you want. But there are 3 levels of "want". I want, I will, and I commit myself. Commit yourself to learn and make it happen. Just like Pete committed himself to get an IndieHackers podcast.
You took off and went travelling armed just with a Mac Mini! Do you have any advice for developers that want to go nomad and work from anywhere?
If you feel and genuinely believe you can, I’d say: just do it. Because I felt the same feeling, even when my family and some friends were against it. I felt that nothing could stop me and that it would work because I’d make it work. I’m also young so it’s easier to do these kinds of things.
By the way, that’s the way I did. If you don’t think that would be good for you, you can wait for a safer environment by saving money, doing freelance, working on side-projects, etc, but don’t wait for the perfect moment - there isn’t.
Monday: Take a bath with elephants. Tuesday: Sail around the British Virgin Islands. Jokes aside, I wake up, stretch, read my statements (I have A LOT), cook breakfast with my wife, wash the dishes, start working on my new business, go to explore the city I’m in, lunch, go to coffee work, post on twitter (every day), answer emails, read a book, imagine myself successful, take a shower, read my statements again, sleep.
Yes, sometimes. I always look back to times that I was and felt successful, and I try to remember how I felt, what I did, why I was successful. I do that once a month. If you start doing that you’ll feel better with yourself too.
So, one-time payment for browser extensions is already proved to work, as I did with CSS Scan. Now I’m trying to play in a different game which is subscriptions. I build CSS Scan Pro because I felt CSS Scan already did it’s purpose very well, but I felt it was limited to the click-to-copy CSS functionality.
CSS Scan Pro is developed to be the definitive browser extension to work with web design, so with it, you can:
- Pick any color from any website (works on images too)
- Get the whole color palette of the website in an instant
- Precisely select any element with the DOM control (with arrow keys to go up and down - parents, children, siblings, etc)
- Understand any CSS animation you see on the web by reading CSS keyframes
- Measure distances and elements with a real-time advanced ruler
- Scan all pseudo-classes and pseudo-elements (while Basic only scans the pseudo-class :hover)
- Check all the changes made in the CSS and copy it or export it to a file
- Visualize guidelines to check alignments
- Scan inherited styles (it gets font-size, font-weight, and other properties that Basic can't catch)
Thank you so much, Pete, for this opportunity and thank YOU for reading this interview, appreciate it! If you have any questions or want to chat, feel free to reach me through Twitter .
Unlock Dark Mode and Other Personalization
Level up every day