Тёмный

7 CSS Techniques That I Use the MOST! 

DesignCourse
Подписаться 1,1 млн
Просмотров 124 тыс.
50% 1

bit.ly/3tgNBdv - Become a frontend developer (50% off limited time!)
-- Want to learn UI/UX? designcourse.com​​​​​​​​​
-- Today, we're going to take a look at the 7 most common CSS techniques that I use to achieve certain layouts. Some of these you may already know, some perhaps you didn't!
0:00 - Introduction
0:36 - An Awesome Offer
1:09 - Tip 1
2:07 - Tip 2
3:31 - Tip 3
4:39 - Tip 4
6:31 - Tip 5
7:42 - Tip 6
8:59 - Tip 7
10:39 - Closing
Let's get started!
#css #tips #frontend
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

Хобби

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

 

2 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 131   
@DesignCourse
@DesignCourse 3 года назад
What are some other tips/techniques did I leave out that YOU use commonly?!
@anohene1
@anohene1 3 года назад
When putting the overlay on a background image, I put a gradient before the image, and that also does the same thing as you showed. background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url("picture.jpg");
@jacobfunk710
@jacobfunk710 3 года назад
Your video is great but maybe you should not put your head right in front of the code you are trying to demonstrate 😅 (ex: 8:23)
@17twenty
@17twenty 3 года назад
Maaaaate. Why did you put your head on top of the code haha. Any chance of a GitHub demo repo for it at least?
@lowercaseguy3578
@lowercaseguy3578 3 года назад
Wats the future of frontend?
@viktorberczeli3009
@viktorberczeli3009 2 года назад
Might wanna use Flexbox instead of the Grid.
@n1leq3
@n1leq3 3 года назад
A lot of css tips and tricks videos are not necessarily real world usable. This one is great! Every property you can use on every project. Thanks, gary
@quentin443
@quentin443 3 года назад
Your head is a bit over the code and we can't see the whole code, but I really appreciate these tips !
@prymestudio
@prymestudio 2 года назад
html is what his head covered
@brandonesp6099
@brandonesp6099 10 месяцев назад
Presentations are always well thought out and clean
@unjoined
@unjoined 3 года назад
More of these! Thanks Gary!
@LC-yo3bj
@LC-yo3bj 3 года назад
More of these for sure. Well done thanks, learned a few great tips there
@pulserudeus7968
@pulserudeus7968 3 года назад
Thanks for all the tips, was looking for this tip 2:07 today and finally got it now
@benegers
@benegers 3 года назад
Loved the video. Definitely would love more of these!
@username8864
@username8864 3 года назад
Now that's what I'm talking about Gary. Please make series of these that would be really awesome
@nallawilljr.4873
@nallawilljr.4873 3 года назад
I'm designing a tribute page for my tutors and you're one of them, Gary Simon. Thank you for helping me in my self taught journey ✌🏾
@solosdev6946
@solosdev6946 3 года назад
Thanks Gary for some tips!!
@vLYoshii
@vLYoshii Год назад
Compact, nicely explained, with examples. Very good video. I'd love to see more of this in the future (preferably with more visual examples).
@theMadZakuPilot
@theMadZakuPilot 3 года назад
MORE VIDEOS LIKE THIS PLEASE. A JS VERSION WOULD ALSO BE AMAZING.
@i-jnked
@i-jnked 2 года назад
First of all, I love the design of your video and presentation. It's really simple and pleasing. Thank you so much for explaining things and how it works because that's how I would understand it very well. Thank you.
@niteshkrsah2222
@niteshkrsah2222 3 года назад
Was waiting for something new Thank you for it
@filiprybka3988
@filiprybka3988 2 года назад
Super video, thanks!
@rahulsbhatt
@rahulsbhatt 3 года назад
These are absolute gold🔥
@SimonHallMelbs
@SimonHallMelbs 3 года назад
Awesome , love these tips 👍
@johndoggett4657
@johndoggett4657 3 года назад
Thanks for the tips. I could use these on current projects I am working on. Going to add this to the Sass lib I have been building out.
@luffymonkey6967
@luffymonkey6967 8 месяцев назад
great presentation!
@themarin1992
@themarin1992 Год назад
great stuff man, thx:)
@esportsnexus
@esportsnexus 2 года назад
learned a lot, thanks Gary
@pavan4917
@pavan4917 3 года назад
👌🏻👏🏻Thanks! You gave some awesome🔥 tips Dude! 😀
@saurabhdaswant7833
@saurabhdaswant7833 2 года назад
Garry thank you for the tips i loved this video please make more !!!!!!!!
@J90JAM
@J90JAM 3 года назад
I've used most of these, apart from the clip path, I need to try it. Another nice video 👍
@RemzM
@RemzM 3 года назад
Cool content! Thank you!
@xantaclaws
@xantaclaws Год назад
Eventhough the content is excellent and useful, I considered subscribing on the outro music lol. Nice video !
@playstore-so2xm
@playstore-so2xm 3 года назад
Saving life?? Sure!!. Thanks Gary.👍👍
@rubenaaronovitch-bruce608
@rubenaaronovitch-bruce608 2 года назад
Woooaaahhhh, didn't realise that's why people use rems n such, though rems were just statically set as 16px. This has blown my little mind! Thank you sir
@omotovhmercy2557
@omotovhmercy2557 2 года назад
I had always been wondering if there was a way to centre div elements in CSS grid like you would in Flexbox using align-items and justify-content. I didn't know about this place-content before. Thanks for that. I also wasn't really a pseudo elements person, but I think I'd started using it after seeing this video. Nice video. Thanks a lot for sharing.
@ChrisPirillo147
@ChrisPirillo147 3 года назад
It's the perfect time for this!
@beinyourguard
@beinyourguard 3 года назад
the clip-path is pretty neat and pretty simple
@omaryassir5885
@omaryassir5885 3 года назад
Looking good Gary 👍
@timothywestern6488
@timothywestern6488 3 года назад
Going to give Scrimba a try. Been needing to up my UX game.
@Chetanoo
@Chetanoo 3 года назад
Thanks man
@ghostfrost3883
@ghostfrost3883 2 года назад
Gary I would much like a video about explaining differences between flexbox & grid properties like ‘justify-content’ vs ‘justify-items’ & grid.. etc. I use felxbox & grid all the time but still haven’t got a solid idea on what are these under used properties do, thanks!!
@muzammilsyed2339
@muzammilsyed2339 3 года назад
Thanks for the last one
@SeniorJuniorDeveloper
@SeniorJuniorDeveloper 3 года назад
Good stuff thanks
@danielradosa
@danielradosa 3 года назад
love this video, makes some stuff a lot easier haha
@swoorp
@swoorp 3 года назад
There is another trick, it is kind of old school but cool to have it. We can use a fit-content property value for width property.
@PossumMedic
@PossumMedic Год назад
3:36 - "We use an absolute unit" 💪💪💪 😂 Great vid thanks! 😃🙌‍ It would be cool if you framed them as challenges and then show how you solved them! I had fun pausing to figure out if my idea for tip 4 would work! 🙌‍ I had a different idea so it was great to see yours after testing mine!
@TokyoXtreme
@TokyoXtreme 2 года назад
Absolute unit.
@0jred01
@0jred01 3 года назад
This channel is awesome
@Flayer.14
@Flayer.14 3 года назад
Awesome Stuff
@luckyvanilla388
@luckyvanilla388 3 года назад
Keep it up and keep the hair growing ✌🏼
@dilshadzm313
@dilshadzm313 Год назад
In that tip 6 you can use Mask property and add a gradient and blend it's done ✅😌
@DrCaesarsPalace_MD
@DrCaesarsPalace_MD 3 года назад
Great tips! But your head is in front of the code at the bottom left. Why not put the code on the right? :)
@gelordtube
@gelordtube Год назад
Grid-template-areas!! I'm a beginner as a front end dev... (backend experienced) , that's my tip
@hey-ir1be
@hey-ir1be 2 года назад
thanks
@md.tausif5544
@md.tausif5544 2 года назад
love it
@wolfenrico
@wolfenrico 2 месяца назад
Thanks for the great tips. For tip 2, I would be interested in how I can place a small photo (JPG or PNG) instead of the blue line. Can you help me with this? Thank you!
@clevermissfox
@clevermissfox 8 месяцев назад
Curious why you used a grid not flex box which would be more forgiving if you were to add more divs. Also would love some clarification on why span elements are going outside of my divs? I can’t find very good answers when googling.
@dgloria
@dgloria 3 года назад
I've had the issue that my rem units didn't scale, now you say the font size has to be defaulted in pixels for the rem to scale properly?
@mianawais2947
@mianawais2947 3 года назад
BTW these are 🆒 CSS properties. Only few days ago Fireship channel explained these stuff very handily 👍👍😊
@jflo911b
@jflo911b 3 года назад
Love your haircut, handsome 🤗
@arturlomakin3555
@arturlomakin3555 3 года назад
You can draw clip-path in Firefox!
@zibassunlimited9359
@zibassunlimited9359 3 года назад
hi, is a great video but in video composition (like UX on APPs or web)... don´t show your head over css code... if you wanna show css code on left side, overlap your head on right side. i'm following your videos, thanks for all this knowledge
@BobbyBundlez
@BobbyBundlez 3 года назад
is your professional role as a designer? front-end developer? lately i get confused. i started an internship and am basically recreating figma designs down to a T but i want to do more react, graphql type stuff as well... isn't this all design stuff? i get confused lately about the overlapping of html and css in everything
@larrysunshine
@larrysunshine 3 года назад
What about using % for fluid padding/margin?
@cerealrakist7360
@cerealrakist7360 3 года назад
Would filter not work for the photo effect?
@AmodeusR
@AmodeusR 3 года назад
What program is it that you are using?
@sandeverbulaquina7237
@sandeverbulaquina7237 6 месяцев назад
please make a tutorial that places a 2 center image in a div that the 1 image overlaps to the first image and it is fluid.
@xenialxerous2441
@xenialxerous2441 2 года назад
Hey there! That was one of your amazing videos, thank you so much #garysimon I love it 🤗️👐️
@arturoperezfigueroa5147
@arturoperezfigueroa5147 3 года назад
In the second tip where did you put color to the blue thing ?
@renanfernandes2717
@renanfernandes2717 3 года назад
you can put styles in pseudo elements, in that case should be :before{ background-color: blue }
@Linuxdirk
@Linuxdirk Год назад
I love how some of those feel outdated just after a year. CSS evolves so fast and browser support of "more obscure" features becomes better every release.
@techtipsuk
@techtipsuk 3 года назад
Position relative is setting a positioning context. In this case position this child element relative to its parent
@oleksandrleskiv
@oleksandrleskiv 3 года назад
blend modes & filters are great css features, but they are not that performant. Therefore, if it's not a dynamic value, I would still use Photoshop for this
@theaviary238
@theaviary238 3 года назад
So in #2 where did the line come from?
@swoorp
@swoorp 3 года назад
i knew all of the tricks, all discovered by myself, thanks
@DesignCourse
@DesignCourse 3 года назад
Everyone, I want you all to congratulate Swaroop D. for being the first human being to organically discover all of these CSS techniques straight from the womb!
@swoorp
@swoorp 3 года назад
@@DesignCourse Thanks Gary... Anyhow not to mention, i am a kid, just 13 years old...
@swoorp
@swoorp 3 года назад
@@DesignCourse love your work and tips, thanks
@gouderhicham3696
@gouderhicham3696 2 года назад
wtf?!
@thebackpainmiracle
@thebackpainmiracle 2 года назад
The Mentalist is teaching me CSS :-O
@RezHimself
@RezHimself 3 года назад
8:55 why when we can use linear - gradient ?
@CaptainBullzAQW
@CaptainBullzAQW 3 года назад
lmao, gary just slapped me with tips number 6
@morriszin4742
@morriszin4742 3 года назад
Please do react animation and reacty design stuffs please
@DesignCourse
@DesignCourse 3 года назад
I'll be honest, I don't really touch react at all. So, that video is unlikely to happen ;)
@morriszin4742
@morriszin4742 3 года назад
@@DesignCourse ahh no problem i love your videos and enjoy them very much. Love from Myanmar ❤❤❤
@uswanadeem5628
@uswanadeem5628 9 месяцев назад
Hello, I don't know how to apply the trick 2 kindly anyone guide me I understand the whole part but, i am not got the line which is no the top of heading
@AmodeusR
@AmodeusR 3 года назад
2:36 I think the correct is h1::before
@tschussie
@tschussie 3 года назад
I can't believe that when he was editing the video that he decided to overlay his head in precisely the worst possible position.
@basterjoy9545
@basterjoy9545 3 года назад
Hola como estas, podrías subir los videos con subtítulos al español, saludos desde Ecuador.
@bluegx09
@bluegx09 3 года назад
I like to attend your class.
@ramalakshmivv8697
@ramalakshmivv8697 3 года назад
hey gary can you suggest me a free hosting service because i am a beginner
@sivasankar5036
@sivasankar5036 3 года назад
Sir,I want to ask you a question.... Do you have any front end developer job,sir?
@codersujit5427
@codersujit5427 3 года назад
I am going to start youtube 😁 all I need is a little goodluck
@arifhussain9312
@arifhussain9312 3 года назад
👍
@techtipsuk
@techtipsuk 3 года назад
Pseudo elements should be double colon. e.g. h1::before { }
@PswACC
@PswACC 3 года назад
This would have been great if you weren't blocking the code. Maybe be on the other side.
@RS_200_lover
@RS_200_lover 9 месяцев назад
Hooooooooooooooooo❤❤❤❤❤
@abahiduh3246
@abahiduh3246 Год назад
You have covered part of the code....
@vampirejs758
@vampirejs758 3 года назад
Comparing Gary Simon 10 years ago and today tells us that you dont eat
@ytran2149
@ytran2149 3 года назад
omg! your hair lol
@jujijiju6929
@jujijiju6929 3 года назад
You're looking younger 😉
@yevhenmukhamedov1626
@yevhenmukhamedov1626 3 года назад
Please, place yourself at the right bottom side. You overlap content in all videos!(
@user-hk3te3ql5p
@user-hk3te3ql5p 3 года назад
gary-hair-width:5em; :-)
@OliverKelso
@OliverKelso 3 года назад
#garrysHead{ display: none; }
@RamuKaka0pYT
@RamuKaka0pYT 3 года назад
💟☮️
@uncleelder4922
@uncleelder4922 3 года назад
Your head is blocking some of the code
@anshulbisen
@anshulbisen 3 года назад
.gary_mini_video { position: fixed; bottom: 0; right: 5vw; }
@mayurbahuguna8438
@mayurbahuguna8438 3 года назад
I'm first here 😎
@mechanicallydev4536
@mechanicallydev4536 3 года назад
Please don't change the html font-size to fixed units like px, or it will break the browser font-size setting, which is important to elderly and people with bad eyesight. Instead use a percentage... like:> html {font-size: 112.5%} to change the base font-size from 16px to 18px (18px/16px*100 = 112.5%) without breaking the browser settings.
@lineCooking101
@lineCooking101 3 года назад
Using rem is still ok though..
@mainwilly
@mainwilly Год назад
You should make your face bigger so the code is completely covered because that you trying to achieve I believe.. or just move your face to the right.
@JoeyClover
@JoeyClover 3 года назад
"The newbie might go to Photoshop, apply the effect and put it back in". Pretty arrogant statement, if the image is fairly large, CSS manipulation can be computationally expensive vs an image that is pre-made. I'd argue that the newbie would be applying CSS filters to content as opposed to Photoshop tricks.
@botleydot
@botleydot 2 года назад
Depends on your use-case. If the image was coming from a CDN, someone might want an effect and believe they have to download the asset, change in photoshop and re-host it to achieve something they could have done without altering the asset in CSS.
@tomormiston8228
@tomormiston8228 3 года назад
great content, but your head covering the code is very irritating, sorry ;)
Далее
Top 5 CSS Tricks You NEED To Know
5:03
Просмотров 20 тыс.
How to take control of Flexbox
16:01
Просмотров 98 тыс.
3 More Life-Changing CSS Tips
2:59
Просмотров 204 тыс.
5 simple tips to making responsive layouts the easy way
15:54
Avoid These 5 Awful CSS Mistakes
20:42
Просмотров 188 тыс.
3 useful CSS tricks
8:03
Просмотров 82 тыс.
Css Animation Effects Tutorial  | HTML | CSS
0:53
Просмотров 639 тыс.
The Top 10 Websites of 2022 - CSSDesignAwards
24:45
Просмотров 326 тыс.
CSS Tips And Tricks I Wish I Knew Before
12:12
Просмотров 416 тыс.
Flexbox design patterns you can use in your projects
15:33
Накачал Предплечья РИСОМ!
0:36
How to sign the letter J?❤️
0:47
Просмотров 52 млн
great#shanpehlwan#shorts
0:19
Просмотров 2,6 млн