Building a Light/Dark Dashboard, Part 2

🔥 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

[@keithanphilander3630]

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]

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

[@mohitbhavsar9318]

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!

[@yahayaoyinkansola8258]

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]

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]

Sass is super awesome!! Thanks for watching!

[@christianevillaroel2267]

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

[@tonybp]

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

[@likojhyu]

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]

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.

[@TheCoderCoder]

You can see Part 1 here: kzbin.info/www/bejne/n32XmqWbp8l6mrc

[@areeb7330]

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

[@TheCoderCoder]

@@areeb7330 Thanks so much!

[@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 KZbin 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!

[@brNoMundo123]

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

[@TheCoderCoder]

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

[@xfuie]

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

[@xfuie]

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

[@uu-wl8gw]

Oh boy I have been waiting for this so eagerly

[@asadmoosvi]

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

[@SchnippSchnappShnappi]

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

[@aycanogut5556]

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

[@archiem6323]

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

[@TheCoderCoder]

Thank you! 😃

[@vinaykotturi1283]

This is such a great project set-up video.

[@sissodiya_]

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.

[@joshualevan]

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]

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

[@SadDamniT]

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

[@jekkt7227]

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

[@judyminjichoi575]

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

[@codito7388]

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.

[@victorramirez784]

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

[@chai112mno]

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

[@TheCoderCoder]

So glad my videos are helpful for you!

[@ayoubahabchane]

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]

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

[@mortkebab2849]

Very calming music.

[@TheCoderCoder]

Glad you like it!

[@groovebird812]

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

[@groovebird812]

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]

@@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]

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

[@Nick-B78]

@@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]

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

[@serveshchaturvedi2034]

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

[@Arabian_Epileptic]

Looking forward to it :)

[@TheCoderCoder]

Thanks!!

[@daizwap9454]

Thank you so much, I really appreciate your effort.

[@tiago7063]

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

[@TheCoderCoder]

Happy to hear that!

[@plashless3406]

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

[@sammojit7058]

Needed this!

[@kaktuslion9896]

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]

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]

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

[@CharlesSmall]

Thank you for the videos. I LEARN ALOT.

[@TheCoderCoder]

Thanks for watching!

[@zeusanareta67]

new learnings every videos nice

[@sammedriano9607]

Awesome content! A new subscriber right here. KZbin'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.

[@jasonmase8860]

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

[@sachin_dev]

Best explanation ever 🙏.

[@NERO-ez1mn]

holy shit the size mixin is a DOPE

[@TheCoderCoder]

Mixins are the best 🔥

[@julopicard3358]

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

[@naynay-xx7fm]

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.

[@revvnijaa4177]

Waiting ur student from india with Lots of love

[@Ale.M.]

Thanks for this useful content

[@Knards]

Thank you!

[@bilalhussain3132]

You're amazing 👏🏽

[@2005bgva]

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

[@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!!

[@omkarrekulwar304]

Watching your vedios makes my day 😘

[@alexm5363]

THANK YOU!

[@rajdipshah9225]

holyy shitt I LOVEE THIS CHANNEL

[@TheCoderCoder]

Thank you!

[@MourideGoor]

love this channel !

[@vaniad555]

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

[@TheCoderCoder]

Working on it!

[@shoisyellow8435]

PLS WHAT IS THE THEME AHSJAHGSJKAHSJKAH I LOVE IT

[@markojozic3944]

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]

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.

[@ngoako]

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]

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 KZbinr. 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]

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]

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

[@anshulsingh1265]

Imagine Getting a Heart from Coder coder😌😌

[@redaawwad3544]

Thanks for this video

[@NitinVarmaManthena]

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

[@VinceM1000]

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]

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!

[@yanaunghein3900]

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

[@srnatilla3005]

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]

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

[@_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?

[@ShadiMuhammad]

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]

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

[@ShadiMuhammad]

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

[@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?

[@codewithcaptainx3687]

waiting eagerly

[@pythonwolf3817]

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

[@TheCoderCoder]

Thanks for the support!

[@pythonwolf3817]

@@TheCoderCoder you deserve all the support (:

[@suryanarayanandv2753]

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

[@justshukri9407]

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]

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

[@michaelextreme6357]

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

[@TheCoderCoder]

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

[@irvagui]

Nice video! :D

[@FreezeMageZ]

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

[@MKSundaram]

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

[@anshulsingh1265]

Let's Go.. 🔥🔥🔥🔥

[@lokwa2149]

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]

That's a great solution too!

[@alifares-boulos3088]

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]

"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!

[@kaunghtet217]

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

[@eliasgarcia1146]

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

[@jessicastevens6102]

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]

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

[@Myszko3321]

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?

[@kaiusvillanueva8515]

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]

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]

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

[@praneethsaikumartondepu6974]

Maam when will ur front end responsive course be launched

[@pushpakrai5303]

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

[@TheCoderCoder]

You can do it!

[@faraaiden1180]

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]

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 🙂

[@hamzarehman7057]

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

[@_buffer]

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*

[@pixelkiller67]

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 ');'

[@hl7297]

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

[@anirudhani115]

How to use (use and forward method in scss )

[@iamtrazed]

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 ??

[@PicyPoe]

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

[@haziqanuar01]

New video nice 😁

[@vaibhavudande9837]

thanku

[@bryanportillo9772]

Great!!!

[@nareyeth2164]

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

[@isaniovitor7480]

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

[@TheCoderCoder]

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

[@Phoenix-Light]

hey, amazing video, but one question. when i did npm install all the packages you installed, i had WARN and deprecated next to a lot of things, is that normal? and 3 vulnerabilities, and messages saying upgrade and i will break node 14+ or something. any help would be appreciated :)

[@Phoenix-Light]

i checked the video again, and it's the same for you. but still can you explain it a little bit to me ? Thank you

[@Phoenix-Light]

i will leave the comments just in case anyone else was looking for the same answer :)

[@TheCoderCoder]

Yeah, that is kinda normal. Unfortunately when we use other packages we're kind of reliant on package authors on keeping things up to date and secure. But usually I don't really worry about it for compiling SCSS/JS because I'm not using the packages to actually run the website, so it should be somewhat safe to use.

[@muhammedhac5718]

what is the shortcut in the video: 1:02:19 ?

[@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)