How to code a Dribbble Design from Image to HTML/CSS

Veröffentlicht am: 22 April 2021
auf dem Kanal: Rusty Zone
3,436
89

Hey! In this video we try to create an interface design based on an image found on Dribbble using plain vanilla CSS & HTML.


RELATED LINKS:
Dribble Inspiration: https://dribbble.com/shots/14340998-T...
Designer: https://dribbble.com/mihaipetrea
CSS Gradient Generator: https://cssgradient.io/
CodePen Part 1: https://codepen.io/rustyzone/pen/oNByYWN
CodePen Part 2: https://codepen.io/rustyzone/pen/dyNqoZE


TIMESTAMPS:
0:00 Intro
0:20 Inspiration
1:20 Adding the screens
4:00 Starting Screen One
20:20 Starting Screen Two
36:00 Summary
37:21 Part Two
37:57 Colour Picker
38:13 Finished UI
39:01 Cat
39:30 Screen Two Explained
40:15 Scroll Box
44:37 Absolute & Relative
45:00 Final Thoughts


MY ONLINE COURSE:
⛏ My Chrome Extension Course: https://skl.sh/2Xcr9Va
** Join my community on Skillshare by starting any of my classes or following my profile for the latest classes & updates, this is also the best place to get more in-depth content & development support **
** Get a free trial of Skillshare Premium Membership - https://www.skillshare.com/r/user/rus... **


FIND ME ONLINE:
📨 Sign up to my email newsletter - https://rustyzone.substack.com
🌍 My website / blog - https://russellr.co.uk
🐦 Twitter -   / russellbarnard  
📺 Subscribe -    / @rustyzone  


MY MINIMAL SETUP:
💡 Lights https://amzn.to/2X2rkl6
📷 Tripod https://amzn.to/350b3S1
🕹 USB-C Adaptor https://amzn.to/3rEDVsZ
👁 iPhone Lens https://amzn.to/3qHzgFI


Auf dieser Seite können Sie das Online-Video How to code a Dribbble Design from Image to HTML/CSS mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Rusty Zone 22 April 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 3,436 Mal angesehen und es wurde von 89 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!