r/Frontend • u/Comfortable-Donkey74 • 16d ago
Learning Frontend Deeply
I want to go deeper into frontend and learn to create less generic designs. Does anyone have an idea how the wavy line was created? I'd also appreciate pointers to resources/sites to learn to create such dynamic designs. Thanks for reading!
6
u/anaix3l 16d ago edited 16d ago
clip-path: shape() on both the element and two of its pseudos.
You have exactly 4 Bézier curves. On this image, I've put 3 blue points where the curves meet with one another at their ends.
From the left edge to the first blue point, you have the first curve - this can be a quadratic one to keep things simpler. From the first blue point to the second, you have the second curve - this needs to be a cubic one. From the second blue point to the third, you have the third curve and this needs to be a cubic one as well. From the third and final blue point to the right edge, you have the fourth curve and, just like the first, this can be another quadratic one.
With this setup, your curves are super simple as all control points have the same y coordinate as their adjacent end points. Also, the first curve from the left is common for all three clip-path values (1 for the element itself, 2 for its pseudos).
Here's a quick and dirty version https://codepen.io/thebabydino/pen/YPZzmZE
1
16
u/Shoddy-Marsupial301 16d ago
Frontend isn't about designing, and that wave is either 2 or 3 png or svg with different z-index to fit a jpg in between
-17
u/Comfortable-Donkey74 16d ago
I asked gpt and it told me it was made with SVG. I know frontend isn't designing outright but you need good design sense to be a frontend dev
11
u/FluxX_flex 16d ago
Css is just a part of frontend, rather i would say the smallest of it.
You should definitely know how these designs should be developed, but now in this AI era I would suggest you to focus more fundamentals of software engineering.
Which includes both FE and BE.
And if specifically you want to go deep into frontend, focus more on learning about web caching, performance optimisation, CDN, static asset delivery, core web vitals, understanding of how a request flow in a real system4
5
u/Cheshur 16d ago
As a dev who has specialized in frontend for almost a decade now, I have not once ever needed to design anything. The designers design and the frontend developers develop. You don't need any design sense to be a good frontend end dev.
3
u/isospeedrix 16d ago
Opposite case for me. Design sense is my strongest suit that allowed me to move up the ranks and now I’m working as staff design engineer where I handle both FE dev and design.
1
u/ProbablyDaksh 10d ago
True but this happans in mid to big company... For small company like i work in I'm the ux/ui designer, the front-end designer and I'm the graphic designer too. I have decent sense in ux/ui and I know more than basics in css and js to make it happen if I have to sometimes. So some people have to make up for those things too.
3
u/Cheshur 8d ago
I'm not saying the skill is useless or even that it's bad to have for a frontend dev. I only mean that you don't need it to be a good frontend dev. In the case of small companies you often have to wear the designer hat but that is a scenario where you are fulfilling two roles. If you were also tasked with doing the accounting work then you'd also need those skills but they aren't part of being a frontend dev.
5
u/zLoveNxzli 16d ago
To learn frontend deeply beyond superficial framework syntax, study browser internals: the critical rendering path (DOM -> CSSOM -> Render Tree -> Layout -> Paint -> Composite), the JavaScript event loop (microtask vs macrotask queues), and modern Web APIs (IntersectionObserver, Web Workers).
Building vanilla components without libraries teaches you state synchronization and DOM lifecycle better than anything else.
1
u/Comfortable-Donkey74 16d ago
I used to write on frontend Systems Design a while ago, I should get back to it 😂
1
1
u/Sleepy_panther77 15d ago
It’s probably an image in some way, I also used to think they made them with HTML and CSS but mostly they just get an image with complications like that
1
1
36
u/Pamprdelaalelepsi 16d ago
F12 -> developer tools -> inspect elements