![Coder Coder](/img/default-banner.jpg)
- 90
- 15 357 891
Coder Coder
United States
Приєднався 15 гру 2017
Practical tips for the beginner web developer.
*** Currently NOT accepting sponsorships or collaborations.
*** Currently NOT accepting sponsorships or collaborations.
How to build an accessible hamburger menu with HTML, SCSS & JS
👕 NEW! Coder Coder Merch: coder-coder.com/merch
🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/
In this video, I show you how to build an animated hamburger menu from scratch with HTML, SCSS, and JavaScript, that is accessible for screen readers and keyboards.
🌟 LINKS & RESOURCES 🌟
Live website: mellow-cocada-662afb.netlify.app/
Source code: github.com/thecodercoder/space-cats-hamburger-menu
Practical Accessibility by Sara Soueidan: practical-accessibility.today/
Lock scrolling package: github.com/rick-liruixin/body-scroll-lock-upgrade
____________________________
🎨 Get my VS Code theme: marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- thecodercoder
Instagram -- thecodercoder
#css #javascript #html
🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/
In this video, I show you how to build an animated hamburger menu from scratch with HTML, SCSS, and JavaScript, that is accessible for screen readers and keyboards.
🌟 LINKS & RESOURCES 🌟
Live website: mellow-cocada-662afb.netlify.app/
Source code: github.com/thecodercoder/space-cats-hamburger-menu
Practical Accessibility by Sara Soueidan: practical-accessibility.today/
Lock scrolling package: github.com/rick-liruixin/body-scroll-lock-upgrade
____________________________
🎨 Get my VS Code theme: marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- thecodercoder
Instagram -- thecodercoder
#css #javascript #html
Переглядів: 25 546
Відео
Code faster with these VS Code shortcuts
Переглядів 321 тис.6 місяців тому
🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/? code shortcuts& 💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b 🎨 My VS Code theme: marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme 👕 Coder Coder merch: coder-coder.myspreadshop.com/ 🔽 FOLLOW CODER CODER Blog coder-c...
Coding walkthrough: building a website w/ HTML, SCSS, JS
Переглядів 19 тис.7 місяців тому
🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/ In this coding time lapse video, I've concentrated 5 hours of coding into a 20 minute time lapse. In it, I build a responsive News website and explain my thought process from start to finish. I used CSS grid and subgrid for the layout, and built an accessible animated hamburger menu. The design is from Frontend Mentor and...
Reverse-engineering Stripe's themes with CSS custom props
Переглядів 7 тис.8 місяців тому
🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/ 💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b In this video I'll show you how to use CSS custom properties to create style themes that you can add to elements by just adding a CSS class. I found this approach on the Stripe website and am using ...
Why adding a margin on a child element affects the parent
Переглядів 8 тис.8 місяців тому
🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/ 💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b In this video I'll explain why adding margin-top to a child element sometimes moves the parent element down and creates a white space, what margin collapse is, and how you can fix it. SUPPORT THE CH...
Why there's a white space under your image tag
Переглядів 7 тис.9 місяців тому
🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/ 💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b In this video I'll explain some weird issues with image tags, like why there's a tiny white space under the image, and why flexbox sometimes stretches or distorts images. 0:00 - Intro 0:34 - Tiny wh...
How to debug CSS with Firefox Developer Tools
Переглядів 12 тис.9 місяців тому
🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/ 💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b In this video I show you how to use Firefox Developer Tools to debug and troubleshoot your HTML and CSS. Firefox Developer Tools Documentation - firefox-source-docs.mozilla.org/devtools-user/index.h...
Building a portfolio website with HTML & CSS | Part 1
Переглядів 96 тис.Рік тому
Full playlist here: ua-cam.com/play/PLUWqFDiirlsuVOx2WWruGfw5nnuaWHNvI.html 🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/ 💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b In this video (Part 1 of 4) I'll be building a Frontend Mentor challenge, the single-page developer portfolio. I set up gl...
How to test a local website on your phone
Переглядів 392 тис.Рік тому
How to fix "This site can't be reached" error 04:37 🔥 Learn how to build a responsive website from a Figma design with HTML, SCSS, and JS: coder-coder.com/responsive/? local website& 💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b SUPPORT THE CHANNEL ⭐ Join channel members and get perks: ua-cam.com/channels/zNf0liwUzMN...
Coding is NOT enough.
Переглядів 103 тис.Рік тому
🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/ 💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b In this video I talk about some of the skills beyond just programming that you'll need to succeed in the workplace as a web developer. 0:00 - Intro 0:52 - Good communication 1:05 - Raise red flags e...
1 hr ambient/lofi music for coding (no midroll ads)
Переглядів 57 тис.2 роки тому
1 hr ambient/lofi music for coding (no midroll ads)
How to keep up with trends in web development
Переглядів 47 тис.2 роки тому
How to keep up with trends in web development
Live coding a WORDLE clone (5 hrs) | HTML Sass JS
Переглядів 45 тис.2 роки тому
Live coding a WORDLE clone (5 hrs) | HTML Sass JS
Git, GitHub, & GitHub Desktop for beginners
Переглядів 717 тис.2 роки тому
Git, GitHub, & GitHub Desktop for beginners
Are you sabotaging your coding career?
Переглядів 89 тис.2 роки тому
Are you sabotaging your coding career?
Stop wasting time when you're learning to code!
Переглядів 1,9 млн2 роки тому
Stop wasting time when you're learning to code!
My office/setup tour, video gamified!
Переглядів 65 тис.2 роки тому
My office/setup tour, video gamified!
Deploy your website for free with Cloudflare Pages and GitHub!
Переглядів 169 тис.2 роки тому
Deploy your website for free with Cloudflare Pages and GitHub!
px vs rem: what to use for font-size in your CSS
Переглядів 50 тис.2 роки тому
px vs rem: what to use for font-size in your CSS
Building a Light/Dark Dashboard, Part 5
Переглядів 24 тис.2 роки тому
Building a Light/Dark Dashboard, Part 5
Sass @import is being replaced with @use and @forward
Переглядів 38 тис.2 роки тому
Sass @import is being replaced with @use and @forward
Building a Light/Dark Dashboard, Part 4
Переглядів 23 тис.2 роки тому
Building a Light/Dark Dashboard, Part 4
Generate website starter files with just one command!
Переглядів 19 тис.2 роки тому
Generate website starter files with just one command!
Building a Light/Dark Dashboard, Part 3
Переглядів 25 тис.2 роки тому
Building a Light/Dark Dashboard, Part 3
Building a Light/Dark Dashboard, Part 2
Переглядів 102 тис.2 роки тому
Building a Light/Dark Dashboard, Part 2
Building a Node.js app (as a JavaScript noob) | 🔴 LIVE CODING
Переглядів 136 тис.3 роки тому
Building a Node.js app (as a JavaScript noob) | 🔴 LIVE CODING
What is NPM, and why do we need it? | Tutorial for beginners
Переглядів 299 тис.3 роки тому
What is NPM, and why do we need it? | Tutorial for beginners
Building a Light/Dark Dashboard, Part 1
Переглядів 104 тис.3 роки тому
Building a Light/Dark Dashboard, Part 1
Why isn't anyone showing how to first set up the Emmet?
what browser are you using?
thank you
👏
I had an html file and css in my repository and no java script, so ii didnt do any sort of build command, but then when the process was over and when i got the link, the website didnt open,
Eh, I get paid by the hour but this is nice when i'm working on personal programs
is the exact thing with java app?
I wish I could edit like her; her editing is mind-blowing. Plus, she can also create video editing tutorials🤒.
Cool 🥶!
ty acc rly helped a lot :)
Fantastic video. Was thinking of using GitHub to store all of my previous uni work, and this has shown me I can do so much more with it in the future. Thank you 🙏
How to do it on Linux?
Mam your video lot of helpfull to run fast
I'm doing self-taught rn and seem to suck at asking questions on google. I could never find the right answers/solution that i am lookin forg. I feel like im using the wrong terms 😢😭 i suck...but i will not give up
thank you very much
In this video I truly understand Git.. Thank you!
Are you single ❤️
can you make this work for php
Do you have a complete course of web development (or modularized) where we can learn all of you mentioned from scratch? Of at least basis common and front end!
thank you so much coder
Im beginner and i always feel overwhelm in this kind of things. thankyou for making this so easy to understand you are a hero.
I have a query if anyone can help, I have angular library i am creating for my company. I dont know how to setup global css in it. So what i did is I have created a src/lib/styles/styles.scss and using it in every components scss file like @use 'styles'; is this a good approch or there is better solution for this.
Hallo danke das hast du und dein Team sehr gut erklärt.
I've been struggling to get how things work in Git and GitHub and this is by far the most perfect explaining video I found❤
it show still problem in my vs
Amazing!
Thanks❤
Great content!
why aren't you posting anymore? your editing skills and way of explaning is way too good
1:08 test
what a cute pfp (not being sarcastic)
Excelente! thanks for making this less tedious for me.
I tried, CSS froggy, CSS diner and flexbox adventure. They are quite fun, unfortunately flexbox adventure is a bit buggy.
Never knew what name you use in your channel could have subscribed a long time ago but thank God I found you,took your course at freecode camp❤
♡♡
Is there a way to do this while simultaneously running a backend server? I want to use this method to test my MongoDB/React app
I dunno How Can I thank you ! Thank you very much from bottom of my Heart
Very nice video...
I'm quite grateful for this helpful video of yours. I came to realize that I'm not alone in struggling while learning. You motivate us a lot to keep going on this journey. 😭🙏
y she is soo beautiful 🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰
How unblock my iPhone wit GitHub
Cute, I animated all those Mario shots in your intro!
Incredible tutorial!
Website name ?
You said you used emmet to use the !-tab to initialize your document (at 8:04). Is Emmet installed by default or does the extension need to be added? How do I find out ore about Emmet?
This was very helpful. I like eveyrthign about the video that others have mentioned. Please keep doing what you and thank you in advance.
thank you so much
If they ever need to give a best coding tutor award, it should be given to you!
hi, I like all your videos, can you make a video about learning javascript or something about javascript, because I like javascript and thank you. 🙂🙏