CSS For Non-Web Developers - Tutorial - Part 1

If you don't consider yourself a front end web developer, you're not alone! I never used to want to learn CSS, but recently I've had to learn the basics of CSS so that I could do quite a bit of styling. I've realized that 90% of everything I've ever needed to do comes down to about 10-20 basic CSS properties that are super easy to learn and memorize. In this video I'll be showing what these properties are and how to use them, and in the next video in this series, I'll go through detailed examples of them. I hope you enjoy the video!
💻 Thanks to Linode for sponsoring this video! Get a $100 60-day credit when you sign up with a new account from: linode.com/techwithtim
💻 ProgrammingExpert is the best platform to learn how to code and become a software engineer as fast as possible! Check it out here: programmingexpert.io/tim and use code "tim" for a discount!
⭐️ Timestamps ⭐️
00:00 | Introduction
04:02 | Environment Setup
05:46 | CSS Styles
08:32 | CSS Selectors
14:21 | Colors and Backgrounds
18:52 | Block Vs. Inline
21:28 | Widths and Heights
31:22 | Box Model
37:25 | Flex Box
49:12 | Positioning and Z-Index
🔗Links🔗
Playlist: • CSS Tutorial
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
👕 Merchandise: teespring.com/stores/tech-wit...
📸 Instagram: / tech_with_tim
📱 Twitter: / techwithtimm
⭐ Discord: / discord
📝 LinkedIn: / tim-ruscica-82631b179
🌎 Website: techwithtim.net
📂 GitHub: github.com/techwithtim
🔊 Podcast: anchor.fm/tech-with-tim
🎬 My KZread Gear: www.techwithtim.net/gear/
💵 One-Time Donations: www.paypal.com/donate?hosted_...
💰 Patreon: / techwithtim
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
⭐️ Tags ⭐️
- CSS
- CSS Tutorial
- Non-Web Developer
⭐️ Hashtags ⭐️
#CSS #techwithtim #CSS-Tutorial

Пікірлер: 65

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

    Hey Tim, I am starting a new project that involves a lot of front-end (while I came with a back-end history). Thanks a lot for your help! It helped me to understand the basics.

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

    Once again, thank you tim for this great tutorial The timing was perfect for me, I am currently learning HTML, CSS and JS fundamentals

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

    in few days i search css free course in youtube and i found it .it help me lot ..thank you😁😁😁

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

    "No longer will you have to look up how to center a div in StackOverflow"🤣🤣

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

    I just love your videos. ♡ So simple yet engaging, and you explain in a beautiful manner. Thanks!

  • @felixc.programs8209
    @felixc.programs8209 Жыл бұрын

    Great video! Your content is really great and has helped shape me as a new KZreadr and also data scientist/software engineer. Thanks for the content!

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

    Although this seems beginners course. We always expect you newer things and we really found it each time. Thank you Tim.

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

    This is exactly the video I was looking for, thanks mate.

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

    hey Tim this video is so helpful as I am trying to learn a new language.

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

    Well bro I have a suggestion whenever you are making a tutorial video for a language give a problem to us that we have to solve by coding that will surely be better for us :)

  • @devscript3897

    @devscript3897

    Жыл бұрын

    Yes

  • @ak-xg3sn

    @ak-xg3sn

    Жыл бұрын

    Finding your own problem to find a solution for would be even better.

  • @demaxl732

    @demaxl732

    Жыл бұрын

    Exactly

  • @shadowstar751

    @shadowstar751

    Жыл бұрын

    @@ak-xg3sn yea but for developers who has no creativity are going to find it hard to create own problem. Anyways I actually meant to say that he will give us a certain topic and we have to code that ( example : the video was about inputs in python then the exercise is to create a guessing game)

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

    For me i think learning flex box, display properties and position properties are the most important

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

    Looking forward to part 2!

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

    Hyped for Part two

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

    i'm relative new in css and html, I have so much difficulty to write them hahaha so thank you for this content tim!

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

    Thanks for your advice

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

    Best video on css ever seen

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

    Great , thanks tim 🌹

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

    Yeees, i would love that practical part

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

    Thanks Tim. I have been struggling due lack of knowledge of CSS. I know django and html but no CSS makes me bad web developer

  • @TheCollectiveHexagon
    @TheCollectiveHexagonАй бұрын

    Anyone knows what extension/config he used for different color highlighting on class/id? 12:52

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

    What did I learn? The gap attribute. Nice tutorial.

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

    thank you

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

    Hi Tim, I was wondering whether you could do something a little different. Like designing Shell in python. Would be really cool to see how you tackle this task. Thanks.

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

    This timing can't get any better!!

  • @OneworldKW

    @OneworldKW

    Жыл бұрын

    Is this a scam?

  • @gorg212

    @gorg212

    Жыл бұрын

    @@OneworldKW yes that is a bot

  • @mohd.shahid7163
    @mohd.shahid7163 Жыл бұрын

    Nice tutorial

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

    Can you show a algorithm that doens't visualize the best path, just thinking the this way is currently the shortest way and at the same time if some values are same like up and left, the priority will be up, beause if any of these are same: left, down, right it will always take up before left if they are same, if the left and down are same then it choose left. How's that working in code.

  • @Ben-oniDankyi
    @Ben-oniDankyi Жыл бұрын

    thanks this really worked If you can teach how to make a website responsive it will be cool

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

    Thanks 👍

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

    Thanks Finally css

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

    thanks

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

    In order to liveserver vscode plug-in to work, you guys also need turn on vscode auto saving file….

  • @ronny12301

    @ronny12301

    Жыл бұрын

    Just press ctrl+s every time you make a change I do it all the time, so at this point it's just muscle memory

  • @ickynho7

    @ickynho7

    Жыл бұрын

    @@ronny12301 there's a feature in vscode that allow auto-saving, at the point you don't even need muscle memory, besides, it's boring hit ctrl+s moment

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

    Will their be more code jams?

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

    Great!

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

    Hi there Tim I'm Kyle. Great work you doing, the stuff of legends. I have a problem importing Gifs to my gallary on Android. Will you make a Pydroid3 toutorial on how to make such an App. I know it's not relevant right now, but this is your latest totiurial. Kind regards Kyle.

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

    We want more frontend tutorial

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

    Thank you very much, if you don't mind HTML please as well

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

    I love CSS!

  • @Raja_Bilal

    @Raja_Bilal

    9 ай бұрын

    I love you too 😅

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

    How is your start up doing?

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

    How many parts this series will have?

  • @TechWithTim

    @TechWithTim

    Жыл бұрын

    2 parts

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

    Check out how Mike Dane does it

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

    Bro how to cheat act rank combot in Telegram

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

    Make sure to understand css units

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

    I LOVE UR VIDEOS TWT PLS SIGN MY COMPUTRR SCREEN (AUTOGRAPH) AHAHHAHHHHH

  • @nowifi3266

    @nowifi3266

    Жыл бұрын

    looking back 1 second ago i think this comment's only a tad bit weird...

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

    i am beginner

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

    Where RUST?

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

    Wonder why coding tutorial are not made for mobile users

  • @magicmedia7950

    @magicmedia7950

    Жыл бұрын

    Check out how Mike Dane does it

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

    After learning css, just learn tailwind and thank me later 😃

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

    Is that a fan behind you?

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

    🤩❤️❤️❤️❤️😊

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

    early 💀

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

    te

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

    Is this Tim sending messages or a scammer?

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

    even js for non web devs pls @Tech With Tim