Arc Browser Boosts – How To Tweak Website CSS
An in-depth guide on using Boosts in Arc browser (@TheBrowserCompany) to tweak CSS of websites to your own needs—on a practical example of adjusting Daring Fireball (@daringfireball) to become mobile responsive using CSS Grid. You'll learn how to use Arc Boots, Changes Drawer in DevTools, how to easily set up mobile-responsive CSS Grid, and more.
🔗 Links
Arc browser: https://arc.net/
Daring Fireball: https://daringfireball.net/
Daring Fireball Arc Boost: https://arc.net/boost/67EB8124-2215-4...
Daring Fireball Arc Boost Code: https://codepen.io/ZoranJambor/pen/zY...
In-Depth Guide to CSS Logical Properties: • In-Depth Guide to CSS Logical Properties
In-Depth Guide Guide to grid-template-areas: • The easiest way to get started with C...
Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/
Help support my channel
👨🎓 Get a course: https://masteringlinting.com/
🪧 Buy a CSS sticker pack: https://stickers.css-weekly.com
💖 Support me on Patreon: / cssweekly
Keep up-to-date with CSS Weekly:
🐦 Twitter: / @cssweekly
🎶 TikTok: / cssweekly
🎇 Instagram: / cssweekly
📘 Facebook: / cssweekly
Keep up to date with what I'm up to:
👨💼 Blog: https://zoranjambor.com
💼 LinkedIn: / zoranjambor
📖 Chapters
00:00 Intro
02:28 How Arc browser Boosts work
03:43 How to tweak code in Arc browser Boosts
03:56 How to show/hide sidebar in Arc Browser
04:15 How to open Developer Tools from Arc Boost
05:09 How to copy CSS changes from DevTools to Arc Boost
06:50 How to tweak the fixed layout sizing in DevTools
08:50 How to prepare absolute layout for CSS Grid
10:32 How to set CSS Grid using grid-template-areas
12:22 How to set optimal line lengths in CSS
13:24 How to add gap between CSS Grid elements
13:55 How to tweak sizing of CSS Grid columns
15:10 Howgrid switch reasoingn - adjust mobile version
15:39 How to copy CSS changes from DevTools to Arc Boost
16:22 How to fix sidebar margin problems
17:00 How to adjust layout for mobile responsive version
18:57 How to adjust sidebar for mobile responsive version
19:45 How to adjust ad for mobile resposive version
22:06 How to adjust logo for mobile responsive version
23:32 How to adjust search & copyright for mobile responsive version
25:08 How we tweaked Daring Fireball in Arc Boost
25:35 Why should Arc support Boosts on mobile
26:00 Conclusion
Zoran Jambor
#css #arcbrowser
On this page of the site you can watch the video online Arc Browser Boosts – How To Tweak Website CSS with a duration of hours minute second in good quality, which was uploaded by the user CSS Weekly 31 January 2024, share the link with friends and acquaintances, this video has already been watched 2,477 times on youtube and it was liked by 65 viewers. Enjoy your viewing!
