These Pesky Web Designers Have Done It Again...
HTML-код
- Опубликовано: 26 окт 2022
- Watch as I show you how to recreate the annoyingly good nav menu from www.buildinamsterdam.com/cases. (It's not really annoying, I'm just teasing...mostly)
Get Font Awesome Pro: fontawesome.com/referral?a=75...
Merch: cottonbureau.com/p/ESQABX/shi...
Support the channel: ko-fi.com/hyperplexed (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
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
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!
It's fitting that the guy is on a hoverboard because he just floats away once you click the menu icon.
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.
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
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!
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.
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
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.
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.
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!
This is awweessoommee 🔥🔥🔥
I respect your editing skill.
Thanks for putting so much effort for us 😍
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 🤌
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 love the style of these videos so much. Thanks for the inspiration - this gives me a few ideas :D
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 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 😃
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
I’ve never seen a more concise and understandable css tutorial, well done!
as always, love the content, the editing style, the concise script, and the beautiful frontend work!!! Keep it up!
Your videos are just amazing, everything about them is perfect 😍
I really enjoy watching them and I really hope you keep creating these contents 💪🏽
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!
I love this so much. I don't even code, this is just so well made. Nice work, man.
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 just found your channel today. Wow! Hands down the best lesson I've ever had so far!
Every freaking video my mind is blown how creative and talented people are.
Man, your videos are just so good, your engagement must be off the charts. Teach me master.
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.
I started learning html and css in addition to school for the past 2 or 3 months and I have fallen in live with it. It's just so cool! Love your videos.
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
Fantastic channel, subbed, going to be using as much of this info as i can. Really high quality stuff man thanks.
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
I just recently found your channel... Even thought I don't do front end stuff, It is just simply entertaining to watch your videos!
Your videos never cease to amaze me. Thank you for the amount of hard work and detail you put into presenting all this.
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.
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!
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 this channel changed my thought process. I enjoy watching them very much. Recently discovered this gem of a channel. ♥️♥️♥️
That was amazing, such an interactive and engaging CSS tutorial, like damn. Halfway through the video, I decided to subscribe
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.
I really love how you make all complex design looks so easy!!
super helpful as you explain and write and highlight the code when relavent, going through it all!
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.
Omg youtube keep showing your post and each time i watch i think i like your work even more ♥️♥️
I love your new style of commenting what you're doing! Great Video as always.
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!!
Great tutorial! It’s great to see some html + css + js done as intended ❤
Wow I felt like I learnt so many things in one go, but it was easy an effortless to understand. Great tutorial 👍
Another great video!!! Thank you for sharing great tutorial videos and codes!
i learn so much about css from the way you simply explain properties and why they're there!
Niiiice 👌
The HTML is also very clean! I love the entire page design
Your videos are just on another level. Keep it up!
Man you're just a bloody genius. Consider me your subscriber forever. Am a data science guy but what you do is incredible. Wow.
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.
You have zero competition on RUclips. I was tired of watching lazy unclear tutorials but then 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
clicking that button and seeing the really smooth animation is oddly satisfying.
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.
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
I love your style of teaching! You're amazing
Awesome videos, keeps me motivated!
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 !
that was so elegant ,thanks man!!
Loved it! Well done!
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
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!!!
Awesome tutorial, really inspiring! 😄
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!
This was amazing.
Thanks for sharing.
Awesome video! Super helpful and a great explination
Thank you, coach for giving us the techniques! Boss page!
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.
you popped up as my recommended. absolutely devoured this vid. moved on to your next ones. can easily say you are the🐐
Ugh you are so cool. I love how you describe things ❤
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
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. 👏
- 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.
That was really cool. Wish you had a WebDev course for us to learn from! Any such possibility in the near future?
5 MINUTES AND I'M IN LOVE WITH THIS CHANNEL
Bruh you just taught me more in five minutes than I learned in the last two years of work experience. Thank you
I love this series and improving other website series!
I don't even know web dev and feel like I could implement this very quickly and even iterate on it. Perfection.
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.
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
your tutorials r unique, keep going!
I need more videos like this in my life! Loved it!
Love your vids, keep up the great work,
Hardcore mode: This site with accessibility.
These videos you make are amazing. kudos
This is such an awesome explanation!
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!