Arc Browser Boosts – How To Tweak Website CSS

Veröffentlicht am: 31 Januar 2024
auf dem Kanal: CSS Weekly
2,477
65

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


Auf dieser Seite können Sie das Online-Video Arc Browser Boosts – How To Tweak Website CSS mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer CSS Weekly 31 Januar 2024 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 2,477 Mal angesehen und es wurde von 65 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!