Building a Light/Dark Dashboard, Part 1

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

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

50% 1

🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/af...
_____________________________
This is the first video in a series building a Frontend Mentor challenge, a social media dashboard with light/dark toggle. In this video, I'll show you how I plan a website project and look up things I'm not super familiar with.
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...
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: / @thecodercoder
🏆 GitHub sponsors: github.com/sponsors/thecoderc...
👏🏽 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

Наука

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

6 июн 2021

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Thanks!

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

Thank you so much!

@benjieparacale6562 3 года назад

Omg! This will be her first vid as a fulltime RU-vidr. 🥰

@cantilloc. 3 года назад

i wonder how she types without looking at the keyboard, so cool

@theepicgamer1196 3 года назад

@@cantilloc. It is called touch typing. It is a skill that is learned and practiced. You start with your index fingers on F and J (the two keys with bumps on them) and the rest of your fingers (excluding your thumb) lie on each other key (e.g. your middle fingers would be on D and K, your ring fingers on S and L, and your pinkies on A and semicolon ";"). You use your thumb for the space bar, and you use your pinky for shift, enter, and ctrl. There are probably some sites that can teach you this (free or paid). I don't type with perfect technique (I don't use pinkies for anything except shift, enter, or ctrl), but I type 100+ wpm (words per minute).

@chhavimanichoubey9437 3 года назад

@@theepicgamer1196 my touch typing speed is 70 NWPM which helps me a lot while typing this comment

@tharinda 3 года назад

Yeah yeah that's right

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

@@theepicgamer1196 😊🥰🥰🫂🫂🫂thank you, l screen shotted this😅

@muhammadainuddin4650 3 года назад

This is the part of building any project that every beginner needs to see but no tutorial shares. Thank you so much.

@notmyname327 3 года назад

This may be the most helpful front end video I've seen and there isn't any code in it. Starting a new project from scratch seems impossible as a beginner, you showed how to break it down into manageable steps and it doesn't feel as daunting. I'm looking forward to the rest of the series

@XMickleXx 3 года назад

stfu, srsly stfu

@techno_abhishek8982 3 года назад

That guy who searched, "Is CSS Programming Language?" is me

@rome6323 3 года назад

dont worry im with you

@techno_abhishek8982 3 года назад

@@rome6323 Thank you 🤝

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

I feel it is, it’s just more artistic. (Kinda Like using SwiftUI vs UIKit on the Mac / iPhone)

@coderxchris5099 3 года назад

I love how you show the true workflow of a programmer. Many people have a false sense of what it means to be a programmer leading them to quit. Thank you!

@dhruvil_2662 3 года назад

Coder Coder is now a FULLTIME Coder Coder

@mohammadabdulrahman7594 3 года назад

You have some special talent that turns any intimidating stuff into a piece of cake. From hearing your story, I think this comes from forcing your way against all the odds. Please keep it up.

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

What types of things do you find yourself looking up when you're building stuff?

@mischievousachiever7896 3 года назад

Updates about what I'm tryn to build and my current situation, what I still must have in order to finish my stuff.

@NNNedlog 3 года назад

Competitors, trends

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

@Alnashief Mohammad I don't, but in general I'd research jobs available to you and see what technologies are most common

@blackowl694 3 года назад

I'm learning python, can u. Please give information and tell path to the beginners like me. How to get job without degree. pleaseeeee

@H-CSELEKrishnaMohan 3 года назад

@@blackowl694 yee I want to ask the same how can I land a job without a college degree (2021) for web development,what are the basic necessary skill candidate should have ,plz make a video ,it will be helpful , I know I can research but , listening through a professional youtuber,web developer is much better then taking my own decision , without any experience.

@DiegoWalisson 3 года назад

I had never seen this before, THE REAL DAY BY DAY OF A DEVELOPER. I think this is the most honest "tutorial" i have ever seen. Congrats!! I'd love if you keep going more on this type of content.

@ysammo214 Год назад

Thankyou so much for making this. This playlist is amazing, and its so refreshing seeing someone even as skilled as yourself struggle to solve problems but still persisting through them and showing your problem solving process. It gives me a lot of motivation and reassurance that i'm not useless for not being able to know these things by heart and that even skilled developers have to google

@kieran2347 3 года назад

