Building a Light/Dark Dashboard, Part 2

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

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

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...
*Note: at 1:26 I mistakenly said that you can't create a GitHub repo in a non-empty folder. I was thinking about how you can't clone into a non-empty folder. You can create a repo in any folder, whether it's empty or has files.
In this video you'll see me set up a real world website project in VS Code that uses Sass/SCSS, JS and Gulp. This is a series building a Frontend Mentor challenge from scratch.
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...
0:00 - Intro
1:02 - Create GitHub repository
2:44 - Set up files
6:26 - Set up Sass/SCSS files
39:40 - Loading JS script
41:47 - Set up Gulp workflow
____________________________
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 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 #website #project #sass #scss #gulp #vscode

Наука

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

9 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

I've never seen a more authentic look into the setup process. Your channel is a diamond in a haystack and I'm so glad I've found it. Thank you for all the effort you put into these videos. I can't wait for the next one.

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

Thanks so much!! I'm glad that these types of videos are helpful :)

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

This is my first video on this channel and I am blown away by how calming and how easily you explain everything. Thank you very much and wish all the best for your channel!

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

You can see Part 1 here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-iL4irerdGdU.html

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

your videos are on point and the editing is just next level. You should have at least a million subs :)

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

@@areeb7330 Thanks so much!

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

Honestly with the way you explain things, someone would want to learn programming, I have learnt a lot from you about breaking down concepts and trying to get the general idea about something before even typing a single line of code, this is something I didnt use to do before but now my mentality has changed

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

I was waiting for this! I definitely need to practice more front end stuff, and I've never worked with sass, it looks really powerful. Definitely looking forward to the third part

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

Sass is super awesome!! Thanks for watching!

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

@@TheCoderCoder hey do you have any videos on sas?, I've heard about it but idk what it is.

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

Thank you so much for this video. I'm starting front end dev and this tutorial on how to set up is awesome. I love the way you express yourself in the video, great job. Wish you all the best.

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

When I first created this Social Media Dashboard I did with no research, no project set up. I started coding right after downloading the start up files. Now I realize I was so naive. Thank you for this video.

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

I look forward to doing this project with you. This is the first page I follow step by step with a RU-vidr and I'm learning a lot. And I saw some videos of you programming and I love your organized way.

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

Thanks so much!! I'm glad my videos are helpful for you 😁

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

I can't wait for your Responsive Website From Scratch course.

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

Your videos are very professional and packed with a ton of useful information. This channel is a gem. Thank you for all your contribution!

@SlimBloodworth Год назад

Hi Jessica! I've been watching and learning from your videos for a couple of years now and yours is one of my top RU-vid channels to learn new things from (you, Kevin Powell, and Kyle from WebDev Simplified are my go to's for fun new projects and tips). This was my first time using gulp and I had to do A LOT of research and troubleshooting. I don't typically use PowerShell as much as I use Bash and there were a few updates as well as go back and correct some simple spelling errors that were bugging up the code. I was able ( with a bit of frustration naturally) to search and find solutions quickly, which gave me a good dose of confidence to see how you also went through searching for help and solutions! Thank you so much for devotion some of you time to helping others who are doing ti the self-taught way to learn!

@TheCoderCoder Год назад

Thanks so much for your nice message! I'm glad that my tutorials have been helpful for you!

@SchnippSchnappShnappi Год назад

This channel is an ocean of all the things I ❤️, thank you so much for all the hard work!

@uu-wl8gw 2 года назад

Oh boy I have been waiting for this so eagerly

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

I love the way you teach. I understand everything you say. Thanks. 😊

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

Thank you! 😃

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

Loved that "yay" in the end - I always does this too subconsciously 🙌

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

@@Personal-rc7cy yoo thanks for that! didn't realise the typo from auto-complete 🤣

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

Thank you, thank you, thank you for making coding videos for the attenionally challenged. ADD and the creative go hand-in-hand, and most coding content is tailored towards the engineering type.

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

I'm so glad that my videos are helpful for you!

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

This is such a great project set-up video.

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

Your voice is so amazing, I work on REST APIs, don't even know why I clicked on your video, but I'm glad that I did.

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

That was very helpful. Specially the gulp config part. Appreciated! :)

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

