Coding in Public
Coding in Public
  • 368
  • 2 779 663
When should you use CSS Grid?
Here are five realistic examples for when I reach for CSS Grid.
🔗 Key Links 🔗
- Github: github.com/coding-in-public/5-grid-examples
---------------------------------------
📹 Related Videos 📹
- CSS Grid Intro video: ua-cam.com/video/0DPwWP14aUs/v-deo.html
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
0:20 Example 1: Centering
1:09 Example 2: Vertical Column
3:47 Example 3: Page Layouts
6:04 Example 4: Complex Positioning
11:03 Example 5: Responsive Grids
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: cpenned
- Patreon: www.patreon.com/coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispennington
Переглядів: 1 075

Відео

CSS Grid for Flexbox Devs
Переглядів 1,4 тис.21 годину тому
Learn CSS Grid in 18 minutes if you're already familiar with flexbox. 🔗 Key Links 🔗 - Github: github.com/coding-in-public/intro-to-grid - css-tricks.com/snippets/css/complete-guide-grid/ - 5 Grid examples: ua-cam.com/video/uL36xtDcGGM/v-deo.html 🌐 Connect With Me 🌐 - Website: codinginpublic.dev - Blog: chrispennington.blog - Twitter: cpenned - Patreon: www.patreon.com/coding_in_publ...
My First Impressions
Переглядів 2,5 тис.14 днів тому
🔗 Key Links 🔗 - astro.build/blog/future-of-astro-zero-js-view-transitions/ - astro.build/blog/future-of-astro-content-layer/ - astro.build/blog/future-of-astro-server-islands/ 🔗 Additional Links 🔗 www.youtube.com/@UCeFjmvZEK-MoefuYXptnX6A 📹 Related Videos 📹 - ⏲️ Timestamps ⏲️ 0:00 Introduction 🎨 VSCode Theming - Font: Cascadia Code: github.com/microsoft/cascadia-code - Theme: marketplace.visual...
How to use Firebase Auth with Astro
Переглядів 1,3 тис.21 день тому
Join the early preview for my course! learnastro.dev Use FIREBASE_AUTH for $20 off. SAAS products like Firebase make authentication easy to implement. You need three items: 1. A POST api endpoint 2. Firebase auth 3. Middleware to protect the routes 🔗 Key Links 🔗 - Github: github.com/coding-in-public/firebase-astro-auth 🔗 Additional Links 🔗 - Firebase auth docs: firebase.google.com/docs/auth/web...
Astro View Transitions Overview
Переглядів 2,6 тис.Місяць тому
Join the early preview for my course! learnastro.dev Use VIEW_TRANSITIONS for $20 off. 🔗 Key Links 🔗 - Github: github.com/coding-in-public/astro-view-transitions-overview - View Transitions docs: docs.astro.build/en/guides/view-transitions/ 🎨 VSCode Theming - Font: Cascadia Code: github.com/microsoft/cascadia-code - Theme: marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-community-ma...
What does your brewfile say about you?
Переглядів 1,3 тис.Місяць тому
Just launched a fun open-source Astro project today! 🙌 Upvote us: www.producthunt.com/posts/share-brewfiles Special thanks to @theRubberDuckiee and @warpdotdev! (not a sponsored video :)) 🔗 Key Links 🔗 - www.brewfiles.com 🌐 Connect With Me 🌐 - Website: codinginpublic.dev - Blog: chrispennington.blog - Twitter: cpenned - Patreon: www.patreon.com/coding_in_public - Buy Me a Coffee: ww...
How to Middleware in Astro
Переглядів 1,9 тис.Місяць тому
Join the early preview for my course! learnastro.dev Use MIDDLEWARE for $20 off. 🔗 Key Links 🔗 - Github: github.com/coding-in-public/intro-to-astro-middleware - Middleware Docs: docs.astro.build/en/guides/middleware/ 🌐 Connect With Me 🌐 - Website: codinginpublic.dev - Blog: chrispennington.blog - Twitter: cpenned - Patreon: www.patreon.com/coding_in_public - Buy Me a Coffee: www.buy...
Introduction to Container Queries
Переглядів 3,1 тис.Місяць тому
Container queries provide much more flexibility for styling children. Here's a brief overview. 🔗 Key Links 🔗 - Github: github.com/coding-in-public/intro-to-container-queries - MDN docs: developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries 🌐 Connect With Me 🌐 - Website: codinginpublic.dev - Blog: chrispennington.blog - Twitter: cpenned - Patreon: www.patreon.com...
Building a Better Checkbox
Переглядів 1,8 тис.Місяць тому
Default checkboxes are kinda…ugly. Let’s create a better default with the same trusty accessibility. 🔗 Key Links 🔗 - CodePen: codepen.io/Coding-in-Public/pen/ZENzWPo 📹 Related Videos 📹 - Better Form Inputs: ua-cam.com/video/7FsWk1MJIl0/v-deo.html 🎨 VSCode Theming - Font: Cascadia Code: github.com/microsoft/cascadia-code - Theme: marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-commun...
Astro Actions (First Look!)
Переглядів 5 тис.Місяць тому
Astro Actions (First Look!)
Welcome to Coding in Public!
Переглядів 2,4 тис.Місяць тому
Welcome to Coding in Public!
Modern CSS (Progressive Enhancements)
Переглядів 3,9 тис.2 місяці тому
Modern CSS (Progressive Enhancements)
Code Block Syntax Highlighting in Astro
Переглядів 2,7 тис.2 місяці тому
Code Block Syntax Highlighting in Astro
How to keep Figma styles organized
Переглядів 1 тис.3 місяці тому
How to keep Figma styles organized
👋 Goodbye, CoPilot! Hello, Codeium!
Переглядів 23 тис.3 місяці тому
👋 Goodbye, CoPilot! Hello, Codeium!
Astro’s Big Announcement!
Переглядів 8 тис.3 місяці тому
Astro’s Big Announcement!
Dynamic API Endpoints in Astro
Переглядів 10 тис.3 місяці тому
Dynamic API Endpoints in Astro
Working with Images in Astro
Переглядів 5 тис.4 місяці тому
Working with Images in Astro
Raycast for Developers (Best Extensions)
Переглядів 16 тис.4 місяці тому
Raycast for Developers (Best Extensions)
The Most Popular Shell Framework!
Переглядів 2,9 тис.4 місяці тому
The Most Popular Shell Framework!
Full Astro Landing Page Build with Convert Kit (and deploy to Netlify!)
Переглядів 3,8 тис.5 місяців тому
Full Astro Landing Page Build with Convert Kit (and deploy to Netlify!)
Astro Icon just hit 1.0!
Переглядів 8 тис.5 місяців тому
Astro Icon just hit 1.0!
Best New Features of Resend’s Launch Week
Переглядів 3,3 тис.5 місяців тому
Best New Features of Resend’s Launch Week
Import Aliases in 4 minutes!
Переглядів 9 тис.5 місяців тому
Import Aliases in 4 minutes!
Full-Page Snap Sections in CSS
Переглядів 3,8 тис.6 місяців тому
Full-Page Snap Sections in CSS
React Dialogs (the right way)
Переглядів 5 тис.6 місяців тому
React Dialogs (the right way)
Easy Form Validation (no JavaScript)
Переглядів 2,4 тис.6 місяців тому
Easy Form Validation (no JavaScript)
(FINALLY!) Email for Developers
Переглядів 106 тис.7 місяців тому
(FINALLY!) Email for Developers
Build a Dark Mode without a White Mode Flash!
Переглядів 4,3 тис.7 місяців тому
Build a Dark Mode without a White Mode Flash!
Never Forget React forwardRef Again
Переглядів 15 тис.7 місяців тому
Never Forget React forwardRef Again

