Can I Create Online Tutorial’s Magic CSS Indicator?
HTML-код
- Опубликовано: 7 июн 2024
- I recently saw the thumbnail for Online Tutorial’s video on a magic CSS nav and it really intrigued me. I was curious how they created the design and wanted to try to replicate it myself. That is where this video comes in. This is my first attempt at recreating their design and I am surprised how tricky yet simple the entire process is.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/c...
Online Tutorials Video: • Magic Navigation Menu ...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:55 - Basic Navbar
10:59 - Magic Indicator
46:47 - JavaScript
50:43 - Moving The Indicator
#MagicIndicator #WDS #CSSAnimation
Yes, you can did it
.
And thanks for choosing my video.
you are the best channel for tutorials. i love your videos 🥰🥰
It was an interesting project. Tricky to conceptualize but simple once you figure it out. Thanks for coming up with the cool design.
now I want to see how you did it. Cool concept!
@@raptor_exo ! Is more efficient 😂
when both my favourite programmer are in a same video😍❤️
Honestly, I haven't been watching tutorials on youtube lately but this series is so enjoyable! Please do more javascript intense projects (like the 2048 clone) with this video format!
I really like, it's real process of coding, not like I did it before, now I'm about do this again for youtube video. Sometimes youtube coders should do that, just like you.
Sweet video. I like how you are able to so easily articulate your thinking process while doing development.
Really nice to watch the whole process! One thing I’d suggest is to use transform:translate instead of the left property on the indicator circle; it’s much more performant
I also reproduced this a few weeks ago. Nice to see 3 different approaches and solutions for the same problem. :)
Lol. The fast forwarding was epic. Once again, really nice tutorial. You're one of my favorite RUclipsrs.
Such an awesome video with process thinking!
Currently im going a beginner course in web development, and i've been abit hardstuck on designing forms and nav in CSS with stuff like positioning and more fundamental understanding of display and flex. This helped me understand way way way more than my study book could.
Golden content just in time, keep up the great work, love your vids!
:)
Thank you so much!
it was really too funny following you while coding. and what i really like that it's too real. because sometimes you struggle with what it seems easy things by turning some easy solutions too hard solutions and vice-versa... and i totally understand it's because of you were under the stress of the camera and you pay attention for not spending time on easy things as result for not making the video too long with zero editing, while it's a coding reality show :)
I just followed along with the og video but did try to do the curved edges that the menu bar have near the ciricle and ran into the same issues you did. crazy how elegant OT's implementation was.
FINALLY you change the font! I was watching your earlier tutorials and was like "Why doesn't he get the low hanging fruit first?!"
the way he says the word "just" is just awesome
This concept is awesome.
Thanks Kyle! Really love such tutorials 🙏
Btw, do you think you can make a tutorial for the new RUclips like button animation? 🙇♂️
Great tutorial!
I always learn something new from you.
I have a challenge for you.
It might be the toughest one yet.
Make a similar layout like codepen editor where you can resize multiple sections with custom dragbar.
And you have to have at least three sections side by side like codepen has html, css and javascript.
Having only two sections side by side is rather simple. Any more than that complicates things a lot.
And the layout has to be made in such a way that adding more sections should not break the functionality.
It can be pure html,css, javascript or you can also use something like react.
I actually tired it myself.
It's way more complicated than it looks.
I really want to see how you handle such functonality!
Hi bud, love your stuff and realise you are teaching us how to code by making it from the ground up not necessarily showing us the easiest or quickest way, and as a teaching curve would be slim, I'm a slow learner which works out well in the long run as I learn more about how not to do thing, it is very frustrating some times but has it's benefits in the long run, it was the same doing my business database and come up with ways to get around my lack of code skills (I will be good one day).
What I did with the database is show hide or visible invisible that way I make say the five images all with their own circle and house, contact, products etc then on click show the image and page I want and hides the home image which hides the circle and shows the image and it's circle I want and obviously moves to that page.
Just wonder is that a good idea or a dumb one, it's works well in my database.
I did let myself down on my writing skills also, but my secretary is good.
Thanks for what you do, I find it a very honourable thing for people who share thier knowledge for free, good on ya bud.
Yoooooooo, I saw that design 1 year ago(As I remember) and I liked it.
Amazing work
Amazing mate!
Would you ever do live streams with viewer questions? I've seen a few youtubers do it, but you could take it to whole new level!
that looks awesome
Thank you very much!!! As always...
At 6:08, it didn't center because the display is inline-block. So you need text-align: center, not the margin.
Great tutorial
Great thanks bro
LOVE YOUR VIDEO
very interesting, thanks
I would have tried a combination of psudo element and box-shadow to make the roundish style i think it would have been easier like that, but anyway great video as always, i'am learning allot from you, keep up the great work
you deserve 1million subs
thax for demonstrate every think
this is awesome
😀
How do I stack SVG's on top of each other? I'm trying to get one to mask the other for an animation but I struggle with positioning them so their centers neatly overlap.
Wow that's one hell of a CSS... border-hell... I'd probably have used SVG and SVG animations where I can.
I live this style,
Nice - I just watched the original = saved on time
Well done, would be great if you could do a video using java script for the same buttons
how did you learn that mathematical CSS? everything based on 1 size and calc, please tell me the resource
AMAZING
Hey I'm pretty new to web dev, whats the better editor? vs code or vs 2022?
Nice tutorial mate, 26:38 The top and left values had to be 50% thats why it didnt center properly
Awesome!
please make a tutorial on fixing horizontal overflows. its very common issue beginners face.
You can use prettier for formatting HTML and CSS code too. You just need to set some "whitespace` option in the prettier.
can you show how to make a sidebar indicator sliding menu in react?
You're the best!
Is it responsive?
tfw 9:49 when that montage kicks in
I would have created the list background as an SVG image and moved path points so you could have a transparent background. :)
Do you have some guide to control the path points?
It would make it even more interesting if you would have watched how the original video made it at the end, and react/comment on their way of making this.
Hey I have a question about how does cashback website track our transaction through there affiliate links 😕😕😟
whaaaat !! one hour😵
36:51 That's not happening because you have the box-sizing: border-box isn't it??? So the border wont affect as you say.
it works, but that div.indicator isn't valid HTML by being a direct child of the ul element. Only li elements are supposed to be direct children. Good work though, love watching you code.
Video Request: How to set up Algolia Autocomplete.js.
hes amazing
Any frontend devs out there that like to watch these tutorials please pause the video when he shows what he's going to try and create and Think about how you would go about solving it for like 10 minutes. Then resume and watch his video and take little notes of the tricks he uses that you didn't think of.
I need a help can you just make a part 2 of adding a search bar below this menu at center I'm facing difficulty. Kindly help me please 🥺🥺🙏🏻🙏🏻
I really don't understand why you don't leave the console attached to the browser, instead of having it floating around.
can we do it in wordpress?
Once again, another awesome video! Thank you so much 🤙🏼
Question, if anyone is able to help..
mine works fine, but when I link the href to another page in my rails app - it loads the new page but the green circle stays on the home button. Anyone with any idea would be greatly appreciated!! 🙏
same problem
@@emmanuelburdin4641 So I was able to figure out that its to do with the page refreshing, it resets the indicator property every time. I got around this by using JavaScript's 'window.location.pathname' = if this equaled to the page name I was on, then set the indicator property to whichever one i needed. Hope this helps! :)
9:00 haha gotcha man 😂 i think I'm confused but by now i know every developer get confuse on this shit.
😂😂😂😂
21:16 You have to add 50% from left and top
please do the videos on recat-redux and redux-saga.
i want to ask someting, how to show inspector in new window like that?
three dots -> the most left option to undock the window
@@ahmadmuslih ok, thankyou
an ul element may only contain li, script or template child nodes
Wow, I'm so out of touch with web design.
I didn't know maths like this was possible.
some use pixels , some use rem , you seem to use em ? what is the logic behind the choice please?
He has a video explaining the differences and when to use it. ruclips.net/video/-GR52czEd-0/видео.html
This video perfectly illustrates why I so many people HATE css.
I don't think you should use svgs for such small things like icons
I like how in css everything is a hack
Now, if you could take this example onto another video and show how to make this navbar accessible the right way...
I like how people think during coding!
Turns out that all people think the same way...😅
Create a big project using merm
This is cool, and thank you for it, but a DIV as a direct child of UL is not valid HTML :)
51:04
Please make, Quality change video player with m3u8 file format
This is the reason why devs are paid more that designers
Did you realised, that when you zoom out your browser window, the corners aren't at the right position anymore?
Red rectangle, shows a red square
26:39
The Online Tutorial is a Indian RUclipsr 🇮🇳🇮🇳🇮🇳🇮🇳
I think he is a Pakistani Muslim
@@abd_sh_321 he's right, online tutorial channel was india
@@ban-prem-001 sorry, just didn't know, Thanks
I'm from India
It is hilarious that he has to check dev tools everytime he tries to center something :)
first
Could I have a pin?
First
no im first
You are first... Beat me to it.
But your version is too messy.
This programming is very seperating languages so We think something,,😡😡😡