Responsive Our Team Info Cards Section | HTML and CSS Tutorial

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

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

50% 1

In this video I will be showing you how you can create a responsive 'meet the team' section for your website using flexbox. I hope you enjoy this tutorial!
Don't forget to leave a thumbs up if you found the video useful. Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.
Subscribe ► bit.ly/2Q3pCiB
[ SOCIAL MEDIA ]
Instagram ► / juliocodes
[ HOSTGATOR ]
Get affordable domain and web hosting with HostGator. Save up to 60% off of your entire purchase with the coupon code below.
HostGator ► bit.ly/2ZfR0u3
Coupon code ► JULIOCODES60
Video tutorial ► • Video
[ MY GEAR ]
Programming/Video editing laptop Specs & extras
Laptop: Dell XPS 15 7590
Processor: 9th Generation Intel Core i7-9750h
RAM: 32GB (Upgraded)
Graphics Card: Nvidia GeForce GTX 1650 4GB GDDR5
Storage: 500GB M. 2 PCIe NVMe SSD (Upgraded)
-- Extras --
Monitor: Dell Ultrasharp 27"
Keyboard: Logitech MX Keys
Mouse: Logitech MX Master 3
Microphone: Blue Yeti
[ DISCLAIMER No. 1 ]
In order to speed up the development process CSS prefix are not used. In order to ensure cross browser compatibility please use prefixes where necessary.
[ DISCLAIMER No. 2 ]
This video description contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support the channel and allows me to continue to make videos like this. Thank you for the support!

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

22 янв 2019

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@juliocodes 5 лет назад

Make sure to like, subscribe and hit the bell notifications so you don't miss new videos.

@aakashsangwan8756 5 лет назад

can u also provide the code for this in your description box

@ishamishra6511 2 года назад

From where you got those social media icons... Working on a project.. Please help.

@reecelewis2878 5 лет назад

absolute legend thank you so much been trying something like this for ages

@portraitpictures 2 года назад

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.

@konstantinkkk8397 4 года назад

According to SEO standards each individual page of a site should have only one level heading.

@rheavictor7 4 года назад

Dude, what an amazing guide. Thank you for you work and patience!

@prohuntingweb9933 3 года назад

Watch this it might help you ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hjl5BddpM20.html

@gabriellemcintyre1885 5 лет назад

You're awesome man! So glad I found your channel

@juliocodes 5 лет назад

Thanks!

@CAHEKyy 3 года назад

DUDE!! this was AMAZING MAN! THANK YOU.

@juliocodes 3 года назад

Glad you liked it!

@UmutKirci 3 года назад

Definetly impeccable tutorial. Taught me so much things.Thank you !!

@prohuntingweb9933 3 года назад

Watch this it might help you ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hjl5BddpM20.html

@MilanB 5 лет назад

I appreciate that you are not using any background music, during the video. Looking forward to more videos from you.

@juliocodes 5 лет назад

Thanks for watching, Milan!

@raphasteps 5 лет назад

Thank you for the lesson! I like it so much!

@juliocodes 5 лет назад

Thanks!

@rapschess 5 лет назад

Amazing tutorial! Thanks!!

@juliocodes 5 лет назад

Glad it helped!

@andyLIKESFUL 3 года назад

You are just awesome dude

@janjuhalol 4 года назад

Thanks for lesson, super helpful!

@prohuntingweb9933 3 года назад

Watch this it might help you ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hjl5BddpM20.html

@keyos27 5 лет назад

Julio. The contents you bring here are unique and practical. Please continue to make more HTML & CSS videos. Subscribed!

@juliocodes 5 лет назад

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!

@keyos27 5 лет назад

@@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.

@juliocodes 5 лет назад

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.

@sikandarmushtaq48 4 года назад

Thank you for this julio

@juliocodes 4 года назад

No problem!

@davidgalloroca9865 5 лет назад

Thanks a lot. This video was so useful

@juliocodes 5 лет назад

Thanks!

@nalbarucorneliu-alexandru2128 3 года назад

Amazing Julio

@prohuntingweb9933 3 года назад

Watch this it might help you ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hjl5BddpM20.html

@nahidshikdar2923 3 года назад

Too much helpful. I'm from Bangladesh.

@casneilsimpson8836 4 года назад

Good work

@elderadev1dev126 4 года назад

thank you brother =D

@ovieolori2398 5 лет назад

I have become an ardent follower and you are very good at what you do

@juliocodes 5 лет назад

Thanks! I appreciate your kind words.

@akshamim2628 Год назад

Great

@fumanimthembi7594 3 года назад

this is awesome..Thank you

@prohuntingweb9933 3 года назад

Watch this it might help you ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hjl5BddpM20.html

@cyrusbfbulan6573 5 лет назад

easy to follow sir..thank you

@juliocodes 5 лет назад

No problem!

@safdarmoshtagh5623 4 года назад

It was pretty perfect

@prohuntingweb9933 3 года назад

Watch this it might help you ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hjl5BddpM20.html

@onlinejobs7194 5 лет назад

sir...good video

@erikaleon9173 Год назад

Muchas gracias

@johnmaximus9795 4 года назад

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!

@m3cv1no 5 лет назад

keep up bro ^_^

