CSS Functions Tutorial for Beginners | min, max, clamp, minmax, calc, attr

Подписаться 311 тыс.

Просмотров 11 тыс.

50% 1

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn CSS functions in this tutorial for beginners. CSS has many built-in functions and in this CSS functions tutorial we will cover min, max, clamp, minmax, calc, attr, repeat, var, and more.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Begi...
🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
📬 Course Updates ➜ courses.davegray.codes/
CSS Functions Tutorial for Beginners | min, max, clamp, minmax, calc, attr
(00:00) Intro
(00:05) Welcome
(00:26) Starter Code
(00:57) CSS functions we already use
(03:01) min function
(06:18) Quick page adjustments
(07:45) Unit choices
(09:01) max function
(11:08) clamp function
(12:58) Add an aside with calc and clamp
(18:10) Small adjustment
(18:33) filter functions - brightness, hue-rotate
(20:57) Create a tooltip with attr function
(24:20) Grid functions - repeat, minmax
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 vscode-icons VS Code Extension: marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: marketplace.visualstudio.com/...
🔗 W3C CSS Validator: jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: specificity.keegan.st/
🔗 HTML Special Characters and Entities: unicode-table.com
🔗 CanIUse.com: caniuse.com/
📚 References:
🔗 MDN CSS: developer.mozilla.org/en-US/d...
🔗 MDN CSS Basics: developer.mozilla.org/en-US/d...
🔗 MDN CSS Selectors: developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: developer.mozilla.org/en-US/d...
🔗 MDN - Styling Lists: developer.mozilla.org/en-US/d...
🔗 MDN - Display Property: developer.mozilla.org/en-US/d...
🔗 MDN - Floats: developer.mozilla.org/en-US/d...
🔗 MDN - Columns: developer.mozilla.org/en-US/d...
🔗 MDN - Margin Collapsing: developer.mozilla.org/en-US/d...
🔗 MDN - White-Space: developer.mozilla.org/en-US/d...
🔗 MDN - Positioning: developer.mozilla.org/en-US/d...
🔗 MDN - Flexbox: developer.mozilla.org/en-US/d...
🔗 MDN - Basic Concepts of Grid Layout: developer.mozilla.org/en-US/d...
🔗 MDN - Grid Template Areas: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Images: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Background Images: developer.mozilla.org/en-US/d...
🔗 Chip Cullen - Article on Content Layout Shift: chipcullen.com/what-width-and...
🔗 MDN - CSS Media Queries: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Pseudo-Classes and Pseudo-Elements: developer.mozilla.org/en-US/d...
🔗 MDN - List of CSS Pseudo-Classes: developer.mozilla.org/en-US/d...
🔗 MDN - List of CSS Pseudo-Elements: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Custom Properties (Variables): developer.mozilla.org/en-US/d...
🔗 MDN - CSS Functions: developer.mozilla.org/en-US/d...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about CSS Functions helpful? If so, please share. Let me know your thoughts in the comments.
#css #functions #tutorial

Опубликовано:

7 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 32

@DaveGrayTeachesCode Год назад

CSS Functions are very useful. In this tutorial, we will look at many of the most used CSS Functions and how they can be applied. If you are just getting started with CSS, I recommend going to the start of my CSS for Beginners playlist found here: ru-vid.com/group/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

@rtk-hades5801 Год назад

Yesss finally thank you for your amazing work

@DaveGrayTeachesCode Год назад

You're welcome! 💯

@judeleon8485 Год назад

Thanks a million Dave, believe me, you're awesome in explanation. The clarity of speech and speed are excellent

@DaveGrayTeachesCode Год назад

You're welcome, Jude! 🙏

@Grihlo Год назад

Thank you Dave for sharing your knowledge with us! Your explanations are very clear and detailed. Since the content is becoming more complicated I watch every video twice. First time - just watch and following your explanations, second time - I repeat and practice while watching , and also take some notes. Hopefully this way something will stuck in my mind after all.

@DaveGrayTeachesCode Год назад

That sounds like a great approach for learning, Grigory! I'm glad I could help! 💯

@elvispontes4165 Год назад

Excelent class as always. Thanks a lot again.

@DaveGrayTeachesCode Год назад

You're welcome!

@mocococo2877 4 месяца назад

You provide great tutorials. Thank you. Just this time ... I think you introduced unnecessary complication using those vars, so one have to keep memorizing them, instead of just property - value . Also I was thinking that you could have used some more exaggerated values for the font so it would be more apparent.

@sonamohialdin3376 Год назад

So good tutorial thank you

@DaveGrayTeachesCode Год назад

Glad it was helpful!

@efesonmez7662 Год назад

Thanks for the lesson Dave. I would love to see you create a website and implement the features that we have learned from you. ( Could be a website for a Coffee Shop for instance). I think the only way to gain experience, in this case, is to build an actual website and I would love to learn that from you. Greetings from Istanbul.

@DaveGrayTeachesCode Год назад

This is how I will end this CSS series. Thank you for the request! 🙏

@KaimanGod Год назад

Thank you teacher

@DaveGrayTeachesCode Год назад

You're welcome! 💯

@learn029 Год назад

Make Video on NVM crsah Course

@robinheyer708 Год назад

28:03 I'm actually not seeing that width mentioned anywhere in the "computed" list. Did the layout change? I can see the width when I use the shortcut Ctrl+Shift+C and hover over the square but I can't find it in the list. I did type along with the video so there's a chance I missed something...

@ahmad-murery Год назад

a few days a go I used vh unit for font size, and I think I need switch to using clamp() function instead, for the tooltip, we can set bottom : 1em instead of top: -2px so it automatically adapts to font size. Thanks Dave,

@DaveGrayTeachesCode Год назад

Great suggestion, Ahmad! 💯

@subhajitpanja1353 Год назад

Awesome Sir, I want a tutorial on React testing from you

@DaveGrayTeachesCode Год назад

Thank you for the request! 💯

@abdulrahmanagboolaosho3582 Год назад

you can also comment using ctrl /

@carloschaves8892 9 месяцев назад

What's the name of the theme?

@synen Год назад

Dave, how many sections will this series have? Thank you.

@DaveGrayTeachesCode Год назад

We are nearing the finish! Just a few more. 🚀

@synen Год назад

@@DaveGrayTeachesCode This is wonderful, thank you so much.

@Bayans89 Год назад

Hello Dave, the min and max functions are not working. does this related to web browser? I'm using chrome

@DaveGrayTeachesCode Год назад

It is not related to the web browser. They do work in Chrome. If you ever doubt a feature will work in your browser, check it at CanIUse.com - also linked in the description resources.

@tonytony-fc6gq Год назад

iv tried clamp for font-size and does not work eg font-size: clamp(45px, 45px + 1.5vw, 72px) , when i get to full screen of 1440px , the header is not at 72px by design, so i have been sticking to px

@DaveGrayTeachesCode Год назад

At a width of 1440px, your clamp specs create a font-size of 66.6px. It reaches a size of 72px at a page width of 1800px. I suggest using vh instead of vw units when setting font-size with clamp.

@tonytony-fc6gq Год назад

@@DaveGrayTeachesCode thank you, is there a formula to know which vh value to use or i just have to play around until i get to 72px?