Build a Simple Website with HTML, CSS, JavaScript – Course for Beginners



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

This Post Has 46 Comments

  1. Coder Coder

    Thanks so much for working with me on this video course! Hope it's helpful to people 😀

  2. Lee Yi Hao

    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)

  3. Mario Fero

    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.

  4. Jano Kakashvili

    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 😀

  5. Nick Daly

    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!

  6. Your work is amazing your teaching approach incredible keep going, really appreciated your work

  7. jellycoding

    The music makes it impossible for me to watch. Why do even add music to this? Can feecodecamp upload this without the music?

  8. Krishna Sharma

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

  9. fly199-c

    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

  10. Emmanuel Binen

    Such a wonderful teacher! You make coding very interesting. I’m now one of your subscribers.
    Thank you so much.

  11. Jeremy Horne

    JS bothers me greatly, I know coding is not about memorising code but it does help 😂

  12. Ray Turner

    Thank you Great Content. Will you be Hooking up with backend API's next to make it fully functional?

  13. Durwankur Naik

    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.

  14. Rajbeer Singh

    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

  15. A. Majid Awan

    Hey if you rotate the toggle button I think this may help for dark mode

  16. Mustafa Wael

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

  17. Umeh Moses

    ❤️❤️❤️❤️❤️❤️ really enjoyed your class and the music… Thanks.. big fan

  18. Abey Twabey

    Not gonna lie, I came to hear Jess'voice as she explains this stuff.

  19. nour eldin

    44:01 i did not get it why u just didn't go for variables $largre ,$small ..etc and just do normal media query ?

  20. islam he

    i was looking for an explanation like that for a long time

  21. Ashwati Rao

    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😄

  22. Ko Ko Aung

    Hello fcc, thank for best computer science courses. I am wondering about space exploration courses with computer science? Do you have plan about that?

  23. GoAdr

    She looks similar to smriti madhana

  24. Mr. Big Dick

    Who needs to learn to code when AI will do it for you.

  25. S.M.

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

  26. Orsted Sz

    Solo he visto 30 minutos y he aprendido bastante. Muy buen video, seguiré viéndolo cuando tenga el tiempo 🙂

Leave a Reply