Dev Nerd
Photo
#Day63 & #Day64 of #100DaysChallenge
Hey guys👋
ohh yeah i was offline for a while due to illness but I’m back now to continue my 100 Days of Code challenge
I've just made 2 nice landing pages and I just used Tailwind CSS because I got bored of writing vanilla CSS cuz tailwind just makes everything faster and more fun😘,
and just added smooth animations when users scroll up and down, and it's mobile responsive
yeah it was a fun and educational experience, and I’m looking forward to creating more awesome projects in the upcoming days. Thank y'all
Let's keep pushing forward ⚡️
Live Links:
Day 63 Live Link
Day 64 Live Link
Repo Links:
Day 63 Repo Link
Day 64 Repo Link
#100daysofcode #coding #projects@DevNerd0
Hey guys👋
ohh yeah i was offline for a while due to illness but I’m back now to continue my 100 Days of Code challenge
I've just made 2 nice landing pages and I just used Tailwind CSS because I got bored of writing vanilla CSS cuz tailwind just makes everything faster and more fun😘,
and just added smooth animations when users scroll up and down, and it's mobile responsive
yeah it was a fun and educational experience, and I’m looking forward to creating more awesome projects in the upcoming days. Thank y'all
Let's keep pushing forward ⚡️
Live Links:
Day 63 Live Link
Day 64 Live Link
Repo Links:
Day 63 Repo Link
Day 64 Repo Link
#100daysofcode #coding #projects@DevNerd0
GitHub
GitHub - roobiwebdev/Day-63-Velocity-Cars-Schedule
Contribute to roobiwebdev/Day-63-Velocity-Cars-Schedule development by creating an account on GitHub.
👏4🔥1
Dev Nerd
#Day63 & #Day64 of #100DaysChallenge Hey guys👋 ohh yeah i was offline for a while due to illness but I’m back now to continue my 100 Days of Code challenge I've just made 2 nice landing pages and I just used Tailwind CSS because I got bored of writing vanilla…
I've noticed some issues with those projects on mobile devices like the content and animations aren't displaying correctly when scrolling down, I'm using the ScrollReveal library for animations and it's causing problems on mobile the content doesn't show up properly when scrolling down, but starts appearing when scrolling up and just commented out the animation code part
Now, I plan to sleep and get refreshed because I didn't sleep last night Maybe that's the issue 😁 I'll fix it after a little nap
If anyone knows a solution or has experience with ScrollReveal on mobile devices, help me out any tips or advice would be greatly appreciated
Now, I plan to sleep and get refreshed because I didn't sleep last night Maybe that's the issue 😁 I'll fix it after a little nap
If anyone knows a solution or has experience with ScrollReveal on mobile devices, help me out any tips or advice would be greatly appreciated
🔥4👨💻2
Dev Nerd
I've noticed some issues with those projects on mobile devices like the content and animations aren't displaying correctly when scrolling down, I'm using the ScrollReveal library for animations and it's causing problems on mobile the content doesn't show up…
Now I’ve decided to disable animations for mobile screens after checking other websites that use ScrollReveal, I found that the content gets really messed up on mobile. It seems the problem is with the library itself. For now, I’ve disabled animations for mobile users but the animation works perfectly on desktop.
For future projects I'll use GSAP to avoid these issues.
Projects Live Links:
Day 63 Live Link
Day 64 Live Link
For future projects I'll use GSAP to avoid these issues.
Projects Live Links:
Day 63 Live Link
Day 64 Live Link
🔥6
🔥#Day65 of #100DaysChallenge
Hey guys
for day 65 I've made a cool landing page with smooth animations and a mobile-friendly design
☑️ I added a nice animation when users scroll up and down
☑️ a counting number animation in the "Our Status" section
☑️ a cool hover effect with shadows on the cards plus users can also swipe left and right by grabbing the cards or by clicking the pagination bullets.
It's been an exciting project and the final result looks fantastic check it out and let me know what you think⚡️👍
Live Link
Repo Link
Let's keep pushing forward ⚡️
#projects@DevNerd0
Hey guys
for day 65 I've made a cool landing page with smooth animations and a mobile-friendly design
☑️ I added a nice animation when users scroll up and down
☑️ a counting number animation in the "Our Status" section
☑️ a cool hover effect with shadows on the cards plus users can also swipe left and right by grabbing the cards or by clicking the pagination bullets.
It's been an exciting project and the final result looks fantastic check it out and let me know what you think⚡️👍
Live Link
Repo Link
Let's keep pushing forward ⚡️
#projects@DevNerd0
🔥6
Does anyone know a good free background remover that doesn't decrease image quality I've tried some websites but they either reduce the image quality or require a subnoscription for HD images
Dev Nerd
Does anyone know a good free background remover that doesn't decrease image quality I've tried some websites but they either reduce the image quality or require a subnoscription for HD images
Still can't find a nice website that does what I'm looking for, It's really boring doing the designer work😭
Anyways I'm gonna use a low-quality image so today’s project might look a bit low quality
Anyways I'm gonna use a low-quality image so today’s project might look a bit low quality
👍1
#Day66 & #Day67 of #100DaysChallenge
Who is still coding through the night at 3 AM in Ethiopia? let's see you in the comment section🔥🙋♂️
Sorry for being off you know how it goes with the electricity in Ethiopia I'm back and with the cool projects
I've made some amazing landing pages with nice features and beautiful designs.
Day 66:
✅ user-friendly interface with a smooth user experience
✅ Cool animations when users scroll up and down.
✅ Beautifully designed FAQ section with answers to common questions
✅ Swipe left and right to read customer testimonials by grabbing the mouse.
✅ Smooth interactions with a nice easing sense.
Day 67:
✅ More refined animations.
✅ Cool swiping effects for a more interactive experience.
✅ FAQ section, and customer testimonial swiping features from Day 66.
the final results look really nice. Check them out and guys let me know what you think ⚡️
Live Links
Day 66
Day 67
Repo Links
Day 66
Day 67
#100DaysChallenge #coding #projects@DevNerd0
Who is still coding through the night at 3 AM in Ethiopia? let's see you in the comment section🔥🙋♂️
Sorry for being off you know how it goes with the electricity in Ethiopia I'm back and with the cool projects
I've made some amazing landing pages with nice features and beautiful designs.
Day 66:
✅ user-friendly interface with a smooth user experience
✅ Cool animations when users scroll up and down.
✅ Beautifully designed FAQ section with answers to common questions
✅ Swipe left and right to read customer testimonials by grabbing the mouse.
✅ Smooth interactions with a nice easing sense.
Day 67:
✅ More refined animations.
✅ Cool swiping effects for a more interactive experience.
✅ FAQ section, and customer testimonial swiping features from Day 66.
the final results look really nice. Check them out and guys let me know what you think ⚡️
Live Links
Day 66
Day 67
Repo Links
Day 66
Day 67
#100DaysChallenge #coding #projects@DevNerd0
👏5🔥2
Dev Nerd
#Day66 & #Day67 of #100DaysChallenge Who is still coding through the night at 3 AM in Ethiopia? let's see you in the comment section🔥🙋♂️ Sorry for being off you know how it goes with the electricity in Ethiopia I'm back and with the cool projects I've…
Ohh guys I've noticed the images and icons on those website don't appear fast so we need to implement a simple loading page let's do it
⚡3
Dev Nerd
Ohh guys I've noticed the images and icons on those website don't appear fast so we need to implement a simple loading page let's do it
Yeah, I've just finished the loading page for those projects
Check them out again⚡️
Live Links
Day 66
Day 67
Repo Links
Day 66
Day 67
#projects@DevNerd0
Check them out again⚡️
Live Links
Day 66
Day 67
Repo Links
Day 66
Day 67
#projects@DevNerd0
🔥4
Dev Nerd
Yeah, I've just finished the loading page for those projects Check them out again⚡️ Live Links Day 66 Day 67 Repo Links Day 66 Day 67 #projects@DevNerd0
Here are the steps I followed to create the loading effect:
Body Class (overflow-hidden): This initially prevents scrolling while the loading animation is visible.
loading-wrapper it's like a container for the loader that takes up the entire viewport and centers the loader
loader div: it will show the loading animation
Loader class: Defines the size and animation for the loader element using radial gradients and keyframes.
Keyframes (l3): Controls the animation sequence by creating a spinning effect.
aspect-ratio: 2: ensures the loader maintains a consistent shape with a width that is twice its height.
background var: Positions the gradient circles evenly across the loader's width for a balanced view
background-size: Sizes each gradient circle to take up one-third of the loader's width and half its height
I used the window.onload: the event is triggered when the whole page, including all dependent resources like images, is loaded.
overflow-hidden: removes the overflow-hidden class from the body, which re-enables scrolling after the page is fully loaded
let's keep pushing forward ⚡️
#codes #notes@DevNerd0
<body class="overflow-hidden">
<div class="z-10 h-screen w-full flex justify-center items-center bg-[#F7E8DF] fixed top-0 loading-wrapper">
<div class="loader"></div>
</div>
<!-- main content here -->
</body>
Body Class (overflow-hidden): This initially prevents scrolling while the loading animation is visible.
loading-wrapper it's like a container for the loader that takes up the entire viewport and centers the loader
loader div: it will show the loading animation
@layer utilities {
.loader {
width: 60px;
aspect-ratio: 2;
--_g: no-repeat radial-gradient(circle closest-side, #e55e11 90%, #ffffff00);
background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
background-size: calc(100% / 3) 50%;
animation: l3 1s infinite linear;
}
@keyframes l3 {
20% {
background-position: 0% 0%, 50% 50%, 100% 50%;
}
40% {
background-position: 0% 100%, 50% 0%, 100% 50%;
}
60% {
background-position: 0% 50%, 50% 100%, 100% 0%;
}
80% {
background-position: 0% 50%, 50% 50%, 100% 100%;
}
}
}Loader class: Defines the size and animation for the loader element using radial gradients and keyframes.
Keyframes (l3): Controls the animation sequence by creating a spinning effect.
aspect-ratio: 2: ensures the loader maintains a consistent shape with a width that is twice its height.
background var: Positions the gradient circles evenly across the loader's width for a balanced view
background-size: Sizes each gradient circle to take up one-third of the loader's width and half its height
window.onload = () => {
document.querySelector(".loading-wrapper").classList.add("hidden");
document.body.classList.remove("overflow-hidden");
};I used the window.onload: the event is triggered when the whole page, including all dependent resources like images, is loaded.
overflow-hidden: removes the overflow-hidden class from the body, which re-enables scrolling after the page is fully loaded
let's keep pushing forward ⚡️
#codes #notes@DevNerd0
🔥5👍1
Forwarded from Chapi Dev Talks
This media is not supported in your browser
VIEW IN TELEGRAM
Am not frontend Dev but definitely would love to try this code godamn 🔥
Chapi Dev Talks
Am not frontend Dev but definitely would love to try this code godamn 🔥
Should i do this kind of animation before him
🔥6