👉 Become A VS Code SuperHero Today: https://vsCodeHero.com

In this video, we are going to talk about neumorphic design.

Neumorphism is a recent UI design trend. It’s also called “Soft UI”.
It’s designs appear to extrude from the background.

Neumorphism is derived from “New Skeuomorphism”. Skeuomorphism involves using user interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them.

Now, I want to be clear that just because this is a “trend” doesn’t mean that you should use this design throughout all of your projects. There are a lot of issues with this design, such as contrast ratio. It can be really hard to see certain components with neumorphic design. So as with any trend or design concept, a little goes a long way!

We’re going to build a neumorphic styled calculator. The first part of the video will be the building and styling (HTML & CSS). Then we’ll implement some JavaScript and put into practice a lot of the things that we learned throughout #JavaScriptJanuary.

📚 References: 📚
Codepen: https://codepen.io/codeSTACKr/pen/BaygGev
Learn Sass In 30 Minutes: https://youtu.be/BDOzg4lXcSg
Learn FLEXBOX In 20 Minutes: https://youtu.be/qqDH0T6K5gY
Learn Grid in 20 Minutes: https://youtu.be/0-DY8J_skZ0
JavaScriptJanuary Playlist: https://www.youtube.com/playlist?list=PLkwxH9e_vrALlH7D0XLDn2td-uoHqHFxq

⏱️ Timestamps: ⏱️
00:00 – Intro
02:05 – HTML
06:41 – CSS/SCSS
18:34 – JavaScript
_____________________________________

📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________

🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course – https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions

🤖 I now use AI-powered code completions thanks to Kite. You should too so grab it FREE: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
_____________________________________

🚀 Get 1 Year of FREE Hosting (Sponsor Link)
https://www.atlantic.net/Codestackr/
🚨 Use code: Stackr to get $25 in FREE Credit!!
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

Watch Next:
Web Development – Beginners Roadmap (2020) – https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #neumorphism

source