CSS Introduction and Tutorial for Beginners

Поділитися
Вставка
  • Опубліковано 22 січ 2025

КОМЕНТАРІ • 104

  • @DaveGrayTeachesCode
    @DaveGrayTeachesCode  3 роки тому +37

    After learning the basics of HTML, the next step in your web development journey should be to learn the basics of CSS. That's what this CSS for Beginners tutorial series is all about! In this tutorial, you will get help getting started with CSS - from the tools you need to identifying the different types of CSS to how to apply your first CSS declarations - it's all in this tutorial. If you haven't learned HTML yet, I suggest starting there first with my HTML for Beginners playlist here: ua-cam.com/play/PL0Zuz27SZ-6OlAwitnFUubtE93DO-l0vu.html

  • @pixiesean999
    @pixiesean999 2 роки тому +38

    I've just finished the HTML course - I couldn't get enough of it, I did the whole 4 hour tutorial and the project in two days, I've just moved on to this - fantastic content, far and away the most accessible I've found yet. I've just started this course but you've really excited me about the possibilities. Thank you so much

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 роки тому +7

      You're welcome and thank you for the kind words! 🙏💯

    • @Finnigan527
      @Finnigan527 10 місяців тому +1

      how are you doing? found a job?

  • @VanPetersonKpoti
    @VanPetersonKpoti Рік тому +9

    "Remember to keep striving for progress over perfection and a little progress every day will go a very long way."
    I'm always happy and it makes me feel good to hear this at the end of each video.
    You are a great teacher.
    You richly deserve the title of Professor.

  • @IG7799-c4u
    @IG7799-c4u 2 роки тому +21

    I'm here from FreeCodeCamp. I'm about 2 hours into your HTML course and I have to say it's easily the best on the entire web I have come across. It's so detailed and you clearly explain how important using semantics are to accessibility. A lot of people seem to skim over this when doing their own courses/tutorials. So it's very refreshing to see someone take the time to explain and introduce many more elements than you would typically see from most other people. I can't wait to start this CSS course once I have finished watching the HTML course. If it's anywhere as good as that is, then It'll be amazing. Thank you for all your hard work!

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 роки тому +3

      Thank you for the kind words! 🙏 I am still building this CSS series. One new chapter per week until it is complete. 🚀

  • @GabrielSouza-yy2rq
    @GabrielSouza-yy2rq 2 роки тому +1

    Man, i can't wait to go through all the content available here at your channel. There is so much good stuff.. I mean the least i can do is comment in every single video thanking you for it!

  • @sanlUSA
    @sanlUSA 2 роки тому +1

    I came here to check all UA-cam courses for CSS. I saw many courses but nothing simple and straight as you. I am glad to subscribe and thank you for your efforts.

  • @mostinho7
    @mostinho7 2 роки тому +1

    Done thanks!
    CSS applied to the element itself takes precedent over everything else but in-line css in tag) doesn’t take precedent over separate style sheet file, but whichever is read first in the html overwrites the others. If you have in-line and style sheet both, the properties in common will be overwritten by what is read last and the other properties/attributes will remain

  • @fabrice9848
    @fabrice9848 2 роки тому +3

    You're getting more and more subscribers lately. You completely deserve it. Thanks for all this quality content.

  • @robertoneill4748
    @robertoneill4748 Місяць тому

    I've been making my way through HTML and CSS tutorials and courses from other places, slowly building upon my abilities, and I had a look at your Grid layout tutorial. I was well impressed by how easy you make it.
    So I decided to go back to the start, and see what you have to say on ALL the subjects I've already covered.
    I wasn't aware of Emmet shortcuts. WOW, that's gonna change so much for me. Thank you!
    I'm an automation engineer, and now I wanna be a web developer

  • @WilliamMcEntee
    @WilliamMcEntee 10 місяців тому

    Dave, I'm using these as a refresher. They are perfect. Thank you.

  • @arshanali5549
    @arshanali5549 7 місяців тому

    Hello, i recently finished your html course &now I am confident in that just Because of you sir! Now starting new journey to learn css from you sir. Thank you for these wonderful playlists and for free which others are providing for a great sum of money.
    Thank you sir.

  • @fairytail6896
    @fairytail6896 9 місяців тому

    Now that I have become somewhat confident in CSS, this playlist really helps me revise all the important features of CSS. Thank you very much Sir for creating this wonderful channel. It really has come as a blessing to my life when I have started my journey to learning web development.

  • @joshuasickles5139
    @joshuasickles5139 2 роки тому +2

    Great content man, you explain everything in a way thats easily understood and show plenty of visuals. My go to source for all things coding related!

  • @fayroozibrahim4296
    @fayroozibrahim4296 Рік тому

    Hi Dave, thank you so much for this. I feel like all of this course was specifically made for me and is the one thing I needed and finally found

    • @ST-vr4ko
      @ST-vr4ko Рік тому

      Hey , I'm learning HTML and CSS on UA-cam and thought it might be more enjoyable and productive to have a learning partner. interested in joining me?

  • @paula.jackson5463
    @paula.jackson5463 Рік тому

    Thank you very much Dave, just did the HTML course and now on to this, have not programmed since MS Basic in the 80's, back in the day....light years away, but getting closer. Also working on a bit of Python as well. You are a very good teacher!

  • @deccangaming2025
    @deccangaming2025 3 роки тому +4

    Hi Dave, looking forward for this course. Keep going. One request is that to teach some advanced css contents like sass/animations in the end please.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  3 роки тому +6

      Thank you, Shiva! I will keep Sass separate, but I will likely include some animations before this series is over. Thanks for the request! 💯🙏

  • @thetimemachine3690
    @thetimemachine3690 2 роки тому +1

    Thank you so much sir🥰🥰 your teaching method is very easy and you deserves millions of subscribers

  • @sebg2678
    @sebg2678 Рік тому +1

    I'm continuing from the HTML course. Thank you sir!

  • @momarvs8672
    @momarvs8672 2 роки тому

    Hi Dave! I just finished your HTML Course. I could say that your lesson was the best among all other tutorials. I'm planning to use your channel as my main source of information regarding Web Development. I hope that I can finish all of these until React and Node.js :) Thanks a lot!!!

  • @lakshmidesineedi7421
    @lakshmidesineedi7421 2 роки тому +1

    Best instructor !!! Explained very clearly

  • @monkeymediatv809
    @monkeymediatv809 2 роки тому

    you are the best mentor i ve find in the web

  • @leyemicheal7354
    @leyemicheal7354 2 роки тому +2

    You should be recognised for your teaching abilities since you make things so simple to learn.

  • @bakeronews1
    @bakeronews1 2 роки тому

    Thank you Dave for making me love web designing once again

  • @fairytail6896
    @fairytail6896 Рік тому

    Thanks a lot for making the lessons enjoyable for us!

  • @DenisGloba
    @DenisGloba 2 роки тому +1

    Super tutorial dave gray thank you very much😍😍😍

  • @muharramozodboyeva8697
    @muharramozodboyeva8697 2 роки тому

    thankyou teacher Dave Gray! understandeble content i like very much.from uzbekistan

  • @ghosted-coder
    @ghosted-coder 2 роки тому

    finished the HTML course and I'm speechless!

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 роки тому

      Thank you! 🙏 This CSS course is still being created. I add to it each week.

    • @ghosted-coder
      @ghosted-coder 2 роки тому +1

      @@DaveGrayTeachesCode that's absolutely wonderful!
      The HTML course was extremely easy to understand and after 36 hours, I can say I've learnt more on UA-cam than I have in my uni classes😂😂
      I hope to finish this too and even more courses in the future.

  • @mdzahangiralom7296
    @mdzahangiralom7296 2 роки тому

    you are best teacher for code

  • @zeynepbasoglu3426
    @zeynepbasoglu3426 Рік тому

    Greetings from Turkey. A great educator, I came across it by accident. the world is too small.✌

  • @TravinskiyVladislav
    @TravinskiyVladislav 2 роки тому

    Thank you, Dave

  • @sovereignlivingsoul
    @sovereignlivingsoul 6 місяців тому

    nice job, nice presentation, in general i set body height and body width in vsw and vsh and elements in rem, i hate the scroll bar, nice tip on eliminating it, i also use custom properties and calc alot of time also, subscribed

  • @edmorkimmoradilla7056
    @edmorkimmoradilla7056 9 місяців тому

    hi gray thanks alotectio for this video tutorials its really brings me to excitement and go back on web development again its really good content and easy to understand God Bless you and more power - Keep On Progress Not Perfection.

  • @rivaldocaga6249
    @rivaldocaga6249 Рік тому +1

    I think I regret not watching your tutorial, instead I watched other tutorial which didn’t have a clear path

  • @kikocassola
    @kikocassola 2 роки тому

    Your videos are amazing 👏 please don't stop you help me a lot 😉 thx 😉

  • @AlexKing-uh7tm
    @AlexKing-uh7tm 2 місяці тому

    What VS Code theme are you using?

  • @vulee100
    @vulee100 11 місяців тому

    when i create a document i don't have the editor option to add pages and files, anyone know why?

  • @stephenhammond1745
    @stephenhammond1745 2 роки тому

    Worked my way through the HTML course so it's time to move on to CSS. After that, probably JavaScript, and then tie it all together.

  • @brijeshkumarchavda
    @brijeshkumarchavda 2 роки тому

    Thank you!

  • @kalinkakylab7276
    @kalinkakylab7276 Місяць тому

    Thank you

  • @quvomiddinkamalov3292
    @quvomiddinkamalov3292 Рік тому

    Thanks ❤

  • @pablo20237
    @pablo20237 3 роки тому +1

    thank you again

  • @AnujGupta-10
    @AnujGupta-10 Рік тому

    sir i've learned html from your HTML Course and it helped ,me a lot! THANK YOU SO MUCH for that ❤❤. now i have a one huge problem in, "HOW and WHETHER TO use div tag or not :(", Because trying making a big project, everyone is using div tag rather than using "meaningful semantics tags"(as you teaches us). Please tell me how to learn it or make a video on it .

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  Рік тому

      You can review the Semantic HTML lesson in the HTML course. Overall, if a semantic tag exists that fits what I am creating, that is what I use. If it does not seem like a good fit, it is still ok to use a div. You are correct that the div element is used too often, but it is still a valid element when needed.

    • @AnujGupta-10
      @AnujGupta-10 Рік тому

      @@DaveGrayTeachesCode i got the semantics lesson very well. But as i said, after reviewing the other projects, they use div very often so it confuses me alot in whether to use div or semantics elements.

  • @CTILET
    @CTILET 3 роки тому +1

    Hellow Dave, Thanks for new turtorial. I want to say that i know some easy topics of css, but when i doing my website it seems sooo poor! Will it be a profi css effect turtorial in your chanel?

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  3 роки тому +1

      There is a lot to CSS. I plan to cover all of the foundational knowledge. From there, students should continue on to learn more advanced topics.

  • @natnaelgetachew325
    @natnaelgetachew325 Рік тому

    good style.good learning

  • @balazsberta8631
    @balazsberta8631 Рік тому

    Hey, great series :) What screens splitting app are you using in these videos?

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  Рік тому +1

      Windows PowerToys - a free download for Windows from Microsoft. One feature is called "Fancy Zones" that I use to do this.

    • @balazsberta8631
      @balazsberta8631 Рік тому

      @@DaveGrayTeachesCode Thank you so much Dave :)

  • @ahmad-murery
    @ahmad-murery 3 роки тому +1

    Maybe it worth mentioning that browsers apply their own css rules to html elements by default which make a page without custom css to look,
    Also a quick look into Chrome dev tools/styles tab will show you what rules are overwritten by another (crossed) and invalid rules (crossed with exclamation mark),
    Learning the fundamentals is the best way to get started even if it takes longer.
    Thanks Dave,

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  3 роки тому +1

      You are correct my friend! 🙏 This series will eventually get to CSS resets and browser defaults for sure. And absolutely on dev tools, too. Dev tools will (and should) be consistently referenced when working with CSS. As always, I hope you are doing well. 💯

    • @ahmad-murery
      @ahmad-murery 3 роки тому +1

      ​@@DaveGrayTeachesCode I'm sure you'll do that, but I just wanted to contribute in some way,
      with all the craziness we're going through here but my brain still working (in low power mode), I think🤔
      Thanks for asking my friend

  • @ayubgeilani
    @ayubgeilani Місяць тому

    Thanks bro

  • @YoussefKonich
    @YoussefKonich Рік тому

    thank you sir

  • @oncoding4520
    @oncoding4520 2 роки тому

    For each video, that I watch I will comment in order to say thank you

  • @IramKahkashan
    @IramKahkashan 2 роки тому

    Hi Dave Thank you to provide awesome flex tutorial, I've a point, I want in flex just shrink or expand boxes when screen size changes respectively . If i have two boxes then it must shrink or expand in flex container not break in one-one column. How can I use this strategy. I want to use this strategy for different screen sizes of only desktop screens not for mobile and tablet.
    Expecting positive response.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 роки тому

      I'm not sure if I understand your question correctly, but it sounds like you need to set flex-grow on the boxes you want to expand. developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

    • @IramKahkashan
      @IramKahkashan 2 роки тому

      @@DaveGrayTeachesCode Yes you got my approach and thank you for your response Dave. tell me one thing up till now we learnt flex properties on elements which are in div .
      How can we implement flex shrink and flex-grow on text element. I am able to implement properties of flex-shrink and and flex-grow on circle box or div but how is it possible to shrink or grow font size of text.
      Let me explain plz , always text size or size should be increase or decrease as we increase or decrease the screen size.

  • @JossuLP
    @JossuLP Рік тому

    It's a great course

  • @eugenentamack5023
    @eugenentamack5023 3 роки тому

    Very Good

  • @CTILET
    @CTILET 3 роки тому

    I have a problem, i am working with react and trying to make my website better. I am stealing a code for some structures like (buttons, cards, icons) but it is written on html css and sometimes dosent work on react. For example in html i have input=[type"checkbox"] in css it have added :checked but it dosent work in react.
    I have tried to use useState but it didnt help.
    So i just made a hover effect not cheked.
    Also a have span colum with word and it have span style=--i:1; and span style=--i:2 etc... but i cant give such styles in react and how to solve this problem i dont know.
    I am not writing to wait for your help. Just helping to inprove your chanel.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  3 роки тому +3

      React has its own rules for many things. You cannot take HTML and put it inside React's JSX. There are differences. Work through a React tutorial for Beginners like the one on my channel. It has two projects that include JSX and CSS.

    • @CTILET
      @CTILET 3 роки тому

      @@DaveGrayTeachesCode thanks

  • @vicsmith7006
    @vicsmith7006 2 роки тому

    @DaveGray Thank you

  • @אדירמולאי
    @אדירמולאי 2 роки тому

    THX

  • @ishpreetsingh1046
    @ishpreetsingh1046 Рік тому

    Thank you Jaya ma'am for sharing this video in our class group
    Myself Ishpreet Singh Bhatia Class-10D

  • @lecturesfromleeds614
    @lecturesfromleeds614 Рік тому

    Does Python use European English? Python was created by someone from Europe and Europeans learn European English, not American English like they learn in south America etc. Or was Python created to cater to the US market? 🤷 Anyway, these tutorials are put together really well! I just subscribed

  • @JOSPHATKIPKEMOI-r8z
    @JOSPHATKIPKEMOI-r8z 5 місяців тому

    Please can you send me soft copy about html css and JavaScript in pdf I will really appreciate it

  • @xxGoodfella
    @xxGoodfella 2 роки тому

    tyty

  • @hadibq
    @hadibq 3 місяці тому

    👍👍 to round up the comments count to 100 😅