I've Found the Optimal Website Header and...
Vložit
- čas přidán 24. 06. 2022
- Watch as I show you how to recreate the elegantly simple header from Superlist!
Support the channel: ko-fi.com/hyperplexed (accepts PayPal, card, etc).
CodePen: cdpn.io/BaYXaOx
Superlist: superlist.com
Music Credits:
Beyond The Clouds - StreamBeats - Lofi - Harris Heller
This channel has made me reconsider my thoughts on front end and web development in general
Me too
How do they learn all this? Is this their sheer intelligence?
@amritadevi166 they got the right equipments, intellect, time, place and motivation I guess.
@@user-ww4gz7wx4t And team.
@@amritadevi166 No, anyone can learn it for free.
Programming is especially cheap to learn, as you can do it even on the crappiest computers and most of the best learning resources are free on the internet.
Having to be particularly intelligent to learn it is just an outdated stereotype, the only requirement is being willing to take the time to learn and not just flake out at the first sign of trouble.
I’d personally call that a hero not a header.
Man I've been team backend dev through and through never really cared much about CSS, but your channel has literally motivated me to work on my CSS skills now. Thanks for doing this and helping me in my journey of being a Full Stack Dev in true terms
Your channel is honestly one of the very best website development channels around, small videos explained in such a wonderful and helpful way.
I'm going to watch all your videos in one go , its better than watching a movie.
Great content !
This channel is really awesome for random cool frontend stuff, love it!
This video is amazing, very underrated, and deserves more credit for how appealing your content is!
not sure if you’d do two videos in the same site but that website has a really cool on-scroll svg animation that they pull off by animating some really interesting svg properties. that would make itself into a really good video for this channel i think :)
im curious about what animation/svg properties you're talking about
leastfavorite spotted
This channel is one of the channels that tempt me to go to the next video after one video... You are tooo awesome dude.... 👍
keep on the good work man, love the content!!!!!!!!
I saw your post on Reddit. Best of luck!
:) clean sleek and to the point, and im not talking about the design. (that aswell actually)
This is amazing!!!
Really enjoy your videos :)
I'm loving it!
Hey I see what you goings doing a long time ago I searched best websites and this came I still have it in one of my bookmarks thanks for the video it was really needed
Cool stuff! Though I think most web developers/designers refer to that section as the "hero", reserving "header" for where you stick your logo, navbar, etc :)
I’ve been taking web dev for my bachelors and you make it look so easy
*bachelor's
This design makes me think of a university website where the point is to be trendy and eye catching. It's an interesting design but I'm not sure I would use it. Either way, nice video!
which visual studio code style template are you using here? thanks!!
This website is amazing, can you make a page that shows something in it, could be text or anything. when you do the same slider as the video, it shows the code that is used for a specific element or the whole page if no element is selected.
The coolest thing that I saw tıday in youtube
how can i add this to my shopify store? amazing!
omg god omfg !!!!!!!!!!!!!!!!!!!!!!!!! this channel is the shit !!!!!!!!!! i m finally gonna get hired after portofolioing stuff like this
!!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!!
Wouldn't changing the transform property, instead of the width be better in this case? since that's efficient to animate as well.
I’ll post this in every video, please make a course to see web design as you do
Are these videos missing the title card that lets you go to the next video?
any idea on how to access the code?
So how does this work when using a keyboard?
Please do the DBrand home page I’ve tried to remake it but I fail to do it
I need your file icons extensions pls
can you also add menu button please it would really help me a lot if you teach that!!!!
I wanna be as good as you 😩😩
please i need help, how to make the animation stop when the mouse is out of the bloc ?
Use mousemove event only on that block
i want to do this in flutter but seems liek its too hard for me anyone find a way ?
Where did you learned how to make viewers watch a lot of videos in a row? Because it works!
The position could actually be achieved by just using grid and putting the elements in the same row and column.
This is really hard
Nice to see a fellow Rubik font user. I use this font for everything
The consistency of your animations are pretty cool. Do you use code to generate your animations or is it edited by hand?
I don't know how he does his animations, but there is an animation software called motion canvas that lets you create animations using code.
@@mr_clean575 yeah, I use motion canvas now to do my motion graphics. I love it.
@@FilledStacks Yeah motion canvas is awesome. Part of me wondered if Hyperpixel was using it cause it looked somewhat similar, except for the hand-drawn arrow effect.
@Samuel Sabin I agree. It looks awesome. I love motion canvas, I to practice a bit more to get my skills up and create a bunch of components.
😍
Is this a header or a title page, idk
I run this exact source code in Replit and it doesnt work.. am I missing something or is this just bullshit
cool
I don't even do this and im enjoying my myself
this code is not working , i watched the video more than 4 times but the hover thing is not working
Not supposed to be a tutorial.
Codepen is in the video description
why don't you use a flex box to center the text?
It won't work because when you try to show the second text, the first one will start to shrink. Only with the width and margin text can stay in its place without shrinking.
@@paradoxify_ makes sense, thanks for the answer!
@@ayatovevo Welcome
Some time ago people thought cool to have an interactive splash screen (maybe written in flash) for their websites. Then this fell out of favor, because it's stupid to make you have to click and wait for the actual content. So now we have full-screen "headers" that you need to scroll...
I've seen an entire design process of a website centered around this concept a while back... I'm not telling you've stolen an idea or anything, I'm just trying to remember whos video it was cause the page was dope (an so is yours).
Why did he use --yellow like that? As a variable?
Someone?
You record this on a potato mic?
:)
Just inspect element, copy, paste.
I couldnt get this to work in React and now I feel useless lol
To get the Margin right of the text you can write this,
.title{
--text-width: 65vw;
width: var(--text-width);
margin: 0 calc((100vw - var(--text-width)) / 2);
}
Now whenever you change width, it'll change the Margin accordingly.
This commend should be pinned
cool result but the css is a bit sloppy
Since we are directly changing the width, why isn't the text shrinking according to width? Can someone explain.
I believe its because the position of the text is set to absolute.
@@cvcvka588 I tried it and found the reason. It is because he put margin on title and hence it is staying in place.
@@tejaschalke1778 Oh okay thank you!
@@tejaschalke1778 it's also because he set the text width to 80vw, which is relative to the window
It's because he is changing the Margin according to the Width.
To get the Margin right of the text you can write this,
.title{
--text-width: 65vw;
width: var(--text-width);
margin: 0 calc((100vw - var(--text-width)) / 2);
}
Now it'll calculate the Margin for you and whenever you change width, it'll change the Margin accordingly.
would love a react/next adaption of this!
React/Next is not an entire different language. Just use it.
@@shamscorner Nextjs is SSR so you cant use document and window without tweaking the code a little
@@shamscorner ok thanks! I will just use it
@@magolao but it was quite easy to implement on nextjs
@@J0nssi yes I know, that's why I was requesting it
dammmmmmmmmmmmmmmm
Never use lobster!
Semantically, headings should have content following them. Your two h2, should actually be one H2. Potentially split with a span.
why calculate the width % when u can just use e.clientX as px? left.style.width = `${e.clientX}px`
i was stuck and you are the reason my code works now😄
:)
:)
:)