💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=git-vscode https://www.youtube.com/playlist?list=PLGId7NhkayfI ____________ 💻 LEARN TO CODE 💻 MY COURSE: 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (20% off 1-yr with code JESSCHAN20) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme #git #github

💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=merge-conflicts https://www.youtube.com/playlist?list=PLGId7NhkayfI ____________ 💻 LEARN TO CODE 💻 MY COURSE: 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (20% off 1-yr with code JESSCHAN20) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder #css #javascript #html

Git & GitHub tutorial for beginners, using the GitHub Desktop GUI. 💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=github-desktop-2026 Resources Mentioned: https://www.youtube.com/watch?v=lWEKiak0WVU https://www.youtube.com/watch?v=h2a3Kw-I_Ec ____________ 💻 LEARN TO CODE 💻 MY COURSE: 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (20% off 1-yr with code JESSCHAN20) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder ______ 0:00 - Intro 0:28 - Create GitHub account 0:38 - Create a repository 5:46 - Clone repository to GitHub Desktop 10:47 - Commit & push 19:04 - Undoing changes #css #javascript #html

A very brief Git tutorial, explained in 30 seconds. 💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive ____________ 💻 LEARN TO CODE 💻 MY COURSE: 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (20% off 1-yr with code JESSCHAN20) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder #git #github

Learn how to use Git, the version control management tool, and GitHub, the collaborative platform for sharing code. This is a full Git tutorial including: git init, add, commit, log, branch, merge, revert. 💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=git-github-2026 ____________ 💻 LEARN TO CODE 💻 RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (20% off 1-yr with code JESSCHAN20) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder ______ 0:00 - What is Git? 2:02 - Install and configure Git 9:03 - Initialize a repository 13:24 - Making commits 15:55 - Staging & committing 18:11 - File diffs 21:26 - Making changes after staging 24:22 - Commit without staging 26:16 - Adding folders 29:10 - Ignoring files 32:16 - Deleting & restoring files 33:46 - Reverting commits 34:48 - git log 38:05 - git revert 39:57 - Creating branches 44:20 - Merging branches 47:15 - Remotes 52:31 - Navigating GitHub #git #gittutorial

How to set up and deploy your static website to GitHub Pages, and host your website for free. 💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=github-pages Videos mentioned: https://www.youtube.com/watch?v=lWEKiak0WVU https://www.youtube.com/watch?v=8Dd7KRpKeaE ____________ 💻 LEARN TO CODE 💻 MY COURSE: 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (20% off 1-yr with code JESSCHAN20) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder #css #javascript #html ________________________ 0:00 - Intro 0:46 - Create repository 3:43 - Publish on GitHub Pages 6:15 - Update with drag & drop files 9:40 - Update with GitHub Desktop 19:41 - Create a repo-level Page 21:10 - Debug images/styles not loading 26:07 - Limitations of GitHub Pages sites

Learn how to build responsive websites with CSS display, position, flexbox and grid. 💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=css-layouts-course Source Code: https://github.com/thecodercoder/css-layout ____________ 💻 LEARN TO CODE 💻 MY COURSE: 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (20% off 1-yr with code JESSCHAN20) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder _____________ 0:00 - Intro 0:00:57 - Box Model 0:22:27 - Margin Collapse 0:31:54 - Display Property 0:47:18 - Position Property 1:09:54 - Flexbox 1:39:38 - Grid 2:13:19 - Stacked Grid 2:15:30 - Media Queries 2:28:25 - Bento Grid 2:35:22 - Dynamic Grid 2:44:01 - Practice: Nav Bar 3:02:49 - Practice: Tag Cloud 3:09:45 - Practice: Bento Grid #css #javascript #html

💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=bento-grid-practice Source code: https://github.com/thecodercoder/css-layout/tree/main/practice-3 ____________ 💻 LEARN TO CODE 💻 MY COURSE: 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (20% off 1-yr with code JESSCHAN20) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder #css #javascript #html

💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=tag-cloud-practice Source code: https://github.com/thecodercoder/css-layout/tree/main/practice-2 ____________ 💻 LEARN TO CODE 💻 MY COURSE: 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (20% off 1-yr with code JESSCHAN20) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder #css #javascript #html

How to build a simple responsive top navigation bar in CSS, using grid and flexbox 💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=navbar-practice Source code: https://github.com/thecodercoder/css-layout/tree/main/practice-1 ____________ 💻 LEARN TO CODE 💻 MY COURSE: 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (20% off 1-yr with code JESSCHAN20) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder #css #javascript #html

💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=auto-fit-grid Source code: https://github.com/thecodercoder/css-layout/tree/main/09-responsive-grid ____________ 💻 LEARN TO CODE 💻 MY COURSE: 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (20% off 1-yr with code JESSCHAN20) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder #css #javascript #html

💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=css-media-queries Source Code: https://github.com/thecodercoder/css-layout/tree/main/06b-media-queries ____________ 💻 LEARN TO CODE 💻 MY COURSE: 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (20% off 1-yr with code JESSCHAN20) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder #css #javascript #html

💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=grid-template-areas Source code: https://github.com/thecodercoder/css-layout/tree/main/08-bento-grid ____________ 💻 LEARN TO CODE 💻 MY COURSE: 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (20% off 1-yr with code JESSCHAN10) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder #css #javascript #html

💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=stacked-grid Source code: https://github.com/thecodercoder/css-layout/tree/main/07-stacked-grid ____________ 💻 LEARN TO CODE 💻 MY COURSE: 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (20% off 1-yr with code JESSCHAN10) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder #css #javascript #html