КОМЕНТАРІ

  • @anfytrion
    @anfytrion 2 години тому

    I'd love to see more CSS videos

  • @manuelcordobagonzalez46
    @manuelcordobagonzalez46 6 годин тому

    Amazing tutorial, although I would like to know if it's possible to apply css variables using custom classes created in css and updating the variables the same way as you did instead of using tailwind custom colors, and if it's possible witch way is better?

  • @msalih
    @msalih 16 годин тому

    2:23 After 2 years to uploading this video, I start this project with you. I hope not much thing have changed in this period. For each section note I will update this comment. 38:34 Until here everything worked fine!

  • @joaopbeltrami
    @joaopbeltrami День тому

    Love your content! Keep it up

  • @Dexter101x
    @Dexter101x День тому

    I noticed that I've unsubbed this channel, but now re-subbing, thanks

  • @endritibra4351
    @endritibra4351 День тому

    Great explanation!

  • @ahmadm.hawwash3931
    @ahmadm.hawwash3931 День тому

    Great video, thanks for sharing! Can't we pass it as another prop name? I mean we could pass as reference instead of ref. Could that solve the issue?

  • @N00R28
    @N00R28 День тому

    Is there a way to control the speed of the snap? It works fine on mobile but on desktop its too fast when using the scroll wheel

  • @ChristinaCodes
    @ChristinaCodes 2 дні тому

    Thanks for this video! I feel so called out as a Flexbox loyalist. The projects I used Flexbox for when Grid would have been so much easier… 😬 Gonna try grid next time!

    • @CodinginPublic
      @CodinginPublic День тому

      Thanks for the kind words. Bet you could teach me a few things about flex 💪

    • @ChristinaCodes
      @ChristinaCodes День тому

      @@CodinginPublic ha, I doubt that!

  • @satohsiaoli
    @satohsiaoli 2 дні тому

    So helpful! Thank you 🥺

  • @SabahRahal-m2q
    @SabahRahal-m2q 2 дні тому

    Excellent video, I followed the steps and I have a problem, when I log in and enter from another session (any other device), the application understands as if I were logged in, any recommendations?

  • @Giglamox
    @Giglamox 2 дні тому

    Awesome video. Thanks!!!!!

  • @seghirissam2662
    @seghirissam2662 2 дні тому

    Best channel to learn Astro out there. Thank you for this stunning content!

  • @velhoguidsd
    @velhoguidsd 2 дні тому

    For some reason example 3 didn't work for me.

    • @CodinginPublic
      @CodinginPublic 2 дні тому

      You may need to ensure min-height: 100vh is set on the body.

  • @mrrolandlawrence
    @mrrolandlawrence 2 дні тому

    grid also makes a super quick timeline component. so handy for itineraries.

  • @ahzootube
    @ahzootube 2 дні тому

    How about size variants? I am using tabler icons so they are vectors and resizing wont work

  • @domingouribe
    @domingouribe 2 дні тому

    I like your way of work. Thanks for share!

  • @nicus1504
    @nicus1504 2 дні тому

    You CAN pass refs directly as props

  • @alonecoder99
    @alonecoder99 2 дні тому

    99 like ok this i learn new that why i give you 1 and it goes your 100 likes

  • @racheleberry
    @racheleberry 3 дні тому

    Any idea how to add the javascript into the coding section for Squarespace 7.1? I took the necessary CSS and added it to their custom CSS page. I took the html content and added it to my code block on my webpage. The javascript, I'm having trouble with. Does it go into the Code Injection Header(code that will be injected into the 'head' tag on every page of your site) or the Code Footer (code that will be injected into the template-defined footer on every page of your site) or does it just need to live in the code block after the html content?

  • @dexterdragons
    @dexterdragons 4 дні тому

    hey, vscode what family font?

  • @JohnKomarnicki
    @JohnKomarnicki 5 днів тому

    You need to submit your solution! 😃

    • @CodinginPublic
      @CodinginPublic 4 дні тому

      Just uploaded!

    • @JohnKomarnicki
      @JohnKomarnicki 3 дні тому

      @@CodinginPublic Realized a good feature would be an optional thumbnail upload in the event you don't deploy the challenge demo 🤔

  • @99secure11
    @99secure11 5 днів тому

    We need a self-hosted alternative for this: It's not hard to make.

  • @Lundito
    @Lundito 5 днів тому

    100dvh is a dynamic mix between 100svh and 100lvh. All thing's great, but the browser have a tiny delay when it switches between those two, which can cause funny (or weird) jumps if you sticky an element to the bottom, for instance. svh is like the view height with the mobile browser bar, where lvh is the view height without the bar.

    • @cranberry888
      @cranberry888 3 дні тому

      but which property should I use? svh or dvh?

    • @Lundito
      @Lundito 3 дні тому

      @@cranberry888 I mostly use svh with min-height these days, but dvh would work in most cases unless you want a sticky element at the bottom. It will work, but when it switches between svh and lvh on mobile, it will "bounce" momentarily.

  • @alexandre_b2g
    @alexandre_b2g 7 днів тому

    Great stuff! I'll try it out tomorrow ;)

  • @psyferinc.3573
    @psyferinc.3573 7 днів тому

    my god dude.... i was using shadcn css variable the same way i used to write tailwind. i refused to look at the generic videos and im so glad i got to yours. thank you my mind is blown because i have been confused for no reason other than i had to find a link that connects all the experiences i have .

  • @fboag
    @fboag 7 днів тому

    Fantastic explanation. I got comfortable with flexbox years ago and never really bothered to start properly using grid. Now I feel confident that I'll reach for it the next time I need some kind of 2 dimensional layout.

  • @user-wz7wh8pc7w
    @user-wz7wh8pc7w 7 днів тому

    I was trying for some time but when I saw your video, I understood that this is how to do it. Thank you so much.

  • @RyanDsouza-be2qx
    @RyanDsouza-be2qx 8 днів тому

    Do we still need a form submit handler and preventDefault? Is there a better way?

    • @CodinginPublic
      @CodinginPublic 8 днів тому

      You can use the progressive fallback and submit to the page like html does automatically and then capture that request and process the action. I should do a video on that!

  • @laksjfalskfjl1kj234i1ojo
    @laksjfalskfjl1kj234i1ojo 8 днів тому

    Thank you. Please do a tutorial on how to use Satori for OG Images. Such is implemented in the astro template called astro-paper. Having hard time understanding the implementation though. Hope you could teach this as well.

  • @castorisdead
    @castorisdead 9 днів тому

    Thanks for the awesome course. Can you help me setup slug for blog/* to /* ?

  • @youtischia
    @youtischia 9 днів тому

    Brilliant walk thru of how to use a grid. Thanks.

    • @CodinginPublic
      @CodinginPublic 9 днів тому

      Glad you found it helpful! Thanks for saying something!

  • @gargulec6085
    @gargulec6085 9 днів тому

    Man, I don't know what it is, but the way you talk is just so peaceful & comforting. Like talking with a good friend, next to a fireplace, without any troubles on your shoulders. Plus, great tutoring. Thanks for the video!

    • @CodinginPublic
      @CodinginPublic 9 днів тому

      Man, now I wanna go hang out at a fireplace with a friend and some coffee. 😊Thanks for the kind words. Chill is how I like it :)

    • @gargulec6085
      @gargulec6085 9 днів тому

      @@CodinginPublic Hope you will!

    • @adammatthiesen6203
      @adammatthiesen6203 8 днів тому

      @@CodinginPublic Ha, come to Seattle, We could go spend a few hours in the mountain just relaxing next to a real fire! (even make the coffee right there in the fire) - I cant live without my coffee....

    • @CodinginPublic
      @CodinginPublic 7 днів тому

      🙌☕🔥

  • @sjoerdvermeijden
    @sjoerdvermeijden 9 днів тому

    Let's timestamp this :D

  • @theabdullahhamid
    @theabdullahhamid 10 днів тому

    How do I see the mobile version on safari inspect? Edit: I found it. It's the enter responsive design mode in the develop menu.

  • @maurolimaok
    @maurolimaok 10 днів тому

    Eu ainda estou nos primeiros passos no Odin Project, mas desde já muito obrigado pelo canal e pelos vídeos. Além da inspiração, das ideias, esses projetos são realmente úteis.

  • @leifjerami
    @leifjerami 10 днів тому

    Love this! Thanks, Chris! Now to figure out how to use NotionCMS.

  • @satheeshp2384
    @satheeshp2384 10 днів тому

    Age give 30 but i got 3 in js how to protect the zero values from javascript

  • @bozzhik
    @bozzhik 11 днів тому

    astro needs astro cms, because content collections are super bad for big projects, everything that is bigger than js dev blog. markdown or json is very hard to use for big articles. what do you think about it?

  • @Tony.Nguyen137
    @Tony.Nguyen137 11 днів тому

    how can I use my phone on my mac??

  • @beeveedee4922
    @beeveedee4922 12 днів тому

    7. Thanks

  • @sylum3
    @sylum3 12 днів тому

    What about aria fields? would they give my anything extra here? The screen reader seems to handle just fine, though I always see how it's essential for accessibility...

  • @nested9301
    @nested9301 12 днів тому

    iwill just choose an already robust design system like material design they have every single thing you need froms netural colors to inversed colors to typescales ect ... , you only use this if you want a lightweight solution

  • @3tt356
    @3tt356 14 днів тому

    Hello, vscode font family?

  • @palockocz
    @palockocz 14 днів тому

    Only output server can be used or also output hybrid?

    • @CodinginPublic
      @CodinginPublic 14 днів тому

      Also hybrid. Just make sure you mark routes you need SSR with prerender = false

  • @lifedrawing1
    @lifedrawing1 14 днів тому

    Great video, thank you! Do you think Astro actions would still make sense in conjunction with HTMX?

    • @RyanDsouza-be2qx
      @RyanDsouza-be2qx 8 днів тому

      They both are an either/or. You either call the form submit via HTMX or use Astro actions.

    • @lifedrawing1
      @lifedrawing1 8 днів тому

      Thank you for confirming!