@@mirjalol_shamsiddinov 7 hrs is about 1 day of work, which is a pretty reasonable amount of time to build 1 webpage, from my work experience. Also, in addition to that, I make sure to take the time to explain all my thought processes and problem-solving. My goal isn't to just show you *what* I do so you just copy whatever I'm doing on screen, but *how* I do it-- that way you can learn and apply those principles in future projects. It does take longer, but I think it's worth it to be thorough. Hope this helps explain why it's this long!
This is awesome seeing you work through real world problems in real time and not running some canned presentation that has been de-bugged. Good job Jess and strong work.
Stayed all the way from start till the end and man what a great video, just wanted to see how a developer does all the hard work when they get stuck. Very useful to see your thought process and the solutions that you made using internet. Overall great 7 hours for my coding career.
This is absolute gold! I'm only an hour in, but THANK YOU for taking us through your thought process for investigation and breaking down the problem and project setup. So so so valuable.
As a PCB designer and C/C++ dev who only really works on WebGL/shaders when I get pulled into web projects, this was very useful for me to see how the other parts of a project are organised and compiled. My last actual web project where I added more than a canvas element in the html was over 10 years ago :)
The process is real, lol. I've been coding for about 6 years but since I've become used to frameworks I actually have to go back and review best practices for html and the like (I expect things to change, so I step back and learn again). This video is so refreshing :) And heads up to all the new coders out there - this process doesn't stop. Get used to always being a student in research mode (not a bad thing). Edit: I do her beginner thought process in Trello boards - maybe that's overkill? Having an in-project doc seems simpler...
I never understand Css , now that i watch this i begin to understand how css properties work, thanks Jessica i have learn alot from...Love from India😊😊
Just wanted to take a minute while being 2 hours into this project... (So far so good!) Just to thank you for putting in the time on making this project and this video. I just wish I could recommend a thing, but it's been perfect so far. I liked how you searched for things, explained the short hands. You've been such a blessing. Thank you so much. I hope you keep these up. You've been my favorite tutor, professional, coder, master... the list goes on and on. 🙌🏼❤
After working on it little by little every day I finally finished! Had a lot of fun and learned a lot on the way. Not the biggest fan of SCSS but always good to learn new things!
Starting out it looked really promising and she seems like a great mentor. When I started installing npm packages. Hell started. I Got 12 high vulnerability warnings. Some were depricated so i unfortunatley had to stop at that point after hours of debugging. This is rough on a beginner having to deal with all that before beeing able to code. Or in my case giving up on this tutorial.
i really like her real no nonsense way of teaching. shes really straight to the point and legit. i also really like the chill and relaxed style paired with the chill lofi music. super nice. too many tutorials hurt my ears and head just based on their style lol this one is chill tho. im an hour in and i really appreciate the slow pace as well. I don't know anything about web dev except what html, css, and javascript are. I've done game dev before tho. so the slow pace is really nice. i pause and look things up when she mentions things I dont understand
Awesome video. You demonstrated that it is okay to not know everything about a project. You did well at using the net to find credible solutions and not only copy and paste but study how each code works.
I am an hour in and as a newbie intermediate I really wish she just built it using normal css vs the large scale scss. Love how she teaches as she does things. Note to self: learn scss asap.
92 minutes in and she just finished the scss setup. Really wish she hit the project as a lower level coder would have. It was a beginner challenge wasnt it?
@@EricsWormPlayground Yeah, felt the same when I started. Fun for "beginners" what can I say? Either way, with a bit of troubleshooting and persistance, a "beginner" can get this done.
Thank you a lot - the most valuable thing in such a lesson that you can see real-time develpment process - to see different difficulties and how they are resolved. Not even so much the solutions themselves, but what their search looks like. It's just great! I'm just studying the frontend now, but let me make a couple of observations. Regarding the toggle - I rather percept it as a regular button (press to activate dark mode, and press to deactivate) - like a button on a flashlight. In the radiobutton case it must be two visible labels here without any options. And if its a button - the button label have to do the same work - activate/deactivate the dark mode - is the most logical behavior of this element on the page. So I implemented it this way - it could be a inside pushed outside by "position: relative" or it could be a for - that's simplier to stylize. In JS it seems to be better realization it you keep and pay attention whether the user has ever changed the color theme mannually or not: if yes - in the future we ignore the system settings, if not - we always follow the operating system. Also it seems for me that every card in the page should be not just , but rather a link - if it's hoverable - it's for sure clickable and also have to be navigated by tab (replacing by is a better decistion then inject "tabindex" into every div manually). Thanks again for such a valuable video tutorial!
In the gulp file where you are importing sass, write const sass = require('gulp-sass')(require('dart-sass')); instead of const sass = require(gulp-sass)(require('sass') then everything will work like you set up in the beginning, and no need to install sass and the math library
From the way i see it and am just a beginner, the more you know the more you make the solution and the idea of the project complicated... and that freaks me out, i watched only the first 22 minutes, lets see what my reaction would be after i watch more minutes or hours of it
i am at the 5:02:29 and being this far i think it would have been a bit easier if you wrap both section inside a single container so that it would be easy while developing and inside those section h2 tag and cards tag and other things. In addition to this border-top should have been done using pseudo element for all card not only for Instagram that way if again some card have gradient border-top then it can be easily managed as background with height can be used for gradient in pseudo element
I thoroughly enjoy watching informative videos that teach me how to approach and organize a project before beginning its construction. Your work is highly valued and appreciated. Thank you very much! 😊
It is preferable to simply set font-site to 62.5% of the default font size, which is 16 px, making 1 rem equivalent to 10 px. No further functions should be written.simply suggestions :D
That does work, but I wouldn't recommend it nowadays, as there are better alternatives out there. Search for Josh Comeau's article called "The Surprising Truth About Pixels and Accessibility" that talks about "The 62.5% trick". I highly recommend his blog 🔥
Amazing video. Nowhere near done yet but I’m sure will be a great template for the project I’m working on. More of a back-end dev so your approach with functions and mixins seems like a totally sensible approach to me.
I used your video to learn some stuff thank u. I found copying other HTML language and paste HTML language to the editor app on my phone. I lots more to learn.
Can u give a road map of graduating from CS ? Which topics are usually learn in this phase? Which skills and languages should we learn to complete on our own!?
@@aammssaamm bro the curriculum is available on online for every uni But how they are completing it, which books they are completing, which approach they are taking, how many projects Etc etc
I am starting it today, 30th, April 2023. @ 1528. Let's c how much it helps me .. I promise myself I will finish it and learn as much as I could .... See u at Finishing Line=====>>> Editing1: Now I understand why this video is for 7 hours. INCREDIBLE...!!!!!
Im new to this (about 6 weeks into a bootcamp) but im doign this in my free time and am new to gulp. I keep getting the following error: Error: File not found with singular glob: /Users/nickdaly/Documents/GitHub/Classwork/Fem-social-media-dashboard-dark-light-toggle/app/scss/style.css (if this was purposeful, use `allowEmpty` option) I believe its because my .scss isnt being turned into a .css by gulp-sass. The html will load if I put in a blank style.css manually at that destination so this is the only error in my code so far I can tell. I am at 2:10:35 as a reference. Thank you!
I can't tell without looking at your code itself, but if you're getting that error in Gulp, Gulp shouldn't be looking for the style.css file. It should load your main style.scss file and run it through the scssTask and generate the style.css file. Then you load the style.css file in your index.html file with the link tag. Hope this helps!
I remember the days like 10 years ago i used to code with notepad for fun not notepad+ :) I am back end developer now, i miss css html. I am not sure if SaSs still around for css? I used to work with that, amd bootstrap.
had fun trying out this project and understanding a developer's workflow. The resources introduced in this video will be surely helpful in the future. Thank you again @freeCodeCamp and @CoderCoder for the guide!
Great tutorial for beginners, myself being one😅, thanks a lot! I have a doubt though, you haven't considered users with their OS theme set to custom, instead of Light or Dark🤔.
HI! When doing the gulp function , it appears this: The following tasks did not complete: default, scssTask Did you forget to signal async completion? and I have literally the same gulp file. Can someboyd help me what is happening here? I am stuck at min 1:25:00
adding async solve the problem for the error msg, but not the error. The error was that in style.scss file inside scss folder I didn't write the correct snippet. Insted of using @use 'components'; I mispelled the word components. Good look
@@TheCoderCoder Thanks for your time and the excellent videos that you make ... I mean you can also use @media (min-width:$medium) but after thinking, it will be easier to read and type with mixin I should adequately use it in the next project ... and I would like to mention that the live sass compiler has a new version by Glenn Marks that accepts the forward and use methods but Gulp will do a great job too with other benefits of course
@@noureldin5611 oh I see, sorry, I misunderstood your initial message. Yes you could do normal media queries but having to interpolate the variables is slightly inconvenient ("#{$medium}"). Writing the mixin is faster, like you said. And yes, the Glenn Marks extension is excellent!
Thanks so much for working with me on this video course! Hope it's helpful to people :D
u are professional coder, why didnt u make it in atmost lets say with explanation in 2 hours, Why 7 hours for simple single page??
Been following your channel for a long time, so happy to see you hear!
@@mirjalol_shamsiddinov maybe teaching amateurs takes more time than doing on own.
@@mirjalol_shamsiddinov 7 hrs is about 1 day of work, which is a pretty reasonable amount of time to build 1 webpage, from my work experience. Also, in addition to that, I make sure to take the time to explain all my thought processes and problem-solving. My goal isn't to just show you *what* I do so you just copy whatever I'm doing on screen, but *how* I do it-- that way you can learn and apply those principles in future projects. It does take longer, but I think it's worth it to be thorough. Hope this helps explain why it's this long!
@@TheCoderCoder yes, cool. Now i got u
I have learned so much from you guys in college that i decided i was gonna donate a small amount once i start earning! Kudos😄
You did it. Good job.
So you got your job? Or freelancing?
Plain HTML, CSS and JS? What a breath of fresh air
Love seeing the actual process of googling and finding the right approach. Feels more immersive.
This is awesome seeing you work through real world problems in real time and not running some canned presentation that has been de-bugged. Good job Jess and strong work.
Stayed all the way from start till the end and man what a great video, just wanted to see how a developer does all the hard work when they get stuck. Very useful to see your thought process and the solutions that you made using internet. Overall great 7 hours for my coding career.
Awesome, glad this was helpful!
This is absolute gold! I'm only an hour in, but THANK YOU for taking us through your thought process for investigation and breaking down the problem and project setup. So so so valuable.
Glad this was helpful for you!
As a PCB designer and C/C++ dev who only really works on WebGL/shaders when I get pulled into web projects, this was very useful for me to see how the other parts of a project are organised and compiled. My last actual web project where I added more than a canvas element in the html was over 10 years ago :)
Which career is better now!? 😂
The process is real, lol.
I've been coding for about 6 years but since I've become used to frameworks I actually have to go back and review best practices for html and the like (I expect things to change, so I step back and learn again). This video is so refreshing :)
And heads up to all the new coders out there - this process doesn't stop. Get used to always being a student in research mode (not a bad thing).
Edit: I do her beginner thought process in Trello boards - maybe that's overkill? Having an in-project doc seems simpler...
When you work with frameworks, SDks you forget core code:) same happens to me. Hahahahahaha
I never understand Css , now that i watch this i begin to understand how css properties work, thanks Jessica i have learn alot from...Love from India😊😊
As a designer with html/css coding abilities, I benefit from her channel, this is another great video thank you Jess and freeCodeCamp!
Thanks so much for watching this and following my channel!
@@TheCoderCoder Thank you! 🎉
Coder Coder is such a good teacher😄
Thanks for watching!
Just wanted to take a minute while being 2 hours into this project... (So far so good!) Just to thank you for putting in the time on making this project and this video. I just wish I could recommend a thing, but it's been perfect so far. I liked how you searched for things, explained the short hands. You've been such a blessing. Thank you so much. I hope you keep these up. You've been my favorite tutor, professional, coder, master... the list goes on and on. 🙌🏼❤
After working on it little by little every day I finally finished! Had a lot of fun and learned a lot on the way. Not the biggest fan of SCSS but always good to learn new things!
Yeeiii, coder coder now I work as a programmer, since a year ago. Thanks for your videos!!❤
Congrats!!
The beautfy of this tutorial is the thought process and how it is in production(how devs actually operates).
Starting out it looked really promising and she seems like a great mentor. When I started installing npm packages. Hell started. I Got 12 high vulnerability warnings. Some were depricated so i unfortunatley had to stop at that point after hours of debugging. This is rough on a beginner having to deal with all that before beeing able to code. Or in my case giving up on this tutorial.
Made it the end! Great job Jessica! Enjoyed and learned: success.
i really like her real no nonsense way of teaching. shes really straight to the point and legit. i also really like the chill and relaxed style paired with the chill lofi music. super nice. too many tutorials hurt my ears and head just based on their style lol this one is chill tho. im an hour in and i really appreciate the slow pace as well. I don't know anything about web dev except what html, css, and javascript are. I've done game dev before tho. so the slow pace is really nice. i pause and look things up when she mentions things I dont understand
Awesome video. You demonstrated that it is okay to not know everything about a project. You did well at using the net to find credible solutions and not only copy and paste but study how each code works.
Jess is the best, I learn more from her than my teachers, I know about Git thanks to her
I am 10 minutes in and LOVE the format of troubleshooting a problem or request like this from the bottom up. Wow!
I am an hour in and as a newbie intermediate I really wish she just built it using normal css vs the large scale scss. Love how she teaches as she does things. Note to self: learn scss asap.
92 minutes in and she just finished the scss setup. Really wish she hit the project as a lower level coder would have. It was a beginner challenge wasnt it?
3.5 hours in, and I am pretty confident she used advanced large site management skills on a beginner single site page. It’s helpful seeing her methods
@@EricsWormPlayground Yeah, felt the same when I started. Fun for "beginners" what can I say? Either way, with a bit of troubleshooting and persistance, a "beginner" can get this done.
Whoa, feels good for jess to see her in this great channel ❤
There is actually a VScode extension that converts px to rem as you write css/scss. it's called: px to rem & rpx & vw (cssrem) by cipchk
Thank you a lot - the most valuable thing in such a lesson that you can see real-time develpment process - to see different difficulties and how they are resolved. Not even so much the solutions themselves, but what their search looks like. It's just great!
I'm just studying the frontend now, but let me make a couple of observations.
Regarding the toggle - I rather percept it as a regular button (press to activate dark mode, and press to deactivate) - like a button on a flashlight. In the radiobutton case it must be two visible labels here without any options. And if its a button - the button label have to do the same work - activate/deactivate the dark mode - is the most logical behavior of this element on the page. So I implemented it this way - it could be a inside pushed outside by "position: relative" or it could be a for - that's simplier to stylize.
In JS it seems to be better realization it you keep and pay attention whether the user has ever changed the color theme mannually or not: if yes - in the future we ignore the system settings, if not - we always follow the operating system.
Also it seems for me that every card in the page should be not just , but rather a link - if it's hoverable - it's for sure clickable and also have to be navigated by tab (replacing by is a better decistion then inject "tabindex" into every div manually).
Thanks again for such a valuable video tutorial!
You guys read minds now🥺🥺
Yeah, we read minds
In the gulp file where you are importing sass, write
const sass = require('gulp-sass')(require('dart-sass')); instead of
const sass = require(gulp-sass)(require('sass')
then everything will work like you set up in the beginning, and no need to install sass and the math library
Can you pls help with the error I get "ReferenceError: primordials is not defined" when I run gulp in the terminal?
I followed all the way - super helpful - thanks!
Another great course from Jess, thank you very much.
From the way i see it and am just a beginner, the more you know the more you make the solution and the idea of the project complicated... and that freaks me out, i watched only the first 22 minutes, lets see what my reaction would be after i watch more minutes or hours of it
Thanks!
I don't know why i feel drawn to you... You awesome.
In 15 minutes, I learned so much about the process of research and what resources can be helpful. Can't wait to finish this course, thank you!
thank you for doing this! I followed all the way, took 4 days, learned a lot!
Was searching for such a course yesterday. Thank you
i am at the 5:02:29 and being this far i think it would have been a bit easier if you wrap both section inside a single container so that it would be easy while developing and inside those section h2 tag and cards tag and other things. In addition to this border-top should have been done using pseudo element for all card not only for Instagram that way if again some card have gradient border-top then it can be easily managed as background with height can be used for gradient in pseudo element
Thanks so much for the lesson!, see you again today.
Such a wonderful teacher! You make coding very interesting. I’m now one of your subscribers.
Thank you so much.
I thoroughly enjoy watching informative videos that teach me how to approach and organize a project before beginning its construction. Your work is highly valued and appreciated. Thank you very much! 😊
It is preferable to simply set font-site to 62.5% of the default font size, which is 16 px, making 1 rem equivalent to 10 px. No further functions should be written.simply suggestions :D
That does work, but I wouldn't recommend it nowadays, as there are better alternatives out there. Search for Josh Comeau's article called "The Surprising Truth About Pixels and Accessibility" that talks about "The 62.5% trick". I highly recommend his blog 🔥
You guys are literally theee best!!!
A very interesting video about the creation of a website using HTML, CSS, and JavaScript, well explained. Congratulations!
Thanks for watching!
that was something I learned a lot from!!!
Thank you very much 💜💜💜
Your work is amazing your teaching approach incredible keep going, really appreciated your work
@TheCoderCoder you are back
love your content and sass Course
Thanks so much!
i was looking for an explanation like that for a long time
Amazing video. Nowhere near done yet but I’m sure will be a great template for the project I’m working on. More of a back-end dev so your approach with functions and mixins seems like a totally sensible approach to me.
❤️❤️❤️❤️❤️❤️ really enjoyed your class and the music... Thanks.. big fan
I used your video to learn some stuff thank u. I found copying other HTML language and paste HTML language to the editor app on my phone. I lots more to learn.
Can u give a road map of graduating from CS ? Which topics are usually learn in this phase?
Which skills and languages should we learn to complete on our own!?
If you cannot get even a curriculum from any college of university, then how are you going to manage your studying on your own?
@@aammssaamm bro the curriculum is available on online for every uni
But how they are completing it, which books they are completing, which approach they are taking, how many projects
Etc etc
@@s.m.2607 That's still just a google search task. You may want to look for a simpler career.
very helpful and easy to follow but this course is definitely not for beginners. Thank you :)
Nice job!
Best method of teaching 👍👍
Thanks for the great Tutorial, Jess and FCC ❤
I can’t wait to watch this. Ok I’m gonna go to bed so I can watch this
This course is great !!!!
Awesome course. Thanks a lot for it!
Thanks for watching!
Insane, thank you for your effort and you time !
Thanks so much for watching!
Love your teaching ❤❤
I like the dark-light toggle.
omg didn't expect her here
I'll definitely watch this one
Thank you again, freeCodeCamp!
Great job freecode 👍👍👍👍👍
Great tutorial ! I solved the gradient border of instagram card in much simpler way using border image without any pseudo elements
Thank you so much it was educational and also fun❤❤
Great video , many thanks for your effort 🙏💚
I would recommend to use the gap property for spacing div elements :) agree?
I am starting it today, 30th, April 2023. @ 1528. Let's c how much it helps me .. I promise myself I will finish it and learn as much as I could .... See u at Finishing Line=====>>>
Editing1: Now I understand why this video is for 7 hours. INCREDIBLE...!!!!!
You are so cute and sweet. thank you for having awareness and zooming in so we can actually see unlike everyone else
Thank you Great Content. Will you be Hooking up with backend API's next to make it fully functional?
the UI is crazy
Another marathon course 👍
really excellent thanks 👍
Hey if you rotate the toggle button I think this may help for dark mode
She made it on code camp finally
The background music is really distracting. Other than that, great work and thank you
Sounds like time to tune in and do this
Done. Thanks for the tutorial)
Times
- 1st time: 40:00 .
Im new to this (about 6 weeks into a bootcamp) but im doign this in my free time and am new to gulp.
I keep getting the following error: Error: File not found with singular glob: /Users/nickdaly/Documents/GitHub/Classwork/Fem-social-media-dashboard-dark-light-toggle/app/scss/style.css (if this was purposeful, use `allowEmpty` option)
I believe its because my .scss isnt being turned into a .css by gulp-sass. The html will load if I put in a blank style.css manually at that destination so this is the only error in my code so far I can tell. I am at 2:10:35 as a reference.
Thank you!
I can't tell without looking at your code itself, but if you're getting that error in Gulp, Gulp shouldn't be looking for the style.css file. It should load your main style.scss file and run it through the scssTask and generate the style.css file. Then you load the style.css file in your index.html file with the link tag. Hope this helps!
That makes sense! Thank you for the quick reply. Ill keep pushing through. and thank you for taking the time to make this video!
@@TheCoderCoder found the fix! when setting up my gulpfile i didnt include the src of the scssTask function. Thank you again!
@@nickdaly94 awesome, glad you were able to fix it!
Thought it would be a good practice building a website with js for a beginner I didn't know I need to learn Sass as well 😕 Appreciate the work though
I really need this thank you very much
I remember the days like 10 years ago i used to code with notepad for fun not notepad+ :)
I am back end developer now, i miss css html. I am not sure if SaSs still around for css? I used to work with that, amd bootstrap.
had fun trying out this project and understanding a developer's workflow. The resources introduced in this video will be surely helpful in the future. Thank you again @freeCodeCamp and @CoderCoder for the guide!
Coder coder!!! ❤
Great Video. Thank You..
This is amazing.
whats the theme called i love those colors
💓💓 loveable & learnable 💓💓
Great tutorial for beginners, myself being one😅, thanks a lot!
I have a doubt though, you haven't considered users with their OS theme set to custom, instead of Light or Dark🤔.
Excellent
am i the only one that i am getting this error after running gulp "ReferenceError: globalThis is not defined" at min 1:30:00
41:35 bookmark
HI! When doing the gulp function , it appears this:
The following tasks did not complete: default, scssTask
Did you forget to signal async completion?
and I have literally the same gulp file. Can someboyd help me what is happening here? I am stuck at min 1:25:00
Hello. I had the same problem. I put the word async before the function scssTask(). Like this: async function scssTask() {
adding async solve the problem for the error msg, but not the error. The error was that in style.scss file inside scss folder I didn't write the correct snippet. Insted of using @use 'components'; I mispelled the word components. Good look
Im quite experienced in JavaScript, but i Will love to refresh it with this video! :)
Developer: “No developer knows everything”
*ChatGpt has now entered the conversation*😂😂😂😂
cool video)
Looking at words so long they look wrong is something that happens to me ALL THE TIME at my job 🤣
Do I have to take this course after Dave Gray's Html and Css?
44:01 i did not get it why u just didn't go for variables $largre ,$small ..etc and just do normal media query ?
cos I'm lazy and it's easier to remember "medium" than "63.975em" 😅 Also helps ensure consistency in media queries
@@TheCoderCoder Thanks for your time and the excellent videos that you make ... I mean you can also use @media (min-width:$medium) but after thinking, it will be easier
to read and type with mixin I should adequately use it in the next project ... and I would like to mention that the live sass compiler has a new version by Glenn Marks that accepts the forward and use methods but Gulp will do a great job too with other benefits of course
@@noureldin5611 oh I see, sorry, I misunderstood your initial message. Yes you could do normal media queries but having to interpolate the variables is slightly inconvenient ("#{$medium}"). Writing the mixin is faster, like you said. And yes, the Glenn Marks extension is excellent!