Тёмный

How to use Inspect Element to improve your design reviews! 🔍 

CharliMarieTV
Подписаться 227 тыс.
Просмотров 3,6 тыс.
50% 1

Using Inspect Element to look at code in a browser will help you give better feedback when you're reviewing the build of a page you designed. This makes your feedback more specific, and can improve your relationship with the developer by speaking a bit more of their language.
This video is for those of you that have a basic understanding of HTML and CSS. Check out my recent video on that if you need to start from there!: • HTML & CSS 101 for des...
🚀 CharliMarieTV is powered by Figma! charli.link/figma
Figma is a design tool that helps teams create, test, and ship better designs from start to finish. And it's free! :)
TIMESTAMPS:
00:00 Why use code to review your site design?
01:21 How to open up the Inspect Element menu 📜
02:26 Figuring out specific values
04:30 Editing code classes (and benefits) 🌟
Creating a marketing site design system in Figma: • Creating a marketing s...
Please remember to click subscribe if you'd like to see more of my videos.
--------------------------------
// WANT TO SUPPORT MY CHANNEL?
Become a ✨channel member✨ and get a cool icon next to your name in livestream chats, plus priority replies to your comments. Just click 'Join' (it's next to the subscribe button)
Or, if you like, you can put something in my tip jar right here: pages.charlimarie.com/product...
Sharing my videos or recommending my channel to a design friend is also very much appreciated! :)
--------------------------------
// ABOUT ME
I'm Charli and I'm designer from New Zealand currently living in Valencia, Spain. I’m the Creative Director at a remote tech company called ConvertKit and I post videos about the design projects I work on and the tools I use, as well as vlogs of my life as a designer. I regularly livestream what I'm working on in Coworking Club streams. Welcome to the channel! Please subscribe and say hi in the comments, and maybe we'll see you in the live chat on the next stream.
💬 Twitter: / charliprangley
📷 Instagram: / charliprangley
--------------------------------
// MORE
Join my free weekly marketing design newsletter: charli.link/newsletter
Buy my hand written font, Grayscale: charlimarie.com/font
Book a mentoring session with me: charli.link/mentoring
My site & blog: charlimarie.com
Design Life podcast: designlife.fm
Inside Marketing Design podcast: insidemarketingdesign.co/
--------------------------------
// TECH & TOOLS
📹 Get links to all the tech hardware I use to make my videos (and the art on my gallery wall!) right here: charlimarie.com/shopmyoffice
💻 Software I use:
Webflow (no-code website builder)*: charli.link/webflow
Premiere Pro (video editing)*: charli.link/premierepro
Adobe Audition (audio recording)*: charli.link/audition
After Effects (intro animation)*: charli.link/aftereffects
Figma (web design): charli.link/figma
Photoshop (thumbnails)*: charli.link/photoshop
ConvertKit (marketing platform): charli.link/try-convertkit
Riverside (podcast interview recording)*: charli.link/riverside
Music in this video from Epidemic Sound*: charli.link/epidemicsound
Video captions by Rev (very cost effective service! I recommend)*: charli.link/videocaptions
Intro & end card animation by Austin Saylor: www.austinsaylor.com/
Editing by Belén Albiol / molen.audiovisual (or sometimes by me!)
Links marked with a * are affiliate links. I can't believe you read the whole description box! You get a ⭐️

Опубликовано:

 

31 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 9   
@osaroadade
@osaroadade Год назад
Awesome video as always. I really love the new focus on Developer and Designer collaboration and relationship. Your last two videos have really helped prove my points to my designer friends on the importance of understanding and speaking the same language that Devs do. For folks who really don't want to use inspect Element or go near any code (you really should though, it's fun!), I would really suggest looking at VisBug. It's a Chrome Extension built by Google that allows you to visually make changes to web pages (so things like, margin, padding, etc can be done from there). Personally, I rarely use VisBug these days and use the Inspect Element. But I thought it would be nice to mention VisBug as it really helped me in my early days. Thanks for shedding more light on the topic of collaboration with Devs Charli, I'll be sending this video to the junior team.
@JoeGator23
@JoeGator23 Год назад
Thanks for the video. I've been learning this stuff, too, and your video was helpful. Cheers!
@imsamcastillo
@imsamcastillo Год назад
great!! thank you for this!!
@michellewren_
@michellewren_ Год назад
yesss thank you! I’ve been trying to learn the inspect tool better, so this is a great start 😊
@Jakeu1701
@Jakeu1701 Год назад
Question: Will you continue to use Figma when it becomes an Adobe product?
@Jakeu1701
@Jakeu1701 Год назад
Inspect helps a great deal when I am mocking up changes to web apps so our developers can see what I want the end result should look like. New fields in reports, criteria fields, drop downs, etc.
@pablogday
@pablogday Год назад
Loving this series!
@Mike-zr9wq
@Mike-zr9wq Год назад
Can't believe no one made a better version of Inspect after so many years. I really hate it although it is very useful
Далее
100😭🎉 #thankyou
00:28
Просмотров 25 млн
MIRAVI - Ивы 31.05.2024
00:14
Просмотров 98 тыс.
I'm DONE with Webflow
7:10
Просмотров 29 тыс.
What happened at Config 2023! (design conference vlog)
12:14
How Fonts Are Made (Secrets & Insights)
9:15
Просмотров 45 тыс.
Tech burnout recovery - What's working (and what isn't)
11:49
How to Use Inspect Element to Edit Webpages
12:04
Просмотров 55 тыс.
When You Should and Shouldn’t Use Webflow
8:14
Просмотров 200 тыс.
Figma Dev Mode 🤯
14:26
Просмотров 37 тыс.
Designers Only Need These 6 Fonts. Trash the Rest.
8:10
10 Pro tips to get the most out of FigJam
6:51
Просмотров 10 тыс.
100😭🎉 #thankyou
00:28
Просмотров 25 млн