The Website Landing Page That Will Channel Your Inner Peace

  Рет қаралды 221,287

Hyperplexed

Hyperplexed

Жыл бұрын

Watch as I show you how to recreate the super Zen landing page from karinasirqueira.com.
Support the channel: ko-fi.com/hyperplexed (accepts PayPal, card, etc).
Tools used: HTML, CSS, JavaScript
CodePen: cdpn.io/poVpKdQ
Music Credits:
Day Dreaming - StreamBeats - Lofi - Harris Heller

Пікірлер: 167
@Karinasirqueira
@Karinasirqueira Жыл бұрын
Thanks for featuring my website. I'm glad you like it.
@banjaxedw.7880
@banjaxedw.7880 Жыл бұрын
Where did you come up with the idea? Was your process similar to his?
@Karinasirqueira
@Karinasirqueira Жыл бұрын
​@@banjaxedw.7880 I love working on my portfolio as a way to explore my creativity and have fun. I'm always taking things from print and bringing them to life. I thought my portfolio could almost be my art gallery; each different shape is another art. So every time you go back, you can get inspired in a different way.
@pedroooooo
@pedroooooo Жыл бұрын
Brabíssimo, Karina.
@Boganz97
@Boganz97 Жыл бұрын
@@Karinasirqueira Amazing work! 👏🏼
@malcolminthemetal4992
@malcolminthemetal4992 Жыл бұрын
Thank you for your inspiring work. I am also working on a Portfolio, but I don’t have as many projects. I have to work more on unique projects so I can have more sections so I can work more to make the sections more unique 😂 This will be a potentially great way to display my different web projects long term when I have more than like 2.
@howling-wolf
@howling-wolf Жыл бұрын
I like the video structure. Showing, what you want to create and then explaining what you know followed by the coding part. The pace at which you are moving is also pretty nice. Also it is cool how simple the stuff you do is. I often get overwhelmed when I want to create something and look up solutions that contain unnecessary bloat (general styles, extra fancy shit etc). What I also like is, that you show concepts that i can figure out my self how to implement them. This mostly applies to your shorts where you show how you "fixed" websites. I learn by seeing how something is done properly and then trying to recreate it.
@_stan
@_stan Жыл бұрын
second this
@Tenchi707
@Tenchi707 Жыл бұрын
Videos are too small, I wish we actually see him building it
@taofeeqomotolani2311
@taofeeqomotolani2311 Жыл бұрын
This is fire. I'm mind blown
@kieriayibadoubara2527
@kieriayibadoubara2527 Жыл бұрын
Feels like I struck gold discovering this channel. Love your work♥️
@Italiafani
@Italiafani Жыл бұрын
One thing I noticed Karina is also doing, is to ensure the morph doesn't happen when hovering the wrapper. This can be done by adding just one line at the top of the setInterval callback: ``` if (wrapper.matches(':hover')) return; ```
@hellothere8547
@hellothere8547 Жыл бұрын
This is amazing! Clear delivery and explanation. There aren’t many vanilla js videos such as these! Recreating particular website sections is very insightful! Thank you!
@kyenee
@kyenee Жыл бұрын
Ur gonna be the greatest web dev KZfaqr in history
@khaldounal-nuaimi3594
@khaldounal-nuaimi3594 Жыл бұрын
No youtube video ever made my jaw drop like this one!! Thank you so much for doing this it is really astonishing how creative some people are.
@khaldounal-nuaimi3594
@khaldounal-nuaimi3594 Жыл бұрын
@@chris94kennedy you poor soul, I hope you get to experience a better life than the one you currently live :)
@zyrenth
@zyrenth Жыл бұрын
I just don't know why your channel is so underrated, your content is just amazing. I seriously can't stop watching your videos, keep up the good work. 👍
@terrellturner162
@terrellturner162 Жыл бұрын
Watching your channel grow has been wild. Keep up the hard work!
@Simaris
@Simaris Жыл бұрын
Dude, your channel is for sure about to blow up. Amazing content.
@johndevnoza4223
@johndevnoza4223 10 ай бұрын
i just discovered ur channel and the way u simply explain with talking/discussing plus showing code and live time motion graphics animation is just insane! thanks so much!
@randominternetguy7426
@randominternetguy7426 Жыл бұрын
I started a computer science class this term and your channel has helped me get pretty excited about web design.
@knwkn1
@knwkn1 Жыл бұрын
The way you explain your thought process is second to none.
@toxic8196
@toxic8196 Жыл бұрын
Never pressed the subscribe button that quick before, truly beautiful content, perfect combination of entertainment and education. After stressing out to the point of frequent burnouts, your content is something that's willing to bring me back to the development side. Thank you.
@hristiantachev3425
@hristiantachev3425 Жыл бұрын
I think this video's explanation was the best one so far! Good job
@medaminetourham2152
@medaminetourham2152 Жыл бұрын
i personally found out about your channel not long ago i've been interested in front end development and finding out about your channel made it so much more interesting, thank you and keep it up
@yousafsabir7
@yousafsabir7 Жыл бұрын
We need tutorials like this. To the point with excellent video editing and animations Thanks for creating such a video
@ericdimarzio5756
@ericdimarzio5756 7 ай бұрын
Videos like this make really motivates me to be curious and creative. Thank you!
@raqueloide
@raqueloide Жыл бұрын
I'm loving your videos!!! Please do more improves to sites/apps of existing ones. I'm using one of your videos to an assignment for my school and its going really good! You gave me inspiration to do better :D
@Sipzostudios
@Sipzostudios Жыл бұрын
I appreciate this video! It makes understanding coding juts a little earlier. Great job! I am glad I found your channel.
@joshuamorales909
@joshuamorales909 Жыл бұрын
Started my coding journey a couple days ago and would like to eventually do stuff like this. Thanks to your videos, I feel like I can actually understand some of these advanced concepts. In reality I can't yet, I just started, but you make it so easy to follow along.
@santiagogonzalez7291
@santiagogonzalez7291 Жыл бұрын
That's great man! Keep coding and i hope that you learn a lot!
@PaulMcCannWebBuilder
@PaulMcCannWebBuilder Жыл бұрын
You are so lucky that you can start your journey with these videos and their approach. Learning how to get things done is the way you'll learn, but so many other tutorials make you understand all the syntax and code before anything happens.
@Tenchi707
@Tenchi707 Жыл бұрын
This video didn't discourage you? After watching this I quit, I can't ever this level fucking mastery wtf
@AliKashif-mc4vd
@AliKashif-mc4vd 11 ай бұрын
​@@Tenchi707you can either find yourself captivated by the ultimate goal or feel discouraged by the challenges of the process.
@Flame1500
@Flame1500 Жыл бұрын
This is awesome, Hope you grow to be huge man!
@Alain_
@Alain_ Жыл бұрын
Really good explanation. Your work is incredible
@Zellie1994
@Zellie1994 Жыл бұрын
You are so good at explaining your problem solving process
@ahmedthebest
@ahmedthebest Жыл бұрын
I just subscribed to your channel I just needed around 10 second from your clear microphone and your wonderful animation to hit that subscribe button without evolution
@AmazuRazu
@AmazuRazu Жыл бұрын
This is INSANE, keep up the good work.
@dangelowatson1271
@dangelowatson1271 Жыл бұрын
Your account is crazy good man. Great job at explaining some tough concepts!
@davidvideauortega2617
@davidvideauortega2617 Жыл бұрын
I'm loving your channel. Keep up with the amazing work! I just subscribed.
@vogelpapafinn8156
@vogelpapafinn8156 Жыл бұрын
Gorgeous! Im not even familiar with JS and CSS but QT (C++ Desktop GUI) but it still helps my in a way.
@wiredmind
@wiredmind Жыл бұрын
Your content reawakened the dormant CS enjoyer in my brain, thank you
@satya8320
@satya8320 Жыл бұрын
really awesome way and innovative way of explaing the thought process behind practice of a project..... really loved it
@hawsh3066
@hawsh3066 Жыл бұрын
I am going to save that and reimplement it later for practice. Love your videos by the way, very helpful, I was always looking for channels to help me understand complex CSS stuff easier.
@lilschmea
@lilschmea Жыл бұрын
God, I love your videos so much.
@yeah4035
@yeah4035 Жыл бұрын
wow your channel is growing so fast, keep this momentum up
@Alex-lu4po
@Alex-lu4po Жыл бұрын
I really like your content. It is so concise! 🎉
@UmehTobenna
@UmehTobenna Жыл бұрын
This video has inspired me to step up my CSS game, great content 👌 💪💪
@rudranshagg2580
@rudranshagg2580 Жыл бұрын
Man you are amazingly amazing 🤯🤯🤯🤯🤯
@codeoptimal7197
@codeoptimal7197 Жыл бұрын
Very well done.
@GabrielMedina-jb9lk
@GabrielMedina-jb9lk Жыл бұрын
really cool project, amazing video man!
@davepascual39
@davepascual39 Жыл бұрын
Hello, I'm new to your channel and I'm starting to learn mobile app development ( using React Native since I'm familiar in ReactJs; easy route). I'm more of backend guy, but with your videos on how redesigning some most known apps, it really gave me an idea on how I should design the application. I hope you post more content like this. It helps a lot and motivates me to design an app.
@MS777xyz
@MS777xyz Жыл бұрын
Just saw your channel, it's just so entertaining
@ncrohawk
@ncrohawk Жыл бұрын
investing early cuz this channel has a lot of potential
@BertPdeboy
@BertPdeboy Жыл бұрын
Amazing video!
@Pixelcraftian
@Pixelcraftian Жыл бұрын
I like the interactivity of the website, does only a few things but does those few things right. Cool video :]
@abubalo
@abubalo Жыл бұрын
I am sad for not finding you earlier. I am also glad that I found you eventually.
@sbgamer2291
@sbgamer2291 Жыл бұрын
Wow men your videos are just awesome Subscribe after watching just 2 of your videos gonna learn a lot from you keep up the good work.
@Osama-bin-Laden
@Osama-bin-Laden Жыл бұрын
Wow you are growing so fast
@ales--channel
@ales--channel Жыл бұрын
Wow thats AWESOME
@yadaliu5180
@yadaliu5180 Жыл бұрын
Great video!!
@horuka_0
@horuka_0 Жыл бұрын
This is my new favorite channel on KZfaq.. please take my money ❤️
@Scott_C
@Scott_C Жыл бұрын
More of this please!
@raymondmichael4987
@raymondmichael4987 Жыл бұрын
I'd to subscribe to this channel, your work through is impressive. I need as much inspirational portfolio ideas as I can get😊❤
@lewisone
@lewisone Жыл бұрын
Super fun.
@Magnogen
@Magnogen Жыл бұрын
This is absolutely fantastic, have you ever used a canvas to spice up your front end? What have you done with it?
@haze4828
@haze4828 Жыл бұрын
aaaaaand subbed
@siddarthkumar1836
@siddarthkumar1836 Жыл бұрын
you're a fucking genius! I love your videos!!
@TomWalshHud
@TomWalshHud Жыл бұрын
The intervals should pause when you hover over it!
@SrFrancia0
@SrFrancia0 Жыл бұрын
Great video, I'm definitely a backend kinda dev tho
@copaceticobserver
@copaceticobserver Жыл бұрын
Woah... They grow up so fast
@whoami2103
@whoami2103 Жыл бұрын
Me don't understand anything but watching it coz it's looking good 👁️👄👁️
@justincharo
@justincharo Жыл бұрын
Love your videos! ✅Straight to the point ✅Easy to understand ✅Makes me feel like a CSS GOD when implementing lol
@fraser21
@fraser21 Жыл бұрын
btw for a random value distinct from prev, you really don't need a while-loop. Something like (rand(0, len - 2) + len - prev) % len should work.
@berad6034
@berad6034 Жыл бұрын
Your content is fucking incredible.
@gamerboi3687
@gamerboi3687 Жыл бұрын
This guy Rounds
@jobsunday833
@jobsunday833 Жыл бұрын
Great video and very useful. Hope you could monetize it!
@chesterxp508
@chesterxp508 Жыл бұрын
GoodJob!
@yuukimakoto
@yuukimakoto Жыл бұрын
Great video! Out of curiosity though, wouldnt it be easier just to set 6 states with numbers 0-5? Just combine the arrangement/roundness pair into 6 styles, so the js can just pick a random number from 0-5 as well, simplifying the code by a lot!
@ibrahimawad2016
@ibrahimawad2016 Жыл бұрын
I was trying to follow along with the video to learn, however the transition portion for the wrappers ended up breaking for me on VS Code. I wasn't able to use transition for the height, width as well as border-radius? Any clue as to why this happened? Wondering if I'm missing a specific CSS kit on my computer. Love the videos overall, getting me interested in learning about CSS & more front end work.
@AnweshAdhikari
@AnweshAdhikari Жыл бұрын
@DBaconBoy
@DBaconBoy Жыл бұрын
Searched the about section on your KZfaq to see if I could find a website with your rates for design, do you take on commissions and is there a place I could see your rates?
@80sixd
@80sixd Жыл бұрын
Nice animation and cool concept. Possibly a terrible user experience since its not immediately clear that there is more to it.
@DominicVictoria
@DominicVictoria Жыл бұрын
What do you think about will-change? Should one use it in this case?
@avtar2565
@avtar2565 Жыл бұрын
Bro i just started javascript and i will complete it in this week,i also did a very little css project and after js I'll learn css animation,,, make video on how to think to create web from scratch from html to js
@martinmickels1478
@martinmickels1478 Жыл бұрын
Lots of cool websites and recreations! Unfortunately (for me) I find these types of websites confusing and overstimulating
@user-js9cx3xl9z
@user-js9cx3xl9z 11 ай бұрын
i need clarity, which topics i need to cover to do like these projects add in my list. can u make a video which topic want to complete
@gulledyusefhassaan5313
@gulledyusefhassaan5313 Жыл бұрын
love u
@user-bp6eh7en1v
@user-bp6eh7en1v Жыл бұрын
I don't like the design. But it's still nice, you showed how to set this stuff up.
@jeanluca2512
@jeanluca2512 Жыл бұрын
brazil mentioned
@theaphidcollective1951
@theaphidcollective1951 Жыл бұрын
the idea is nice, however i feel like it's a bit complex for everyday use
@abdelbarimessaoud242
@abdelbarimessaoud242 Жыл бұрын
Where do you find inspiring designs and would you be willing to list good ways to learn ?
@bigmistqke
@bigmistqke Жыл бұрын
That green circle on the left bottom not being perfectly aligned in one of the modes hurts my eyes.
@creepychris420
@creepychris420 Жыл бұрын
safe agile framework is a good one if you like interesting websites it also looks like hell to implement or be a part of but the website is cool lol 😂
@Jelissei
@Jelissei Жыл бұрын
Need some help with this one. I had to do an unintuitive tweek to js to get it to work: This works: document.getElementById("wrapper").dataset.configuration = combination.configuration; This doesn't: const wrapper = document.getElementById("wrapper"); wrapper.dataset.configuration = combination.configuration; I'm working with node v16.17.1
@officialplisi9641
@officialplisi9641 Жыл бұрын
Thanks for sharing Z-d 😂
@justrobin2176
@justrobin2176 Жыл бұрын
Unbelievable
@wailesmate
@wailesmate Жыл бұрын
What is the best beginners course for website developing
@yungthug3009
@yungthug3009 Жыл бұрын
MOOOOORREEEEEEEEE (When u have time ;])
@nima8613
@nima8613 Жыл бұрын
I think a twitch mobile app review (or their website on pc/mobile honestly) would be good , it's so bad for such a big website.
@TechBuddy_
@TechBuddy_ Жыл бұрын
Please please please 🙏 use translate property to animate the position, it will be smoother, easier on the CPU and uses less battery, don't use top / left etc in animation ( unless absolutely necessary )
@bakasenpaidesu
@bakasenpaidesu Жыл бұрын
A tutorial which needs another tutorial
@untaggedbeatz
@untaggedbeatz Жыл бұрын
what website did u use for colors tho
@christianwdev
@christianwdev Жыл бұрын
im embarassed that this is the way i learned about the aspect-ratio property a day after I just created a JS script to do it for me...
@1234macro
@1234macro Жыл бұрын
Would just like to say that using the golden ratio is quite an arbitrary choice, and it might be a poor choice considering a key feature is a low amount of approximations
@ensox
@ensox Жыл бұрын
Ensō circle as background in preview.
@marufhossain1422
@marufhossain1422 Жыл бұрын
can u create a video where you show how to create a website any
@danielzuzic7054
@danielzuzic7054 Жыл бұрын
what ide do you use
@kyoshiking7769
@kyoshiking7769 Жыл бұрын
What is the name of ide he use I'm wondering how html file css automatically link?
@sinclair1082
@sinclair1082 Жыл бұрын
Immediately subscribe 🤣
@Bruce_Yes
@Bruce_Yes Жыл бұрын
Tricky
Mind-Blowing Anime.js Staggered Grid Effect
5:23
Hyperplexed
Рет қаралды 504 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 904 М.
Countries Treat the Heart of Palestine #countryballs
00:13
CountryZ
Рет қаралды 24 МЛН
Как быстро замутить ЭлектроСамокат
00:59
ЖЕЛЕЗНЫЙ КОРОЛЬ
Рет қаралды 13 МЛН
Cute Barbie Gadget 🥰 #gadgets
01:00
FLIP FLOP Hacks
Рет қаралды 46 МЛН
This Website Theme Hasn't Been Perfected Since 1996
9:43
Hyperplexed
Рет қаралды 315 М.
Learn CSS Subgrid in 14 minutes
14:19
Slaying The Dragon
Рет қаралды 55 М.
I tried the polyrhythm trend
2:47
SpringySpring04
Рет қаралды 37 М.
It's time to talk about these UI trends
9:09
Juxtopposed
Рет қаралды 463 М.
I Fired a CSS Cannon at a Famous Streamer
3:28
Hyperplexed
Рет қаралды 411 М.
ImNotGoodEnough.js
11:11
Hyperplexed
Рет қаралды 887 М.
Why Your Awwwards Website Sucks
5:18
The Website Architect
Рет қаралды 14 М.
Building The Extraordinary Using Only The Ordinary
6:37
Hyperplexed
Рет қаралды 323 М.
I Gave a Website Logo Superpowers
5:47
Hyperplexed
Рет қаралды 243 М.
Subtle, yet Beautiful Scroll Animations
5:04
Beyond Fireship
Рет қаралды 1,6 МЛН
Countries Treat the Heart of Palestine #countryballs
00:13
CountryZ
Рет қаралды 24 МЛН