Тёмный

These Pesky Web Designers Have Done It Again... 

Hyperplexed
Подписаться 652 тыс.
Просмотров 356 тыс.
50% 1

Watch as I show you how to recreate the annoyingly good nav menu from www.buildinams.... (It's not really annoying, I'm just teasing...mostly)
Get Font Awesome Pro: fontawesome.co...
Merch: cottonbureau.c...
Support the channel: ko-fi.com/hype... (accepts PayPal, card, etc).
Tools used: HTML, CSS, JavaScript
CodePen: cdpn.io/gOzJgWm
Music Credits:
Rock, Water, Plant, Building - StreamBeats - Lofi - Harris Heller

Опубликовано:

 

26 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 374   
@Crashman1012
@Crashman1012 Год назад
I’ve been a front end dev for about a year and I don’t think I’ve ever seen a better explanation on how to center a background image this well
@sebasbarrantes5727
@sebasbarrantes5727 Год назад
hey, you have insta or something I have a few questions
@gillsejusbates6938
@gillsejusbates6938 Год назад
@@sebasbarrantes5727 ?>????????????????????
@Vercte
@Vercte Год назад
It’s definitely a spam bot 100%
@GlennDavey
@GlennDavey Год назад
I've been one for 2 decades and I don't need to keep watching this video.
@ShaneRounce
@ShaneRounce Год назад
I've been a frontend dev for 23 years. You'll get used to learning the new "best ways" to do everything over time. (it never ends)
@ThePrimeTimer100
@ThePrimeTimer100 Год назад
I’ve never seen CSS coded in such a satisfying way, and it’s really motivating me to start building whatever I see on the internet! Your channel is amazing, keep doing you!
@keent
@keent Год назад
writing css can sometimes be blissfull
@ShaneRounce
@ShaneRounce Год назад
@classic max Yeah, for sure. It's a nice UI in artistic terms and even works well in terms of interactivity but it definitely breaks conventions and will confuse the majority of people who expect things to work in a particular way. Though I guess the target demographic of this particular website isn't really going to be the none tech-savvy crowd.
@FiFiFilth
@FiFiFilth Год назад
@classic max not every client has the same audience, and your dad probably isn't the target group for this website. you might wanna think about whether your rule of thumb really applies in any situation. We would still be living in caves and hunt deer with bamboo sticks, if everyone would think like you and nobody would challenge conventions.
@Harmxn
@Harmxn Год назад
You're in a niche field. There's not a lot of people that make such great and concise tutorials for web development. I can definitely see you hit 1.000.000 subs in 2023
@chonkydog6262
@chonkydog6262 Год назад
Cap
@Harmxn
@Harmxn Год назад
@@chonkydog6262 He got 112K subs in the last 30 days
@chonkydog6262
@chonkydog6262 Год назад
@@Harmxn So? He makes bad content.
@WasiMaster
@WasiMaster Год назад
@@chonkydog6262 165k people would disagree
@kolega1999
@kolega1999 Год назад
@@chonkydog6262 Meme videos with 90 views are much better I know
@chacecampbell2697
@chacecampbell2697 Год назад
Dude you're like the Bill Wurtz of web design, I'm still in awe if how simultaneously informative, relaxing and entertaining this was. Instant sub, excited to check out more of your content!
@hermanzhukov8044
@hermanzhukov8044 Год назад
Website creation always seemed overwhelming to me, but things seem much more graspable now that I have watched you explain why every line of code exists and what it does. Thank you so much
@amirmohamadbashiri
@amirmohamadbashiri Год назад
Your channel is going to be a big one. Awesome tutorials, very fun and to the point.
@UncleEdu
@UncleEdu Год назад
Usually he makes websites soulless and corporate but yeah, he does design well and his videos look interesting
@SpencerYonce
@SpencerYonce Год назад
I absolutely agree he will blow up
@bb_bb_
@bb_bb_ Год назад
i mean 163k is massive already but i know he'll have millions in a year.
@odriden1696
@odriden1696 Год назад
@@UncleEdu I can see how it might not be for everyone, but for visual and tidy freaks like me I usually prefer his take on the designs. Although I get the sentiment of the websites having their own 'soul'
@UncleEdu
@UncleEdu Год назад
@@odriden1696 I like his designs, ofcourse, but when he changed the steam's website per example, he make it look more corporate, soulless, and focusing on money instead of actual design. Simple old design doesnt always mean bad.
@TheJorgen99
@TheJorgen99 Год назад
I really like the style of videos like this, short and to the point. The fact that you don't over explain the different css-parameters is awesome. I can lookup the ones I don't know or want to go deeper with myself.
@benja-min1588
@benja-min1588 Год назад
Fresh, useful, fun and innovative. Far better than, "Lets build a clone site, and learn nothing" tutorials. You are the future, my man.
@sxj__
@sxj__ Год назад
😂😂😂😂😂 on point
@deathcare
@deathcare Год назад
This channel has been so helpful to me. As a front-end dev for a few years now, I've always been really stressed out by working with CSS myself just because there are so many complexities to it and it rarely turns out how you want it with any easy, so I just default to finding some bloated JS plugin to do the job when performance doesn't matter. Watching your videos has helped me turn CSS problems into little puzzles that are fun to figure out just like how I view JS work.
@SeanStClair-cr9jl
@SeanStClair-cr9jl Год назад
The way you're presenting the code is so INCREDIBLY pleasing lmao. Like. This is raising the bar for all other coding channels, damn. And if you're using some custom animation library, publish it for the world to see!
@jjohnsincrowfall3984
@jjohnsincrowfall3984 Год назад
Wanted to say this is an awesome tutorial and video! A reminder to everyone watching this to remember accessibility when developing components and sites like this. Unfortunately often times, fancy designs and implementations leave the necessary accessibility basics in the back.
@nogoodgod4915
@nogoodgod4915 Год назад
It's fitting that the guy is on a hoverboard because he just floats away once you click the menu icon.
@saadraza6072
@saadraza6072 Год назад
Thats was amazing I only needed to see the first couple of mins to subscribe. Incredible work man, especially the video transitions inline with the code change
@utterdonkey
@utterdonkey Год назад
I love these videos, you're my favourite channel
@Magnogen
@Magnogen Год назад
Same, I love how he breaks everything down - and so simply and smoothly too. Like that beautiful transition
@jojiratuva6631
@jojiratuva6631 Год назад
bruh you're the man. this chanel is now my go to. thank you. you're explanations are quick, concise and easy to follow.
@glydstudios5632
@glydstudios5632 Год назад
Every freaking video my mind is blown how creative and talented people are.
@jossani6712
@jossani6712 Год назад
I owe you so much, thanks to you i now see problems in a different approach, spliting big problems into small ones, this helped me to see the code more clearly understanding each part of it. Also my ui and css skills improved a lot, i am more creative now and you encouraged me to search, recreate and get inspo from complexes ui. Please keep up with the good work, you’re helping a lot of people
@thisbevibhor
@thisbevibhor Год назад
Man, your videos are just so good, your engagement must be off the charts. Teach me master.
@BenWamberg
@BenWamberg Год назад
Instant sub. This was one of, if not the best, web dev videos I've ever seen. Concise. Direct. Informative. Quietly kind. Brilliantly done, sir.
@machi_dev
@machi_dev Год назад
I love the style of these videos so much. Thanks for the inspiration - this gives me a few ideas :D
@NewbeastSwag
@NewbeastSwag Год назад
thank you for your videos! showing this to my little brother who's going to get into web design, you make the videos entertaining and i'm sure he'll love these videos as well.
@RobinClower
@RobinClower Год назад
This is simultaneously really cool and a complete nightmare for accessibility. Like I don't even know where to start with how to make this usable for screen readers or tab order, let alone all of the other normal accessibility stuff
@alwinter
@alwinter Год назад
You can set the nav toggle to have an aria-label to tell screen readers that it is the navigation menu. Then you can set the project links within the hidden nav menu to be tabindex="0" by default so that a user can't tab through them, but when the nav toggle is clicked have some JS that sets all of the links to be tabindex="1" so that you can now tab through them.
@slingshot1218
@slingshot1218 Год назад
You’re explanations are the freaking best I’ve ever encountered. Considering I’m still learning this is a crazy good way to think about elements and tags. Crazy good!
@kimbapslayer1995
@kimbapslayer1995 Год назад
Man I was translating all the css you wrote into tailwind in my head. I love tailwind lol. A lot of this is so much more simplified. Good stuff 🤌
@MultiDarkZen
@MultiDarkZen Год назад
clicking that button and seeing the really smooth animation is oddly satisfying.
@Foxygrandpa2131
@Foxygrandpa2131 Год назад
This is seriously one of the best UX / design / web channels I’ve ever seen. I know these videos are a huge amount of work, but please keep it up. You have a real gift man 😃
@aleksd286
@aleksd286 Год назад
- Ok, let’s recreate it Business owners: - Please stop, you’re making us uncomfortable
@MrWannaBAlone
@MrWannaBAlone Год назад
I just found your channel today. Wow! Hands down the best lesson I've ever had so far!
@olwethu_mendez
@olwethu_mendez Год назад
Duck it, I'm subscribing. The amount of fun and motivation I have to learn and try out new things whenever I view this channel's content. Gives hope and renews excitement to a noob like me
@wizamit
@wizamit Год назад
This is awweessoommee 🔥🔥🔥 I respect your editing skill. Thanks for putting so much effort for us 😍
@user-ls1rk6lt9o
@user-ls1rk6lt9o Год назад
I’ve never seen a more concise and understandable css tutorial, well done!
@cloudalister
@cloudalister Год назад
Bruh no joke, these breakdowns are helping a lot, i finnaly feel like i'm understanding/learning how to code and stuff. Thanks a lot, this is lifechanger content.
@Blearky
@Blearky Год назад
I am studying Business Informatics and I had to create some websites myself. I just want to tell you that you are an excellent tutor. This is the kind of interaction where new developers/students can learn how something works with an insane good workflow, and from what I see in the comments, frontend developers get good explanations and approve. Keep up the good work, every video is just a joy to watch.
@revvilo
@revvilo Год назад
I've always had an interest in formatting of information when doing tutorials, and this video takes the cake. Giving the 'need' for the 'how' is done so fucking well in this video. Bravo, man.
@TitusSc
@TitusSc Год назад
That's the kind of stuff that frontend devs love but that confuses end users, has poor accessibility, doesn't work on mobile, and in general results in a poor UX
@borstenpinsel
@borstenpinsel Год назад
In webdesign, design and function seem so far apart. All these "praised" designs are visually appealing and technically challenging (hard to recreate). But ALL of them are basically picture books. 9/10 times when you visit a website you want to find information quickly. Opening times, address, whether or not an item is available and how much it costs, the rest of the paragraph of which the first sentence is displayed on Google.
@aweloop6248
@aweloop6248 Год назад
That why i loathe modern web design. Everybody wants to be unique and good looking. But they do that loosing function. And due to their oversimplification i often times need to search longer then neccesary just to find what i clicked for. Furthermore are websites like the one in this video more recource intencive and therefor laggy on older mashienes. Just because it looks buttery smooth on the newest Macbook doesnt mean it will look good on a 2005 Dell pc. You cant expect every customer/visitor to have modern computers.
@fancieme1359
@fancieme1359 Год назад
@@aweloop6248 so what you are saying is old devices should always be taken into accounts? Huh tell that to apple. There has to be a reason to want to migrate to the newer machines otherwise the new ones would just be overkill if your 2005 dell computer or the first iphone could run everything smoothly
@andywest6062
@andywest6062 Год назад
@@aweloop6248 You'd have to lazyload the content to prevent massive load times, but yes I agree, newer designs tend to steer further and further away from being functional. If I'm having to hunt for elements/information, then you've already failed as a designer, and you're quite right about perfomance. Having a bunch of css3 properties (animations, scaling, transforms, zooms etc..) will be visibly slower on older machines, if they can even render those properties correctly. Imagine trying to run a site like this on IE. Good luck is all I can say.
@blinded6502
@blinded6502 Год назад
@@aweloop6248 "unique" is a bad word here, it contradicts with oversimplification
@nomms
@nomms Год назад
@@fancieme1359 Most of the world doesn't have high speed internet or unlimited bandwidth. These are not accessible to them. And yes, website preformance should be considered, not everyone can afford/has access to preformant machines or high speed internet. These folks shouldn't have a terrible experince using a site. Not to mention they're hell to use and terrible for actually finding information. When I visit a site I'm seldom looking to be impressed with it's design. I'm looking for information or trying to complete a task. Designs like this will looking slick are harder to use and harder to parse.
@vlad.nicula
@vlad.nicula Год назад
Incredible content quality! Thanks for putting in the effort to explain what each group of css properties does and how it affects the page. This is probably the best format for explaining how experience developers think and visualise what they are going to build.
@pipaldeka2387
@pipaldeka2387 Год назад
Man you're just a bloody genius. Consider me your subscriber forever. Am a data science guy but what you do is incredible. Wow.
@kusurugizeme
@kusurugizeme Год назад
This is the most well produced CSS coding tutorial I've ever seen.
@davidvideauortega287
@davidvideauortega287 Год назад
Man, your channel and the way you break up big stuff into smaller, manageable pieces is awesome. It really inspires me to tackle all those UI designs that I might think are "too complicated to be done". Please keep up the amazing work!
@epicplaceholder9853
@epicplaceholder9853 Год назад
I love your new style of commenting what you're doing! Great Video as always.
@blaroe
@blaroe Год назад
not a front end developer (yet, maybe) but looking at text i can’t comprehend and seeing things just magically pop up is so cool
@Squiddledorf
@Squiddledorf Год назад
I love this so much. I don't even code, this is just so well made. Nice work, man.
@baegiby4496
@baegiby4496 Год назад
Omg youtube keep showing your post and each time i watch i think i like your work even more ♥️♥️
@lilschmea
@lilschmea Год назад
as always, love the content, the editing style, the concise script, and the beautiful frontend work!!! Keep it up!
@B20C0
@B20C0 Год назад
Hardcore mode: This site with accessibility.
@dnescodino
@dnescodino Год назад
Amazing. You took all the anxiety out of it. One of the few videos about the topic that were equal parts entertaining and relaxing. Instant subscribe
@JonatanZ.
@JonatanZ. Год назад
bros content is the best web development content i have ever seen, good explanation without making it dry. Maybe a little bit slower but then again it isnt for beginners begginers. well done.
@saramky
@saramky Год назад
I just recently found your channel... Even thought I don't do front end stuff, It is just simply entertaining to watch your videos!
@darshancj483
@darshancj483 Год назад
so happy that i came across your channel serious u inspire me alot to to start building whatever I see on the internet! and just expand my portfolio, hands down you are the best web content creator on the internet
@oscarestudillomarin8732
@oscarestudillomarin8732 Год назад
Your videos are just amazing, everything about them is perfect 😍 I really enjoy watching them and I really hope you keep creating these contents 💪🏽
@OrcanGG
@OrcanGG Год назад
you popped up as my recommended. absolutely devoured this vid. moved on to your next ones. can easily say you are the🐐
@maksudulhaque3227
@maksudulhaque3227 Год назад
Man this channel changed my thought process. I enjoy watching them very much. Recently discovered this gem of a channel. ♥️♥️♥️
@picklejuice444
@picklejuice444 Год назад
I have no idea how i have not came across your channel before i really enjoy the way you explain stuff and the speed and tune of your voice Idk if you answer questions but im really curious about how long you have been coding
@RussDnB
@RussDnB Год назад
Your videos never cease to amaze me. Thank you for the amount of hard work and detail you put into presenting all this.
@roflcoptersaurustron
@roflcoptersaurustron Год назад
i learn so much about css from the way you simply explain properties and why they're there!
@jm-alan
@jm-alan Год назад
Yep that's a subscription Triple extra bonus points for using the ability to reference data fields (or any field, really) as a way to create stateful CSS with minimal JavaScript interaction
@hazemgharib
@hazemgharib Год назад
I really love how you make all complex design looks so easy!!
@zn3rgy1000
@zn3rgy1000 Год назад
I've been confident in my CSS skills, but don't know much about JS. Can you make a video about learning materials you've used to study these languages? I'm so inspired by your work, and I'm happy to see that you're starting to get the traction you deserve. 👏
@johnkakuk
@johnkakuk Год назад
Bruh you just taught me more in five minutes than I learned in the last two years of work experience. Thank you
@josephvictory9536
@josephvictory9536 Год назад
Fantastic channel, subbed, going to be using as much of this info as i can. Really high quality stuff man thanks.
@yvs1n
@yvs1n Год назад
this is literally my first time watching you and im regretting never watching you, your videos are amazing and so informative.. keep it up man
@theidealneal
@theidealneal Год назад
It looks cool, but isn’t very user friendly. If I wasn’t a designer or developer I wouldn’t know that was the menu. Majority of users are looking for the menu at the top of the page, and if the same design is scaled down to mobile, the UI of the browser is going to make it flicker everytime someone changes their scroll direction. Also, requiring users to click to view the navigation on desktop is pretty annoying. However I do like the image carousels. This is a perfect example of “learn how to code it for learning sake”, but never put it in practice unless the site is purely built for aesthetics.
@lwandilehlongwane5468
@lwandilehlongwane5468 Год назад
5 MINUTES AND I'M IN LOVE WITH THIS CHANNEL
@jamielam7918
@jamielam7918 Год назад
Thank you, coach for giving us the techniques! Boss page!
@tsvh383
@tsvh383 Год назад
I have absolutely no desire to do anything even close to related to coding yet i just watched this entire video.
@kaloyan.doychinov
@kaloyan.doychinov Год назад
That was amazing, such an interactive and engaging CSS tutorial, like damn. Halfway through the video, I decided to subscribe
@EzeOnYoutube
@EzeOnYoutube 5 месяцев назад
I didn't understood much, but I'm impressed, I'll be back once I learn more
@kelshakes
@kelshakes Год назад
Wow I felt like I learnt so many things in one go, but it was easy an effortless to understand. Great tutorial 👍
@sidandhawa
@sidandhawa Год назад
This is absolutely brilliant the flow of your video and explanations are perfect 👏
@SergiuGothic
@SergiuGothic Год назад
my god.. about 10years ago when I learned css it was so barren. Now I see all this cool stuff, variables, grids. Really makes me go back on css
@iniubong
@iniubong Год назад
Really love the way you explain CSS properties. If only i could think this way during development I'd save myself a lot of time.
@duke605
@duke605 Год назад
I wish I was given cool shit like this to work on but instead I get stupid shit like “install the google analytics script” and “client wants the nav bar to stick to the top of the screen”
@WallaceThiago
@WallaceThiago Год назад
I am so glad i found this channel
@RhythmnOfThought
@RhythmnOfThought Год назад
Thanks for introducing me to this great website! If you placed a checkbox as the first child of the body and wrapped the menu button in a label for said checkbox, you could achieve all of this without any JavaScript by simply using the "input:checked ~ element" selector. I'm actually curious if there would be any disadvantages in my approach, so if you happen to know any, please do let me know.
@colebot
@colebot Год назад
This channel explains CSS in the best way I've seen
@tirthasg
@tirthasg Год назад
That was really cool. Wish you had a WebDev course for us to learn from! Any such possibility in the near future?
@enriccamarero5601
@enriccamarero5601 Год назад
Great tutorial! It’s great to see some html + css + js done as intended ❤
@annunzarizzle
@annunzarizzle Год назад
I don't even know web dev and feel like I could implement this very quickly and even iterate on it. Perfection.
@orhanmadiassani
@orhanmadiassani Год назад
I’m new to programming and making dope looking website is what I want to do. So you’re channel is insanely good keep going
@brendensong8000
@brendensong8000 Год назад
Another great video!!! Thank you for sharing great tutorial videos and codes!
@PaulMcCannWebBuilder
@PaulMcCannWebBuilder Год назад
Groundbreaking in the way you demonstrate how code does things. So many tutorials, so many demos find it necessary to explain the details (so many would stop to explain what 'fa-' is all about), where the forest is lost for the trees.
@waitingpatiently
@waitingpatiently Год назад
Ugh you are so cool. I love how you describe things ❤
@shalevtamir
@shalevtamir Год назад
Great tutorial ! I'm more of a beginner web developer and I didn't get most of this haha but it was still very interesting !
@Feroov
@Feroov Год назад
HANDS FUCKING DOWN THE ABSOLUTE BEST WEB DESIGN CHANNEL OUT THERE!
@BertPdeboy
@BertPdeboy Год назад
Niiiice 👌 The HTML is also very clean! I love the entire page design
@GavHern
@GavHern Год назад
instead of the whole "left: 0; top: 0; transform: translate(-50%, -50%);" for absolutely positioned elements you can just do "inset: 0; margin: auto;" which i find to be more readable
@dailydoseofhalal6767
@dailydoseofhalal6767 Год назад
I love your style of teaching! You're amazing
@obiarne
@obiarne 11 месяцев назад
Your voice and the way you explain things is just phenomenal ! Absolutely love this, thank you for showing up in my recommended! I subscribed immediately
@dresan48
@dresan48 Год назад
Holy shit your editing level is in its own league
@silenux7419
@silenux7419 Год назад
This was amazing. Thanks for sharing.
@Baraka0369
@Baraka0369 Год назад
Really, you are a boss Thanks man, you ROCK ❤️ From France 🇫🇷
@simas6190
@simas6190 Год назад
Wow! This videos are insanely good
@huncho6295
@huncho6295 Год назад
Not only designing but you also need to solving the problem, yeah that's it "problem solving". Nice content, keep it up
@izeelenn
@izeelenn Год назад
Subscribed, how refreshing 👏
@Isaglish
@Isaglish Год назад
I really like Fireship and your content is pretty similar to him but with your own twist and personality, looking forward to more of your stuff cause they're great!
@theresacastellucci8962
@theresacastellucci8962 Год назад
Awesome video! Super helpful and a great explination
@GoofyInternetMan
@GoofyInternetMan Год назад
Keep up the good work I’ve been wanting to learn html and this is really motivating
@oso_lacion
@oso_lacion 10 месяцев назад
just an advice. when toggling a variable, you can just set it to the opposite of itself. example: var = !var
@dbweb.creative
@dbweb.creative Год назад
I think I'd just use label + checkbox for toggle, and then do the :checked, especially since now we have :has() to be able to condition and change any element on the page, based on another. So don't need js, can keep it css.
Далее
ImNotGoodEnough.js
11:11
Просмотров 895 тыс.
It's time to talk about these UI trends
9:09
Просмотров 481 тыс.
🎙ПЕСНИ ВЖИВУЮ от КВАШЕНОЙ
3:05:21
Help Me Celebrate! 😍🙏
00:35
Просмотров 17 млн
Award Winning Animation With Only 20 Lines Of CSS?
6:59
Please stop using px for font-size.
15:18
Просмотров 167 тыс.
I Redesigned Popular Websites (Quora & Steam)
6:25
Просмотров 326 тыс.
world's shortest UI/UX design course
6:53
Просмотров 1,2 млн
Easily Improve Your Web Design (With Example)
17:59
Просмотров 98 тыс.
13 Things To Remove From Your Website Immediately
12:33
My Top 5 Techniques for Web Animation
9:58
Просмотров 92 тыс.
🎙ПЕСНИ ВЖИВУЮ от КВАШЕНОЙ
3:05:21