The reason why I started to make these tutorials is because when I was first learning I’d just be taught what things did without many examples on how to apply them in the real world. So there I was stuck with all this knowledge yet I did not know how to apply it. Eventually via trial and error I picked up on things so I decided to bring you guys practical examples by building actual projects. I hope you enjoy your stay!
@@juliocodes That is awesome. Very true. A lot of people do not know that all the fancy stuff that gets showcased online like this one with minimal errors is born after numerous trials and errors. I too have been taught just basics but have hesitant to try to build advanced stuff by myself because I am afraid of facing errors and getting stucked. No matter how many times I follow someone's tutorials, I am aware that I am not going to be able to procure the "I finally get it" knowledge unless I try by myself through trials and errors.
That’s the best way to learn, by trial and error. Use the techniques you see here, whether it’s for a nav, hero section, etc... and apply it to your own personal projects. Everything will eventually sink in and you’ll be able to write your code without needing a reference most of the time. I’ve never been good with designing my own websites, I lack the creativity for it so I would always start something and never finish it or always changed it because I did not like the looks. Then I found dribbble.com and I started trying to replicate the designs I saw on there.
Awesome video, I learned some very useful css tricks. I do have one question though, selecting html or :root and setting the font size and font family that way also styles the navbar and the modals that pop up on my page to inherit that stying which I'm trying to prevent. So here's the question, how do I maintain the look of this page by not selecting :root or html? Everything I've tried resolves the navbar and modal styling issue, but then the cards are too large to remain inline with one another.
I assume that you have more info on some than the others and it's why some might be bigger than the other? You'll have to give them a fixed height, however doing that will require you to play around with the values a little more when making them responsive.
@@juliocodes Thanks for your help, Julio. Yes, I have more info on some cards. However, I'm looking for a way of doing this without using fixed values for the cards div. Anything come to mind?
@@juanestebanbarrera3572 The simple solution would have been to set 'Flex: 1' on the cards but in the way that these cards are set up this will not work. Only other solution would be to lay the cards out with css grid instead. However, I did some digging around and found an article about it and possible work around on css tricks. You can find it here: css-tricks.com/fluid-width-equal-height-columns/
Thank you. Just one question: what size of images is optimal for downloading from pexels site? I've used option "small" but they are too large.Or just adjust them with max - width:100%?
I usually do the sizing myself with GIMP or any other image manipulation tool. Size depends on what you’re using so I tend to just play around with the sizes until I find something that works.
Nice tutorial, but there's something that doesn't fit to me (sorry, I'm a beginner in all this stuff). At the moment you wrote 'align-items:center' in the 'card' class container, the two images inside of it resized out of the bounds of their respective container, but they shouldn't, since they are childs inside this parent div. However, the background image did it only after you wrote width: 100% in it... how's that?
Fixed widths behave differently than percentages meaning that they will always try to hold that particular size. A percentage will resize relative to its parent.
Hey julio if you dont provide source code on TH-cam, alternatively just create a patreon account and build a community of subscribers (patreons) who get access to your code...just an idea...
I could look into it. When I post my next video I’ll mention it and see if it’s something subscribers would be interested in. Thanks for the suggestion
cards are fluid and will grow based on the content inside of them. This means that if one has more content than the other then they will be different sizes unless you specify a set height.
Very good job. I tried his example but it don't works fine because cards stay too big (I think only 2 cards by line) and don't stay side by side. It stays on a column in the middle of screen. Could you help me with it?
i cant get the cards to go into col in the same row or inline on larger viewports. i tried the @media a few times. any one can figure out how to make the cards in the save row?
Because I added a letter spacing. When you add a letter spacing the fonts are moved slightly so you add a negative margin of the same pixels to make sure it stays aligned correctly. The overflow-x hidden gets rid of any unwanted spacing on the x axis which can cause scroll bars.
@@malikalnabouli8289 unfortunately i have it correct. It just doesn't show everything on the right side. It does show 2 team members side by side. Then the other 2 team members underneath it
damm tit the tutorial and did not work dont know why cause everything is the same maby the bootstap i am using is not the same or some but yhea i hope someon can help me
I don’t provide the source code because when I used to do that people did not watch the video. That hurts the channel if people don’t watch. I am happy to help anyone if they come across errors.
@@juliocodesThank you for making this video. I have a problem in row I mean my cards are in one column and @media screen doesn't change can you check it please cyj14.codesandbox.io/ my codes : res.cloudinary.com/paropamiz/raw/upload/v1559057834/css_bio_uzvtda.zip
Make sure to like, subscribe and hit the bell notifications so you don't miss new videos.
can u also provide the code for this in your description box
From where you got those social media icons... Working on a project.. Please help.
According to SEO standards each individual page of a site should have only one level heading.
I appreciate that you are not using any background music, during the video. Looking forward to more videos from you.
Thanks for watching, Milan!
This is excellent! Following along it gives me several topics that I need to find out more about - stuff I didnt even know existed! Many thanks.
Definetly impeccable tutorial. Taught me so much things.Thank you !!
Watch this it might help you
th-cam.com/video/hjl5BddpM20/w-d-xo.html
absolute legend thank you so much been trying something like this for ages
This was awesome but could you please provide the initial code and images you use in the code..... I think it will be better to follow up in that way!
Julio. The contents you bring here are unique and practical. Please continue to make more HTML & CSS videos. Subscribed!
The reason why I started to make these tutorials is because when I was first learning I’d just be taught what things did without many examples on how to apply them in the real world. So there I was stuck with all this knowledge yet I did not know how to apply it. Eventually via trial and error I picked up on things so I decided to bring you guys practical examples by building actual projects. I hope you enjoy your stay!
@@juliocodes That is awesome. Very true. A lot of people do not know that all the fancy stuff that gets showcased online like this one with minimal errors is born after numerous trials and errors. I too have been taught just basics but have hesitant to try to build advanced stuff by myself because I am afraid of facing errors and getting stucked. No matter how many times I follow someone's tutorials, I am aware that I am not going to be able to procure the "I finally get it" knowledge unless I try by myself through trials and errors.
That’s the best way to learn, by trial and error. Use the techniques you see here, whether it’s for a nav, hero section, etc... and apply it to your own personal projects. Everything will eventually sink in and you’ll be able to write your code without needing a reference most of the time. I’ve never been good with designing my own websites, I lack the creativity for it so I would always start something and never finish it or always changed it because I did not like the looks. Then I found dribbble.com and I started trying to replicate the designs I saw on there.
Dude, what an amazing guide. Thank you for you work and patience!
Watch this it might help you th-cam.com/video/hjl5BddpM20/w-d-xo.html
You're awesome man! So glad I found your channel
Thanks!
DUDE!! this was AMAZING MAN! THANK YOU.
Glad you liked it!
Thank you for the lesson! I like it so much!
Thanks!
Too much helpful.
I'm from Bangladesh.
Amazing Julio
Watch this it might help you
th-cam.com/video/hjl5BddpM20/w-d-xo.html
You are just awesome dude
Awesome video, I learned some very useful css tricks. I do have one question though, selecting html or :root and setting the font size and font family that way also styles the navbar and the modals that pop up on my page to inherit that stying which I'm trying to prevent. So here's the question, how do I maintain the look of this page by not selecting :root or html? Everything I've tried resolves the navbar and modal styling issue, but then the cards are too large to remain inline with one another.
Thanks for lesson, super helpful!
Watch this it might help you
th-cam.com/video/hjl5BddpM20/w-d-xo.html
Muchas gracias
this is awesome..Thank you
Watch this it might help you
th-cam.com/video/hjl5BddpM20/w-d-xo.html
Nice work
Watch this it might help you
th-cam.com/video/hjl5BddpM20/w-d-xo.html
Hey Julio, great video!
Quick Question: How would you keep "Cards" of same height? Thanks!
I assume that you have more info on some than the others and it's why some might be bigger than the other? You'll have to give them a fixed height, however doing that will require you to play around with the values a little more when making them responsive.
@@juliocodes Thanks for your help, Julio. Yes, I have more info on some cards. However, I'm looking for a way of doing this without using fixed values for the cards div. Anything come to mind?
@@juanestebanbarrera3572 The simple solution would have been to set 'Flex: 1' on the cards but in the way that these cards are set up this will not work. Only other solution would be to lay the cards out with css grid instead. However, I did some digging around and found an article about it and possible work around on css tricks.
You can find it here: css-tricks.com/fluid-width-equal-height-columns/
Great
Amazing tutorial! Thanks!!
Glad it helped!
I have become an ardent follower and you are very good at what you do
Thanks! I appreciate your kind words.
Thanks a lot. This video was so useful
Thanks!
Thank you for this julio
No problem!
Good work
It was pretty perfect
Watch this it might help you
th-cam.com/video/hjl5BddpM20/w-d-xo.html
Thank you. Just one question: what size of images is optimal for downloading from pexels site? I've used option "small" but they are too large.Or just adjust them with max - width:100%?
I usually do the sizing myself with GIMP or any other image manipulation tool. Size depends on what you’re using so I tend to just play around with the sizes until I find something that works.
thank you brother =D
easy to follow sir..thank you
No problem!
hey julio please upload the images too so that we can practice and make use of this great video....
Pictures can be found on Pexels.com, I just typed in 'people' :)
keep up bro ^_^
sir...good video
Hello, can I get the images you use in this lesson ? Thanks so much
Excelente video
Thank you!
Your welcome!
Hello Sir thanks for the video it has helped me, but my cards are remaining in a column even on large screen instead of displaying four, help me sir
Use media query and put the flex-direction of "card-wrapper" to row.
Where can i get the social media image?
my font icon is not working
Nice tutorial, but there's something that doesn't fit to me (sorry, I'm a beginner in all this stuff). At the moment you wrote 'align-items:center' in the 'card' class container, the two images inside of it resized out of the bounds of their respective container, but they shouldn't, since they are childs inside this parent div. However, the background image did it only after you wrote width: 100% in it... how's that?
Fixed widths behave differently than percentages meaning that they will always try to hold that particular size. A percentage will resize relative to its parent.
Did you style the "div class="container" in anyway?
No. Initially I planned on applying some styles to it but I ended placing them on the section.
I tried it but failed, I hope I can quickly find the location of the error
What if I want only two cards in a row on the desktop view? Can you help me with that?
Hey julio if you dont provide source code on TH-cam, alternatively just create a patreon account and build a community of subscribers (patreons) who get access to your code...just an idea...
I could look into it. When I post my next video I’ll mention it and see if it’s something subscribers would be interested in. Thanks for the suggestion
Can some one tell me why the my second picture from the right is the one that always loads up first?
hey why some videos that explain how to create a footer by using html and css not in complite ?
Not sure I understood what you meant
How do I fix the dimensions of the cards, they are bigger than what I fit ...
cards are fluid and will grow based on the content inside of them. This means that if one has more content than the other then they will be different sizes unless you specify a set height.
Very good job.
I tried his example but it don't works fine because cards stay too big (I think only 2 cards by line) and don't stay side by side. It stays on a column in the middle of screen.
Could you help me with it?
Send me your code and I’ll take a look at it. You can find my email in the description
@@juliocodes sent by email. Thank's.
i cant get the cards to go into col in the same row or inline on larger viewports. i tried the @media a few times. any one can figure out how to make the cards in the save row?
@julio codes my code doens work work can u give me mail.i can share my code not floating from left too right
The Keyframes FadeIn is not working to me
why do you include for css .heading {margin-right: -3px; } ? I think it's not necessary.... even body { overflow-x:hidden; } !
Because I added a letter spacing. When you add a letter spacing the fonts are moved slightly so you add a negative margin of the same pixels to make sure it stays aligned correctly. The overflow-x hidden gets rid of any unwanted spacing on the x axis which can cause scroll bars.
Coding with Julio Letter spacing doesn't seem to be affected by the middle alignment.
When the letter spacing is small it’s hard to notice, but the slight shift is there.
I can't use flex-wrap
I have a problem with the final view why not all of the team in the same row???&Thanks
I'm having the same problem
Check the name class is correct i found my problem in class name not the same at html
@@malikalnabouli8289 can you point out which class name did you do wrong? Thanks
Alex Tran .card-wrapper
@@malikalnabouli8289 unfortunately i have it correct. It just doesn't show everything on the right side. It does show 2 team members side by side. Then the other 2 team members underneath it
HTML : pastebin.com/tDfDcfqk
CSS : pastebin.com/HHYWTdZC
Correct till 29:12 , after that my code broke :(
Could you send me the source please
Good video, but I think you need to speak up a little more
Lack volume, otherwise perfect.
damm tit the tutorial and did not work dont know why cause everything is the same maby the bootstap i am using is not the same or some but yhea i hope someon can help me
Source code please
source code?
this code not working please help
@media screen and (min-width: 700px) {
.card-wrapper{
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.card{
margin: 2rem;
}
}
It looks good to me. Feel free to zip up your project and email it to me so that i can take a look at it. My email can be found in the description.
please the code
Audio is too low on your videos, great content otherwise.
where is src code?
I don’t provide the source code because when I used to do that people did not watch the video. That hurts the channel if people don’t watch. I am happy to help anyone if they come across errors.
@T Tronic Exactly. When I posted the videos people rarely watched much of it. They'd go for the source right away most of the time.
@@paropamiz2440 Try getting the latest font awesome CDN.
@@juliocodesThank you for making this video. I have a problem in row I mean my cards are in one column and @media screen doesn't change can you check it please cyj14.codesandbox.io/
my codes : res.cloudinary.com/paropamiz/raw/upload/v1559057834/css_bio_uzvtda.zip
@@paropamiz2440
.card-warpper {
display: flex;
align-items: center;
align-content: center;
}
Sir give me this css code
did you get it?
Habe you the src?