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 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

💥 Want to learn how to build a website from scratch? Check out my course: https://coder-coder.com/responsive 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 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 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 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 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 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 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 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 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. 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive 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. 🟢 Responsive Design for Beginners -- Learn how to build a website from scratch -- https://coder-coder.com/responsive 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. 💥 Build a Responsive Website -- Learn how to build a website from a Figma design with HTML, CSS, and JS -- https://coder-coder.com/responsive 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