OH MY GOD IT WORKS !!! The thought that just two days ago I had no idea what all of this gulp gobbeldy goo was is nuts! I started this the other day and had to pause at the gulp task definition part. Took some time to get idea as to what npm even is and what every package/plugin does. And here we are now, everything is locked and loaded! I had to enable my Windows session to run scripts by setting the Exection Policy. I've also found one pesky chrome extension that was blocking my sourcemaps and disabled it. I resolved an error that was caused by incorrect file paths in my HTML. AND! I changed the default browser option in browser-sync to Firefox! The power! I can feel it !!! My journey has just begun but I can tell already that this is nooooot for people who get frustrated easily. So yeah, I'm taking a 5min break and heading into the next vid. Can't wait for you and Kevin Powell's courses to launch !!! THANK YOU SO MUCH!

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

Thanks for your kind words! So glad my videos can help you. Working hard to launch my course as soon as I can!

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

Wow I was looking for a design like this and I get it here... Thank you for doing this!!

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

This is my first time watching a video on your youtube channel, good content.

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

Great Video, thanks for giving an in-depth workflow walkthrough! PS: You can hit F2 inside VSCode to rename a particular file/folder ; ) Cheers

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

Very calming music.

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

Glad you like it!

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

I remember when i was trying to learn sass and i realized that i don't like sass. If i want to create something i can just use clear vanilla js. But i connot deny that sass helps you a lot sometimes especially if you are not good in javascript.

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

I am new to web dev but your videos motivates me a lot to do research and learn concept from it. Thank you

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

So glad my videos are helpful for you!

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

Thank you so much, I really appreciate your effort.

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

thank you so much, you don't know how much you are helping me !

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

Happy to hear that!

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

Hi Jessica! Commenting for the youtube algorithm!! Thanks for the great content.

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

new learnings every videos nice

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

Looking forward to it :)

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

Thanks!!

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

Amazing Content. I really enjoyed the video. I Will definitely recommend it to others.

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

Thank you for the videos. I LEARN ALOT.

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

Thanks for watching!

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

Best explanation ever 🙏.

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

Needed this!

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

Great video Jess. I believe parcel bundler might have eased the setup. Nevertheless this is such genuine content I loved it. Wishing you good luck

@Ale.M. 7 месяцев назад

Thanks for this useful content

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

Imagine Getting a Heart from Coder coder😌😌

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

holyy shitt I LOVEE THIS CHANNEL

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

Thank you!

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

love this channel !

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

Watching your vedios makes my day 😘

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

This series is amazing! The whole process to just start is so overwhelming as a beginner and every other tutorial, they just jump right into coding or rush through the set up. But no one shows us how and which files to set up, what to actually put into them (like the .gitignore) and so on. No research shown either. So you either feel stupid or unmotivated when you can't comprehend those tutorials. So thank you so much for the effort you put into this set up. Do you have a certain extension for your file items in VS Code?

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

So glad this is helpful for you! I have a theme for my file icons (Material Design), if that's what you were asking?

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

Yes, that was my question, thank you! ❤️

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

Video about naming and setting up colors the right way was cool. It is so a complicated topic.

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

Now i watched the full video :-) I don't understand the advantages of sass use and forward. Why not keeping it simple like before. I like Sass but this is annoying :-) But... great video and good to see your workflow.

@Nick-B78 2 года назад

@@groovebird812 I’d say you either didn’t watch the full video or maybe you just missed the bit when she explains that sass will be dropping the import function in the next couple of years so it’s best to start using the new terminology and stuff now

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

@@Nick-B78 You didn't read my answer i guess. It is only my opinion.

@Nick-B78 2 года назад

@@groovebird812 actually I DID read your message and nowhere did it say it was an opinion. You said “I don’t understand the advantages of sass use and forward. Why not keep it simple like before.” which would indicate that you didn’t catch the bit where she explained why she’s using it.

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

@@Nick-B78 This is too exhausting for me. You don't understand what i mean. cu

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

I am just starting to learn coding and I am interested in learning JS. Do you have tutorial for JS for beginners?!! I love how you break things down and organize them

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

Waiting ur student from india with Lots of love

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

Thank you!

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

You're amazing 👏🏽

@NERO-ez1mn 2 года назад

holy shit the size mixin is a DOPE

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

Mixins are the best 🔥

@2005bgva 2 года назад

Thanks for this video. One question: It is necesary to install all npm packages into "dependencies" or some of them are "dev dependencies"?

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

Love your content :) Please tell me the playlist played behind the video, love it

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

Awesome content! A new subscriber right here. RU-vid's algo lead me to this video because I was searching on how to add auto prefixer to css. I was so glad that it part of this set-up is the addition of autoprefixer; however, it doesn't seem to be actually doing what it's suppose to do. Care to elaborate a bit on that aspect? Thank you.

