Building a Light/Dark Dashboard, Part 3

Подписаться 494 тыс.

Просмотров 25 тыс.

50% 1

🔥 My upcoming course: Responsive Design for Beginners! coder-coder.com/responsive/
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/af...
In this video we'll be building and styling the top bar and dark/light toggle for the Frontend Mentor social media dashboard, making sure to use accessible HTML markup.
0:00 - Intro
0:10 - Study design
6:15 - Building top bar
20:23 - Using accessible markup for toggle
33:55 - Styling the top bar
52:06 - Styling the toggle so that it's accessible
Full playlist: • Building a Light/Dark ...
Source code on GitHub: github.com/thecodercoder/fem-...
Challenge on Frontend Mentor: www.frontendmentor.io/challen...
Live website: codercoder-darklight-toggle.p...
Resources mentioned:
Sara Soueidan's accessible toggle Codepen: codepen.io/SaraSoueidan/pen/j...
____________________________
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: marketplace.visualstudio.com/...
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: coder-coder.com/responsive/
🌟 Gulp for Beginners: coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard -- Get 10% off with code THECODERCODER -- vissles.com/?ref=mu96kxst5w
💻 Other gear -- www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- coder-coder.com/best-web-deve...
📺 My Favorite Courses -- coder-coder.com/best-web-deve...
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #coding #programming

Наука

Опубликовано:

9 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 79

@Shortypie 2 года назад

I love that she is always smiling and her sweet voice

@sanjithshanmugathashan1102 2 года назад

I watch most of your videos just because I love the way you talk..... This is how I want my future life to be.... Being so authentic makes you superb. ....Keep it up maam

@chunduripraneeth5450 2 года назад

This is what I am trying to do for a long time. U always know what people need. Thanks for this dude

@TheCoderCoder 2 года назад

awesome! thanks for watching-- I hope this helps you!

@judyminjichoi575 2 года назад

Thank you Jessica! Commenting for the RU-vid algorithm because your videos deserves more views!!

@archiem6323 2 года назад

Coder coder, the best to learn step by step. Love it!!🤠

@COSMO_INC1 2 года назад

Very Nice and detailed video! Keep it up!

@olimpioadolfo7498 2 года назад

Wow. I love ur videos. 🔥

@parassharma7041 2 года назад

Your voice is amazing

@sunilthapa3952 2 года назад

Loving your contents🌻

@TheCoderCoder 2 года назад

Thank you!!

@sunilthapa3952 2 года назад

@@TheCoderCoder You are Welcome✨

@questific 2 года назад

Thank you for this vid!

@TheCoderCoder 2 года назад

Thanks for watching!

@ngoako 2 года назад

This video is 01:42:18 👌, I'm learning a lot (especially that I don't know as much CSS as I thought😅🙈)

@TheCoderCoder 2 года назад

So glad that this is helpful for you!

@ahangaraadil 2 года назад

Hey, how are you doing? Was waiting for it. 😉

@gon769 2 года назад

What a lovely informative lesson. Hoping that you will upload more videos ma'am, thank you so much. more power❤️ #Happy_coding

@zhls22 2 года назад

Good work i have questuion how add payment method to website for online order plz make video for it bcs im begginer

@FaizanKhan-tr4xl 2 года назад

I don't know what Figma is but I'm about to start learning HTML!

@TheCoderCoder 2 года назад

woohooo!!

@ammargillani509 2 года назад

Love this video! I don't think there should be three options for dark mode - its always a dark/light toggle. System is the default option that the user can switch from if they like, and since system is always either dark mode or light mode, we don't need a system option on the toggle.

@ammargillani509 2 года назад

We also don't need a "light mode " label since it's a toggle for dark mode. The switch toggles between dark mode on or off. The design is cleaner and true to the original.

@TheCoderCoder 2 года назад

Hm that does make sense. But what if someone sets dark or light, but then wants to go back to system settings?

@ammargillani509 2 года назад

@@TheCoderCoder it depends on how you implement the switching logic. If you have it so their choice is stored as a cookie then they will have to delete cookies to go back to system preferences. If you have it always default to system preferences, the user only has to refresh the page to go back to system preferences.

@squ34ky 2 года назад

Oh wow, you said the exact same thing I just commented. Agree with you.

@squ34ky 2 года назад

@@TheCoderCoder what does going back to system achieve? There are only two options they could choose; either light or dark. They can set their preference any time.

