@@Sweetdev it's the smart way to do it. i'll have to get that part (emmet) figured out. i only just downloaded the app, was using textMate, i'm a newbie trying to learn new skills.
@@Sweetdev Hi, I enjoyed your video but still waiting for the responsive video. A lot now look at websites initially on their phones or tablets and many designers design mobile first.
You can use some unique value from your API response and give as a class to your item/element/div. After in your wrapper class ... `display: grid; grid-gap: 20px; grid-template-areas: "header" "nav" "content" "sidebar" "ad" "footer";` developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout This is just an idea :-).Try it and share how it goes.
Im in love with css grid .. its blowing mind thing
It is a big progress in the web development! It's awesome😊
Nice work. Thanks!
at 8:30, that was pretty cool how you made 13 divs with an asterisk command.
Yes, the Emmet extension is the best for lazy devs like me :-D
@@Sweetdev it's the smart way to do it. i'll have to get that part (emmet) figured out. i only just downloaded the app, was using textMate, i'm a newbie trying to learn new skills.
Simply excellent ...
Thank you Nagesh! 🙏
Instead of flexbox, could you not have nested a four column grid for the nav?
Loved it, Thanks! Can you make part 2 so it's responsive.
Thanks @Ioannnify. Just because you ask, I will make this video! :-D Coming SOON.
Thanks! Looking forward to it!
@@Sweetdev Hi, I enjoyed your video but still waiting for the responsive video. A lot now look at websites initially on their phones or tablets and many designers design mobile first.
Your wishes are my command guys! 🤘 ruclips.net/video/2Lw2Y7p0yH4/видео.html
This is wonderful. Thanks so much. I will replicate.....and subscribe. You've just made my day
Using span property for grid-column and grid-row is much easier because you don't have to count the start and the end..
Thank you for your suggestions ARUN!
@sweetdev.. excellent tutorial. However for the header, why do you use "flex" instead of grid? I saw in css file you type flex to manage the header.
Hi Setyou Free! Because I was moving to the Focus of the video... a interesting image grid.
@@Sweetdev -- ok thanks.
Super helpful, thank you!
What happens if I get the information from an API? How can I know how to fit the elements without knowing how many will arrive? Thanks
You can use some unique value from your API response and give as a class to your item/element/div. After in your wrapper class ...
`display: grid;
grid-gap: 20px;
grid-template-areas:
"header"
"nav"
"content"
"sidebar"
"ad"
"footer";`
developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout
This is just an idea :-).Try it and share how it goes.
dandy. but i could not find the main-nav class in your tutotial
Hi. This will be complicated wenn i got the imgs from db. Lets say i got 25 imgs. I cant style every individual grid. Any solution?
Use grid-template-areas
Very good man, you are doing very well, your content are high quality! I think that only thing you should do is to tell things a little bit quickly!
Thanks man! I really appreciate feedback like this. Hope you stay around for the future!
which extension did you use to do html more easily?
Emmet
If you are using VS Code it's coming by default. If not .... emmet.io/
How to put text in the images?
Hi! Can you be more specific about where you want to put the text?
buen video.
Gracias Jose!
very helpuful thanks
You are welcome Malick!
Excelent class!
good stuff! subscribed
Thank you! I really appreciate :-)
no make sense when you use sematic element header and then create a class with the same name. The class name is over
Hi Lizzy! You are right that in this example is not 100% needed. File free to style and put classes like it's make more sense to you!
great!
Thank you Sajid!
Sweetdev keep it up you are doing great.
Are you from Poland 🇵🇱?
😃 nop, I am not! You have your second guess @VG TKD 😉