@naynay-xx7fm 11 месяцев назад

I really love your introduction. I have limited knowledge and was able to follow seamlessly until about halfway into the video. After that you seem to speed up a little bit. Maybe if you slowed down in the most technical parts of the video/sped up through the intro, it would be easier to follow.

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

Thanks for this video

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

Nice video! :D

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

THANK YOU!

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

Thank you for the great tut, when is part 3 coming up?

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

Working on it!

@AlineAysha Год назад

Hey Jessica, thanks for the video.. I'm learning a lot from you! I just got very stuck on the vulnerabilities that appeared while installing the tools.... I've got 6 high severity ones, and I have no idea how to fix it... I know you said you don't really know how to fix it yourself, but since the video is a year old I wonder if you have found out what was going wrong, or maybe know some path I can follow to find it myself, haha.. Thank you!!

@TheCoderCoder Год назад

You can try running "npm audit fix" to auto fix, altho it won't work for all packages. But if you're only using npm to compile files (like what I do in this video), not run the actual website or app, then you don't need to worry about it, since the vulnerabilities won't be exposed to hacking. Good luck!!

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

Have you tried tailwindcss for styleing? Would you try it and do a video?. It will be awesome to see how you approach it.

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

It's on my (very long) list for future videos! But I would def like to take a look at it 👍🏼

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

first comment i can't thank you enough for everything you do for us , love u 🙂

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

Thanks for the support!

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

@@TheCoderCoder you deserve all the support (:

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

Very nice Tutorial with excellent explanations. The only thing I would like to critizise is the use of "Down-Mediaquery-Breakpoints" ... using "@media min-width" is a strong indicator on a wrong structure. I tend to create my HTML-Structure and my stylings in such a way that I can avoid using down-breakpoints and I have noticed a much cleaner and smaller code base on larger projects.

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

I usually use min-width breakpoints, but occasionally I think it's fine to use max-width breakpoints when the mobile styles have additional rules. I just try to avoid using both for the same selector.

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

I actually dont understand it but it fun to watch real world job it look more complex than i though even though it just creating website

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

curious to know as to why you use gulp instead of parcel. I find parcel to be much simpler and requires no config.

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

What software's do you for screen annotation, magnification and cursor/cursor click highlighting?

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

Awesome tutorial. I have put this into my workflow and it is great. One thing I have to ask. One of the projects I am working on is to make a wordpress theme. How woudl I convert this gulp workflow to work with Wordpress? I love your file structure and everything and would like to keep it that way. Do you have any tips or do you have a wordpress gulp workflow?

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

What I do is to use the theme folder as if it is the project root, and create the scss folder there and run gulp from that directory. Then I make sure to load the final css file with the correct path. I'd like to make a more detailed video with setting this up at some point-- not sure quite when. But I hope this helps a bit!

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

waiting eagerly

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

PLS WHAT IS THE THEME AHSJAHGSJKAHSJKAH I LOVE IT

@RefuelTheRocket Год назад

hey. Can u say? I have to install all these packages on 46:00 every time i start new project, or i do this only one time?

@_moxy9905 Год назад

how this sass file structure wokrs with react? do we need to use gulp or something like this? also, can we use @use and @forward in react-app?

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

Ma'am what book do I have to refer to begin with the webdev. What would you prefer?

@MKSundaram Год назад

Do you have any other tutorial on light/dark (without sass) using html, css and js?

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

Never learned sass, so this was honestly tough for me to understand even though I watched the whole video. Sass seems intimidating, not gonna lie but hope to learn it soon. Any courses or videos you'd recommend for a beginner would be appreciated. Great tutorial nonetheless, I like how you try and explain what almost everyline does.

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

Give it a shot. I'd recommend checking out the SASS crash course (it's like ~20 minutes long) by "Dev Ed" ... he's a popular RU-vidr. That's how I got into it. Don't let it intimidate you, friend. Go in with a curious mindset, and it'll be alright. Promise 🤓 Best wishes!

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

Dev Ed is great! Also I highly recommend Kevin Powell, as he really gets into the details. I'm planning on releasing a Sass crash course in the near future as well, so hopefully that will help too :D

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

@Ozzy Explains and @Coder Coder thanks for the recommendations, will check them out

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

hi when you are in the colors section and in a front end mentor project you just search '- ' and replace it with '--' and also replace ')' with ');'

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

Sorry if it is said in the video, but im wondering - why would you use regular CSS variables when you have access to SCSS variables?

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

