Building a Light/Dark Dashboard, Part 1
Вставка
- Опубліковано 6 чер 2021
- 🔥 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 - Наука та технологія
Thanks!
Thank you so much!
Omg! This will be her first vid as a fulltime UA-camr. 🥰
i wonder how she types without looking at the keyboard, so cool
@@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).
@@theepicgamer1196 my touch typing speed is 70 NWPM which helps me a lot while typing this comment
Yeah yeah that's right
@@theepicgamer1196 😊🥰🥰🫂🫂🫂thank you, l screen shotted this😅
That guy who searched, "Is CSS Programming Language?" is me
dont worry im with you
@@rome6323 Thank you 🤝
I feel it is, it’s just more artistic. (Kinda Like using SwiftUI vs UIKit on the Mac / iPhone)
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
stfu, srsly stfu
This is the part of building any project that every beginner needs to see but no tutorial shares. Thank you so much.
Coder Coder is now a FULLTIME Coder Coder
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!
What types of things do you find yourself looking up when you're building stuff?
Updates about what I'm tryn to build and my current situation, what I still must have in order to finish my stuff.
Competitors, trends
@Alnashief Mohammad I don't, but in general I'd research jobs available to you and see what technologies are most common
I'm learning python, can u. Please give information and tell path to the beginners like me. How to get job without degree. pleaseeeee
@@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.
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.
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.
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
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!
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!
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!
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!! 👍🏾😀
Looooved this video! Please do more of these. It was great following you along and you’re so calm and nice to listen to!
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 UA-cam 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 UA-cam
Thanks so much for your kind words! I'm glad my videos can help with these real world skills :)
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,
glad this was helpful for you!
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!!! ❤️
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
Topics of this channel are now getting much interesting. Thank you @coder coder
I cannot wait for the part 2 of this video. This helps me a lot with planning and problem solving. Thank you very much
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 :)
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
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!
awesome, I'm glad my videos have been helpful for you!
She killed it am amazed by the way she explains things
New series after a long time! Looking forward to it! Thank you. :)
Coder Coder thank you SO MUCH for this video! You are now in my Top 5 list of favourite UA-cam 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! :)
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!
@@TheCoderCoder thank you very much! Same to you, best of luck on your journey! :)
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!
Why reinvent the wheel right? :)
Excited.. you have given me a huge hope for success in Coding. Thanks a lot!
I really like how you describe your thought. Looking forward to the next part 😊
I actually never thought of adjusting a website for visually impaired people. this was a great tip, thanks!
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!
yeah, it's confirmed. This will be the next huge programming channel! Congrats for doing it full time!
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
Love it! Most helpful video out there. Nobody else shares this part of development so thank you!
Sounds good let’s get started, when I hear it I feel like everything is going to be easy. I Love what you doing !! ❤️
I've always wanted to thank you for the coding music playlist !! Love your content btw !
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.
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❤️
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.
🔥This is the exact type of content that helps to lower the barrier of entry into tech ❤️🚀🙌
I love your desk setup behind you. I never thought to setup laptops on the side of my main PC.
"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.
That sounds like a complete nightmare!
Thanks for this video, it's really good to see how people with a lot of experience works with a new challenge :)
can't wait for part 2! 🔥
The best coding youtuber ever! Thanks for this.
Your voice is just cleaning my soul everyday.
Your videos feels real, inspires me!
thats exactly the kind of video i was looking for.. i am learning js and dont know how to start making project
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.
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.
Love the editing style!
I was literally searching "how to plan build project" and showed up ❤️
Huge thank you, keep posting new projects!!!
It's really cool and more descriptive than mine. keep it up Jessica. 👏
Nice to see how open you are.. very refreshing.
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!!
Glad this video has been helpful for you!!
loving the playlist !
The three state note was very useful!
this is so well done. kudos to u!
I love your vids, please keep em coming! You'll get our support :)
Great video, can't w8 for the next part !!
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.
So glad this could help!
Also I’m fascinated that you find this outside your comfort zone; yet seem perfectly at home at what you are doing
Thanks for all your kind words!
Time to get unstuck, can't wait for this. You should make a video about SEO. Love from 🇿🇦🇿🇦🇿🇦
looking forward to learning with you.
I'm kinda glad that you use DDG and Firefox.
Excited😍
Congratulations! Well done video.
this is actuallly awesome video idea
Reminder set!
woohoo!!!
@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
Can't wait for it.😘😘
Great video. Gave me a good insight. Waiting for the next. Thank you ❤️
Love the content everytime ❤️
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
Awesome and helpful video!!! Please, make more of them!
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
Awesome! More of this!
My favourite UA-cam coder
Cant wait 🔥🔥🔥🔥🔥
I can't wait to see part 2
You Are My Favorite, Tech "Tube" hands Down ~
Keep It Coming, Sweetie~
One of the most meaningful (but probably not mean to be) things my teacher said last semester was "Start with what you DO know."
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.
This is the first Channel I hit a bell icon.
Reminder set.. ⏰
Waiting for your video as well as your course!!!
Can´t wait!!!
I love your smiling face. Thank you, my favorite teacher.
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.
Thank you for this video! It was very helpful and super insightful!!!✨❤️❤️❤️
Loving the thumbnail
Very helpful content! Thank you!
This was very cool. Thanks!
Here we go!!
Thank you. This helps me a lot.
Cool video ! More videos with reasearching staff please ))
Thank you Jessica. I am a web designer currently 1 month into learning web development because of your videos. I was trying to code one of the website that I designed before which include animations and it is very hard, indeed. Good lord I hated myself for making me go back and forth adjusting those key frames in CSS, I eventually gave up 😂 Now I finally understand why some developers always say “The designers’ dream are developers’ nightmare” 😭😂 I wish I could turn back the time and apologise to the developers who had to code my overly complicated websites back then 😂
But anyways , thank you Jessica, your video has once again inspired me to resume my little personal project, thank you, I couldn’t thank you enough 😂🙆🏻♀️💖
Haha things always look different from the other side right? 😂 When I was designing the website for my course I definitely got a new appreciation for the problems designers have to solve. That's awesome that you're learning web dev! Having both design and dev skills is super valuable 🔥
Time slows down whenever im excited about something. 😏
The best !!! 🙌