How to make a nice site with less CSS

Рет қаралды 56,268

Kevin Powell

Күн бұрын

Пікірлер: 103

@juxtopposed 11 ай бұрын

Thank you so much for giving Realtime Colors a try. Sure hope it makes everyone's job easier!

@CirTap Жыл бұрын

IBM Plex is great. Literally massive: the font has a ton of glyphs which makes it an ideal choice for international scripts (Greek, Hebrew, Arabic, Cyrillic, Thai...) and this blows up the download size. Try subsetting it to the language and script you need to not waste visitors bandwidth and mobile data plans.

@IllllIIllllI Жыл бұрын

the best would be to use any variable font (like Jetbrains Mono) where the entire font family is in one compressed WOFF2 file

@CirTap Жыл бұрын

@@IllllIIllllI Plex is a variable font, but that's not the point. It has thousands of characters (glyphs) which makes this font file huge, even as a woff2 format.

@IllllIIllllI Жыл бұрын

@@CirTap being variable absolutely matters. For example, Jetbrains Mono is only 39kb for the whole 100..800 weight range (latin subset). Browsers are smart enough to download only subsets that are needed thanks to unicode-range, so the Greek symbols are never downloaded

@iamtharunraj Жыл бұрын

Kevin, huge thanks to you. I was really confused when it comes to color scheme and font combination. But the two sites you showed in this video are absolute game changers. You are really awesome!

@caiosantosvargas Жыл бұрын

Congratulations I had not seen these properties but now and only success

@NK6only Жыл бұрын

I've just recently started a new pet project and was asking myself exactly what the title promises 🤔 So thank you, Kevin, I'm confident this is another excellent video from you

@rogerpence Жыл бұрын

Another supremely helpful video. Thank you, Kevin. Your fast path on this basic stuff is really great.

@ichoupettev4661 Жыл бұрын

that is just one small video with a stupid lorem article, but I learn so mutch stuff in 19minutes ! thanks you ! :)

@RaveKev Жыл бұрын

Absolute awesome 19 Minutes! (I had to rewind the whole time, because i distracted myself with slamming my Spacebar on Realtime Colors :D )

@KevinPowell Жыл бұрын

Thanks so much, so glad that you enjoyed it!

@herbowenby4357 Жыл бұрын

WOW! This will make life so much easier. Thank you, Mr. Powell!

@kacperkonieczny7333 Жыл бұрын

6:38 you could also use ":where(:nth-child(n+1))".

@Allformyequine Жыл бұрын

I personally prefer the "flapper" LOL , thank you made me laugh out loud !! hahah To heck with those Wrappers !

@Lucsy3012 Жыл бұрын

Really nice, some great new stuff that I gotta pick up!

@Eupolemos Жыл бұрын

This was an amazing video - all the stuff you need to know not to shoot yourself in the foot at the start of a project, all in one video with no filler. Thank you

@MauriceKindermann Жыл бұрын

Damn, nice work mate. I've learnt a lot of these things piecemeal over the last year in an attempt to upskill my vast but dinosaur CSS knowledge. This fits a lot of pieces together in a very simple and comprehsneive way. Appreciate it!

@genaroibc Жыл бұрын

Kevin, I never comment, but your videos are amazing ❤

@josipbjezancevic5697 10 ай бұрын

I just googled that 'flapper' word, and it actually exists. Very vintage of you @KevinPowell 😂

@RobertMcGovernTarasis 7 ай бұрын

*chuckles* yes that would have been an unexpected education for anyone that hadn't come across it before. Could have been worse and it was an s not an f at the front

@JosephCodette Жыл бұрын

Utopia is really great , I also use the space properties for anything margin or padding

@Allformyequine Жыл бұрын

YAY! your Flow Space finally explained !

@dominicabah5431 Жыл бұрын

Thanks Kelvin for your diggings.

@OnlyADownstat Жыл бұрын

light dark mode switch using CSS... awesome thankyou

@theshelbypalace Жыл бұрын

awesome!! thanks kevin!!

@CarlosCordovaDeveloper Жыл бұрын

