Improve your skills in JavaScript, HTML, and CSS by building a social media dashboard with a dark/light theme. Jess, who runs the popular Coder Coder YouTube channel, will guide you through a beginner Frontend Mentor challenge.
✏️ Course created by @TheCoderCoder
Resources:
🔗 Responsive Design for Beginners! https://coder-coder.com/responsive/
🔗 Source code on GitHub: https://github.com/thecodercoder/fem-dklt-toggle
🔗 Challenge on Frontend Mentor: https://www.frontendmentor.io/challenges/social-media-dashboard-with-theme-switcher-6oY8ozp_H
🔗 Andy Bell: Create a user controlled dark or light mode — https://piccalil.li/tutorial/create-a-user-controlled-dark-or-light-mode/
⭐️ Contents ⭐️
Part 1
⌨️ (0:00:00) Intro
⌨️ (0:01:26) Functional requirements of design
⌨️ (0:11:31) Accessible form controls
⌨️ (0:15:37) Update CSS custom properties with JS
⌨️ (0:23:39) Screen reader-only text
Part 2
⌨️ (0:29:10) Creating GitHub repo
⌨️ (0:34:33) Set up SCSS and JS files
⌨️ (1:09:55) Set up Gulp workflow
Part 3
⌨️ (1:31:24) Studying the design
⌨️ (1:37:10) Building out the top bar
⌨️ (1:51:42) Using accessible markup
⌨️ (2:04:55) Styling top bar
⌨️ (2:23:26) Styling toggle and make accessible
Part 4
⌨️ (3:24:56) What is BEM? Planning out the class names
⌨️ (3:36:46) Adding the markup and the SCSS selectors for the cards
⌨️ (3:47:30) Styles for card
⌨️ (4:16:41) Layout for the card grid with flexbox, then CSS grid
⌨️ (4:33:26) Styling the top bars on the cards
⌨️ (4:49:36) Bottom cards markup and styles
Part 5
⌨️ (5:33:54) Changing the toggle based on comments
⌨️ (5:54:42) Use system preferences to load light or dark theme
⌨️ (6:18:24) Build the toggle logic to manually change light/dark theme
⌨️ (6:43:34) Save toggle settings in local storage
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
source
Thanks so much for working with me on this video course! Hope it's helpful to people 😀
well done girl..
Thanks so much for the lesson!, see you again today.
anyone getting this error below when trying to run gulp command?
ReferenceError: primordials is not defined
at fs.js:27:26
at req_ (D:Javascriptfem-dklt-togglenode_modulesnativesindex.js:143:24)
at Object.req [as require] (D:Javascriptfem-dklt-togglenode_modulesnativesindex.js:55:10)
at Object.<anonymous> (D:Javascriptfem-dklt-togglenode_modulesvinyl-fsnode_modulesgraceful-fsfs.js:1:37)
at Module._compile (internal/modules/cjs/loader.js:936:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
at Module.load (internal/modules/cjs/loader.js:790:32)
at Function.Module._load (internal/modules/cjs/loader.js:703:12)
at Module.require (internal/modules/cjs/loader.js:830:19)
at require (internal/modules/cjs/helpers.js:68:18)
Thank you! Very informational vid. Just one question if anyone in the comments knows the answer. When I open the github repository in vsc I dont get the .gitatributes file??? Am I missing something. I installed git too.
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 😀
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!
Your work is amazing your teaching approach incredible keep going, really appreciated your work
The music makes it impossible for me to watch. Why do even add music to this? Can feecodecamp upload this without the music?
2
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=====>>>
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
Great Video. Thank You..
Such a wonderful teacher! You make coding very interesting. I’m now one of your subscribers.
Thank you so much.
JS bothers me greatly, I know coding is not about memorising code but it does help 😂
Thank you Great Content. Will you be Hooking up with backend API's next to make it fully functional?
cool
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.
Thank you again, freeCodeCamp!
I want to open my blogging website where I put ads and also use it for affiliate marketing. Should I build website? I want full control on my website. Plz answer and if you have any other suggestions plz reply in comment box
Smriti madhana lite.
Thark you i lke this video.
Hey if you rotate the toggle button I think this may help for dark mode
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! 😊
In Github, you havent posted the Design and Dist folder.
❤️❤️❤️❤️❤️❤️ really enjoyed your class and the music… Thanks.. big fan
Another great course from Jess, thank you very much.
Not gonna lie, I came to hear Jess'voice as she explains this stuff.
gulp uh oh 😅
44:01 i did not get it why u just didn't go for variables $largre ,$small ..etc and just do normal media query ?
i was looking for an explanation like that for a long time
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😄
This course is great !!!!
Hello fcc, thank for best computer science courses. I am wondering about space exploration courses with computer science? Do you have plan about that?
Is gulp still alive? :O
Awesome
She looks similar to smriti madhana
You guys are literally theee best!!!
Who needs to learn to code when AI will do it for you.
Stop wasting time when you learn how to code X by hands
She made it on code camp finally
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!?
Solo he visto 30 minutos y he aprendido bastante. Muy buen video, seguiré viéndolo cuando tenga el tiempo 🙂
goof for a beginner
I really need this thank you very much
Awesome course. Thanks a lot for it!