- 90
- 15 219 635
Coder Coder
United States
Registrace 15. 12. 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
zhlédnutí: 23 542
Video
Code faster with these VS Code shortcuts
zhlédnutí 300KPřed 5 měsíci
🔥 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
zhlédnutí 18KPřed 6 měsíci
🔥 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
zhlédnutí 7KPřed 7 měsíci
🔥 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
zhlédnutí 8KPřed 7 měsíci
🔥 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
zhlédnutí 7KPřed 8 měsíci
🔥 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
zhlédnutí 11KPřed 8 měsíci
🔥 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
zhlédnutí 93KPřed rokem
Full playlist here: czcams.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
zhlédnutí 380KPřed rokem
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: czcams.com/channels/zNf0liwUzMN...
Coding is NOT enough.
zhlédnutí 103KPřed rokem
🔥 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)
zhlédnutí 56KPřed 2 lety
1 hr ambient/lofi music for coding (no midroll ads)
How to keep up with trends in web development
zhlédnutí 46KPřed 2 lety
How to keep up with trends in web development
Live coding a WORDLE clone (5 hrs) | HTML Sass JS
zhlédnutí 45KPřed 2 lety
Live coding a WORDLE clone (5 hrs) | HTML Sass JS
Git, GitHub, & GitHub Desktop for beginners
zhlédnutí 700KPřed 2 lety
Git, GitHub, & GitHub Desktop for beginners
Are you sabotaging your coding career?
zhlédnutí 89KPřed 2 lety
Are you sabotaging your coding career?
Stop wasting time when you're learning to code!
zhlédnutí 1,9MPřed 2 lety
Stop wasting time when you're learning to code!
Deploy your website for free with Cloudflare Pages and GitHub!
zhlédnutí 164KPřed 2 lety
Deploy your website for free with Cloudflare Pages and GitHub!
px vs rem: what to use for font-size in your CSS
zhlédnutí 49KPřed 2 lety
px vs rem: what to use for font-size in your CSS
Building a Light/Dark Dashboard, Part 5
zhlédnutí 24KPřed 2 lety
Building a Light/Dark Dashboard, Part 5
Sass @import is being replaced with @use and @forward
zhlédnutí 38KPřed 2 lety
Sass @import is being replaced with @use and @forward
Building a Light/Dark Dashboard, Part 4
zhlédnutí 23KPřed 2 lety
Building a Light/Dark Dashboard, Part 4
Generate website starter files with just one command!
zhlédnutí 19KPřed 2 lety
Generate website starter files with just one command!
Building a Light/Dark Dashboard, Part 3
zhlédnutí 25KPřed 2 lety
Building a Light/Dark Dashboard, Part 3
Building a Light/Dark Dashboard, Part 2
zhlédnutí 102KPřed 2 lety
Building a Light/Dark Dashboard, Part 2
Building a Node.js app (as a JavaScript noob) | 🔴 LIVE CODING
zhlédnutí 136KPřed 2 lety
Building a Node.js app (as a JavaScript noob) | 🔴 LIVE CODING
What is NPM, and why do we need it? | Tutorial for beginners
zhlédnutí 291KPřed 2 lety
What is NPM, and why do we need it? | Tutorial for beginners
Building a Light/Dark Dashboard, Part 1
zhlédnutí 104KPřed 2 lety
Building a Light/Dark Dashboard, Part 1
thanks girl , you did help me
smriti mandana?
can i use this for a/b testing? i want to deploy atleast 3 versions to see which one gains more attraction and works well. How can i do that without github? I ana bit spectacle using github as its open source and people can use the code etc so it worries me. i am new to all this stuff. I want to use website drag and drop building services to build the website.
Excellent tutorial, thank you. Nothing else to say, except to note that you do like cats! 🙂
vc e foda
where deploy dynamic Website (with database, Python, etc.)?
How to give up creating your own vscode color theme. This is hell. A Microsoftian kind of hell. The worst of all.
Great video, you should make more videos like this.
Astounding
loved it !!!!...but..how can i get the markers that you used in your video??
can i do it with a full stack project?
The loop is awesome this time. Thanks for sharing this, Jessica!
Why not we using Photoshop?
Thank you very much when I think about shortcuts I always have to come back to this video!
For those who still couldn't see the website, there will be 2 rules named "Visual Studio Code" in Inbound Rules. Edit Properties for either or both of them as follows: "Windows Defender Firewall with Advanced Security" > Inbound Rules > Double click "Visual Studio Code" > Uncheck "Private" or whichever that applies to you > Done!
Thank youuuu ❤
Great info with Great energy, keep it up .................
This video is straight to the point what a beginner needs ✅
Not sure if this could help me with what I'm trying to do, but I'd rather see an iterative approach. 1) Just get a new locations mapped. Nothing fancy. 2) Refine with styles 3) Refine with this. 4) Refine with that. 5) Refine with some other thing. What I need is mapping multiple locations (and I'm trying to do it without using the Google Maps Platform), but what I always try to do is get the most important feature working, then refine it. Getting multiple locations on a map is the most important for me. Everything else is gravy. But, maybe you have other tutorials that would suit me better.
My question here is, does this rem and em matterrs in padding and margin as well, or it's only useful for font-sizing
Thank You👍👍
For fullstack as well?
At 5:00 you have to add window bevor addEvent
How is the nav not causing horizontal scroll bar when off screen, you don’t even use overflow:hidden.
Noice
I couldn’t do it for angular website
I’m too faded rn
Trying to follow your build as a newbie & I downloaded the SASS compiler. I have the option to Watch but there is definitely no button to go live
Best channel and I love India and all indians. Smartestman in the world.I love him well.I love all indians Smartestman in the world.I love him well.I love all indians
What's the theme?
So Helpful!
Thank you. I struggled with this until now.
Hi I use an android phone but when I login it tells me connecting as a Linux device. Prior to this my phone was hacked and they listen to me remotely. How can I stop this thing.
Thank you for this tutorial, this was the first time I did this! Note for anyone using their phone as a hotspot: it doesn't work if you tey to load the website on the same phone you are using as your internet source. But! I am still learning so maybe it is possible somehow? You have to have your computer and phone both connected to the same wifi source.
Which theme did you use?
is it necessarily to use npm and gulp when working with scss?
amazing effort
thank you😊
Thanks Jessica for this wonderful share ☺️ It really helped a lot of people 😊 This is first time I found your video and it's really helpful
What brand laptop do I need for this type of work?
Hey ma'am,is there any service available to run our docker containers at online,using docker image ,but it should free of cost,..,I know the services like google cloud,AWS ECS we can deploy our container,but after a certain time the free trial will be gone and we should pay for the service that we use,So could you recommend some service which is free forever like vercel,netlify (for small projects)