Great video man! Help me a lot

@MarkHatter Жыл бұрын

Great as usual. Particularly when you said flapper :)

@aleattorium Жыл бұрын

The poor owl :(

@kacperkonieczny7333 Жыл бұрын

At least it feels nothing

@alhassanecamara2095 Жыл бұрын

Great 👍 so much of thing to learn in simplicity

@CoolCode-9 Жыл бұрын

Happy learning journey ❤

@gshubh Жыл бұрын

Clicked as soon i saw the title 🔥

@stefan5673 Жыл бұрын

Thank you - Your Videos are awesome ❤👍

@zainslamdien8138 Жыл бұрын

Awesome King. 👌

@rovic2hacking505 Жыл бұрын

Can you make a video about Vanilla CSS nesting, there is news that it has been already implemented for almost browsers except mozilla.

@riley_was_there Жыл бұрын

Awesome video! Very nice pace. It’s be great to see this same concept for forms! I find them to be very difficult to style (especially file inputs)

@Richard-cl6kt Жыл бұрын

Great video. Working a lot with Tailwind CSS and already quite good at it. At the moment im studying and for a project i needed to use plain css. This really helped me a lot to get things going. Thanks. I already knew Utopia but couldn't really figure out how to work with it!

@hyperprotagonist Жыл бұрын

Kevin, from henceforth I will refer to you as Vanilla Powell.

@kacperkonieczny7333 Жыл бұрын

Vanilla Power

@MangoDev_ Жыл бұрын

One thing I've always wondered is how you organize big CSS/SCSS files. When I start making larger CSS files with more and more specific selectors, the more cluttered and randomized the file gets. How do you neaten your CSS files to be more navigable?

@axelBr1 Жыл бұрын

I order mine alphabetically by html tag, (although I do group closely related tags, e.g. list and list items) and use multiple CSS files, with each file for a particular feature or style, especially if it's only used in a limited number of pages.

@santhanam2855 Жыл бұрын

I am not so good at gauging the correct CSS organization from the get-go. So I use VSCode's "go to symbol" feature of the command palette which works on CSS files. And html as well. So the workflow is like "ctrl+p index.html ctrl+shift+o article.wra" to go to the HTML, and then the same thing in the CSS file. If two related css selectors are in different places in the file, alt + left/right moves you back and forth in the same file. Then before committing I re-order it to make sense for the webpage so it's easier for others.

@justkailash Жыл бұрын

Love this tutorial learn... few more things.... I must say you should try once for a admin panel development from the scratch ... so we can go for the next level now.... how to plan admin panel in terms of front end development.... fontsize.... variables... etc... Thanks a lot

@carlosg8716 Жыл бұрын

Loved the flapper 😂

@sayw0rdz Жыл бұрын

Hi Kevin, I was never interested in learning css but your channel really grew on me and now I'm excited to start. I looked through your playlists to see if there is a starting point but was confused with the sheer amount of awesome videos you have. If you have a minute, could you just point me into the right direction on where to start on your channel?

@genechristiansomoza4931 9 ай бұрын

I think you need his course if you want direction. It's not free though.

@amadeov5998 Жыл бұрын

Do you have a series where you cover these little flash tips like the "* + *" selector. I am still learning web development and have always wondered if people just stumble upon these nuances while coding and on forums or if there is a secret shortlist of these types of "industry experience" tips.

@KevinPowell Жыл бұрын

I do have a more in-depth video on * + * though I forget what the name of the video is now... might be fun to do a video where I go into some of the more useful ones like this. In this case, if you look up "lobotomized owl" you'll find an article that goes into more detail on it as well

@amadeov5998 Жыл бұрын

@@KevinPowell That would be awesome! Currently looking up that selector and stumbling into more information from Hayden.

@mahadevovnl Жыл бұрын

Why not use a flexbox oriented vertically and setting `gap: 1em`? That flow space is nice but looks so alien :)

@ThePulseProducer Жыл бұрын

