Common CSS properties and how they work

Ғылым және технология

It doesn't take that many properties to style your site really nice. These roughly 20 properties should be a good foundation to build anything you want.
Previous video on HTML tags: • Common HTML tags and w...
Hope you enjoyed the video!
Check out this code here:
github.com/engineer-man/youtu...
Join my Discord server to chat with me:
/ discord
Check out some code on my GitHub:
github.com/realtux
github.com/engineer-man/youtube
Come visit us on Reddit:
/ engineerman
Other Social:
/ _engineerman
/ engineermanyt

Пікірлер: 65

  • @Jeevanmn
    @Jeevanmn2 жыл бұрын

    This is actually the most complete yet compact course in html css on the whole internet!

  • @kajautus

    @kajautus

    2 жыл бұрын

    And it took like 10min.

  • @patrique.taletoria
    @patrique.taletoria2 жыл бұрын

    Thank you so much. A lot of some youtubers who explained this, won't get to the point. Some even take hours trying to cover what you did here in 12 mins. For the hours and mins and secs that you have saved me, thank you sooo much.

  • @perrymathias
    @perrymathias3 жыл бұрын

    i'm glad chase had an absolute and fixed position. cute dog. thanks man!

  • @hughrees-beaumont9433
    @hughrees-beaumont9433 Жыл бұрын

    This is head and shoulders the best HTML/CSS video I've seen anywhere; it answered pretty much every question I've ever had so I'm extremely grateful to you

  • @AJonVolk
    @AJonVolk2 жыл бұрын

    I love your short concise style of covering syntax, it's refreshing and so much more efficient than other KZread video's, I hope my comment helps the algorithm :p

  • @LifelessNerd
    @LifelessNerd3 жыл бұрын

    Pumped for the next video recreating pages!

  • @njafros8
    @njafros82 жыл бұрын

    Bro Ive watched so many videos on the subject you're the only one who took the time to explain the basics... Awesome stuff man much apreciated !

  • @EngineerMan

    @EngineerMan

    2 жыл бұрын

    You're welcome :)

  • @hadireg
    @hadireg2 жыл бұрын

    Great way of putting things and explanation structure! Thank You!

  • @mardarg3
    @mardarg33 жыл бұрын

    Best CSS explanation! Thank you!

  • @3llo0H
    @3llo0H3 жыл бұрын

    thanks for the video! exactly what I was looking for

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

    Like a breath of fresh air. Fundamentals are important!

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

    This really helped, thank you.

  • @skootdiggity1301
    @skootdiggity13013 жыл бұрын

    #whatsgoinonjineers

  • @pja1991
    @pja19913 жыл бұрын

    Thank you for sharing this.

  • @closertothecosmos3519
    @closertothecosmos35192 жыл бұрын

    subbed bcz this helped and finding you was difficult

  • @danield.7359
    @danield.73593 жыл бұрын

    great and simple to understand explanation. I missed "float" though.

  • @EngineerMan

    @EngineerMan

    3 жыл бұрын

    I ended up cutting float out at the editing process because I wasn't satisfied how I explained it. I'll be sure to cover it in a future HTML/CSS video (there's still a couple more to go).

  • @TrevorWilliams215
    @TrevorWilliams2153 жыл бұрын

    This is wonderful. Finally someone explains this nicely enough with the right visuals to make it click. I have struggled with CSS for so long and gave up because when I try to experiment with it, nothing changes on the webpage or it breaks something unrelated. CSS debugging tools are no help and I'm left to google stuff and watch videos in accents I can barely comprehend. Thank you for doing this and I can't wait to see you break down and recreate websites from scratch. Someone needs to make that a series of videos if that doesn't already exist.

  • @zigginzag584
    @zigginzag5843 жыл бұрын

    Must be something in the air, I was right in the middle of making a new local site just to make listening to music and going through my files a bit more enjoyable.

  • @danesmith7774
    @danesmith77743 жыл бұрын

    I've recently been building my own site - for fun mostly. I've used Bootstrap to handle the styling, do you always write custom css for your projects or do you use pre-built libraries?

  • @EngineerMan

    @EngineerMan

    3 жыл бұрын

    In 2020 for any non-trivial project I'll use a CSS framework. Typically Bootstrap, Foundation, or Material Components for Web.

  • @kavishkasulakshana9848
    @kavishkasulakshana98483 жыл бұрын

    thank you so much 👍

  • @Venom-ne4ox
    @Venom-ne4ox3 жыл бұрын

    Great, Thanks a lot!

  • @michaelvilain8457
    @michaelvilain84573 жыл бұрын

    Thanks for explaining the difference between padding and margin. Those always confused me.

  • @MrGustavCR
    @MrGustavCR2 жыл бұрын

    @Engineer Man Thank you for a great tutorial. Question: How come you prepend the main.css stylesheet with a forward slash when you link to it inside the index.html? I can reproduce the tutorial sample webpage when not prepending this file with a "/". I use the same folder structure as well.

  • @EngineerMan

    @EngineerMan

    2 жыл бұрын

    On a URL that is just "/" it doesn't matter if you do "/main.css" or "main.css". However, if you were on a URL that was like "/users/login" and you put "main.css" it would try to request that from the URL "/users/login/main.css" which wouldn't exist. Generally speaking you want to express URLs as the full path including the "/" in the beginning.

  • @aayanpathan5124
    @aayanpathan51242 жыл бұрын

    I am struggling learn web Development 2 years i see recommendations in feed i glad youtube algorithm thanks enginner man

  • @spy4303
    @spy43033 жыл бұрын

    Why are you so underrated, man??

  • @noweare1

    @noweare1

    Жыл бұрын

    It takes years to be an overnight sensation.

  • @Fytrzaczek21
    @Fytrzaczek212 жыл бұрын

    2137? He used the funny number! Pope JP2 loves you!

  • @futbolplayer913
    @futbolplayer9133 жыл бұрын

    Thank you so much! Great overview! If I want a footer on my web page, what do you reccomend? If the page content is short then the footer will look out of place. Any reccomendations welcome

  • @danield.7359

    @danield.7359

    3 жыл бұрын

    The "fixed" position property ("position: fixed;") could help as it makes the item stay in the same position within a view-port regardless of the view-port's size and regardless if scrolling.

  • @futbolplayer913

    @futbolplayer913

    3 жыл бұрын

    @@danield.7359 A fixed footer behaves similar to the accept cookies notifications on sites. Do you recommend I have it as relative and switch to fixed if the height is too small?

  • @septim2315

    @septim2315

    3 жыл бұрын

    Why not use absolute positioning? Put it at the end of the uppermost parent or before then position it absolute with bottom: 0

  • @danield.7359

    @danield.7359

    3 жыл бұрын

    @@futbolplayer913 try the solution of Septim if you like it to stay at the bottom of the document. Means, if you scroll up (say the document is longer than the view port) it will disappear. Otherwise with the fixed position it may indeed behave like the (bugging) EU cookie notification.

  • @futbolplayer913

    @futbolplayer913

    3 жыл бұрын

    @@septim2315 Perfect. Thank you

  • @swapnilshinde9868
    @swapnilshinde98683 жыл бұрын

    Can python make search bot program to look website to buy chipset available stuff?

  • @Demodude123
    @Demodude1233 жыл бұрын

    This is great, but how does one center a div?

  • @buddy.abc123

    @buddy.abc123

    3 жыл бұрын

    I google it everytime, I still don't know. CSS is the hardest part of a dev's job

  • @o156GTA

    @o156GTA

    3 жыл бұрын

    Make a class for the div and use "margin: auto;" and give it a width below 100% or it won't do anything.

  • @septim2315

    @septim2315

    3 жыл бұрын

    If you can use flexbox for parent, use that + justify-content and align-items. If not use the margin method

  • @o156GTA

    @o156GTA

    3 жыл бұрын

    @@septim2315 Flexbox is very useful but I feel it needs a video of it's own.

  • @Erynnin
    @Erynnin3 жыл бұрын

    For Canadians, the title Engineer is regulated and reserved for licensed individuals. With that in mind and seeing a video about CSS, well... Is that Engineering?

  • @EngineerMan

    @EngineerMan

    3 жыл бұрын

    Maybe engineering with a lowercase e.

  • @maycherryblossoms
    @maycherryblossoms3 жыл бұрын

    How do you configure Atom to auto refresh your browser like that?

  • @EngineerMan

    @EngineerMan

    3 жыл бұрын

    It's not Atom that does that, it's the npm package live-server.

  • @usingvancedplzdontban1128
    @usingvancedplzdontban11283 жыл бұрын

    Doesn't your Atom get high CPU usage problems? Mine spikes up to 100% for no good reason erratically. Thinking of ditching Atom.

  • @EngineerMan

    @EngineerMan

    3 жыл бұрын

    The only time I have high CPU issues with Atom is when I'm working on very large files. However, I suspect this would be a problem with most graphical editors.

  • @usingvancedplzdontban1128

    @usingvancedplzdontban1128

    3 жыл бұрын

    @@EngineerMan unfortunately it happens much more frequently in Atom than VS Code for me. Even a simple Hello World Python script in Atom sometimes volcanoes my CPU to a constant 100% CPU usage, fans ablaze and all; ultimately crashing my PC. Anyway, good to hear you're not facing that problem.

  • @a.a.aa.a.a9756
    @a.a.aa.a.a97563 жыл бұрын

    why when I open a new document and I click on enter it's not ganging to google ??

  • @pja1991
    @pja19913 жыл бұрын

    What is the IDE you are using?

  • @braydenhouston

    @braydenhouston

    3 жыл бұрын

    He is using the Atom Text Editor atom.io/

  • @pja1991

    @pja1991

    3 жыл бұрын

    @@braydenhouston Thank you.

  • @ukeshrestha
    @ukeshrestha3 жыл бұрын

    Cool

  • @resumidor.
    @resumidor.3 жыл бұрын

    Open the firmware of mi band 4 ? How much costo to you make it?

Келесі