what's the background music around 12:45 Thanks coder coder!

@hamzarehman7057 4 месяца назад

Hey ! how do you integrated the github folder into your file explorer. (I'm a newbie)

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

26:08 Hey, Jessica You may put the mouse cursor before "dark" word, press Shift + Ctrl & select the same place to change all the lines at the same time instead of copy/past several times.

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

Thank you! I'll have to try that next time 🙂

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

@@TheCoderCoder You are welcome, keep it up anyway. ✌️

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

How to use (use and forward method in scss )

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

Is it only I who have this playing in the background while working on my own projects? Makes me feel as if I have a friend who codes *insertsademojihere*

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

Maam when will ur front end responsive course be launched

@alifares-boulos3088 2 года назад

When you clone a repo like this one for example, is there a quick npm command that can install all the dependencies from reading package.json? I did npm install but I don't get dart set up to transpile sass and I dont see the dart package in node_module. Might be a stupid question...

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

"npm install" should install everything you need. Also, Dart is now the default compiler for Sass, so it should get installed with Sass automatically. You shouldn't need to install it separately. Hope this helps!

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

I think "--ff-brand" or "--font-brand" might be better approach for naming the font variable instead of including the actual font name in variable because if you want to change the font to Montserrat in the future, the variable name "--font-inter" is no longer appropriate. I am watching this series to learn how to make light-dark theme, and thanks a lot for your effort

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

Hi, Jessica, I'm actually curious with what is your thought about putting "margin: 0", "padding:0", and "box-sizing: border-box" for global style -> *. ::before, ::after since I saw you set "box-sizing: border-box" in html and "margin: 0", "padding:0" in the body. Is that the best practice? Thanks in advance

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

Ah, so you would essentially be resetting every element and pseudo-element to 0 to remove browser defaults. That's a cool idea-- you would just have to manually add margin to elements that normally have them by default, like paragraph and headline tags. Interesting question tho! I should probably look into what common resets are. I think either way will work pretty well! Ultimately as long the website matches the design that's the most important thing 🙂

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

Great playlist! A question for anyone to answer regarding the pixel to rem function: *Is there a reason to use such a function over using a 10px root font size which makes pixel to rem calculations very easy as well?*

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

That's a great solution too!

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

New video nice 😁

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

Great!!!

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

Great video, would you start using Linux and CLI as a challenge?

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

Maybe in the future, but at the moment I don't use Linux much. It is very cool tho!

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

Greeting, may I know which javascript framework are you using?

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

I really like your RU-vid channel. 😍 .And I also want to become front end web developer 🙌

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

You can do it!

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

I like your vidoes ^ .^

@PicyPoe Год назад

31:54 How did you do that? h1, h2, h3 got auto newline 😱

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

I prefer my giant css file instead of all those sass files xD nice vid!

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

I'd recommend still minifying your file for pagespeed if you're building an actual website :) Even if it's marginal in actual performance improvement, lighthouse can ding you if it detects a raw file, and since that's a factor of search ranking now it's worth the small extra step!

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

@Elias Garcia, what would be the reason to prefer the giant CSS file? Just asking out of curiosity.

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

Let's Go.. 🔥🔥🔥🔥

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

35 vulnerabilities (1 low, 2 moderate, 28 high, 4 critical) Should I be bothered or not? Or should I just use npm audit fix --force ??

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

Hey Jessica, nice video, can you explain why you use css variables sintax instead of sass sintax? I think sass is more easy to use

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

CSS variables can be changed via JavaScript, which is key for the dark/light switching. Sass variables just compile to regular CSS and can't be changed via JS. Hope this helps!

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

@@TheCoderCoder ohhh i understand now, but if that not the case, you would use sass variable sintax ?

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

thanku

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

Is there any reason for you not to use a framework like Nextjs?

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

hi, can you explain to me why you don't use "_" in files like colors? because in that case they would be compiled.

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

I'm not sure exactly what you mean. The files will be compiled because they are all listed in the _index.scss file

@MKSundaram Год назад

@46:40 I am getting bunch of errors: like not found, '@babel/pres@*' is not in this registry. , etc... What could be the cause?

@RefuelTheRocket Год назад

if somebody will have same error, just check if every word u wrote is correct)

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

Guys what are the other good channel that are specific to front end dev like coder coder. I am not talking about channel that post mix videos. I am specially looking for the channel who is only post videos about front end.

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

What's the name of the background music 42:52 I like it :)