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!
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
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.
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.
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.
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
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
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
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
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!
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'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!
I don't know if it was the JS but this tutorial was too advanced for me to understand. Great work your doing mate!!!
The grid trick was amazing.
I was surprised to see that how the semantic HTML was demonstrated and explained beatifully, nice video
favorite coding channel
thank you, Fabian,
i really need a page reveal animation tuto pls
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!
my favorite coding channel
thank you Fabian
That tutorial just broked 5 hours of trying and testing my old sidebar. Now it's gone! Thanks! :(
Before watching this informative video, I would say that you have a great 👍 😃 experience Fabian Sir ...
Love from Pakistan...
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.
Underrated channel ❤️
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!
Thanks dear your code really help me in my project
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
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
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.
bro the transition are smooth 🔥🔥😎😎
My man was cooking 🔥🔥
Perfect for learning more and more....❤
I've been always waiting for your new videos. Thank you❤❤
This looks beautiful 🔥
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.
I want more videos like this
Amazing! That what I am looking for! Thanks a lot!
The way you explain everything is amazing
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
Thank you Fabian it really helpfull
Waiting for this tutorial🔥🔥🔥
Super informative and useful video! Thank you :)
Thank you so much it was amazing tutorial. Please keep it on and thanks once again!!🙂
Glad you liked it!
Thank sir it's give lots of value to my journey ❤
Glad to hear that
You are great
Thanks
Really helpful
Thank you
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.
Thanks a lot!
please upload more of these videos :)
Worth it 😊😊😊
thanks, it worked.
Hey sir, can you please create a video on scroll driven animations.
Thank you very much
excellent ☺♥
Could you please do it in reactjs and plain css
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
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
nice
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.
Use , tags to create nav bar, easy😅
Nice nice nice ❤
nice video
Sorry to bother you, but could you consider creating a tutorial on scroll snapping?
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...
what the name of the course on udemy
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.
This design is great. But the idea of using grid is terrible if you are planning on add a fixed top navbar.
Next video on creating a smooth FAQ using grid
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?
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
cool
How do you make a form that can be integrated into Gmail or server.
I don't know why but the position sticky for the sidebar doesn't seem to work for me 😢
Because its sticky
Plz translate your videos in hindi🥰😍🤩😘
Why remove " " from onclick attribute?
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
I ❤ you
i completed 1k like
please css Box-Sizing
why i can't add a new js code in app.js it doesnt work why?
First :))))
WaaaAaaaooO
Hi
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