THANK YOU! I've been stumbling through tutorials trying to figure this out and your video helped me finally piece it all together. Now the trick is to see if I can do it on my own! Thanks again!!
Ive been searching this for months, i couldnt find a video on it so for the meantime i watched your other videos, now you randomly upload this video, yay! i can piece what i've learned altogether :")
Great video. A quick trick: set the tag with 'min-height: 25 rem'. Instead of calculating the height manually. It totally works as expected. You can try it.
Hello Julio. Thank you for the video. But I can't display the icons. Seems like it works different know. No link for the head, but script. Even though I follow the instructions on the official page it seems like I am still doing something wrong. The icons dont display
This is by far the best Image gallery tutorial done with css grid. Imagine doing this with flexbox or older technique omg this would be pain in ass :). I learned so much from this tutorial , thank you julio.
You my friend have some extraordinary skills.. Please never stop making such videos.. We learned so much from your videos.. Great content :) love from India
Hello guys, when i finish the desktop layout and import all photos, and refreshed the page to see the result, the page starts to load veeery slow, i tried to reduce the image quality a lot, but it does not change a lot, can someone help ?
I placed the path to the image within the tag while the 'thumbnail' as a background image. I did it this way just in case that someone wanted to play around with it using javascript to make it functional. By clicking on the image then opening it in something like a modal.
This was really interesting to practice with Julio Codes. I just had one challenge after completing the course. in the folder I used for the Images I linked to the site, I couldn't replace the images. even after deleting the images in the folder. The images that where linked before still appeared in the changed folder. My question is, do the images we link in the site store in any placeholder?
UPDATE: For anyone following along now , ion icons have changed the names of icons it's now Not what the video says to get the expand icon When it comes to targeting the icon dont do: .image-gallary a ion-icon{font-size: 3rem;} . if you do that your icons go off the page Instead do this when targeting : .image-gallary a i{ font-size: 3rem;}
thank you! I used this; however, my problem i that the sticky navbar I created does not stick over the image grid, it does over the rest of the page. Any idea why this happens? thank a lot!
I'm having a problem with the icons part. It only work if I use instead of the "i" class. But the real problem is when I try to give style to the icon with CSS becouse it dont work.
I think Julio was using an older version of the ionicons (2019 video). Now ionicons is at v5. If you wanna use them the exact way he used it, you can use the archived version of ionicons. Its available on their site at ionicons.com/v4/usage
can do this with flexbox? every one say it is much better to use flex than grid, and i didn't find any one explain how, they just use misleading thumbnail for there videos!
Excellent sir...let me tell you than i'm Argentinian, i writte English a little...sorry for the rule.....and too...let me tell than i'm a begginer web developer...thanks for this video...i hope will work of my designs...
Hi there! Thanks for this amazing tutorial and you have explained it very clearly but I've some scripts running before this so I've modified some parts which I think the previous scripts have set it up. I am now stuck at having the black boxes showing while hovering over. Is there anything I can provide so that you can help? Thanks again! :)
I noticed that when you started to add the images to the .img-1, .im2, etc tags, you images began to display on the screen. Mine don't. This is the code I am using in HTML since the ion icon changed.
Hi Julio, thank you for this nice tutorial. I am going to use my own images for this project, and I was wondering if your images all have 1500px for the height. I know how to optimize my file sizes (I use GIMP) but width and height for my images always seem to be a problem for me. I’m asking to find out what you recommend for image width and height. Thanks for your great tutorials, I’m learning a lot from them... Cheers!
Glad you’re finding the videos useful! As far as image sizes, I believe I used 1000x850 here. As long as you make all your images the same size it shouldn’t be a problem as opposed to some issues that may arise if they are all different sizes. I personally play around with the sizes (using GIMP also) and go with whatever size looks better. If being used in a real project it’s also good to optimize the file size to reduce load times. There are many tools online that can do this for you.
what is the difference in between *{ margin:0; padding:0; box-sizing:border-box; } and body{margin:0; padding:0; box-sizing:border-box; } what will happen if we apply directly to the body insted of using * please reply me
* is the universal selector which means it will apply those styles to all elements on the website except for the ::before and ::after unless you include the universal selector on those as well (*::before, *::after { ... })
really love your videos! could you do a video on 'about me' page, a tutorial on how to position elements, and a tutorial on other styles of blog posts? I really like to learn to do these without Bootstrap. Thank you.
It works if you go to the Ion icon site and use the script tag for installation instead of the outdated stylesheet tag. You also have to target the icon in css using .image-gallery a ion-icon { } instead of .image-gallery a i { } . It worked for me . Let me know if this helps. Please subscribe to my channel if you're a beginner coder like myself :-) .
Update the CDN with the newer one. You can just visit the official ion icons website. You also don't necessarily have to use ion icons, you can use other icons like font awesome or even png images.
totally disappointed, totally waste of time, why you are using template area? there is only 8 images, so u can customize each one, but what if you have 80-800images/
Well, next time read the description since it’s mentioned there that template areas are used. This is only a simple way of creating a gallery. Which is what one will see in most websites unless the website is supposed to showcases images only. In that situation there are many different options.
Super video! I applauded for $5.00 👏👏
THANK YOU! I've been stumbling through tutorials trying to figure this out and your video helped me finally piece it all together. Now the trick is to see if I can do it on my own! Thanks again!!
Ive been searching this for months, i couldnt find a video on it so for the meantime i watched your other videos,
now you randomly upload this video, yay! i can piece what i've learned altogether :")
Great video. A quick trick: set the tag with 'min-height: 25 rem'. Instead of calculating the height manually. It totally works as expected. You can try it.
Dude you tutorial is freaking awesome thank you, super helpful.
Hi, excelent video! I only have one question. How do I make the image goes small again once I have clicked over it and have it full screen?
Hello Julio. Thank you for the video. But I can't display the icons. Seems like it works different know. No link for the head, but script. Even though I follow the instructions on the official page it seems like I am still doing something wrong. The icons dont display
This is the exact vid I wanted to search and it magically popped up on my phone at the perfect time gooood shit Thank u for what u do
No problem! Thanks for watching
same lol
google knows
This is by far the best Image gallery tutorial done with css grid. Imagine doing this with flexbox or older technique omg this would be pain in ass :). I learned so much from this tutorial , thank you julio.
Of course! Grid makes complex layouts a breeze. Thanks for watching, Alem!
You my friend have some extraordinary skills.. Please never stop making such videos.. We learned so much from your videos.. Great content :) love from India
Thank you for the hardest tutorial😁
Thanks bro. worked like magic
Hello guys, when i finish the desktop layout and import all photos, and refreshed the page to see the result, the page starts to load veeery slow, i tried to reduce the image quality a lot, but it does not change a lot, can someone help ?
I am wondering why did you put image both in html and as a background in css?
I placed the path to the image within the tag while the 'thumbnail' as a background image. I did it this way just in case that someone wanted to play around with it using javascript to make it functional. By clicking on the image then opening it in something like a modal.
@@juliocodes Wow, one of the rare chanels that offers feedback. Subscribed
can it be done with flexbox?
This was really interesting to practice with Julio Codes. I just had one challenge after completing the course. in the folder I used for the Images I linked to the site, I couldn't replace the images. even after deleting the images in the folder. The images that where linked before still appeared in the changed folder. My question is, do the images we link in the site store in any placeholder?
UPDATE:
For anyone following along now , ion icons have changed the names of icons
it's now Not what the video says to get the expand icon
When it comes to targeting the icon dont do: .image-gallary a ion-icon{font-size: 3rem;} . if you do that your icons go off the page
Instead do this when targeting : .image-gallary a i{ font-size: 3rem;}
Can you share the exact code here? Having a hard time following.
How to do this dynamically ? Like in the case of instagram explore section?
Can this be done with a variable amount of pictures? If I gave you an array with an unknown amount of images how would you do this? It's hardcoded
Hi, how to zoom thumbnails on hover inside the grid. overflow:hidden is not working and image is zooming over other images. Thanks.
Wow, thank you so much, love it! Well done and a great tut!!
can we use it for a commercial website
Great content, i really enjoy your videos
thank you! I used this; however, my problem i that the sticky navbar I created does not stick over the image grid, it does over the rest of the page. Any idea why this happens? thank a lot!
Make sure you specify a top: 0 and a high value z-index to make sure it stays on top of all the content
@@juliocodes thank you! Love it! Xx
this channel should have at least 10 times more subscribers than it has
Awesome tutorial! Thank you!
I'm having a problem with the icons part. It only work if I use instead of the "i" class. But the real problem is when I try to give style to the icon with CSS becouse it dont work.
I have the same problem right now, have you figured it out yet? :)
I think Julio was using an older version of the ionicons (2019 video). Now ionicons is at v5. If you wanna use them the exact way he used it, you can use the archived version of ionicons. Its available on their site at ionicons.com/v4/usage
@@aditpinheiro Thank you!!
thanks for the video! you saved my life
If I change the HTML font size to something else it causes horizontal scrollbar. What can I do to fix this?
You can hide the overflow.
wow!!! super........thank you so much........
Welcome 😊
can do this with flexbox? every one say it is much better to use flex than grid, and i didn't find any one explain how, they just use misleading thumbnail for there videos!
Excellent sir...let me tell you than i'm Argentinian, i writte English a little...sorry for the rule.....and too...let me tell than i'm a begginer web developer...thanks for this video...i hope will work of my designs...
Is this doable with flexbox?
how to stop pictures to stretch when changing resolution?
Amigo; toma tu merecido like 👏🏼👏🏼👏🏼me has ayudado un monton
absolutly great ! thanks
Nice tutorial
Huh, the installation seems to have changed now
hello i have a problem. My photos are not displayed, there is only the gray background
Make sure that you specify the correct path the image based on where your documents are saved
Julio Codes please look in instagram
YOU ARE A LEGEND!
Muy bueno el tutorial. Muchas Gracias.
Why we need to give max-width to container?
to limit how wide the container gets.
Hi there! Thanks for this amazing tutorial and you have explained it very clearly but I've some scripts running before this so I've modified some parts which I think the previous scripts have set it up. I am now stuck at having the black boxes showing while hovering over. Is there anything I can provide so that you can help? Thanks again! :)
amazing tutorial. thanks for sharing your work
Thanks for watching!
Is it possible to include the images through HTML without collapsing the images?
OK, done. :)
Great man! Thanks!
I noticed that when you started to add the images to the .img-1, .im2, etc tags, you images began to display on the screen. Mine don't. This is the code I am using in HTML since the ion icon changed.
still does not work
bro where is the code can't find in github u provided
Hi Julio, thank you for this nice tutorial. I am going to use my own images for this project, and I was wondering if your images all have 1500px for the height. I know how to optimize my file sizes (I use GIMP) but width and height for my images always seem to be a problem for me. I’m asking to find out what you recommend for image width and height. Thanks for your great tutorials, I’m learning a lot from them... Cheers!
Glad you’re finding the videos useful! As far as image sizes, I believe I used 1000x850 here. As long as you make all your images the same size it shouldn’t be a problem as opposed to some issues that may arise if they are all different sizes. I personally play around with the sizes (using GIMP also) and go with whatever size looks better. If being used in a real project it’s also good to optimize the file size to reduce load times. There are many tools online that can do this for you.
the best as always, thanks julio , i want to ask you do you sometimes do back-end things like server side coding ?
Amazing video
thanks a lot :)
what is the difference in between *{ margin:0; padding:0; box-sizing:border-box; } and body{margin:0; padding:0; box-sizing:border-box; } what will happen if we apply directly to the body insted of using * please reply me
* is the universal selector which means it will apply those styles to all elements on the website except for the ::before and ::after unless you include the universal selector on those as well (*::before, *::after { ... })
really love your videos! could you do a video on 'about me' page, a tutorial on how to position elements, and a tutorial on other styles of blog posts? I really like to learn to do these without Bootstrap. Thank you.
thanks broo!!its really helpfull
Great man
Thanks!
Good! Keep up the good work
Thanks!
What should i do if image number is infinite...??
Use JavaScript to populate the grid dynamically
Julio do you have experience as a freelancer? If so how is it?
Thanks man!
thanx bro for making awesome tutorial (Y)
Glad you liked it!
How to get code
Thanks you :333
Learn with Julio Code. if you have the foundation of html, his the best for your advance in web and mobile website development.
Thank u very much!
Niceeee
Jing Yaaaaang!
Hi, I would like to ask if I can use videos instead of images. It is possible right? :D
Yes you can!
sourcecode?
Can you post the file of .html and .css so that I don't must to write al that.
can someone give this file?
Thx for ionicons.
Please note: This tutorial is out of date. The reference to the ion icons does not work as explained no fix found but see bellow for possible. : - (
It works if you go to the Ion icon site and use the script tag for installation instead of the outdated stylesheet tag. You also have to target the icon in css using .image-gallery a ion-icon { } instead of .image-gallery a i { } . It worked for me . Let me know if this helps. Please subscribe to my channel if you're a beginner coder like myself :-) .
Update the CDN with the newer one. You can just visit the official ion icons website. You also don't necessarily have to use ion icons, you can use other icons like font awesome or even png images.
Nice 2023
Please sit make video uploader websites
pls
totally disappointed, totally waste of time, why you are using template area? there is only 8 images, so u can customize each one, but what if you have 80-800images/
Well, next time read the description since it’s mentioned there that template areas are used. This is only a simple way of creating a gallery. Which is what one will see in most websites unless the website is supposed to showcases images only. In that situation there are many different options.