@davidprieto3094 Год назад

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.

@mirzashani8870 3 года назад

Nice work

@prohuntingweb9933 3 года назад

Watch this it might help you ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hjl5BddpM20.html

@MiguelGonzalez-eb9lj 4 года назад

Can some one tell me why the my second picture from the right is the one that always loads up first?

@pranaynagavolu814 5 лет назад

What if I want only two cards in a row on the desktop view? Can you help me with that?

@GlobalTravelExplorers 4 года назад

Hello, can I get the images you use in this lesson ? Thanks so much

@dodokwak 4 года назад

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%?

@juliocodes 4 года назад

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.

@shawnsmothers1715 3 года назад

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?

@juanestebanbarrera3572 5 лет назад

Hey Julio, great video! Quick Question: How would you keep "Cards" of same height? Thanks!

@juliocodes 5 лет назад

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.

@juanestebanbarrera3572 5 лет назад

@@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?

@juliocodes 5 лет назад

@@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/

@expresstutorial3255 5 лет назад

Excelente video

@juliocodes 5 лет назад

Thank you!

@expresstutorial3255 5 лет назад

Your welcome!

@cintia1411 10 месяцев назад

Where can i get the social media image?

@arjunsah8561 5 лет назад

hey julio please upload the images too so that we can practice and make use of this great video....

@gabriellemcintyre1885 5 лет назад

Pictures can be found on Pexels.com, I just typed in 'people' :)

@kyleparsotan6799 4 года назад

my font icon is not working

@iclick5616 5 лет назад

I can't use flex-wrap

@ahajjssh635 3 года назад

I tried it but failed, I hope I can quickly find the location of the error

@Eeeppy 4 года назад

Did you style the "div class="container" in anyway?

@juliocodes 4 года назад

No. Initially I planned on applying some styles to it but I ended placing them on the section.

@FCMZXC 4 года назад

The Keyframes FadeIn is not working to me

@ACEIoT 4 года назад

@julio codes my code doens work work can u give me mail.i can share my code not floating from left too right

@omarykijogoo9216 5 лет назад

hey why some videos that explain how to create a footer by using html and css not in complite ?

@juliocodes 5 лет назад

Not sure I understood what you meant

@JBWEBDEVELOPER 3 года назад

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

@tommieb8623 3 года назад

Use media query and put the flex-direction of "card-wrapper" to row.

@leonfluf 5 лет назад

Could you send me the source please

@Kleigen 5 лет назад

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?

@juliocodes 5 лет назад

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.

@juansebastiansandoval4532 3 года назад

How do I fix the dimensions of the cards, they are bigger than what I fit ...

@juliocodes 3 года назад

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.

@sandropadilla9297 4 года назад

please the code

@Adamfunchal 5 лет назад

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?

@juliocodes 5 лет назад

Send me your code and I’ll take a look at it. You can find my email in the description

@Adamfunchal 5 лет назад

@@juliocodes sent by email. Thank's.

@fadeandbraid8321 5 лет назад

Hey julio if you dont provide source code on RU-vid, alternatively just create a patreon account and build a community of subscribers (patreons) who get access to your code...just an idea...

@juliocodes 5 лет назад

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

@mirazkhan1393 3 года назад

Source code please

@큚 5 лет назад

why do you include for css .heading {margin-right: -3px; } ? I think it's not necessary.... even body { overflow-x:hidden; } !

@juliocodes 5 лет назад

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.

@큚 5 лет назад

Coding with Julio Letter spacing doesn't seem to be affected by the middle alignment.

@juliocodes 5 лет назад

When the letter spacing is small it’s hard to notice, but the slight shift is there.

@Dickskanal 4 года назад

Lack volume, otherwise perfect.

@malikalnabouli8289 4 года назад

I have a problem with the final view why not all of the team in the same row???&Thanks

@khang541997 4 года назад

I'm having the same problem

@malikalnabouli8289 4 года назад

Check the name class is correct i found my problem in class name not the same at html

@khang541997 4 года назад

@@malikalnabouli8289 can you point out which class name did you do wrong? Thanks

@malikalnabouli8289 4 года назад

Alex Tran .card-wrapper

@khang541997 4 года назад

@@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

@jobinga8774 3 года назад

source code?

@maingoogleaccount7686 3 года назад

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

@parthachoudhury5640 4 года назад

HTML : pastebin.com/tDfDcfqk CSS : pastebin.com/HHYWTdZC Correct till 29:12 , after that my code broke :(

@Johnnyboycurtis 4 года назад

Good video, but I think you need to speak up a little more

@mdshabujmolla879 5 лет назад

where is src code?

@juliocodes 5 лет назад

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.

@juliocodes 5 лет назад

@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.

@juliocodes 5 лет назад

@@paropamiz2440 Try getting the latest font awesome CDN.

@paropamiz2440 5 лет назад

@@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

@StevenBazemore 4 года назад

@@paropamiz2440 .card-warpper { display: flex; align-items: center; align-content: center; }

@hemantkvlog6692 3 года назад

Sir give me this css code

@nirlevy26 3 года назад

did you get it?

@Cloud-hz8ys 3 года назад

Habe you the src?

@iclick5616 5 лет назад

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; } }

@juliocodes 5 лет назад

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.