CSS Crash Course Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 15 ธ.ค. 2024

ความคิดเห็น •

  • @WebDevSimplified
    @WebDevSimplified 6 ปีที่แล้ว +100

    Thanks Free Code Camp for featuring my video on CSS. If anyone has any questions about anything covered in this video please let me know, and I will get back to you as soon as I can.
    Again, thank you Free Code Camp.

    • @raulmelo7021
      @raulmelo7021 6 ปีที่แล้ว +2

      Hey , how you doing?
      First of all excellent video and explanation.
      Could you help me with something? I really wish be able to create videos like that. What kind of course/knowlegde should I do?
      I have some ideas and I really want to do something like this. =D
      Thank you so much

    • @WebDevSimplified
      @WebDevSimplified 6 ปีที่แล้ว +4

      I am doing good. Thank you for the kind words. In order to create this video and my other videos like this I use After Effects combined with Davinci Resolve.
      As for learning the skills needed for these videos I watched a few TH-cam tutorials on After Effects to get an idea of how to do general things, and then just jumped into After Effects learning as I went. I never actually took any courses so I don't have any recommendations in that regard, but if you just look for a general tutorial on After Effects you should be able to get the basics down well enough to start making your own videos.
      It really just takes a lot of patience and time to learn and get better at editing videos. I know for me I have been able to cut the time it takes for me to edit a video down from multiple days to only a few hours by just constantly practicing.
      Hopefully that is enough information to answer your question. Sorry I can't be of more help.
      PS: I use OBS for recording my screen.

    • @trakeshrao
      @trakeshrao 6 ปีที่แล้ว +2

      Thanks for the video. It is very good. Are you planning to cover responsive design and positioning in future videos?

    • @WebDevSimplified
      @WebDevSimplified 6 ปีที่แล้ว +3

      I actually already have a series that goes over positioning and a little responsive design for a band website. You can checkout the videos for that series here. th-cam.com/video/Sv_NAxi_jNs/w-d-xo.html

    • @akashyji5674
      @akashyji5674 2 ปีที่แล้ว

      @@raulmelo7021 LM mm.
      ..llppm

  • @jaybraun1006
    @jaybraun1006 3 ปีที่แล้ว +8

    took HTML and CSS in high school and college almost 10 years ago, your videos are very helpful with refreshing my memories and helping me get back into what I enjoy doing without retaking class courses haha!

  • @freecodecamp
    @freecodecamp  6 ปีที่แล้ว +8

    Here are some other great CSS resources:
    CSS3 in 30 Days: th-cam.com/play/PLWKjhJtqVAbl1AfjiGyYxwpdAPi5v-1OU.html
    Interactive CSS challenges: learn.freecodecamp.org/responsive-web-design/basic-css

  • @daifuco
    @daifuco 6 ปีที่แล้ว +30

    I have spent a few months to learn Javascript, I totally forgot my CSS, this video is perfect to refresh my knowledge!

    • @WebDevSimplified
      @WebDevSimplified 6 ปีที่แล้ว +8

      I'm glad you enjoyed it! CSS is pretty easy to forget about with all the exciting things you can do with JavaScript. That is until you realize your awesome interactive web page looks like it was built in the 90s. :P

    • @Barca4Ayman
      @Barca4Ayman 3 ปีที่แล้ว

      Same problem me too

    • @makedonce25
      @makedonce25 2 ปีที่แล้ว

      same ...

    • @johnlerryignacio1358
      @johnlerryignacio1358 ปีที่แล้ว

      Same problem!

  • @JP-zp6ob
    @JP-zp6ob 4 ปีที่แล้ว +4

    im taking classes on udemy for front end development right now and these videos are fantastic to watch before i go into an analogous course so i have an idea of what's going on. Thank you!!

  • @archirnobenz
    @archirnobenz 3 ปีที่แล้ว +1

    Learning CSS for personal interest and most likely using it to develop a website from scratch. It provides more flexibility than using those web builders that u need to pay in order to remove the watermark from your web link

  • @randysandberg3755
    @randysandberg3755 6 ปีที่แล้ว +4

    Short, but concise and on point. Well done.

    • @WebDevSimplified
      @WebDevSimplified 6 ปีที่แล้ว +1

      Thank you! I am glad you enjoyed the video.

  • @amandasmith4089
    @amandasmith4089 2 หลายเดือนก่อน

    Life saver. This is such a good refresher

  • @7301G
    @7301G 11 หลายเดือนก่อน +1

    univarsal selector is more prioritize over id, class,element ?

  • @DanielPetrov1
    @DanielPetrov1 3 ปีที่แล้ว

    Thanks for this great video! I decided to broaden my horizons by adding knowledge required for Full Stack positions to my memory, this is why I watched your video.

  • @MrVirusDi
    @MrVirusDi 11 หลายเดือนก่อน

    Was a interesting. Thank for this course! I have already studied CSS, but now I need this knowledge to develop HTML5 games.

  • @ruchishrivastava7347
    @ruchishrivastava7347 6 หลายเดือนก่อน

    Helped me getting started with css thanks

  • @EminoMeneko
    @EminoMeneko 5 ปีที่แล้ว +4

    IDs are used when you want to test your software with say Selenium or alike or when you want to structure your page. Of course you can use other selectors using XPath but ID just identify an element simply.
    You forgot the > selector which means direct child selector div > p selects p elements into a div which are directly descending ... for instance is not selected. There are others but I think this one could have been told about.
    There is certainly more to tell but in 20mn it is a fair amount of data. For the rest there are references. W3school being a good one.

  • @taariqq
    @taariqq 6 ปีที่แล้ว +3

    Nice little presentation that one can keep for reference for css basics

    • @WebDevSimplified
      @WebDevSimplified 6 ปีที่แล้ว +1

      Thanks! I'm really glad you enjoyed the fact that I made the video shorter since that was one of my main goals with this video. I wanted to make it easy to digest and come back to.

    • @taariqq
      @taariqq 6 ปีที่แล้ว +2

      @@WebDevSimplified short videos that deal with just one or a few aspects of CSS would be great. That way you can label them "CSS: how to style every odd element" rather than "learn CSS". Something distinguishing and specific for searches.

    • @WebDevSimplified
      @WebDevSimplified 6 ปีที่แล้ว +1

      @@taariqq I actually have a series on my channel very similar to this idea where I walkthrough how to style specific things in CSS. Usually each video also focuses on a specific CSS concept. You can check them out here. CSS Challenges: th-cam.com/play/PLZlA0Gpn_vH8mpXIUHjWoMAAgoCEinL0R.html

  • @TheMulee
    @TheMulee 3 ปีที่แล้ว +1

    Amazing, Stay Blessed.

  • @subodhkamble6480
    @subodhkamble6480 6 ปีที่แล้ว +4

    Love this class ❤️

    • @WebDevSimplified
      @WebDevSimplified 6 ปีที่แล้ว

      Thank you! I'm glad you enjoyed the video. 😄

  • @RahulRoy-ub5or
    @RahulRoy-ub5or 3 ปีที่แล้ว +1

    Awesome tutorial ❤️. It is helping me so much. Thank you👍

  • @salv236
    @salv236 6 ปีที่แล้ว +4

    thanks for sharing i was told that using * {property: value;} is bad practice and that to use either html or root

    • @WebDevSimplified
      @WebDevSimplified 6 ปีที่แล้ว +1

      In general using the everything selector is not a good idea, because it messes with inheritance and is a pain if you need to override it in certain elements. For things such as font-family using root or html is a good idea since font-family is inherited by default.
      Properties such as box-sizing, though, are not inherited by default, and when you want all elements on your page to have a specific box-sizing the everything selector is the only way to accomplish this.

  • @wungkachuishatsang
    @wungkachuishatsang 6 ปีที่แล้ว +2

    Hello sir... Which editor r u using...??

  • @manuelvillegas9171
    @manuelvillegas9171 5 ปีที่แล้ว

    Damn, I read a whole book on css. I regret not going on youtube for this video haha. Great content and explanation!

    • @brandonden795
      @brandonden795 5 ปีที่แล้ว +3

      I always check TH-cam>Google>Reddit in that order whenever I want to learn something. If all those fail, then I buy a book.

  • @Grewal0007
    @Grewal0007 6 ปีที่แล้ว +2

    thank you....make part 2

    • @WebDevSimplified
      @WebDevSimplified 6 ปีที่แล้ว

      What would you want to see in a part 2? I have a series that I consider a good followup for this video where I style an entire band website. It uses all of the knowledge from this video to create a modern looking website. You can find the series here. th-cam.com/video/Sv_NAxi_jNs/w-d-xo.html

  • @mmmPeanutBrittle
    @mmmPeanutBrittle ปีที่แล้ว

    Helpful, thanks!

  • @iliassuvanov6690
    @iliassuvanov6690 4 ปีที่แล้ว

    Thanks bro, explained well

  • @pulse5863
    @pulse5863 3 ปีที่แล้ว

    Amazing . Thanks alot

  • @Hsa008
    @Hsa008 4 ปีที่แล้ว

    Bro how you did the animation at start of video?

  • @youneskhellaf202
    @youneskhellaf202 3 ปีที่แล้ว

    This will be enough to go directly to learn bootstrap?

  • @freelancermahmudul3291
    @freelancermahmudul3291 5 ปีที่แล้ว

    loving channel

  • @AbhishekKumar-mq1tt
    @AbhishekKumar-mq1tt 6 ปีที่แล้ว +1

    Thank u for this awesome video

    • @WebDevSimplified
      @WebDevSimplified 6 ปีที่แล้ว

      You are very welcome. I am glad you enjoy it.

  • @jhonbydimanche4764
    @jhonbydimanche4764 3 ปีที่แล้ว

    Thanks a lot

  • @martinosorio5830
    @martinosorio5830 ปีที่แล้ว

    Don’t know what I am doing wrong following through it and my heading doesn’t change colors don’t know where I am going wrong

    • @martinosorio5830
      @martinosorio5830 ปีที่แล้ว

      Fixed it had two closing tabs smh lol first day on css

  • @nurzhanamantay8729
    @nurzhanamantay8729 4 ปีที่แล้ว

    Thaank you

  • @pchandu1995
    @pchandu1995 3 ปีที่แล้ว

    can you guys centre a div right now?

  • @whitecode6344
    @whitecode6344 5 ปีที่แล้ว

    Thanks

  • @midhunkp4694
    @midhunkp4694 6 ปีที่แล้ว

    Please give css3 full course

  • @srinaths2361
    @srinaths2361 3 ปีที่แล้ว

    position:sticky not working in nested table with overflow: scroll

  • @carpediem73
    @carpediem73 4 ปีที่แล้ว +1

    thank you for this, was very helpful

  • @mrmachir03
    @mrmachir03 6 ปีที่แล้ว

    4:49

  • @anrigameplay
    @anrigameplay 2 ปีที่แล้ว

    I want to make a website, why I want to.

  • @JNET_Reloaded
    @JNET_Reloaded 6 ปีที่แล้ว +1

    when using css to make buttons how do I make it run a function when pressed? it never works for me!?!?

    • @WebDevSimplified
      @WebDevSimplified 6 ปีที่แล้ว +3

      Styling an element in CSS will only change the presentation of the element. If you want to add functionality to an element on your page you need to use JavaScript. The addEventListener function will allow you to add an event to listen to a click event on a button. For example in JavaScript you could write
      element.addEventListener('click', function() { alert('clicked button') })
      If you are still confused about the use cases of CSS and JavaScript, check out this video where I go over how the different technologies in the web work. th-cam.com/video/88QJumITbQA/w-d-xo.html

    • @JNET_Reloaded
      @JNET_Reloaded 6 ปีที่แล้ว

      Nie thanks, will you do a tut vid on this?

    • @WebDevSimplified
      @WebDevSimplified 6 ปีที่แล้ว +1

      I will. I am actually recording a video on this exact topic today, but it won't be released until next Thursday.

  • @fuadarfan447
    @fuadarfan447 3 ปีที่แล้ว

    👍

  • @ninjoe7564
    @ninjoe7564 2 ปีที่แล้ว

    haha jokes on you i already subsccribed

  • @shamr0cks319
    @shamr0cks319 6 ปีที่แล้ว +1

    Traversy Knockoff

    • @WebDevSimplified
      @WebDevSimplified 6 ปีที่แล้ว +4

      I take that as a huge compliment being compared to Brad Traversy. He is an amazing teacher and has helped and inspired so many people. He is one of the reasons I decided to pursue my passion of teaching, and I am loving every second of it.

    • @freecodecamp
      @freecodecamp  6 ปีที่แล้ว +4

      Brad Traversy is awesome! You should definitely watch his videos in addition to ours. You are right that he also has a great CSS Crash Course. I encourage everyone to watch it to get another perspective. th-cam.com/video/yfoY53QXEnI/w-d-xo.html

  • @jhonbydimanche4764
    @jhonbydimanche4764 3 ปีที่แล้ว

    No offense but that first 9 mins was boring. I think it would be more educational to do the second part (coding) then do the first 9 mins.