Premium Only Content
Simple SASS iPhone Design with JS navigation
Welcome to our latest YouTube tutorial on creating a stunning iPhone design using SASS. In this video, we'll guide you through the process of building a sleek iPhone interface with a real-time clock and a unique feature that allows you to change the home screen background image through a single menu or "App."
Throughout the tutorial, we'll demonstrate the power of using data attributes, which play a major role in this project. By leveraging data attributes, we can seamlessly incorporate dynamic functionality into our iPhone design.
Unlock your creativity and take your web design skills to the next level with this captivating project.
Subscribe to our channel and hit the notification bell to stay updated with our upcoming tutorials on web development, design, and much more. Get ready to dive into the world of SASS and create a remarkable iPhone design with a touch of interactivity!
Codepen 💻: https://codepen.io/Oskar_Olortegui/pen/dyQXbgN
Watch the most recent videos
https://www.youtube.com/@AlephNeoDev/videos 👀
I am NeoDev 👽, Let's grow together!
🕛🕛TimeStamps🕛🕛
✅ 0:58 initial HTML structure
✅ 3:40 initial SCSS
✅ 4:23 partial _configSetup.scss
✅ 6:17 main style.scss
✅ 6:50 partial _iphone.scss
✅ 7:34 partial _top.scss
✅ 8:56 partial _screen.scss
✅ 9:42 partial _home.scss
✅ 11:36 partial _homeBtn.scss
✅ 15:45 Layers HTML
✅ 18:27 partial _layer.scss
✅ 22:27 partial _layer_1.scss
✅ 23:23 partial _layer_23 -- Layer 3
✅ 26:34 Get imgs/gifs Via JS.
✅ 29:03 styling our layer 2
✅ 31:20 Main Logic Explanation⭐⭐⭐
✅ 34:10 Reason of Using data-attributes ⭐⭐⭐
✅ 36:49 toggleClass Function
✅ 42:14 layer 3 - z-index 3
✅ 42:45 How to update layer3 bg-image
✅ 45:47 Update the popUp
✅ 46:39 Update the HomeScreen bg-image ⭐⭐⭐
✅ 49:23 How to remove all active Classes? ⭐⭐
✅ 53:32 double click event for the iPhone button
✅ 54:23 Clock Functionality.
✅ 59:33 Final touch partial _screen.scss and other details
Who am I? 🔍
I am just a new developer trying to learn and grow and I would like you to join me in this journey
GitHub 😸 https://github.com/AlephOlortegui?tab=repositories
Codepen 💻 https://codepen.io/Oskar_Olortegui
#SASSiPhoneDesign #RealTimeClock #DynamicBackgrounds #DataAttributes
-
LIVE
Barry Cunningham
1 hour agoMUST SEE: PRESIDENT TRUMP NATO PRESSER! AND NEW YORK CITY MAYORAL DEBATE!
1,645 watching -
LIVE
Glenn Greenwald
4 hours agoTucker Carlson Speaks at Turning Point, Prompting Cheers and Controversy; More Evidence of Israeli Atrocities Amid Fragile Ceasefire; Tommy Robinson Submits to Re-Education in Israel | SYSTEM UPDATE #536
5,672 watching -
12:12
ARFCOM News
4 hours ago $0.29 earnedThe REAL Reason Glock Bent The Knee + Searched Just For OWNING A Gun?!? + Lemon's Cringe 2A Mistake
2104 -
LIVE
LFA TV
21 hours agoLIVE & BREAKING NEWS! | WEDNESDAY 10/22/25
653 watching -
1:03:22
BonginoReport
3 hours agoAmerican Political Violence Rages On - Nightly Scroll w/ Hayley Caronia (Ep.161)
79.8K34 -
LIVE
The Jimmy Dore Show
2 hours agoTrump’s MIDDLE FINGER to US Beef Ranchers! Dem Senate Candidate COVERS UP N@zi Tattoo! w/Twila Brase
8,129 watching -
6:13
Sean Unpaved
1 hour agoKalshi's Pick of the Day: Who Could Be Florida's Next HC?
1.06K2 -
Dr Disrespect
8 hours ago🔴LIVE - DR DISRESPECT - BATTLEFIELD 6 KILL CHALLENGE - VS VISS
62.2K5 -
16:16
Robbi On The Record
3 days ago $8.70 earnedThe Dark History of Halloween | What You Should Know
29.5K20 -
LIVE
Side Scrollers Podcast
3 days ago🔴FIRST EVER RUMBLE SUB-A-THON🔴DAY 3🔴PLAYING MIKE TYSON'S PUNCH OUT TILL I WIN!
1,304 watching