These Pesky Web Designers Have Done It Again...
Вставка
- Опубліковано 14 жов 2024
- 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
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
hey, you have insta or something I have a few questions
@@sebasbarrantes5727 ?>????????????????????
It’s definitely a spam bot 100%
I've been one for 2 decades and I don't need to keep watching this video.
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)
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!
writing css can sometimes be blissfull
@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.
@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.
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
Cap
@@chonkydog6262 He got 112K subs in the last 30 days
@@Harmxn So? He makes bad content.
@@chonkydog6262 165k people would disagree
@@chonkydog6262 Meme videos with 90 views are much better I know
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.
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
Your channel is going to be a big one. Awesome tutorials, very fun and to the point.
Usually he makes websites soulless and corporate but yeah, he does design well and his videos look interesting
I absolutely agree he will blow up
i mean 163k is massive already but i know he'll have millions in a year.
@@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'
@@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.
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!
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.
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!
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.
Fresh, useful, fun and innovative.
Far better than, "Lets build a clone site, and learn nothing" tutorials. You are the future, my man.
😂😂😂😂😂 on point
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
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
I love the style of these videos so much. Thanks for the inspiration - this gives me a few ideas :D
Every freaking video my mind is blown how creative and talented people are.
This channel is insanely underrated. Easy to understand explanations, straight to the point, entertaining. I wish all of my lectures were like this. Keep it up.
Yes!! I was just marveling over how insanely good his videos are!
It's fitting that the guy is on a hoverboard because he just floats away once you click the menu icon.
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!
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.
This is awweessoommee 🔥🔥🔥
I respect your editing skill.
Thanks for putting so much effort for us 😍
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.
bruh you're the man. this chanel is now my go to. thank you. you're explanations are quick, concise and easy to follow.
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
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.
Man, your videos are just so good, your engagement must be off the charts. Teach me master.
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.
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
I love these videos, you're my favourite channel
Same, I love how he breaks everything down - and so simply and smoothly too. Like that beautiful transition
Your videos feel like the "The missile knows where it is by knowing where it isn't" text but infinitely more complex. I love it.
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 🤌
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 😃
I love this so much. I don't even code, this is just so well made. Nice work, man.
I just recently found your channel... Even thought I don't do front end stuff, It is just simply entertaining to watch your videos!
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.
Your videos are just amazing, everything about them is perfect 😍
I really enjoy watching them and I really hope you keep creating these contents 💪🏽
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.
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.
@@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
@@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.
@@aweloop6248 "unique" is a bad word here, it contradicts with oversimplification
@@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.
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!
I just found your channel today. Wow! Hands down the best lesson I've ever had so far!
I’ve never seen a more concise and understandable css tutorial, well done!
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. 👏
as always, love the content, the editing style, the concise script, and the beautiful frontend work!!! Keep it up!
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
You did a really great job highlighting only the snippets of code that were relevant in any given part of the video!
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.
i learn so much about css from the way you simply explain properties and why they're there!
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
Holy fuckkkkkkkk,
As a Full-Stack Dev your videos are amazing!!!! Plus points for sticking with the basics!!! Even though I work with Angular and Stencil, it’s refreshing to see someone develop fluid and dynamic web pages with basics!!!
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.
clicking that button and seeing the really smooth animation is oddly satisfying.
That was really cool. Wish you had a WebDev course for us to learn from! Any such possibility in the near future?
super helpful as you explain and write and highlight the code when relavent, going through it all!
Man this channel changed my thought process. I enjoy watching them very much. Recently discovered this gem of a channel. ♥️♥️♥️
Your videos never cease to amaze me. Thank you for the amount of hard work and detail you put into presenting all this.
I really love how you make all complex design looks so easy!!
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.
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
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.
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
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.
- Ok, let’s recreate it
Business owners:
- Please stop, you’re making us uncomfortable
This is the most well produced CSS coding tutorial I've ever seen.
You have zero competition on UA-cam. I was tired of watching lazy unclear tutorials but then I found this channel.
I love your new style of commenting what you're doing! Great Video as always.
Hardcore mode: This site with accessibility.
Man you're just a bloody genius. Consider me your subscriber forever. Am a data science guy but what you do is incredible. Wow.
Omg youtube keep showing your post and each time i watch i think i like your work even more ♥️♥️
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
This is absolutely brilliant the flow of your video and explanations are perfect 👏
Fantastic teaching method! And you went to such a lot of work to illustrate it all. Kudos!!
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.
this is like a time capsule back to 2016! So funny the old web dev stack.
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
That was amazing, such an interactive and engaging CSS tutorial, like damn. Halfway through the video, I decided to subscribe
Wow I felt like I learnt so many things in one go, but it was easy an effortless to understand. Great tutorial 👍
My frontend teachers would be so mad watching this video hahaha
* You're using "black" as a keyword in CSS
* You're using Onclick in HTML instead of addEventListener in JavaScript
* You're using data attributes in HTML
* You're using absolute (px) values instead of em, rem values.
Anyways, very nice video and I subbed because ur voice is so soothing and it gives great ideas!
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
I don't even know web dev and feel like I could implement this very quickly and even iterate on it. Perfection.
Fantastic channel, subbed, going to be using as much of this info as i can. Really high quality stuff man thanks.
Great tutorial! It’s great to see some html + css + js done as intended ❤
Bruh you just taught me more in five minutes than I learned in the last two years of work experience. Thank you
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
Thank you, coach for giving us the techniques! Boss page!
I didn't understood much, but I'm impressed, I'll be back once I learn more
you popped up as my recommended. absolutely devoured this vid. moved on to your next ones. can easily say you are the🐐
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
That's pretty cool! I wonder how it would look if the menu opens slightly slower than the page shifts up.
I love your style of teaching! You're amazing
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.
I have absolutely no desire to do anything even close to related to coding yet i just watched this entire video.
Your videos are just on another level. Keep it up!
Subscribed, how refreshing 👏
I am so glad i found this channel
This kind of content is amazing! Keep up the great work!
Keep up the good work I’ve been wanting to learn html and this is really motivating
This channel explains CSS in the best way I've seen
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.
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”
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!
Niiiice 👌
The HTML is also very clean! I love the entire page design
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
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 !