Hey, Jessica! I love watching your videos, there's always so much to learn, especially the thought process when building something or fixing a bug or researching a topic, every one of your videos comes packed with all of these things which is what makes you "The BEST". Thanks for this amazing video, I learned a lot from it. Take good care of yourself. Cheers Sending lots of love from India and 100Devs! Good luck!

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

This is priceless! It relieves learners from the anxiety of trying to memorize code, and allows them to focus on their research and problem solving skills, along with the ability to quicky get the gist of a piece of code. Thank you so much!

@ImSendingXOXO 3 года назад

Looooved this video! Please do more of these. It was great following you along and you’re so calm and nice to listen to!

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

Topics of this channel are now getting much interesting. Thank you @coder coder

@mimizdani8194 3 года назад

You are really showing the real information i was looking for a long time. Per example, the video you made that showed where to start and how to start where you mentioned that challenge website that contains projects i can work on to add my portfolio. I couldn't find such a video anywhere, your content is so wonderful and i really believe you will become the must-watch RU-vid channel for every web developer or any software dev in general cuz you giving real guidance on what to do and how to do it, not Just the typical learn a language and apply for jobs. Thank you so much and I will be waiting for you to become the top coding channel in RU-vid

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

Thanks so much for your kind words! I'm glad my videos can help with these real world skills :)

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

I cannot wait for the part 2 of this video. This helps me a lot with planning and problem solving. Thank you very much

@mdsazidkhan4720 3 года назад

I liked your video after the first minutes. The idea of tracking a problem from scratch and compiling in a video is great. Thanks for your great content :)

@codeagainst9943 3 года назад

This is a piece of great advice, I'm a self-taught front-end developer , and got my first job 1 month ago, and still struggling with confidence, set a reminder, thanks Coder Coder!

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

I just started my wed dev journey not long ago and I have been stuck for a week.. this is exactly what I needed to hear! thank you veery much!!! ❤️

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

This is so great. There are some people out there doing great tutorials but I have learned more from this life walkthrough than any single viewing of a tut. Learning how the burger is made is much more helpful than someone just running through something they researched and prepared previously. I definitely feel more confident that coding is not just about knowing specific syntax. Thank you,

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

glad this was helpful for you!

@beamboyz4901 3 года назад

She killed it am amazed by the way she explains things

@Jade.Nvrlnd 3 года назад

This was excellent! As a beginner who has no previous knowledge of different sites to be able to refer to, I paused the video each time you went to a site and bookmarked it for my own references. Thank you for showing us how to do some research in detail!! 👍🏾😀

@vitaminprutin8217 3 года назад

I am currently learning programming and while solving questions i used to think that why i am not able to do it or make this project by what i just learned. And after watching this i now know that, ok so this much of research even a pro needs. Very Helpful Stuff. Thanks

@atasgudang 3 года назад

I really like how you describe your thought. Looking forward to the next part 😊

@mehditantan4207 3 года назад

Sounds good let’s get started, when I hear it I feel like everything is going to be easy. I Love what you doing !! ❤️

@reenalupadhayay4315 Год назад

Thank you so much for this video. I am currently in a 12 weeks Online Bootcamp and next week is Project Week! I was getting worried about how to plan for any project but seeing how a professional such as yourself has done, really put me at ease. Got yourself another subscriber. thank you so much!

@TheCoderCoder Год назад

awesome, I'm glad my videos have been helpful for you!

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

Coder Coder thank you SO MUCH for this video! You are now in my Top 5 list of favourite RU-vid Channels because not only did you show how the process for planning a project works, but you also went through it all by making the mistakes every developer has to go through! Not to mention, you skipped reading most of the content, similarly to how I do most of this - basic skimming and then adapting the pieces I need to build my roadmap! Great Video! :)

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

Thanks for your very kind words! I'm really happy that my tutorials are helpful for you, and it's 100% why I try to include the mistakes and looking up stuff. Best of luck in your journey!

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

@@TheCoderCoder thank you very much! Same to you, best of luck on your journey! :)

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

Your videos feels real, inspires me!

@norbutamang8400 3 года назад

Excited.. you have given me a huge hope for success in Coding. Thanks a lot!

@sudhansukoirala 3 года назад

I've always wanted to thank you for the coding music playlist !! Love your content btw !

