I've Found the Optimal Website Header and...
Переглядів 170,353
Рік тому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
@themannyzaur Рік тому
This channel has made me reconsider my thoughts on front end and web development in general
@comforth3898 2 місяці тому
Me too
@amritadevi166 2 дні тому
How do they learn all this? Is this their sheer intelligence?
@user-ww4gz7wx4t 10 годин тому
@amritadevi166 they got the right equipments, intellect, time, place and motivation I guess.
@comforth3898 10 годин тому
@@user-ww4gz7wx4t And team.
@sadnb12 Рік тому
I'm going to watch all your videos in one go , its better than watching a movie. Great content !
@TuxedoKat Рік тому
This video is amazing, very underrated, and deserves more credit for how appealing your content is!
@boneykingofsomewhere 4 місяці тому
Your channel is honestly one of the very best website development channels around, small videos explained in such a wonderful and helpful way.
@tjeerdbakker160 Рік тому
This channel is really awesome for random cool frontend stuff, love it!
@leastfavorite Рік тому
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 :)
@alexcubed4270 Рік тому
im curious about what animation/svg properties you're talking about
@lummo 2 дні тому
leastfavorite spotted
@ogzsxftw Рік тому
I’ve been taking web dev for my bachelors and you make it look so easy
@sargurunathan8568 11 місяців тому
This channel is one of the channels that tempt me to go to the next video after one video... You are tooo awesome dude.... 👍
@mrloqendo2012 Рік тому
keep on the good work man, love the content!!!!!!!!
@sheetboeh Рік тому
:) clean sleek and to the point, and im not talking about the design. (that aswell actually)
@tinnguyenhuu2505 Рік тому
This is amazing!!!
@eddieperaza7342 Рік тому
I saw your post on Reddit. Best of luck!
@GrowingEggplantion Рік тому
Really enjoy your videos :)
@KKOO8 Рік тому
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
@ng9930 Рік тому
The coolest thing that I saw tıday in youtube
@ehdust Рік тому
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.
@filmnlnja Рік тому
which visual studio code style template are you using here? thanks!!
@claudioandrade6438 Рік тому
I’ll post this in every video, please make a course to see web design as you do
@danielraducu9073 Рік тому
omg god omfg !!!!!!!!!!!!!!!!!!!!!!!!! this channel is the shit !!!!!!!!!! i m finally gonna get hired after portofolioing stuff like this
@Ashws_ Місяць тому
!!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!!!
@onlylewe8 Рік тому
how can i add this to my shopify store? amazing!
@ZealanTanner Рік тому
Nice to see a fellow Rubik font user. I use this font for everything
@tb1629 Рік тому
Are these videos missing the title card that lets you go to the next video?
@user-zn3gt4ho1k Рік тому
can you also add menu button please it would really help me a lot if you teach that!!!!
@Atomos_tech Рік тому
This is really hard
@DeepakKumar-uv9il Рік тому
😍
@cyberohn 10 місяців тому
I wanna be as good as you 😩😩
@FalcoPerrin Рік тому
I don't even do this and im enjoying my myself
@FiReLScar Рік тому
Please do the DBrand home page I’ve tried to remake it but I fail to do it
@FilledStacks Рік тому
The consistency of your animations are pretty cool. Do you use code to generate your animations or is it edited by hand?
@mr_clean575 Рік тому
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.
@FilledStacks Рік тому
@@mr_clean575 yeah, I use motion canvas now to do my motion graphics. I love it.
@mr_clean575 Рік тому
@@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.
@FilledStacks Рік тому
@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.
@carlosenriquepineiro375 Рік тому
Where did you learned how to make viewers watch a lot of videos in a row? Because it works!
@idoblenderstuffs 8 місяців тому
Just inspect element, copy, paste.
@someman7 8 днів тому
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...
@yahx1 4 місяці тому
How do you create the actual files? Is it all using web development, or do you use UX software? If so, what UX software?
@paradoxify_ Рік тому
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.
@ktz1185 Рік тому
This commend should be pinned
@matizbrave 3 дні тому
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).
@souhailcherif4329 Рік тому
please i need help, how to make the animation stop when the mouse is out of the bloc ?
@paradoxify_ Рік тому
Use mousemove event only on that block
@altansukhaltanbayar7073 Рік тому
i want to do this in flutter but seems liek its too hard for me anyone find a way ?
@OtesOtesOtes Рік тому
Is this a header or a title page, idk
@SuperYoman100 Рік тому
Why did he use --yellow like that? As a variable? Someone?
@InTheMIDL Рік тому
:)
@ayatovevo Рік тому
why don't you use a flex box to center the text?
@paradoxify_ Рік тому
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.
@ayatovevo Рік тому
@@paradoxify_ makes sense, thanks for the answer!
@paradoxify_ Рік тому
@@ayatovevo Welcome
@user-dx3oy2uu5y Рік тому
this code is not working , i watched the video more than 4 times but the hover thing is not working
@_gherry 11 днів тому
Not supposed to be a tutorial. Codepen is in the video description
@muchis Рік тому
cool result but the css is a bit sloppy
@harshsharma9322 Рік тому
dammmmmmmmmmmmmmmm
@tejaschalke1778 Рік тому
Since we are directly changing the width, why isn't the text shrinking according to width? Can someone explain.
@cvcvka588 Рік тому
I believe its because the position of the text is set to absolute.
@tejaschalke1778 Рік тому
@@cvcvka588 I tried it and found the reason. It is because he put margin on title and hence it is staying in place.
@cvcvka588 Рік тому
@@tejaschalke1778 Oh okay thank you!
@marusdod3685 Рік тому
@@tejaschalke1778 it's also because he set the text width to 80vw, which is relative to the window
@paradoxify_ Рік тому
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.
@magolao Рік тому
would love a react/next adaption of this!
@shamscorner Рік тому
React/Next is not an entire different language. Just use it.
@J0nssi Рік тому
@@shamscorner Nextjs is SSR so you cant use document and window without tweaking the code a little
@magolao Рік тому
@@shamscorner ok thanks! I will just use it
@J0nssi Рік тому
@@magolao but it was quite easy to implement on nextjs
@magolao Рік тому
@@J0nssi yes I know, that's why I was requesting it
@n_mckean Рік тому
Semantically, headings should have content following them. Your two h2, should actually be one H2. Potentially split with a span.
@suspection1333 Рік тому
why calculate the width % when u can just use e.clientX as px? left.style.width = `${e.clientX}px`
@Basiiidii Рік тому
i was stuck and you are the reason my code works now😄
@dom8429 Рік тому
:)
@PCXyHOHSmF Рік тому
:)
@derciojds Рік тому
:)