Coder Coder
Coder Coder
  • 90
  • 15 219 635
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
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...
Sass and BEM for beginners
zhlédnutí 237KPřed 2 lety
Sass and BEM for beginners
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!
My office/setup tour, video gamified!
zhlédnutí 65KPřed 2 lety
My office/setup tour, video gamified!
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
Life/channel update
zhlédnutí 187KPřed 3 lety
Life/channel update

Komentáře

  • @keving9510
    @keving9510 Před 2 hodinami

    thanks girl , you did help me

  • @Allinone-ii2ou
    @Allinone-ii2ou Před 10 hodinami

    smriti mandana?

  • @RS-jz4pg
    @RS-jz4pg Před dnem

    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.

  • @gearboxworks
    @gearboxworks Před 2 dny

    Excellent tutorial, thank you. Nothing else to say, except to note that you do like cats! 🙂

  • @sergiowinchester1233

    vc e foda

  • @kisho2679
    @kisho2679 Před 2 dny

    where deploy dynamic Website (with database, Python, etc.)?

  • @jorgegomes83
    @jorgegomes83 Před 2 dny

    How to give up creating your own vscode color theme. This is hell. A Microsoftian kind of hell. The worst of all.

  • @adedejiolugbedu
    @adedejiolugbedu Před 3 dny

    Great video, you should make more videos like this.

  • @MDSakib-hz1kh
    @MDSakib-hz1kh Před 3 dny

    Astounding

  • @mehakrandhawa4396
    @mehakrandhawa4396 Před 3 dny

    loved it !!!!...but..how can i get the markers that you used in your video??

  • @haashirnawaz9687
    @haashirnawaz9687 Před 3 dny

    can i do it with a full stack project?

  • @iamtharunraj
    @iamtharunraj Před 3 dny

    The loop is awesome this time. Thanks for sharing this, Jessica!

  • @user-vu8zw6os7z
    @user-vu8zw6os7z Před 3 dny

    Why not we using Photoshop?

  • @josselogam
    @josselogam Před 3 dny

    Thank you very much when I think about shortcuts I always have to come back to this video!

  • @Sportgameww
    @Sportgameww Před 4 dny

  • @adams.george
    @adams.george Před 4 dny

    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!

  • @chule9850
    @chule9850 Před 4 dny

    Thank youuuu ❤

  • @intixgamer3387
    @intixgamer3387 Před 5 dny

    Great info with Great energy, keep it up .................

  • @pritampanda2915
    @pritampanda2915 Před 5 dny

    This video is straight to the point what a beginner needs ✅

  • @russellcampbell76
    @russellcampbell76 Před 5 dny

    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.

  • @banjo4856
    @banjo4856 Před 6 dny

    My question here is, does this rem and em matterrs in padding and margin as well, or it's only useful for font-sizing

  • @surajmaurya1515
    @surajmaurya1515 Před 6 dny

    Thank You👍👍

  • @deepakpun7661
    @deepakpun7661 Před 6 dny

    For fullstack as well?

  • @Imt924
    @Imt924 Před 6 dny

    At 5:00 you have to add window bevor addEvent

  • @Tony.Nguyen137
    @Tony.Nguyen137 Před 7 dny

    How is the nav not causing horizontal scroll bar when off screen, you don’t even use overflow:hidden.

  • @harvey_04
    @harvey_04 Před 7 dny

    Noice

  • @kamalranabhat1815
    @kamalranabhat1815 Před 8 dny

    I couldn’t do it for angular website

  • @PFGKillclixs
    @PFGKillclixs Před 8 dny

    I’m too faded rn

  • @SteveBPiercy
    @SteveBPiercy Před 9 dny

    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

  • @AmbasselAmba
    @AmbasselAmba Před 9 dny

    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

  • @larbesabdellah7079
    @larbesabdellah7079 Před 9 dny

    What's the theme?

  • @zavioxx8670
    @zavioxx8670 Před 10 dny

    So Helpful!

  • @eloquentsites
    @eloquentsites Před 11 dny

    Thank you. I struggled with this until now.

  • @ElonsPreschool
    @ElonsPreschool Před 11 dny

    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.

  • @djlclopez128
    @djlclopez128 Před 11 dny

    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.

  • @nabil731
    @nabil731 Před 12 dny

    Which theme did you use?

  • @richiemanalansang3865

    is it necessarily to use npm and gulp when working with scss?

  • @cheese4558
    @cheese4558 Před 13 dny

    amazing effort

  • @shojimoko
    @shojimoko Před 14 dny

    thank you😊

  • @iakhileshsoni
    @iakhileshsoni Před 14 dny

    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

  • @floydjr3189
    @floydjr3189 Před 14 dny

    What brand laptop do I need for this type of work?

  • @sanjays7255
    @sanjays7255 Před 14 dny

    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)