@kwalsh7107 Год назад

Love it! Most helpful video out there. Nobody else shares this part of development so thank you!

@adnanamin3666 3 года назад

New series after a long time! Looking forward to it! Thank you. :)

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

SUBSCRIBED! You are so likable! I loved the video, I have built this toggle with one of my SEIR classes and the students loved Front-end Mentor!

@nixxojamilla9788 3 года назад

The way she explains and give information are more easier to digest. Her voice reminds me of Siri and I could listen to her all day❤️

@elletownsend6412 3 года назад

I love this video! It's great to show that front-end dev is all about googling things - we all do it and nobody is any less on a developer for googling stuff all the time!

@kapitankidlattv9613 3 года назад

Why reinvent the wheel right? :)

@aniakubow 3 года назад

Reminder set!

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

woohoo!!!

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

@Paul Maximus I definitely don't know it all from scratch. Maybe the scroll to top button? But it's quite normal to have to research and look stuff up to build things

@Danioscu 3 года назад

Thanks for this video, it's really good to see how people with a lot of experience works with a new challenge :)

@007Sylvester007 3 года назад

yeah, it's confirmed. This will be the next huge programming channel! Congrats for doing it full time!

@007Sylvester007 3 года назад

There is more value in this video than in all those tutorials that beginners are following in order to get a project going and end up stuck. Here you can actually see the process and how real life works while also learning something new. Can't wait for your next videos

@turbokev3772 3 года назад

"Getting a design from a designer, and then building that out..." OMG I wish it were that simple in real life. Usually there is no design, and no designer, just a vague description from the client, whose expectations will only be partially met on the third or fourth prototype.

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

That sounds like a complete nightmare!

@joshualevan 3 года назад

You and your mindset is such a necessary part of learning to code. It can be overwhelming and imposter syndrome can take down even the best of us

@RefuelTheRocket Год назад

Huge thank you, keep posting new projects!!!

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

Nice to see how open you are.. very refreshing.

@potatoesislife6365 3 года назад

I love your desk setup behind you. I never thought to setup laptops on the side of my main PC.

@badr-eddineelbatouri4544 3 года назад

Your voice is just cleaning my soul everyday.

@cocoonkid4321 3 года назад

this is so well done. kudos to u!

@santiagomedinafiguera7280 3 года назад

The best coding youtuber ever! Thanks for this.

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

loving the playlist !

@DoubleDYouTube 3 года назад

Love the editing style!

@cmdv42 3 года назад

🔥This is the exact type of content that helps to lower the barrier of entry into tech ❤️🚀🙌

@kashanahmad8014 3 года назад

can't wait for part 2! 🔥

@hajimeippo804 3 года назад

thats exactly the kind of video i was looking for.. i am learning js and dont know how to start making project

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

The three state note was very useful!

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

This video helped me to know a lot of things when we code for a website project. Thanks Ms. Coder Coder. Now I'm really your fan. You really awesome and smart. By the way I'm a still learning junior or beginner web developer. And I'm being learning from you both web dev knowledge and also English cuz my English is bad :-( . Thanks for your video. You are the one who's my inspire.

@emreozgun3846 3 года назад

I actually never thought of adjusting a website for visually impaired people. this was a great tip, thanks!

@joelreyes6756 3 года назад

I love your vids, please keep em coming! You'll get our support :)

@sampathkumar-fl6xo 3 года назад

I have never spent a minute gathering requirements before start coding. I have gave up so many projects without proper planning. I realized how important to plan things before getting started.

@chhavimanichoubey9437 3 года назад

this is actuallly awesome video idea

@ShadiMuhammad 3 года назад

It's really cool and more descriptive than mine. keep it up Jessica. 👏

@nikhilsastry6631 3 года назад

Love the content everytime ❤️

@amandioreal2293 Год назад

We need more this types of vídeo. It is good to see how other people think the way and because there is a lot of work not magic.

@excelvbasolutions 3 года назад

Great video. Gave me a good insight. Waiting for the next. Thank you ❤️

@saadbinanis9978 3 года назад

looking forward to learning with you.

@iRaionSama 3 года назад

Great video, can't w8 for the next part !!

@abhisek330 3 года назад

This is the first Channel I hit a bell icon.

@Coelacantha 3 года назад