@en_kratia Год назад

Why should we use Aria-Label instead of Aria-Hidden on theme toggle? If someone can`t see, what the difference between dark theme and light theme for him/she?

@bogdanmarian3667 2 года назад

Hello, I have a big question for you. Why if you look on Amazon platforma with inspect you will be see thousand of class or id, and maybe 4 or 5 class into one div it's with one single line of Code? This is a very stupid question I guess, but i'm intersting why she do that

@runnard 2 года назад

51:07 is it a specific reason to put this text in a span and not a ?

@user-wt2rn1ki9n Год назад

I hear you're a pretty dope toggle wrapper! -8 mile quote Bad joke, I'll leave now

@funkfound Год назад

I really like your videos. You come off as a humanbeing that makes mistakes like the rest of us. Gotta love the irony of building a whole function to convert px to rem then not using it and repeatedly converting manually to get the breakpoints right... Lol

@imkir4n 2 года назад

Actuall i was looking for the same in react! Can anyone help me to Create dark mode toggle in react 🙌

@Galaxy_World 2 года назад

Cool

@anshulsingh1265 2 года назад

One Question.. I'm Engeener Student (3rd year) wanna build a project on Web.. What should I use for my Frontend...React,Angular, Vue Or Plain Js??

@TheCoderCoder 2 года назад

Any of the above! I think it's generally good to start with vanilla JS, then move on to a framework once you feel more comfortable with it. React is always a good choice, but you can try them all and pick the one you like the most. Or if your goal is to get a job, research jobs and see which framework is most popular.

@anshulsingh1265 2 года назад

@@TheCoderCoder Really Helpful.

@sparklite1015 2 года назад

I am having problem in HTML Image is not loading in browser (Firefox). My html file is in folder in D: drive and my image is E: drive. I am using VS CODE (system setup), I have checked file path.

@sparklite1015 2 года назад

Can someone solve this problem

@TheCoderCoder 2 года назад

It's better if you load the website using a local server instead of losing from the file system. Try an extension on VS Code called "Live Server"

@sparklite1015 2 года назад

@@TheCoderCoder I have already installed the Live Server extension. Can you please describe it more

@TheCoderCoder 2 года назад

I would copy the image to where your website files are, and make the links whatever the local website is using, not your file system. Check out my playlist "Build a responsive website from scratch" to see exactly how I do it

@sparklite1015 2 года назад

@@TheCoderCoder So it means we cannot use different drives for webspace

@adilamin8259 2 года назад

What's about visibility: hidden; ?

@TheCoderCoder 2 года назад

Visibility hidden will make the toggle not work at all-- try experimenting with the Codepen I linked!

@squ34ky 2 года назад

I don't get the rationale behind having "System" as a third toggle option. Wouldn't it be much cleaner to just have option between light and dark style, have a default style that's in keeping with the brand and if the user has specified a preference in their settings use that?

@TheCoderCoder 2 года назад

It might be a bit overkill, but the idea is that if someone chooses an option different from their system preferences, but then later wants to go back to system prefs, they can do that. But I agree, just having the two options are more standard. I just wanted to make it harder on myself I guess 😂

@harisali4287 2 года назад

@squ34ky 2 года назад

Sometimes I feel empty inside, as well.

@harisali4287 2 года назад

@@squ34ky lol

@TribecaRebecca 2 года назад

Good accessibility tutorial? :)

@briandsouza7854 2 года назад

Why do you use Figma? Any alternative?

@TheCoderCoder 2 года назад

It's the only PC option for Frontend Mentor designs, since I can't use Sketch. But Figma right now is the most used design tool. Adobe XD is another one. What do you like to use?

@anshulsingh1265 2 года назад

@@TheCoderCoder I think Adobe XD has more feature than Figma.. And it has Easy Interface.

@COSMO_INC1 2 года назад

@@TheCoderCoder Yeah Figma is a nice option!

@vishaltomar121 2 года назад

Your content is really great. But why are you uploading these videos soo far apart in terms of time?

@TheCoderCoder 2 года назад

There's a lot of things we're currently working on-- recording this series, recording other videos, working on my course, etc. Hopefully as time goes on I'll get faster, but as of now I appreciate your patience in waiting for more videos.

@vishaltomar121 2 года назад

Thanks for the reply. You are the best🤘🏼