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 KZread channel, will guide you through a beginner Frontend Mentor challenge.
✏️ Course created by @TheCoderCoder
Resources:
🔗 Responsive Design for Beginners! coder-coder.com/responsive/
🔗 Source code on GitHub: github.com/thecodercoder/fem-...
🔗 Challenge on Frontend Mentor: www.frontendmentor.io/challen...
🔗 Andy Bell: Create a user controlled dark or light mode -- piccalil.li/tutorial/create-a...
⭐️ 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: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

Пікірлер: 334

  • @TheCoderCoder
    @TheCoderCoder Жыл бұрын

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

  • @mirjalol_shamsiddinov

    @mirjalol_shamsiddinov

    Жыл бұрын

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

  • @sidenote1459

    @sidenote1459

    Жыл бұрын

    Been following your channel for a long time, so happy to see you hear!

  • @vardhan8741

    @vardhan8741

    Жыл бұрын

    @@mirjalol_shamsiddinov maybe teaching amateurs takes more time than doing on own.

  • @TheCoderCoder

    @TheCoderCoder

    Жыл бұрын

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

  • @mirjalol_shamsiddinov

    @mirjalol_shamsiddinov

    Жыл бұрын

    @@TheCoderCoder yes, cool. Now i got u

  • @ashwatirao3036
    @ashwatirao3036 Жыл бұрын

    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😄

  • @abhisheksingh-np8yi

    @abhisheksingh-np8yi

    Жыл бұрын

    You did it. Good job.

  • @bryanlittle4647
    @bryanlittle46479 ай бұрын

    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.

  • @so_val
    @so_val Жыл бұрын

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

  • @danielleivy8180
    @danielleivy8180 Жыл бұрын

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

  • @Kosseron

    @Kosseron

    5 ай бұрын

    When you work with frameworks, SDks you forget core code:) same happens to me. Hahahahahaha

  • @mustafawael8617
    @mustafawael8617 Жыл бұрын

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

  • @Stabby666
    @Stabby666 Жыл бұрын

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

  • @haiangtran2036

    @haiangtran2036

    9 ай бұрын

    Which career is better now!? 😂

  • @joelwalkley3902
    @joelwalkley3902 Жыл бұрын

    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.

  • @TheCoderCoder

    @TheCoderCoder

    Жыл бұрын

    Glad this was helpful for you!

  • @illegalsmirf
    @illegalsmirf Жыл бұрын

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

  • @luissalazar8996
    @luissalazar8996 Жыл бұрын

    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!

  • @keithrincon
    @keithrincon4 ай бұрын

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

  • @bonsaipropaganda
    @bonsaipropaganda10 ай бұрын

    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

  • @vkimi_reang
    @vkimi_reang4 ай бұрын

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

  • @durwankurnaik1471
    @durwankurnaik1471 Жыл бұрын

    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.

  • @TheCoderCoder

    @TheCoderCoder

    Жыл бұрын

    Awesome, glad this was helpful!

  • @mahad7966
    @mahad7966 Жыл бұрын

    Coder Coder is such a good teacher😄

  • @TheCoderCoder

    @TheCoderCoder

    Жыл бұрын

    Thanks for watching!

  • @AkinsRealm
    @AkinsRealm Жыл бұрын

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

  • @TheCoderCoder

    @TheCoderCoder

    Жыл бұрын

    Thanks so much for watching this and following my channel!

  • @AkinsRealm

    @AkinsRealm

    Жыл бұрын

    @@TheCoderCoder Thank you! 🎉

  • @Salano_Lolkirik
    @Salano_Lolkirik Жыл бұрын

    You guys read minds now🥺🥺

  • @Kidoshe_Amikuranyakish

    @Kidoshe_Amikuranyakish

    Жыл бұрын

    Yeah, we read minds

  • @emmanuelbinen6554
    @emmanuelbinen6554 Жыл бұрын

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

  • @user-kr9bc6tu8w
    @user-kr9bc6tu8w Жыл бұрын

    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!

  • @alexchinchay7600
    @alexchinchay7600 Жыл бұрын

    Another great course from Jess, thank you very much.

  • @kylecollie7813
    @kylecollie7813 Жыл бұрын

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

  • @KrishnaNinama
    @KrishnaNinama Жыл бұрын

    Was searching for such a course yesterday. Thank you

  • @twistedmetal7882
    @twistedmetal7882 Жыл бұрын

    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

  • @solaraproject3614
    @solaraproject36147 ай бұрын

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

  • @gabrielgomesmabiala6707
    @gabrielgomesmabiala6707 Жыл бұрын

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

  • @stnhld2841
    @stnhld28418 ай бұрын

    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.

  • Жыл бұрын

    A very interesting video about the creation of a website using HTML, CSS, and JavaScript, well explained. Congratulations!

  • @TheCoderCoder

    @TheCoderCoder

    Жыл бұрын

    Thanks for watching!

  • @El_Bartto
    @El_Bartto Жыл бұрын

    Jess is the best, I learn more from her than my teachers, I know about Git thanks to her

  • @blasm1713
    @blasm1713 Жыл бұрын

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

  • @TheCoderCoder

    @TheCoderCoder

    Жыл бұрын

    Congrats!!

  • @nigelbowie9957
    @nigelbowie99572 ай бұрын

    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.

  • @raviteja9298
    @raviteja92985 ай бұрын

    thank you for doing this! I followed all the way, took 4 days, learned a lot!

  • @johnnymoore948
    @johnnymoore948 Жыл бұрын

    Awesome course. Thanks a lot for it!

  • @TheCoderCoder

    @TheCoderCoder

    Жыл бұрын

    Thanks for watching!

  • @feranmiadegbola2921
    @feranmiadegbola2921 Жыл бұрын

    Love your teaching ❤❤

  • @jayeshlale1999
    @jayeshlale1999 Жыл бұрын

    Whoa, feels good for jess to see her in this great channel ❤

  • @EricsWormPlayground
    @EricsWormPlayground25 күн бұрын

    I am 10 minutes in and LOVE the format of troubleshooting a problem or request like this from the bottom up. Wow!

  • @EricsWormPlayground

    @EricsWormPlayground

    24 күн бұрын

    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.

  • @EricsWormPlayground

    @EricsWormPlayground

    23 күн бұрын

    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

    @EricsWormPlayground

    22 күн бұрын

    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

  • @MichaelHoumann
    @MichaelHoumann10 ай бұрын

    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

  • @CamaguNcoso

    @CamaguNcoso

    5 ай бұрын

    Can you pls help with the error I get "ReferenceError: primordials is not defined" when I run gulp in the terminal?

  • @Qasimyousaf-zw5kw
    @Qasimyousaf-zw5kw Жыл бұрын

    Best method of teaching 👍👍

  • @rbedson8965
    @rbedson8965 Жыл бұрын

    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

  • @geeboug
    @geeboug3 ай бұрын

    I followed all the way - super helpful - thanks!

  • @NkosiLion
    @NkosiLion3 ай бұрын

    thanks for sharing! it was refreshing to watch you process. cheers

  • @maxfrischdev
    @maxfrischdev Жыл бұрын

    Thanks for the great Tutorial, Jess and FCC ❤

  • @metalheadgamers6376
    @metalheadgamers6376 Жыл бұрын

    You guys are literally theee best!!!

  • @fuesto
    @fuesto Жыл бұрын

    Insane, thank you for your effort and you time !

  • @TheCoderCoder

    @TheCoderCoder

    Жыл бұрын

    Thanks so much for watching!

  • @AhmadMaartmesrini
    @AhmadMaartmesrini4 ай бұрын

    that was something I learned a lot from!!! Thank you very much 💜💜💜

  • @mohammedmohammedhassanseli1981
    @mohammedmohammedhassanseli1981 Жыл бұрын

    really excellent thanks 👍

  • @hamzaalbabeli5543
    @hamzaalbabeli5543 Жыл бұрын

    I really need this thank you very much

  • @islamhe530
    @islamhe530 Жыл бұрын

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

  • @grotsunfull
    @grotsunfull Жыл бұрын

    Nice job!

  • @zakuguriin4521
    @zakuguriin45213 ай бұрын

    Looking at words so long they look wrong is something that happens to me ALL THE TIME at my job 🤣

  • @umehmoses8118
    @umehmoses8118 Жыл бұрын

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

  • @pirlaikz
    @pirlaikz20 күн бұрын

    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.

  • @naweendanushka3358
    @naweendanushka33586 ай бұрын

    Great video , many thanks for your effort 🙏💚

  • @maxfintora3634
    @maxfintora363410 күн бұрын

    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

  • @BorisDiRocco
    @BorisDiRocco Жыл бұрын

    Thanks so much for the lesson!, see you again today.

  • @ridingcoach3712
    @ridingcoach3712 Жыл бұрын

    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!

  • @mukeshodhano4094
    @mukeshodhano4094 Жыл бұрын

    @TheCoderCoder you are back love your content and sass Course

  • @TheCoderCoder

    @TheCoderCoder

    Жыл бұрын

    Thanks so much!

  • @serignembackecoly5916
    @serignembackecoly5916 Жыл бұрын

    This course is great !!!!

  • @kumarsanjay95
    @kumarsanjay95 Жыл бұрын

    💓💓 loveable & learnable 💓💓

  • @defo-codeakata
    @defo-codeakata Жыл бұрын

    This is amazing.

  • @devdev513
    @devdev513 Жыл бұрын

    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

  • @TheCoderCoder

    @TheCoderCoder

    Жыл бұрын

    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 🔥

  • @manelslama4743
    @manelslama47435 ай бұрын

    Thank you so much it was educational and also fun❤❤

  • @RahulKumar-md5ml
    @RahulKumar-md5ml Жыл бұрын

    Great job freecode 👍👍👍👍👍

  • @hue_sane
    @hue_sane Жыл бұрын

    Another marathon course 👍

  • @Mariio-
    @Mariio- Жыл бұрын

    Excellent

  • @dancingstar1852
    @dancingstar1852 Жыл бұрын

    Done. Thanks for the tutorial)

  • @shahsuresh75
    @shahsuresh75 Жыл бұрын

    Great Video. Thank You..

  • @sounmanhong6601
    @sounmanhong6601 Жыл бұрын

    Thank you again, freeCodeCamp!

  • @rayturner1490
    @rayturner1490 Жыл бұрын

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

  • @chipmasteri93
    @chipmasteri937 ай бұрын

    Thanks!

  • @xxxTentacion-UI8
    @xxxTentacion-UI8 Жыл бұрын

    My fav cod coder🎉🎉❤

  • @cbbcbb6803
    @cbbcbb68034 ай бұрын

    I like the dark-light toggle.

  • @rinzler749
    @rinzler749 Жыл бұрын

    omg didn't expect her here I'll definitely watch this one

  • @pranshulgupta7514
    @pranshulgupta7514 Жыл бұрын

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

  • @s.m.2607
    @s.m.2607 Жыл бұрын

    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

    @aammssaamm

    Жыл бұрын

    If you cannot get even a curriculum from any college of university, then how are you going to manage your studying on your own?

  • @s.m.2607

    @s.m.2607

    Жыл бұрын

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

  • @aammssaamm

    @aammssaamm

    Жыл бұрын

    @@s.m.2607 That's still just a google search task. You may want to look for a simpler career.

  • @abhirajsinha3186
    @abhirajsinha318611 ай бұрын

    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!

  • @esraaabuallah
    @esraaabuallah2 ай бұрын

    Great tutorial ! I solved the gradient border of instagram card in much simpler way using border image without any pseudo elements

  • @a.majidawan5974
    @a.majidawan5974 Жыл бұрын

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

  • @Gc7788m
    @Gc7788m11 ай бұрын

    Thanks so much

  • @CharlesSmall
    @CharlesSmall Жыл бұрын

    Thark you i lke this video.

  • @fudgeebear03
    @fudgeebear03 Жыл бұрын

    I need this rn and it's pop 🎉😮

  • @bonsaipropaganda
    @bonsaipropaganda10 ай бұрын

    I can’t wait to watch this. Ok I’m gonna go to bed so I can watch this

  • @KrishnaSharma-tk4qr
    @KrishnaSharma-tk4qr Жыл бұрын

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

  • @kokoaung2914
    @kokoaung2914 Жыл бұрын

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

  • @Irusssha
    @Irusssha Жыл бұрын

    Thank you for the course! Although I got stuck while installing pachages: 9 packages required funding and I got an error : UnauthorizedAcces while running gulp. Do we have to contribute to all the sources? Thank you!

  • @surajkumarsingh4857
    @surajkumarsingh4857 Жыл бұрын

    Awesome

  • @stride0812
    @stride0812 Жыл бұрын

    She made it on code camp finally

  • @Dontgo5
    @Dontgo5 Жыл бұрын

    You are so cute and sweet. thank you for having awareness and zooming in so we can actually see unlike everyone else

  • @jakubfrei3757
    @jakubfrei3757 Жыл бұрын

    Im quite experienced in JavaScript, but i Will love to refresh it with this video! :)

  • @xstrikerxdr6177
    @xstrikerxdr617710 ай бұрын

    I would recommend to use the gap property for spacing div elements :) agree?

  • @LoL-hv6px
    @LoL-hv6px Жыл бұрын

    the UI is crazy

  • @TheDTVOfficial
    @TheDTVOfficial Жыл бұрын

    Coder coder!!! ❤

  • @abigbiscuit
    @abigbiscuit Жыл бұрын

    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.

  • @guy1407
    @guy1407 Жыл бұрын

    Hello and thanks for the demo. Current status of npm issue is: 11 vulnerabilities (3 high, 8 critical) What can we do with it now?

  • @wellumm
    @wellumm10 ай бұрын

    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

  • @palazzoneguiseppe8281
    @palazzoneguiseppe8281 Жыл бұрын

    Hello, what theme do you use in visual studio code?

  • @ImKaijuLive
    @ImKaijuLive6 ай бұрын

    whats the theme called i love those colors

  • @ChristophVonBagel
    @ChristophVonBagel Жыл бұрын

    This is exactly what I need . Say no to Frameworks lol

  • @user-qj7lo5ox7j
    @user-qj7lo5ox7j4 ай бұрын

    cool video)

  • @jellycoding
    @jellycoding Жыл бұрын

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

  • @rahmanmusah4470
    @rahmanmusah44708 ай бұрын

    Do I have to take this course after Dave Gray's Html and Css?