Thank you for this video! It was very helpful and super insightful!!!✨❤️❤️❤️

@DamianDemasi 3 года назад

Awesome and helpful video!!! Please, make more of them!

@DifficultWorld7 3 года назад

I was literally searching "how to plan build project" and showed up ❤️

@Werleyd 3 года назад

My favourite RU-vid coder

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

Can’t tag you, but as someone wanting to learn, and only sometimes dabbling when brain wants to focus, this was really helpful. I’ve been putting off watching because I don’t want it to influence my own solution but it’s incredibLy helpful to see someone else’s process. I do some of what you do, but also sometimes do the searching as I hit the thing I want to do rather than upfront. Not ideal but it’s what ends up working best for my brain.

@Noble1968 3 года назад

Congratulations! Well done video.

@absurd0000 3 года назад

Very helpful content! Thank you!

@aprilucid 3 года назад

This video is indeed helpful. It gives me the good rhythm(?) to warm up to code and also gets me some ideas of accessibility and some points u need to focus when u r searching! Yet I haven't been writing codes that much lately (self-taught, and trying to start career as a developer) and was coincidently thinking about what projects i need to focus and really do! Then this video calms me down and also gives me many clues with some encouraging somehow haha :) looking forward to part 2 as well!!

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

Glad this video has been helpful for you!!

@parfumasilo8968 3 года назад

Thank you. This helps me a lot.

@js-swift 3 года назад

thanks a lot for this you know what most of the time i try to do everything myself but it's kinda annoying for me now i'll follow your way it's little bit helpful for me that how you do things using references to do that stuff and thanks a lot for this - coder coder :) waiting for new upcoming videos more on web dev

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

I love your smiling face. Thank you, my favorite teacher.

@therebelliousgeek4506 3 года назад

I'm kinda glad that you use DDG and Firefox.

@cswalker21 3 года назад

This was very cool. Thanks!

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

Thanks this was very useful!

@trtlphnx 3 года назад

You Are My Favorite, Tech "Tube" hands Down ~ Keep It Coming, Sweetie~

@nickvandrepol7574 3 года назад

Awesome! More of this!

@AnimeEscapism Год назад

I love the research part of this tutorial hope to see more of it Please can you make a tutorial on how to build our own scss

@priscamogane5515 3 года назад

Time to get unstuck, can't wait for this. You should make a video about SEO. Love from 🇿🇦🇿🇦🇿🇦

@senthilkumarpalanisamy365 3 года назад

You are an inspiration 🙏🙏

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

Also I’m fascinated that you find this outside your comfort zone; yet seem perfectly at home at what you are doing

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

Thanks for all your kind words!

@Sheikh_Sakibul_Islam 3 года назад

this is really helpful !

@nitinkaran3350 3 года назад

Reminder set.. ⏰

@lofintai719 3 года назад

Great job! Thank you!!

@nikhilatluri1569 3 года назад

Waiting for your video as well as your course!!!

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

Thank you very much for this content.

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

YOU ARE A GREAT TEACHER

@SilverAphelion 3 года назад

Loving the thumbnail

@alexandrdermenji2428 3 года назад

Cool video ! More videos with reasearching staff please ))

@momenabdelghafar7771 3 года назад

I can't wait to see part 2

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

I am so glad I watched your video. I had no idea how much research was involved into creating a project. I was doing way less than what you invested into creating your project. The most I think I invested was 8-10 minutes tops into looking into how I should create a project and then I would blindly jump into it. Thank you for showing me the correct way to develop a project. Also. I had no idea you could write notes on your editor by using .md to create this file. I usually tend to write everyone thing down in a notebook with a pen and paper, thanks for the education and eye opener.

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

So glad this could help!

@dineshrout2527 3 года назад

Excited😍

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

I just like the way you speak, wish i have been listening to your voice by now i would be more of who i am now. You sound Sweet and educative.

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

This is absolute gold. Fantastic. I do have a question, though. All the things about accessibility at the beginning for the light/dark mode toggle. Accessibility is very important, but toggling light/dark mode is something screen reader aren't concerned with, after all if you are reading from a website, because you have sight impedements, that is unfortunate, but light or dark mode are a no-factor in my opinion. For all the rest, absolutely and you did the right thing pointing it out.