CSS Introduction and Tutorial for Beginners

Sdílet
Vložit
  • čas přidán 14. 06. 2024
  • Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
    In this CSS introduction and tutorial for beginners, you will learn how CSS applies to HTML, the different types of CSS, the anatomy of a CSS ruleset, and how to avoid errors in your CSS code.
    🚩 Subscribe ➜ bit.ly/3nGHmNn
    🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
    • CSS Tutorials for Begi...
    🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
    📬 Course Updates ➜ courses.davegray.codes/
    CSS Introduction and Tutorial for Beginners
    (00:00) Intro
    (00:05) Welcome and Who This Tutorial Series Is For
    (00:54) What is CSS?
    (01:23) HTML vs CSS
    (02:12) The Tools We Need
    (03:00) Create an HTML page
    (04:17) External CSS
    (06:13) Adding Live Server to VS Code
    (08:01) Internal CSS
    (10:02) Inline CSS
    (11:08) Anatomy of a CSS Ruleset
    (12:22) Errors in CSS
    (13:27) Validating your CSS code
    ⚙ Web Dev Tools:
    Chrome Browser: www.google.com/chrome/
    Visual Studio Code (VS Code): code.visualstudio.com/
    Live Server VS Code Extension: marketplace.visualstudio.com/...
    vscode-icons VS Code Extension: marketplace.visualstudio.com/...
    Github Themes VS Code Extension: marketplace.visualstudio.com/...
    W3C CSS Validator: jigsaw.w3.org/css-validator/
    📚 References:
    MDN CSS: developer.mozilla.org/en-US/d...
    MDN CSS Basics: developer.mozilla.org/en-US/d...
    ✅ Follow Me:
    Github: github.com/gitdagray
    Twitter: / yesdavidgray
    LinkedIn: / davidagray
    Blog: yesdavidgray.com
    Reddit: / daveoneleven
    Was this tutorial about getting started with CSS helpful? If so, please share. Let me know your thoughts in the comments.
    #css #introduction #tutorial

Komentáře • 97

  • @DaveGrayTeachesCode
    @DaveGrayTeachesCode  Před 2 lety +36

    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: czcams.com/play/PL0Zuz27SZ-6OlAwitnFUubtE93DO-l0vu.html

  • @pixiesean999
    @pixiesean999 Před 2 lety +31

    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

  • @VanPetersonKpoti
    @VanPetersonKpoti Před 8 měsíci +5

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

  • @Valdaur
    @Valdaur Před 2 lety +17

    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  Před 2 lety +2

      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 Před rokem +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!

  • @WilliamMcEntee
    @WilliamMcEntee Před 3 měsíci

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

  • @fabrice9848
    @fabrice9848 Před rokem +4

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

  • @fairytail6896
    @fairytail6896 Před 5 měsíci

    Thanks a lot for making the lessons enjoyable for us!

  • @joshuasickles5139
    @joshuasickles5139 Před 2 lety +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!

  • @mostinho7
    @mostinho7 Před rokem +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

  • @sanlUSA
    @sanlUSA Před rokem +1

    I came here to check all CZcams 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.

  • @arshanali5549
    @arshanali5549 Před 14 dny

    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.

  • @fayroozibrahim4296
    @fayroozibrahim4296 Před 7 měsíci

    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 Před 7 měsíci

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

  • @lakshmidesineedi7421
    @lakshmidesineedi7421 Před 2 lety +1

    Best instructor !!! Explained very clearly

  • @TravinskiyVladislav
    @TravinskiyVladislav Před rokem

    Thank you, Dave

  • @bakeronews1
    @bakeronews1 Před rokem

    Thank you Dave for making me love web designing once again

  • @momarvs8672
    @momarvs8672 Před 2 lety +1

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

  • @paula.jackson5463
    @paula.jackson5463 Před rokem

    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!

  • @fairytail6896
    @fairytail6896 Před 2 měsíci

    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.

  • @DenisGloba
    @DenisGloba Před rokem +1

    Super tutorial dave gray thank you very much😍😍😍

  • @quvomiddinkamalov3292
    @quvomiddinkamalov3292 Před 6 měsíci

    Thanks ❤

  • @shivak0079
    @shivak0079 Před 2 lety +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  Před 2 lety +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! 💯🙏

  • @muharramozodboyeva8697

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

  • @YoussefKonich
    @YoussefKonich Před 4 měsíci

    thank you sir

  • @leyemicheal7354
    @leyemicheal7354 Před 2 lety +3

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

  • @sebg2678
    @sebg2678 Před rokem +1

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

  • @thetimemachine3690
    @thetimemachine3690 Před rokem +1

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

  • @monkeymediatv809
    @monkeymediatv809 Před rokem

    you are the best mentor i ve find in the web

  • @kikocassola
    @kikocassola Před 2 lety

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

  • @JossuLP
    @JossuLP Před 6 měsíci

    It's a great course

  • @edmorkimmoradilla7056
    @edmorkimmoradilla7056 Před měsícem

    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.

  • @iambrijeshtoo
    @iambrijeshtoo Před rokem

    Thank you!

  • @natnaelgetachew325
    @natnaelgetachew325 Před rokem

    good style.good learning

  • @zeynepbasoglu3426
    @zeynepbasoglu3426 Před rokem

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

  • @mdzahangiralom7296
    @mdzahangiralom7296 Před 2 lety

    you are best teacher for code

  • @pablo20237
    @pablo20237 Před 2 lety +1

    thank you again

  • @user-du2bj8pv4l
    @user-du2bj8pv4l Před 2 lety

    THX

  • @servant-of-the-Praiseworthy

    finished the HTML course and I'm speechless!

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  Před 2 lety

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

    • @servant-of-the-Praiseworthy
      @servant-of-the-Praiseworthy Před 2 lety +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 CZcams than I have in my uni classes😂😂
      I hope to finish this too and even more courses in the future.

  • @CTILET
    @CTILET Před 2 lety +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  Před 2 lety +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.

  • @vicsmith7006
    @vicsmith7006 Před rokem

    @DaveGray Thank you

  • @balazsberta8631
    @balazsberta8631 Před rokem

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

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  Před rokem +1

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

    • @balazsberta8631
      @balazsberta8631 Před rokem

      @@DaveGrayTeachesCode Thank you so much Dave :)

  • @oncoding4520
    @oncoding4520 Před rokem

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

  • @vulee100
    @vulee100 Před 4 měsíci

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

  • @ishpreetsingh1046
    @ishpreetsingh1046 Před 7 měsíci

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

  • @stephenhammond1745
    @stephenhammond1745 Před rokem

    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.

  • @IramKahkashan
    @IramKahkashan Před rokem

    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  Před rokem

      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 Před rokem

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

  • @eugenentamack5023
    @eugenentamack5023 Před 2 lety

    Very Good

  • @rivaldocaga6249
    @rivaldocaga6249 Před rokem

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

  • @AnujGupta-10
    @AnujGupta-10 Před 9 měsíci

    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  Před 9 měsíci

      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 Před 9 měsíci

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

  • @ahmad-murery
    @ahmad-murery Před 2 lety +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  Před 2 lety +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 Před 2 lety +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

  • @CTILET
    @CTILET Před 2 lety

    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  Před 2 lety +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 Před 2 lety

      @@DaveGrayTeachesCode thanks

  • @xxGoodfella
    @xxGoodfella Před rokem

    tyty

  • @lecturesfromleeds614
    @lecturesfromleeds614 Před 10 měsíci

    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