While this does the trick and can probably work for most designs, the space between the elements will always be 1rem with this approach. Depending on the company/designer you are working with, they will not want equal spacing and instead want spacing that is more appropriate depending on the elements used. Ex: headings will have more space above them than paragraphs/list elements. That is where Kevin's example is better, but really it depends on the use case. If the flex/grid gap spacing works for your needs then there is not a huge reason to change it.

@Horse-tradeEu Жыл бұрын

Always a new tip to learn from Kevin.

@user-mma173 Жыл бұрын

Thanks Kevin for all of your work. I like how CSS makes it easy to format the documents and I tried to use for printed documents. I ran into issues when doing so e.g. could not do running headings and subheadings; and discovered that there is some draft CSS for paged media that did not become standard. Could you please make a tutorial about CSS printed media, or host someone who does? Something similar to the video you did for E-Mails. Thanks

@CirTap Жыл бұрын

Browser support for print media has always been mediocre and will likely be forever. They focus on screen rendering. "Prince XML" is probably the best (commercial) tool for the job with excellent CSS print support. Despite its name it supports HTML5. Results are also rendered to PDF .

@user-mma173 Жыл бұрын

@@CirTap I came across Prince XML during my research. However, I was avoiding using external tools because I prefer this, and my workstation at work is locked down and I cannot install non-approved applications.

@CirTap Жыл бұрын

@@user-mma173 then all you can do is bug the browser makers to add better support for print and push features to be included in Interop 24 (or 25, 26). Paged media layouts are just a pita, 'cos you can't actually control what's on a page. You'd be much better off with sth like Affinity Publisher. If it's essential to you job, maybe convince your boss/IT department to allow Prince XML anyway (on a sandboxed environment) . It's an established professional application and likely causes less harm than surfing the web with a browser or using MS Office...😇

@KevinPowell Жыл бұрын

I worked in print for years, but never touched CSS for it 😅. I much prefer page layout tools for print stuff, though I do realize sometimes print styles are required for some types of projects. There's a print book (which is escaping me at the moment), that I've read that was fully written in HTML and CSS... so it's not that it isn't possible, but like CirTap mentioned, it's not great either, lol. I'll see if I can find anyone with more experience than me to pick their brain.

@user-mma173 Жыл бұрын

@@CirTap I can convince my IT to install such app but my intention is to have something that is not dependent on anything other than the browser. My goal is to automate reports generation through web apps and share my solutions with my colleagues.

@blckv Жыл бұрын

Hi Kevin, I write you because I want to share a technique I use often and I want your opinion about it. I often found myself having this structure when I want a full-screen bg image with content: div_wrapper_for_the_image div_container heading paragraph [...] I found a technique (Maybe it is already used I don't know) using the padding as a virtual container. What I do is this: .contain_in_x { padding-inline: max(calc((full_width - contained_in_x_width) / 2), min_padding_n, ...); } So I can have only one div and the padding with virtualize ( Sort of) the second one. For example, if I want to contain in a 1440px virtual container, I can do: .c_in_1440 { padding-inline: max(calc((100vw - 1440px) / 2), 4rem, 2rem); } By doing so the padding-inline with be calculated to have what's inside at 1440px max regardless of the viewport size as long as we don't reach the 1440px threshold, otherwise, it will switch to the other values. What do you think?

@Abubakr-md6kz Жыл бұрын

thank you for sharing this i well try your technique :)

@rajaulislamratul4736 Жыл бұрын

Do you use eye care monitor or regular ones?

@troy1516 Жыл бұрын

Hi, could anyone point me in a good direction to learn layouts so that im comfortable placing things wherever i want? I have messed around with flexbox and grid but still havent found a good resource to learn this, thanks

@aleksandraurbanek9966 Жыл бұрын

Thank you very much! I have a question: what is the difference between - -flow-space and margin-top? I am sorry for bothering you but i'm still learning.

@sandy_knight Жыл бұрын

Surely the least CSS with the biggest impact is: * { display: none !important; } 😜

@CoolCode-9 Жыл бұрын

😂😂😂

@lukas.webdev Жыл бұрын

😄👍

@kacperkonieczny7333 Жыл бұрын

