I've been a frontend dev for around 3.5years and am always looking for good channels too learn new things or get familiar with stuff i've not done in a long time and i gotta say this channel is amazing!
Great tutorial. It's awesome have an animated responsive website working on my phone. I tuned the media width from 800 to 700 so the desktop layout would appear on my phone in landscape. The active hi-lights do not work on the Create and Todo-Lists sub-menu icons and headings, only on their sub-menus themselves, but I bet you knew that. It looks amazing all the same!
This is why I love and hate web. Love because there are people like you who share awesome resources like this. Hate because of random behaviours like height auto not animating.
I didn't read all the comments, but a lil opti' would be to reuse the toggleSidebar function inside the if statement when toggleSubMenu is called, nothing that crazy but it was on my mind ^^, luv tha vid!
in the drop down menu, you could also use calc-size(auto) in height to make it transition automatically. edit: it's a experimental feature for now. so it was awesome seeing a solution.
Didn't know position sticky can be used that way, I always did play with position fixed and then i shrinked main section using margin left. Also finally some quick and simple explanation on height auto transition, thank you
One little "error" on this: If the sidebar is currently CLOSED and you resize your screen to be smaller (to mimic a mobile screen), the sidebar will collapse and stay at the bottom as expected, but it will only show the first "Home" icon instead of all the options within the sidebar. This will give mobile users hard time. Otherwise, great tutorial!
Yeah but a mobile user wont resize the screen manually. If he opens the site it will check the screen width/height on loading and using the correct style. So u dont need to worry about it.
@@m.attila2864 Mobile users can “resize”, just rotate your device in the landscape mode and back. Another example is “split mode” on tablets and some devices running Android. You can split screen into two or more panels, each one has a different size. And you can resize that panels moving a delimiter.
Maybe a little late, but when you did this there was in a browser a way to transition a display. Think there is a way to do height: auto at roughly the same time. Do not even need JS for a toggle, but that is more advanced HTML, can even do the rotate with it. Now it might give you some of the bugs you show but still.
Nice explanation, however using div inside of ul is invalid markup, also this solution needs some other a11y improvements. Using hidden radio buttons and labels you can avoid much of the JS here. I believe using animations with key frames can work with the dynamic height problem
Hi. Sidebar resets itself when switching pages. How can I make save sidebar menu state, to keep currently open dropdown menu/page when switching pages? thank you
Is there a Github repo for the code? I've got a problem with the sidebar when closing it by using the toggle button and can't figure out what I've been doing wrong. Would love to see the complete code to compare it with mine
8:35 When I add "display: flex" here, the toggle-btn wraps to below the logo and I've been trying for 2 hours to fix this... I completely redid all of the work as you did again with the same results... I found that if I remove the DIV wrapping it, the issue goes away...
In the sidebar, do you really think that wrapping an li element directly inside a div is a good idea? @coding2go Even though it works great, it is not valid HTML I guess. And would not be semantically right. I've also recently diccovered alc-size(auto) which does not have a greater browser support.
The DIV actually broke it for me, causing the 'toggle-btn' to be incorrectly positioned. Simply removing the DIV altogether appears to have corrected the issue with no issues so far.
I have been coding with Phpstorm and I get this problem when I try to style multiple elements inside each other, for example, when I try to add a fill for the svg for being active the svg element just shows with a red underline and the error is: "Nested selector can't start with an identifier or a functional notation" and it does not work, is it only a problem with Phpstorm or how can I fix that?
This code is so f**** dirty.... List elements only have 4 possible parent elements ul, ol and menu. The last one is “dir” but this is obsolete. Div wrappers are technically wrong here. Furthermore, “nested css” is used, but only at a later stage. Either you start with it right from the beginning or you leave it out completely (here, however, it should be explained what the advantages and disadvantages are) The Javascript: Use quotes, especially if something can occur that may allow spaces. onclick='funct( this )' Then the javascript is loaded via defer. This has the consequence that a click on the button can cause an error, because the mentioned function does not yet exist. This can occur in particular if the JS file takes longer to load. The eventBinding should also be carried out with the JavaScript first. You should also not toggle the “close” class if you want to remove it. If something interferes with the process and the toggle interferes, there can be strange effects (but only as an optimization by the way) And last but not least: SVGs offer the possibility of being recycled. “SVG use” is the magic word here. Especially if icons are used frequently, you should consider this (e.g. the Chevon)
My new favorite channel when it comes to web development :)
Same after code with harry
the way you explain things is just what kept me until the end , this channel is gonna blow up and reach millions pretty fast
I used it at my job (not related to web dev) and got a salary raise!
I bought your course on Udemy.
Thanks so much!
This grid method of handling drop down will help my development a lot. So much easier.
Thanks Fabian!
Happy to help!
I've been a frontend dev for around 3.5years and am always looking for good channels too learn new things or get familiar with stuff i've not done in a long time and i gotta say this channel is amazing!
That tutorial just broked 5 hours of trying and testing my old sidebar. Now it's gone! Thanks! :(
I was surprised to see that how the semantic HTML was demonstrated and explained beatifully, nice video
Great tutorial. It's awesome have an animated responsive website working on my phone. I tuned the media width from 800 to 700 so the desktop layout would appear on my phone in landscape.
The active hi-lights do not work on the Create and Todo-Lists sub-menu icons and headings, only on their sub-menus themselves, but I bet you knew that. It looks amazing all the same!
favorite coding channel
thank you, Fabian,
i really need a page reveal animation tuto pls
The grid trick was amazing.
Before watching this informative video, I would say that you have a great 👍 😃 experience Fabian Sir ...
Love from Pakistan...
Great video - only a very minor observation Since there is only 1 nav bar, I would simply use "nav" as the css selector and not a class
I love that you made this video. I have been trying to make one myself for almost a year but in vain. Thanks a lot!
This is why I love and hate web.
Love because there are people like you who share awesome resources like this.
Hate because of random behaviours like height auto not animating.
I didn't read all the comments, but a lil opti' would be to reuse the toggleSidebar function inside the if statement when toggleSubMenu is called, nothing that crazy but it was on my mind ^^, luv tha vid!
my favorite coding channel
thank you Fabian
in the drop down menu, you could also use calc-size(auto) in height to make it transition automatically.
edit: it's a experimental feature for now. so it was awesome seeing a solution.
Didn't know position sticky can be used that way, I always did play with position fixed and then i shrinked main section using margin left. Also finally some quick and simple explanation on height auto transition, thank you
One little "error" on this: If the sidebar is currently CLOSED and you resize your screen to be smaller (to mimic a mobile screen), the sidebar will collapse and stay at the bottom as expected, but it will only show the first "Home" icon instead of all the options within the sidebar. This will give mobile users hard time. Otherwise, great tutorial!
indeed. i noticed it too.
Yeah but a mobile user wont resize the screen manually. If he opens the site it will check the screen width/height on loading and using the correct style. So u dont need to worry about it.
@@m.attila2864 Mobile users can “resize”, just rotate your device in the landscape mode and back. Another example is “split mode” on tablets and some devices running Android. You can split screen into two or more panels, each one has a different size. And you can resize that panels moving a delimiter.
@@m.attila2864 true it's just can be disconcerting when tweaking design ideas So it's good to know this behavior is not a script killer
Maybe a little late, but when you did this there was in a browser a way to transition a display. Think there is a way to do height: auto at roughly the same time.
Do not even need JS for a toggle, but that is more advanced HTML, can even do the rotate with it. Now it might give you some of the bugs you show but still.
bro the transition are smooth 🔥🔥😎😎
I've been always waiting for your new videos. Thank you❤❤
I want more videos like this
Underrated channel ❤️
My man was cooking 🔥🔥
Amazing! That what I am looking for! Thanks a lot!
Super informative and useful video! Thank you :)
This looks beautiful 🔥
Nice explanation, however using div inside of ul is invalid markup, also this solution needs some other a11y improvements. Using hidden radio buttons and labels you can avoid much of the JS here. I believe using animations with key frames can work with the dynamic height problem
Thanks for the info, but I think replacing js with hidden radio buttons is actually worse for accessibility.
Perfect for learning more and more....❤
Thank you so much it was amazing tutorial. Please keep it on and thanks once again!!🙂
Glad you liked it!
You are great
Thanks
please upload more of these videos :)
Waiting for this tutorial🔥🔥🔥
Thank sir it's give lots of value to my journey ❤
Glad to hear that
Thanks a lot!
Hey sir, can you please create a video on scroll driven animations.
Really helpful
Thank you
The way you explain everything is amazing
Could you please do it in reactjs and plain css
thanks, it worked.
will you guys put out a javascrip tutorial as well?
Yes, we are working on JavaScript videos and courses. Concept overviews, crash courses etc. are coming soon.
Worth it 😊😊😊
Thank you very much
Hi. Sidebar resets itself when switching pages. How can I make save sidebar menu state, to keep currently open dropdown menu/page when switching pages? thank you
Is there a Github repo for the code? I've got a problem with the sidebar when closing it by using the toggle button and can't figure out what I've been doing wrong. Would love to see the complete code to compare it with mine
excellent ☺♥
nice
Sorry to bother you, but could you consider creating a tutorial on scroll snapping?
Can I use your sidebar in my own project with MIT licence? Thank you! Also awesome work, better than mine :P
Sure thing! Go ahead. There is no copyright or anything on my code examples.
@@coding2go Thanks
Next video on creating a smooth FAQ using grid
Use , tags to create nav bar, easy😅
what the name of the course on udemy
8:35
When I add "display: flex" here, the toggle-btn wraps to below the logo and I've been trying for 2 hours to fix this...
I completely redid all of the work as you did again with the same results...
I found that if I remove the DIV wrapping it, the issue goes away...
In the sidebar, do you really think that wrapping an li element directly inside a div is a good idea? @coding2go
Even though it works great, it is not valid HTML I guess. And would not be semantically right.
I've also recently diccovered alc-size(auto) which does not have a greater browser support.
The DIV actually broke it for me, causing the 'toggle-btn' to be incorrectly positioned.
Simply removing the DIV altogether appears to have corrected the issue with no issues so far.
Also, Using ul element inside li element is not valid and cause a weak accessibility performance.
cool
First :))))
please css Box-Sizing
How do you make a form that can be integrated into Gmail or server.
nice video
I ❤ you
Nice nice nice ❤
This design is great. But the idea of using grid is terrible if you are planning on add a fixed top navbar.
I have been coding with Phpstorm and I get this problem when I try to style multiple elements inside each other, for example, when I try to add a fill for the svg for being active the svg element just shows with a red underline and the error is: "Nested selector can't start with an identifier or a functional notation" and it does not work, is it only a problem with Phpstorm or how can I fix that?
Why remove " " from onclick attribute?
Plz translate your videos in hindi🥰😍🤩😘
I don't know why but the position sticky for the sidebar doesn't seem to work for me 😢
Because its sticky
i completed 1k like
9:49 in my page "sidebar" is not sticking at top
It is scrolled with "main" content
Temporarily I try set margin-left: 250px for "main" Tag
why i can't add a new js code in app.js it doesnt work why?
Hi
WaaaAaaaooO
Pin bro first comment❤❤
No, You are not :)
Can someone comment the code?
coding2go.com
This code is so f**** dirty....
List elements only have 4 possible parent elements ul, ol and menu. The last one is “dir” but this is obsolete. Div wrappers are technically wrong here.
Furthermore, “nested css” is used, but only at a later stage. Either you start with it right from the beginning or you leave it out completely (here, however, it should be explained what the advantages and disadvantages are)
The Javascript: Use quotes, especially if something can occur that may allow spaces. onclick='funct( this )'
Then the javascript is loaded via defer. This has the consequence that a click on the button can cause an error, because the mentioned function does not yet exist. This can occur in particular if the JS file takes longer to load. The eventBinding should also be carried out with the JavaScript first. You should also not toggle the “close” class if you want to remove it. If something interferes with the process and the toggle interferes, there can be strange effects (but only as an optimization by the way)
And last but not least: SVGs offer the possibility of being recycled. “SVG use” is the magic word here. Especially if icons are used frequently, you should consider this (e.g. the Chevon)
Feel free to explain politely what you would have done differently to improve the code, so that people can get an actual value from your comment.
@@coding2go sorry, forget to create the full responce on pc
@@KevinGellerwell where is it?
Holle you are too fast
It's a pity, I wasted my time for nothing.
I want to talk to you personally, how can I talk to you? @coding2go