Learn how to use CSS grid for building layouts, step-by-step, with this beginner friendly tutorial. 💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=grid-beginners Source code: https://github.com/thecodercoder/css-layout/tree/main/06-grid ____________ 💻 LEARN TO CODE 💻 MY COURSE: 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Get 20% off 1-yr of Frontend Mentor Pro with my code JESSCHAN20 -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder ____________________ 0:00 - Intro & Setup 2:07 - Create a grid container 4:33 - grid-auto-flow 5:34 - grid-template-columns & grid-template-rows 7:00 - explicit & implicit grid 10:16 - fr unit 12:37 - repeat() function 13:27 - grid-column & grid-row lines 20:41 - grid-template-areas 24:55 - justify-items, justify-self, justify-content 28:47 - align-items, align-self, align-content 31:32 - place-items, place-content #css #javascript #html

Learn the basics of CSS flexbox for building layouts with this beginners tutorial. 💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=flexbox-for-beginners Source code: https://github.com/thecodercoder/css-layout/tree/main/05-flexbox ____________ 💻 LEARN TO CODE 💻 RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (20% off 1-yr with code JESSCHAN20) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder ____________________________ 0:00 - Intro & setup 1:57 - create the flex container with display: flex 3:08 - flex-direction 4:53 - flex-wrap 6:02 - browser inspection tools 8:23 - justify-content 11:45 - align-items 14:01 - align-content 16:04 - justify & align 17:25 - flex child items 18:19 - flex-grow, flex-shrink, flex-basis 22:09 - flex shorthand property 26:41 - multiple rows of items 28:33 - order #css #javascript #html

How the CSS position property works, with static, relative, absolute, fixed, and sticky elements. 💥 Learn how to build a website from a Figma design with HTML, CSS, and JS -- https://coder-coder.com/responsive?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=css-position-property Source Code: https://github.com/thecodercoder/css-layout/tree/main/04-position MDN Stacking Contexts: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Positioned_layout/Stacking_context#features_creating_stacking_contexts ____________ 💻 LEARN TO CODE 💻 RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Get 20% off 1-yr of Pro with my code JESSCHAN20 -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder #css #javascript #html

Build websites faster as a beginner with Tailwind, the utility-first CSS framework. 💥 Learn how to build a website from a Figma design with HTML, CSS, and JS -- https://coder-coder.com/?utm_source=YouTube&utm_medium=videos&utm_campaign=YouTubeLinks&utm_content=tailwind-beginners https://www.youtube.com/watch?v=lWEKiak0WVU Source code: https://github.com/thecodercoder/tailwind-css-beginners ____________ 💻 LEARN TO CODE 💻 RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER 🔷 Frontend Mentor Pro -- Get 20% off 1-yr of Frontend Mentor Pro with my code JESSCHAN20 -- https://www.frontendmentor.io/?via=jesschan OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder ____________________________ 0:00:00 -- What is Tailwind? 0:02:39 -- Installation & Setup 0:10:43 -- Text & Colors 0:25:46 -- Wrapper Styles 0:34:53 -- Button 0:40:22 -- Hover States 0:42:32 -- Custom Values 0:45:35 -- Layouts: Top Nav (flexbox) 1:06:03 -- Hero (grid) 1:21:16 -- Cards (3-column grid) 1:43:01 -- Custom Theme 1:52:38 -- Nth-Child Selectors 1:57:24 -- Pseudo-elements 2:03:35 -- Layers 2:11:22 -- Components #css #javascript #html

How the CSS display property works, with block, inline, and inline-block elements, and how padding, border, and margin works in each type of element. 💥 Get 20% off 1-yr of Frontend Mentor Pro with my code JESSCHAN20 -- https://www.frontendmentor.io/?via=jesschan Source code: https://github.com/thecodercoder/css-layout/tree/main/03-display CSS Layouts playlist: https://www.youtube.com/playlist?list=PLUWqFDiirlst8pCZ1R1exwnFSKXEigGIL ____________ 💻 LEARN TO CODE 💻 MY COURSE: 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (10% off with code JESSCHAN10) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER 🔷 Zero to Mastery -- Learn web dev, AI, DevOps and more with 100+ courses -- https://academy.zerotomastery.io/a/aff_s3xc407h/external?affcode=441520_ti97uk6b OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder _____________________ 0:00 - the display property 0:27 - block elements 1:59 - inline elements 4:59 - block vs inline 7:50 - inline-block 13:06 - display: none 13:44 - Layout Modes #css #javascript #html

What causes margin collapse in CSS, and how to prevent it from happening. 💥 Get 20% off 1-yr of Frontend Mentor Pro with my code JESSCHAN20 -- https://www.frontendmentor.io/?via=jesschan Source code: https://github.com/thecodercoder/css-layout/tree/main/02-margin-collapse CSS Layouts playlist: https://www.youtube.com/playlist?list=PLUWqFDiirlst8pCZ1R1exwnFSKXEigGIL ____________ 💻 LEARN TO CODE 💻 MY COURSE: 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive RECOMMENDED RESOURCES: Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!) 🔷 Frontend Mentor Pro -- Practice building real-world projects (10% off with code JESSCHAN10) -- https://www.frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER 🔷 Zero to Mastery -- Learn web dev, AI, DevOps and more with 100+ courses -- https://academy.zerotomastery.io/a/aff_s3xc407h/external?affcode=441520_ti97uk6b OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch SOCIALS: https://twitter.com/thecodercoder https://www.instagram.com/thecodercoder #css #javascript #html