😂😂 or *{outline: red 1px solid;}

@Bean-kw2xp Жыл бұрын

thank you

@JasonJA88 Жыл бұрын

Thank you...😁

@phantomse24 Жыл бұрын

Hey Kevin. This might be a stupid question but what do you think about all this AI like chatgpt taking over everything.. is it worth learning html css and j.s. ?

@KevinPowell Жыл бұрын

The hype around how they can tackle code has already died, as people realize they're terrible at it 🤣. They can help, and speed up workflows, but your job is safe 😊

@CirTap Жыл бұрын

Yes, you should, cos you have to explain this stupid thing exactly what it should produce, and then you have to fix all the bugs the machine added anyway, cos it doesn't actually *know* or *understands* a thing of what it copy-pasted together. AI has great performance but no competence. It likely takes a few more AI generations to become truly creative not just an even faster copy-paste robot. It remains interesting though.

@Kevin-qz4eq Жыл бұрын

link to the source

@matteocapalbo5863 Жыл бұрын

Hi Kevin, why do you use margin-top versus margin bottom to space elements between them? What is the best approach?

@ThePulseProducer Жыл бұрын

I think he forgot to touch on it. But using margin-bottom will also add margin to the last paragraph/element in the article, which is undesirable. This can be offset by updating the selector to .flow > *:not(:last-child), but from what I've seen his method is more common practice.

@emmanuelxs6143 Жыл бұрын

@kevin I just wanted to ask I noticed that you used width: min(100% - 2rem, 55ch); Instead of the usual width: min(calc(100% - 2rem), 55ch); So the calculation that requires the calc function does work without it 😅

@KevinPowell Жыл бұрын

min(), max(), and clamp() don't need nested calcs for math 🙂

@emmanuelxs6143 Жыл бұрын

@@KevinPowell ok thanks 👍

@aryzen2781 Жыл бұрын

how do you organize your css for a multi-page website?

@taariqq Жыл бұрын

Excellent question.

@joeldcanfield_spinhead Жыл бұрын

Is there a place to see all the code together?

@joeldcanfield_spinhead Жыл бұрын

Anywhere?

@stevekirkendall4555 Жыл бұрын

Hi Kevin, is just the HTML of this page available anywhere? Many thanks!

@pacoalsal Жыл бұрын

Lobotomized owl lmao

@sohanrazzak241 Жыл бұрын

😊

@mrabhijitrabha Жыл бұрын

⚡Flash is faster or my click 😂

@CoolCode-9 Жыл бұрын

😂😂😂

@placeholder1995 Жыл бұрын

Notification gang checking in 🛎

@LokeshKumar-tk7ri Жыл бұрын

Do you think that AI will replace web developers??

@lukas.webdev Жыл бұрын

No. 😉

@kacperkonieczny7333 Жыл бұрын

Nope. No one would hire a "parrot" for mind tasks.

@ThatLucifer Жыл бұрын

Im confused about making manual coding website My questions is how i add CDN, Cache , Backup , Security stuff in it?

@PascalHorn Жыл бұрын

Just wanted to let you know: There is a real thing called „Less CSS“, which is basically another shorthander like Sass. Which I actually use at work. The title of the video might be confusing or misleading for people who want to learn Less and come from search engines. I admit, not the best name chosen for Less for exactly this reason… 😏

@KevinPowell Жыл бұрын

Yeah, I know of Less (and come to think of it, probably where the name comes from, since you can write less CSS when using it, heh). Hopefully the combo with the thumbnail makes it more obvious, and I'll see if I can't think of a better name maybe.

@GarethField Жыл бұрын

The ads made me not watch this, after a few minutes

@Tausif_Khan_07 Жыл бұрын

I started using tailwind CSS can you make tutorial on it please

@howdyimflowey4341 Жыл бұрын

If you know CSS, you know how to use Tailwind. If you don't, learn CSS first.

@KevinPowell Жыл бұрын

I get why people like Tailwind, but it's not really my thing. Plus, I feel like covering regular CSS more useful, because what you learn can be applied with Tailwind, or however other people are deciding to work as well.