545
订阅者
无数据24 小时
-17 天
-1130 天
帖子存档
545
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
545
+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
545
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
545
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 subscription for HD images
545
🔥#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
545
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
545
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
545
#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
545
Morning 🌞
Here is what I learned from yesterday's project:
Stroke: In SVG it's the outline of a text, It's like the border of the object.
Stroke Width: it defines the thickness of the stroke
Stroke Dasharray: allows us to create dashed lines by defining a pattern of dashes and gaps.
Stroke Dashoffset: used to adjust the starting position of the dash array on the path.
For example:
<svg width="100" height="100">
<text x="10" y="50" font-size="30" fill="none" stroke="black"
stroke-width="2" stroke-dasharray="5,5" stroke-dashoffset="20">
Loading...
</text>
</svg>
<style>
@keyframes dash {
0% {
stroke-dashoffset: 20;
}
100% {
stroke-dashoffset: 0;
}
}
text {
animation: dash 2s infinite linear;
}
</style>