Learn CSS (Tutorial) - Basics + Selectors (For Absolute Beginners)

Поделиться
HTML-код
  • Опубликовано: 20 окт 2024

Комментарии • 230

  • @ecpjll
    @ecpjll 10 лет назад +44

    wow. you have no idea how helpful this was. You took me from wanting to drop out of college to being excited to do more css. You have no idea what you've done for me. Thank you from the bottom of my heart.

  • @seba3151
    @seba3151 4 года назад +14

    I've been looking for something like this for ages, thank you so much dude! This really helped me get a basic understanding of how to align text, change colour, and background colour, the different divisions. By the way to anyone else reading the comments, it is still relevant in 2020,
    dang, that's a whole decade after the vid was posted.

    • @playpoint5792
      @playpoint5792 3 года назад +1

      yes bro it's really relevant, he has included almost everything.

    • @seba3151
      @seba3151 3 года назад +2

      @@playpoint5792 no way, I forgot about this video, I know so much more now!! hahaha

    • @1nfurious
      @1nfurious 6 дней назад

      @@seba3151Forget again?

  • @leotrance8240
    @leotrance8240 9 лет назад +7

    I've been following some udemy courses about web design and programming.... I have to say that all of those courses including my uni professors weren't as good teacher as you are! Such a great man. Wish you all the best.

  • @robdawson53
    @robdawson53 12 лет назад +2

    As a newcomer to CSS I've been struggling to get my head around this for a while. You finally made it all make sense.
    Thanks a lot.

  • @Gspotje
    @Gspotje 9 лет назад +4

    Wish my IT teachers where that straightforward, to the point and clear from the start of my introduction to HTML & CSS. This would have saved me tons of time and frustration. Thanks for the tutorials; I kinda thought I’ve covered everthing I needed to know, but going back to basics was really worth the time, because they’ve haven’t told me anything about descendant selectors or how to style every other row in tables (from table tutorial you’ve uploaded).
    Now the main thing of the course was just to create a non-responsive website. I was disappointed about that, and have to learn that myself and also watched those tutorials and all was very clear.
    Doing the JavaScript and jQuery tutorials now and again I’ve started noticing parenting is again a very important subject that is covered very easy here from the start, so that was very useful information I have in the pocket now thanks to you. So many thanks for that!
    Wrestling now with C# at the university and well: I see now it’s not that easy at all and need to practise a lot. That’s why I have some questions:
    As a web developer, do you really want to design a website by yourself from scratch, instead avoiding the complex coding and save some time with Bootstrap, or just make a WordPress webpage? Does making use of Bootstrap or WordPress limit the way you can customize your webpage and what functionalities you can add, meaning designing a webpage from scratch is the better and more original way, but also the toughest way to do it! Meaning you’ll have to learn how to create a website all the way from the back-end to the front-end, which involves a lot of programming courses and years of studying and practise. And then you can still decide to save time and add some Bootstrap elements? I mean time is a critical factor for the overall cost of a website, and to create a whole ecommerce web shop from scratch is so much more expensive than just using WordPress. How does one find a balance between originality and cost? Sorry for all those questions, but since you are more experienced than me, I’d like to know your view about this?

  • @montgal53
    @montgal53 6 лет назад +2

    Wow!!!!! An excellent tutorial!!!!!! You are an good instructor because you don't assume viewers know certain aspects about coding. You are detailed, which is vital. Because, again, many people don't know the inner-workings of HTML, JS, and CSS coding (or, how to put all three code parameters "together"). But, most importantly, you _take your time and explain what you are doing_ . I am working with Adobe Muse. Muse is used to create websites without code. But there are times when some code is necessary to obtain a certain visual effect (e.g., Pulsating Button, which Muse does not have. Not even in their Widgets collection). Thank you so much for this. You now have a subscriber.

  • @apriljmcmillan
    @apriljmcmillan 13 лет назад

    I've learned to make very simple edits on already customized wordpress sites, but now I really want to learn to write my own stuff, from scratch. I'm SO glad I found this channel. I have a feeling I will be spending a lot of time here. :)

  • @ElliottR0se
    @ElliottR0se 8 лет назад +3

    i just want to say. You are a fantastic teacher. helped me out immensely.

  • @TheCuriousSeb
    @TheCuriousSeb 10 лет назад +4

    I logged in just to fav this vid. Great explanation, better than most tutorials found on the net.

  • @don_d1997
    @don_d1997 4 года назад +1

    Most old videos explain CSS very well compared to the current ones

  • @GSquad
    @GSquad 7 лет назад +2

    I've watched too many videos to count and this literally is the only one worth watching

  • @LearnWebCode
    @LearnWebCode  13 лет назад

    @aprilmcmillan I'm glad you found the channel! WordPress is a fantastic way to learn CSS / PHP via real world examples. I actually hope to put out a "Create your own WordPress theme from scratch" video series, when time permits.

  • @coleopreacher
    @coleopreacher 10 лет назад +1

    This is the best CSS beginner video on the entirety of the internet. Well done. This video makes a css file more readable to me now. Thanks!

  • @GrowWithLittleLoki
    @GrowWithLittleLoki 11 лет назад +1

    Now I understand the difference between "." and "#" . Thanks! you are such an amazing tutor! very easy to understand and the voice is so clear..Keep up the good work!

    • @designertjp-utube
      @designertjp-utube 5 лет назад

      Haha! Now the test for Dyslexic Folks (like me sometimes) who wake up some mornings with a blank state of mind! - Which one of the symbol selectors *iD* or *Class* can you use as much as you want in a styled document while the other...well not so much?

  • @norandrostenedione
    @norandrostenedione 7 лет назад

    LearnWebCode is the best teacher period.

  • @georsieabroad6897
    @georsieabroad6897 6 лет назад

    omg! You should have been my professor. Both my previous and current professors failed to show us how to do this! They just did it themselves on and was like "well, that's how you do it"....unbelievable! I thought I was just not smart for struggling with this! And this video just relieved months of frustrations I've been feeling! Thank you soooooo much!

  • @Arc_Viper
    @Arc_Viper 11 лет назад

    I can't believe I'm not confused. Clear, concise, and to the point.

  • @girlpuyat07
    @girlpuyat07 13 лет назад +1

    Ahhh man, this is the best tutorial! I now can start on the more advanced coding. Your tutorial is clear and concise! Thank you for sharing your knowledge! :) You are just awesome!

  • @MrPavePaws
    @MrPavePaws 10 лет назад +1

    You're really helpful. I love the speed and explanation of it all.
    Questions
    1) in your code you closed with SPACE/> [omit the word space]
    Do you need to put that space is or is ...style.css"/> just as accepted?
    1b) Is SPACE/> the CSS WAY to close a code command?
    2) Do CLASSES have to be in paragraphs or can they stand alone in the middle of a document? As in:
    2b) Do classes need a closing? or is it an "in-line' CSS code. It's a ONE SHOT deal? You used "first" and never seemed to close the code with SPACE/> of any sort.

    • @designertjp-utube
      @designertjp-utube 5 лет назад

      Hi! If you got those specific questions answered by now, then I bet you've already moved on to Flexbox (which always reminds me of *Felix* *the* *Cat* ) and CSS Grid!

  • @polinaxpolarbear
    @polinaxpolarbear 4 года назад +1

    Hats off to you, sir, for explaining CSS so well.

  • @sirbozz
    @sirbozz 11 лет назад

    This guy knows how to teach properly your an awesome tutor thank you.

  • @olegbtv
    @olegbtv 6 лет назад

    This is the best vid on html and css so far!

  • @Ophiuchus1
    @Ophiuchus1 12 лет назад

    Thanks friend. I have watched a thousand css vids. The selectors concept is often understated.

  • @209wendy
    @209wendy 9 лет назад +2

    You are awesome...best explanation of css selectors that i've seen!

  • @debsfisher5659
    @debsfisher5659 12 лет назад

    Spent an age going in circles with codecademy - phew, you make it so much easier! A big thanks.

  • @dreemaze
    @dreemaze 13 лет назад

    OMG! This seriously this cannot be that simple!? Excellent VID!

  • @LearnWebCode
    @LearnWebCode  13 лет назад +1

    @plosie11 Thanks! That feature is known as a "tab trigger" or "snippet." Very useful :)
    Many different text-editors support it. If you're on a PC look into "E Text Editor" or "Sublime Text Editor." If you're on a Mac I recommend either TextMate or Coda.

  • @noodlegts
    @noodlegts 8 лет назад

    This was very useful for me as a total CSS beginner. Thanks buddy!

  • @mikhailgreaves
    @mikhailgreaves 11 лет назад +1

    way better than a 2 hour lecture

  • @missmarie273
    @missmarie273 12 лет назад

    So helpful! Very thorough detail-oriented instruction. Thx.

  • @mehakdeepsingh9288
    @mehakdeepsingh9288 3 года назад

    All thanks to you dude. I was able to understand everything clearly 🙂.

  • @vasudevans948
    @vasudevans948 7 лет назад

    Thank you for your benevolence - very very clear, simple and easy to understand.
    In learning you will teach
    And in teaching you will learn

  • @MichaelThompson-dq1vq
    @MichaelThompson-dq1vq 8 лет назад +1

    Like the way you explained it. Made it easy to follow.

    • @montgal53
      @montgal53 6 лет назад

      I totally agree. He is a very good teacher.

  • @calvinjonesyoutube
    @calvinjonesyoutube 11 лет назад

    Really good tutorial...you rescued me from the confusion of other tutorials so thanks!

  • @Maine1one1
    @Maine1one1 11 лет назад

    Great videos! Being a newbie I really don't know where to start, and thought I would ask if you can create playlists that you think will be a good starting point for newbies like myself, intermediate, and advanced. It's kind of hard to filter through the video's without an understanding of what would/should come next in the learning process. I love what you've done here so far, keep up the great work!

  • @LearnWebCode
    @LearnWebCode  14 лет назад

    @hruehl Haha, that's true I'm not on WinXP. I was using Vista in this video. The text editor I was using is called E Text Editor. It's great, very affordable- but it's not WYSIWYG. Sorry I can't really suggest any good videos for MS Web Elements, I'm not familiar with that piece of software. The great thing about CSS is that it's simple enough to not even need WYSIGWYG :)

  • @zoeyzhang578
    @zoeyzhang578 12 лет назад

    Great video!! Very clear and to the point. I am so glad I found this channel. By they way, I am looking into being a web developer while working full time. Any suggestions?

  • @mrsmoore9272
    @mrsmoore9272 4 года назад

    You are a great teacher. Thank you. Very thrilling to learn t his and you were very easy to follow along with. Much appreciated.

  • @itispyd
    @itispyd 13 лет назад

    Really fascinating was the sequence in which it was thought........

  • @MewingFugur
    @MewingFugur 12 лет назад

    Great Video. I have learned alot of HTML but I didn't know about all the styling. Thanks :)

  • @davidholland4675
    @davidholland4675 10 лет назад

    Great tutorial. As previously mentioned it is much easier to understand than any books. Many thanks

  • @carolinetafe
    @carolinetafe 11 лет назад

    Great tutorial - really clear and well paced. Thanks

  • @CrashGamingNL
    @CrashGamingNL 10 лет назад +2

    Im 12 i like coding, making sites and games!Love them tutorials!

  • @robinsontaylorsmith8929
    @robinsontaylorsmith8929 4 года назад

    Good job. Nice explanation. Very understandable and easy to learn

  • @okgorocket
    @okgorocket 13 лет назад

    Excellent tutorial. Easy to understand.

  • @cherushithemc9119
    @cherushithemc9119 9 лет назад

    Thank you! I didn't understand well what my teacher in computer just taught us. I also liked the way you type :)

  • @kayolhope
    @kayolhope 11 лет назад

    Excellent tutorial, while HTML & CSS are scripting languages I've been well versed in for awhile now. I must comment that your explanation is perfect.

  • @halcanoglu
    @halcanoglu 6 лет назад

    Awesome thanks alot man..being able to explain now thats hard to find in these youtube channels. You are awesome bud.

  • @diehardcowboys
    @diehardcowboys 14 лет назад

    Thanks for the upload dude. That was a very good session. Now I knew a little bit of CSS.

  • @MakeSnoww
    @MakeSnoww 13 лет назад

    Great video! You really put it all in perspective. Good teaching!

  • @mvdproductions1
    @mvdproductions1 12 лет назад

    Thanks for the tutorial, very helpful. What screen recorder did you use to record this tutorial? It looks very smooth, thanks.

  • @kamals67
    @kamals67 12 лет назад

    Thanks for a great tutorial. Great Stuff and ... u have made by life easier.

  • @arushkumar5034
    @arushkumar5034 3 года назад

    It was very good basic video for css tutorial , thanks for it!

  • @chrisjoo6548
    @chrisjoo6548 4 года назад

    This video is pretty awesome and so are you.

  • @itispyd
    @itispyd 13 лет назад

    decently illustrated and very nice......

  • @Tobias-et1xt
    @Tobias-et1xt 8 лет назад

    Thanks dude CSS is important for me

  • @mcp119
    @mcp119 13 лет назад

    Impressive work. Comprehensive lesson.
    May I know what video recorder is used pls?

  • @alphamscmedia1351
    @alphamscmedia1351 8 лет назад +1

    Amazing job explaining!

  • @eksendatabilisimteknolojil2594
    @eksendatabilisimteknolojil2594 10 лет назад

    So useful and straight forward
    Thank you

  • @scottsmith9029
    @scottsmith9029 11 лет назад +8

    im 14 and i sit here for hours learning java/html and programming is that normal for a 14 year old to do and dude nice lesson so much easier doing the deco on a separate page

    • @designertjp-utube
      @designertjp-utube 5 лет назад

      Hey Kid! U working for *Elon* *Musk* or *Google* these Days?

  • @antongabriel4794
    @antongabriel4794 9 лет назад

    Thanks for making these videos! It really helps me with my studies!! :)

  • @RokonxTachigami
    @RokonxTachigami 11 лет назад

    It took me six months to get off my lazy bottom and start learning CSS. It was worth it.

    • @AmuraHiboshi
      @AmuraHiboshi 11 лет назад

      This video doesn't make sense...

    • @RokonxTachigami
      @RokonxTachigami 11 лет назад

      YOU KNOW NOTHING OF CSS.

    • @AmuraHiboshi
      @AmuraHiboshi 11 лет назад

      No..He's using a different program that's why I dun understand

    • @RokonxTachigami
      @RokonxTachigami 11 лет назад

      Oh.

    • @UrbanStreetFreerunning
      @UrbanStreetFreerunning 10 лет назад

      Amura Hiboshi try using Sublime Text, or Notepad++
      It's similar to him.
      In my opinion, Sublime is easier :)

  • @ArthurKlisiewicz
    @ArthurKlisiewicz 7 лет назад

    you are excellent teacher !

  • @beachboybali7925
    @beachboybali7925 8 лет назад +1

    very good explanation , thanks

  • @mvdproductions1
    @mvdproductions1 12 лет назад

    Thank you, very informative. What screen recording program did you use to record this?

  • @OriginLegacy
    @OriginLegacy 13 лет назад

    @KendallKashief He is using a program called E Text Editor But for some reason I am only able to get the trial for the program!

  • @DonaldMcArthur79
    @DonaldMcArthur79 11 лет назад

    Very well explained dude!

  • @nooralihasssanali5706
    @nooralihasssanali5706 6 лет назад

    You saved my project 😭💖

  • @jossem55
    @jossem55 13 лет назад

    Very good Video!!..thanks to take the time to explain CSS

  • @jakemuniak3436
    @jakemuniak3436 10 лет назад

    great stuff man- easy to follow cheers

  • @LearnWebCode
    @LearnWebCode  14 лет назад

    @jaimo98 if you let me know which parts you are the most confused about I can post a follow up video :)

  • @Ophiuchus1
    @Ophiuchus1 12 лет назад

    Will you do a vid that just talks about selectors?

  • @rollingstonesv2889
    @rollingstonesv2889 6 лет назад

    So was there a transition video from this one to the next in the playlist?

  • @tutorialcasts
    @tutorialcasts 12 лет назад

    Nice introductory tips.

  • @adventurousstories
    @adventurousstories 3 года назад

    Great explanation 👍

  • @MrBrunoTheMan
    @MrBrunoTheMan 9 лет назад

    Just what I needed, thanks

  • @usingThaForce
    @usingThaForce 12 лет назад

    Can u believe , took me a week to find this simple but " explained" tutorial?

  • @LukDreamwalker
    @LukDreamwalker 12 лет назад

    Really good explanation

  • @badscreenname1
    @badscreenname1 12 лет назад

    @jakke483 yes you can use Notepad to write CSS tags if you are using Window 7 OS notepad.

  • @janezklun
    @janezklun 7 лет назад +2

    nice tutorial, thanks

  • @SupaNIWA
    @SupaNIWA 13 лет назад

    awesome video, well explained thank you so much

  • @yodudeanson
    @yodudeanson 11 лет назад

    Great tutorial!!Thank you!!Keep up the good work!!

  • @ashimgiri6287
    @ashimgiri6287 10 лет назад

    thanks for ur lesson im learning .....

  • @mislababe
    @mislababe 6 лет назад

    This was really helpful.

  • @martdahao4078
    @martdahao4078 4 года назад

    What is the difference beetween adding a text color on html and css. Because in html you can add also a color

  • @octaviachapman8049
    @octaviachapman8049 6 лет назад

    Sorry I have question, I have to add a html link into existing pages like Amazon or Facebook its for vig link . It does not allow me, can you help me to understand what I must do, they only say to paste it before the body, sometimes I cant even find the< body> on a page.

  • @Ethan-rv1jr
    @Ethan-rv1jr 5 лет назад +1

    i want the webpage to be black with red text. how would i make the whole thing black?

  • @YassinGhariani
    @YassinGhariani 9 лет назад +2

    good explication (y) thank you

  • @Kptourisam
    @Kptourisam 6 лет назад

    please help me
    i am doing work on my website design and then will develop an HTML or CSS code. can you please suggest which editor should i use for both HTML or Css file and which would also support wordpress.

  • @plosie11
    @plosie11 13 лет назад

    at 0:36, how did you get the full h1 code by only typing h1?
    nice vids btw!

  • @walkingdead7115
    @walkingdead7115 8 лет назад

    i've noticed something that some times the assigned numeric values are written as either the numeral like os "69"
    and at times they are written as "69px" numeric value along with pixels
    and that too for the same properties
    what is the logic behind this please help
    like padding:69px;
    padding:69;

  • @waleedmalik7477
    @waleedmalik7477 11 лет назад

    Ur my TEACHER man!!!!!!!

  • @mynameisyuriorlov
    @mynameisyuriorlov 12 лет назад

    how did u capture ur video?
    which software did u use?

  • @MrDravenge
    @MrDravenge 7 лет назад

    What program are you using to write in?

  • @LensLazyHD
    @LensLazyHD 11 лет назад

    such a good tutorial!!! thanks

  • @Videosonyourwebsite
    @Videosonyourwebsite 9 лет назад

    Very very helpful. Thanks,

  • @hueymacklyrics
    @hueymacklyrics 12 лет назад

    What program are you using to type in?

  • @abbybrowne283
    @abbybrowne283 9 лет назад

    Thank you so much for this!!

  • @jasoncorson
    @jasoncorson 13 лет назад

    Im in a basic webscript class, how would you create a span?---Jason

  • @kalaranibinu126
    @kalaranibinu126 4 года назад

    Which compiler do you use pls tell