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:

⭐️ 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

--

[TheCoderCoder]

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

[ashwatirao]

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😄

[bryanlittle]

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.

[joelwalkley]

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.

[so_val]

Love seeing the actual process of googling and finding the right approach. Feels more immersive.

[danielleivy]

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

[durwankurnaik]

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.

[illegalsmirf]

Plain HTML, CSS and JS? What a breath of fresh air

[Stabby]

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 :)

[AkinsRealm]

As a designer with html/css coding abilities, I benefit from her channel, this is another great video thank you Jess and freeCodeCamp!

[vkimi_reang]

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

[kylecollie]

Made it the end! Great job Jessica! Enjoyed and learned: success.

[keithrincon]

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. 🙌🏼❤

[luissalazar]

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!

[MichaelHoumann]

In the gulp file where you are importing sass, write
const sass = instead of
const sass =
then everything will work like you set up in the beginning, and no need to install sass and the math library

[blasm]

Yeeiii, coder coder now I work as a programmer, since a year ago. Thanks for your videos!!❤

[maxfintora]

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

[mustafawael]

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

[JonasNorw]

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.

[solaraproject]

The beautfy of this tutorial is the thought process and how it is in production(how devs actually operates).